/* ============================================================
   مَرصَد · Design System v3.0
   Modern Newsroom — Light + Dark — Mobile-first
   ============================================================ */

:root {
  /* Brand */
  --accent:        #ea580c;
  --accent-hover:  #c2410c;
  --accent-soft:   #fff7ed;
  --accent-ring:   rgba(234, 88, 12, 0.18);
  --accent-strong: #9a3412;

  /* Neutral scale */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Semantic */
  --success: #059669;
  --success-soft: #d1fae5;
  --warn: #d97706;
  --warn-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --info: #0284c7;
  --info-soft: #e0f2fe;

  /* Surfaces (LIGHT) */
  --bg:           #f7f8fa;
  --bg-elevated:  #ffffff;
  --bg-muted:     #f1f5f9;
  --bg-subtle:    #fafbfc;
  --bg-overlay:   rgba(15, 23, 42, 0.55);
  --bg-sidebar:   #0f172a;
  --bg-sidebar-hover: #1e293b;

  /* Borders */
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --border-subtle: #f1f5f9;

  /* Text */
  --text:           #0f172a;
  --text-secondary: #475569;
  --text-muted:     #64748b;
  --text-inverse:   #ffffff;
  --text-sidebar:   #cbd5e1;
  --text-sidebar-hover: #ffffff;

  /* Typography */
  --font: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --font-serif: 'Amiri', Georgia, serif;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   0.9375rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-full: 9999px;

  /* Shadows (LIGHT) */
  --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.04);
  --shadow-sm: 0 1px 3px rgb(15 23 42 / 0.07), 0 1px 2px -1px rgb(15 23 42 / 0.05);
  --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 12px 24px -6px rgb(15 23 42 / 0.10), 0 4px 8px -4px rgb(15 23 42 / 0.05);
  --shadow-xl: 0 24px 48px -12px rgb(15 23 42 / 0.18);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 120ms;
  --d-base: 200ms;
  --d-slow: 300ms;

  /* Layout */
  --sidebar-w: 264px;
  --topbar-h: 64px;
  --mbn-h: 60px;

  color-scheme: light;
}

[data-theme="dark"] {
  --accent:        #fb923c;
  --accent-hover:  #f97316;
  --accent-soft:   rgba(251, 146, 60, 0.10);
  --accent-ring:   rgba(251, 146, 60, 0.25);
  --accent-strong: #fdba74;

  --gray-50:  #f5f5f7;
  --gray-100: #e2e3e8;
  --gray-200: #c4c8d2;
  --gray-300: #a1a5b1;
  --gray-400: #6b7080;
  --gray-500: #4a4e5c;
  --gray-600: #3a3e49;
  --gray-700: #2a2d36;
  --gray-800: #1a1c22;
  --gray-900: #0a0a0c;

  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.12);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.12);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.12);

  --bg:           #0a0a0c;
  --bg-elevated:  #131418;
  --bg-muted:     #1a1c22;
  --bg-subtle:    #0f1014;
  --bg-overlay:   rgba(0, 0, 0, 0.7);
  --bg-sidebar:   #131418;
  --bg-sidebar-hover: #1f2128;

  --border:        #2a2d36;
  --border-strong: #3a3e49;
  --border-subtle: #1f2128;

  --text:           #f5f5f7;
  --text-secondary: #a1a5b1;
  --text-muted:     #6b7080;
  --text-inverse:   #0a0a0c;
  --text-sidebar:   #a1a5b1;
  --text-sidebar-hover: #ffffff;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 12px 24px -6px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.6);

  color-scheme: dark;
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* Override صريح ضد !important على display في classes أخرى */
.posts-grid[hidden],
.posts-grid.layout-list[hidden],
.posts-grid.layout-cards[hidden],
.view-pane[hidden],
main.view-pane[hidden],
.page-view[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

img { max-width: 100%; display: block; }

/* English/numbers in RTL */
.num, .stat-num, time, code,
input[type="number"], input[type="date"], input[type="time"] {
  font-feature-settings: "tnum" 1, "lnum" 1;
  unicode-bidi: plaintext;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

body.modal-open { position: fixed; width: 100%; overflow: hidden !important; }

/* ============================================================
   App shell layout
   ============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;            /* prevent grid blowout */
  min-height: 100vh;
}

.content {
  flex: 1;
  padding: var(--s-6);
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .app-shell { grid-template-columns: 1fr; }
  .content { padding: var(--s-4); padding-bottom: calc(var(--mbn-h) + var(--s-6)); }
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  background: var(--bg-sidebar);
  color: var(--text-sidebar);
  border-inline-start: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 50;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-4);
  gap: var(--s-4);
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.brand-link:hover { text-decoration: none; }

.logo-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-radius: var(--r-md);
  box-shadow: 0 4px 12px -2px rgb(234 88 12 / 0.4);
  flex-shrink: 0;
}

.logo-shape {
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 4px;
  position: relative;
}

.logo-shape::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--accent);
  border-radius: 2px;
}

.brand-text h1 {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-sidebar-hover);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.brand-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-sidebar);
  font-weight: 400;
}

.sidebar-close-btn {
  display: none;
  padding: var(--s-2);
  border-radius: var(--r-md);
  color: var(--text-sidebar);
}

.sidebar-close-btn:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-sidebar-hover);
}

/* Nav sections */
.nav-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.nav-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  font-weight: 700;
  padding: var(--s-3) var(--s-3) var(--s-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-sidebar);
  font-size: var(--text-md);
  font-weight: 500;
  text-align: start;
  transition: all var(--d-fast) var(--ease);
  position: relative;
}

.nav-item:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-sidebar-hover);
}

.nav-item.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 12px -2px rgb(234 88 12 / 0.4);
}

[data-theme="dark"] .nav-item.active {
  background: var(--accent);
  color: var(--gray-900);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-badge {
  margin-inline-start: auto;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-sidebar);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
  min-width: 22px;
  text-align: center;
}

.nav-item.active .nav-badge {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* Sidebar footer (user card) */
.sidebar-footer {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--bg-sidebar-hover);
}

.user-card {
  position: relative;
}

.user-card-btn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border-radius: var(--r-md);
  text-align: start;
  color: var(--text-sidebar);
  transition: background var(--d-fast) var(--ease);
}

.user-card-btn:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-sidebar-hover);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.user-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.user-card-info strong {
  color: var(--text-sidebar-hover);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-card-info span {
  font-size: var(--text-xs);
  color: var(--text-sidebar);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-card-chev {
  flex-shrink: 0;
  opacity: 0.6;
}

.user-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--s-2);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-role-chip {
  display: inline-block;
  font-size: var(--text-xs);
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-weight: 600;
  margin: var(--s-2);
  width: fit-content;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--text-sm);
  text-align: start;
  transition: background var(--d-fast) var(--ease);
}

.dropdown-item:hover { background: var(--bg-muted); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.danger:hover { background: var(--danger-soft); }

.di-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dropdown-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--s-1) 0;
}

/* Sidebar mobile drawer */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  z-index: 49;
}

@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    width: 280px;
    transform: translateX(100%);
    transition: transform var(--d-slow) var(--ease-out);
    box-shadow: var(--shadow-xl);
  }
  [dir="rtl"] .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0) !important; }
  .sidebar.open ~ .sidebar-overlay { display: block; }
  .sidebar-close-btn { display: grid; place-items: center; }
}

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  z-index: 40;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.85); }
[data-theme="dark"] .topbar { background: rgba(19, 20, 24, 0.85); }

.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--topbar-h);
  padding: 0 var(--s-6);
  max-width: 1600px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .topbar-inner { padding: 0 var(--s-4); }
}

.topbar-menu-btn { display: none !important; }
@media (max-width: 1024px) {
  .topbar-menu-btn {
    display: grid !important;
    place-items: center;
  }
}

.topbar-search {
  flex: 1;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-muted);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--text-muted);
  transition: all var(--d-fast) var(--ease);
}

.topbar-search:focus-within {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.topbar-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--text-base);
  min-width: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: auto;
}

.last-update {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.pulse {
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: var(--r-full);
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgb(5 150 105 / 0.5); }
  70%  { box-shadow: 0 0 0 8px rgb(5 150 105 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(5 150 105 / 0); }
}

@media (max-width: 768px) {
  .last-update { display: none; }
}

/* Live banner inside topbar (slim) */
.live-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-6);
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn);
  color: var(--warn);
  font-size: var(--text-sm);
  font-weight: 600;
}

.live-dot {
  width: 8px;
  height: 8px;
  background: var(--warn);
  border-radius: var(--r-full);
  animation: live-pulse 1.5s infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

.live-link {
  margin-inline-start: auto;
  color: var(--warn);
  font-weight: 700;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--text-base);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  white-space: nowrap;
  user-select: none;
  font-family: inherit;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:not(:disabled):active { transform: scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 2px 8px -2px rgb(234 88 12 / 0.5);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 14px -2px rgb(234 88 12 / 0.6);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-primary { color: var(--gray-900); }

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}

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

.btn-ghost:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.btn-ghost-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger-soft);
}

.btn-ghost-danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover {
  background: var(--danger);
  filter: brightness(1.1);
}

.btn-link {
  background: transparent;
  color: var(--accent);
  padding: 4px 8px;
  font-weight: 600;
  font-size: var(--text-sm);
}

.btn-link:hover { background: var(--accent-soft); }

.btn-sm {
  padding: var(--s-1) var(--s-3);
  font-size: var(--text-sm);
}

.btn-text-desktop { display: inline; }
@media (max-width: 540px) { .btn-text-desktop { display: none; } }

/* Icon button */
.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--d-fast) var(--ease);
}

.icon-btn:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border);
}

/* Legacy button aliases (for older HTML/JS) */
.btn-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  font-family: inherit;
  white-space: nowrap;
}

[data-theme="dark"] .btn-trigger { color: var(--gray-900); }

.btn-trigger:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-trigger.btn-sm,
.btn-refresh.btn-sm,
.btn-trigger.btn-full + * { font-size: var(--text-sm); padding: 6px 12px; }

.btn-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  font-family: inherit;
  white-space: nowrap;
}

.btn-refresh:hover:not(:disabled) {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}

.btn-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-refresh.btn-danger,
.btn-trigger.btn-danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.btn-refresh.btn-danger:hover,
.btn-trigger.btn-danger:hover {
  filter: brightness(1.1);
}

.btn-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 6px 12px;
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  font-family: inherit;
  white-space: nowrap;
}

.btn-meta:hover { background: var(--bg-muted); color: var(--text); border-color: var(--border-strong); }
.btn-meta.danger { color: var(--danger); border-color: var(--danger-soft); }
.btn-meta.danger:hover { background: var(--danger-soft); }

/* Chip button (quick range) */
.chip-btn {
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid transparent;
  transition: all var(--d-fast) var(--ease);
}

.chip-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-ring);
}

.chip-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 8px -2px rgb(234 88 12 / 0.4);
}

[data-theme="dark"] .chip-btn.active { color: var(--gray-900); }

.chip-btn.active:hover {
  background: var(--accent-hover);
  color: white;
}

[data-theme="dark"] .chip-btn.active:hover { color: var(--gray-900); }

/* ============================================================
   Form inputs
   ============================================================ */
.input, .select, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"],
input[type="time"], textarea, select {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  font-family: inherit;
  font-size: var(--text-base);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  transition: all var(--d-fast) var(--ease);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg-muted);
}

.input:focus, .select:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--bg-elevated);
}

.input::placeholder, input::placeholder { color: var(--text-muted); }

/* ============================================================
   Stats grid
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: all var(--d-base) var(--ease);
}

.stat-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.stat-icon-wrap svg {
  width: 20px;
  height: 20px;
}

.stat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat-num {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
  direction: ltr;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
  .stat-card { padding: var(--s-3); }
  .stat-icon-wrap { width: 32px; height: 32px; }
  .stat-icon-wrap svg { width: 16px; height: 16px; }
  .stat-num { font-size: var(--text-lg); }
}

/* ============================================================
   Filters section
   ============================================================ */
.filters-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-4);
  overflow: hidden;
}

.filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}

.filters-head h3 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
}

.filters-head h3 svg { color: var(--text-muted); }

.active-filters-badge {
  background: var(--accent);
  color: white;
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-weight: 700;
}

[data-theme="dark"] .active-filters-badge { color: var(--gray-900); }

.filters-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.filters-toggle-btn svg {
  transition: transform var(--d-base) var(--ease);
}

.filters-section.collapsed .filters-toggle-btn svg {
  transform: rotate(-90deg);
}

.filters-section.collapsed .filters-body {
  display: none;
}

.filters-body {
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.filters-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
}

.filters-row-2 { grid-template-columns: repeat(6, 1fr); }

.filters-row-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.quick-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.filter-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .filters-row, .filters-row-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .filters-row, .filters-row-2 { grid-template-columns: 1fr; }
}

/* Multiselect */
.multiselect { position: relative; }

.multiselect-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--text-base);
  text-align: start;
  transition: all var(--d-fast) var(--ease);
}

.multiselect-trigger:hover {
  border-color: var(--border-strong);
}

.multiselect.open .multiselect-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.multiselect-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multiselect-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xl);
  padding: var(--s-2);
  z-index: 200;       /* فوق كل filter sections */
  max-height: 320px;
  overflow-y: auto;
  min-width: 220px;
}

/* لما الـ multiselect مفتوح، يطفو فوق العناصر الأخرى */
.multiselect.open {
  position: relative;
  z-index: 201;
}

/* الـ filters-section يجب أن يسمح للـ dropdown بالخروج */
.filters-section,
.filters-body,
.filters-row,
.filter-group {
  overflow: visible !important;
}

.multiselect-search {
  margin-bottom: var(--s-2);
  padding: var(--s-1) var(--s-2);
  font-size: var(--text-sm);
}

.multiselect-toolbar {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}

.ms-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease);
  font-size: var(--text-sm);
}

.ms-item:hover { background: var(--bg-muted); }
.ms-item input[type="checkbox"] { accent-color: var(--accent); }

/* ============================================================
   Content toolbar
   ============================================================ */
.content-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.result-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 500;
}

.result-count strong { color: var(--text); }

.layout-toggle {
  display: flex;
  background: var(--bg-muted);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 2px;
}

.layout-btn {
  padding: 6px 10px;
  border-radius: calc(var(--r-md) - 2px);
  color: var(--text-muted);
  transition: all var(--d-fast) var(--ease);
}

.layout-btn:hover { color: var(--text); }
.layout-btn.active {
  background: var(--bg-elevated);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   Posts grid (cards)
   ============================================================ */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-4);
  /* المهم: align-items: start بدل stretch
     عشان لا يتمدد كل الكاردات لأطول واحد فيها */
  align-items: start;
}

.posts-grid.layout-list {
  grid-template-columns: 1fr;
  gap: var(--s-2);
}

.post-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--d-base) var(--ease);
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  /* الكارد ما يتجاوز ارتفاع معين — content scroll لو لزم */
  max-height: 600px;
}

.post-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.post-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.post-checkbox-wrap {
  position: absolute;
  top: var(--s-3);
  inset-inline-start: var(--s-3);
  z-index: 5;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}

.post-card:hover .post-checkbox-wrap,
.post-card.selected .post-checkbox-wrap {
  opacity: 1;
}

.post-checkbox-wrap input { accent-color: var(--accent); margin: 0; cursor: pointer; }

.btn-delete-post {
  position: absolute;
  top: var(--s-3);
  inset-inline-end: var(--s-3);
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 600;
  opacity: 0;
  transition: all var(--d-fast) var(--ease);
}

.post-card:hover .btn-delete-post { opacity: 1; }
.btn-delete-post:hover { background: var(--danger); color: white; border-color: var(--danger); }

.post-media {
  position: relative;
  background: var(--bg-muted);
  aspect-ratio: 16 / 10 !important;
  overflow: hidden;
  flex-shrink: 0;
  /* ⚠️ نلزم الصور بحجم ثابت — مش يتمدد رأسي */
  height: auto !important;
  max-height: 220px;
  width: 100%;
}

.post-media img,
.post-media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform var(--d-slow) var(--ease);
  display: block;
}

/* لو الصورة فاضية (placeholder text post) */
.post-media .placeholder-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--bg-muted);
  font-size: 2.5rem;
  opacity: 0.3;
}

.post-card:hover .post-media img { transform: scale(1.03); }

.placeholder-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 3rem;
  opacity: 0.3;
}

.media-count-chip,
.play-overlay-sm {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.media-count-chip { bottom: var(--s-3); inset-inline-end: var(--s-3); }

.play-overlay-sm {
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  padding: 0;
}

.play-overlay-sm::after {
  content: '▶';
  font-size: 18px;
  margin-inline-start: 3px;
}

.post-card-body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.post-page {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

.post-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.post-text {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-engagement {
  display: flex;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
}

.engagement-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.engagement-item strong { color: var(--text); font-weight: 700; }
.engagement-item.high { color: var(--accent); }
.engagement-item.high strong { color: var(--accent); }
.engagement-item.has-detail { cursor: pointer; }
.engagement-item.has-detail:hover { color: var(--accent); }
.engagement-item.no-data { font-size: var(--text-xs); }

/* List layout */
.post-list-row {
  display: grid;
  grid-template-columns: auto 80px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  align-items: center;
}

.post-list-row:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.list-thumb {
  width: 80px;
  height: 60px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-muted);
  position: relative;
  flex-shrink: 0;
}

.list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.list-thumb.placeholder { display: grid; place-items: center; font-size: 1.5rem; opacity: 0.4; }
.list-thumb.has-video::after { content: '▶'; position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); color: white; font-size: 14px; text-shadow: 0 0 8px rgba(0,0,0,0.8); }

.list-content { min-width: 0; }
.list-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: 4px; }
.list-page { font-size: var(--text-md); color: var(--text); }
.list-time { font-size: var(--text-xs); color: var(--text-muted); }
.list-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-engagement { display: flex; gap: var(--s-3); font-size: var(--text-xs); color: var(--text-muted); }
.list-cb { accent-color: var(--accent); }
.list-delete { width: 28px; height: 28px; }

/* Badges */
.post-type-badge,
.source-badge,
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.post-type-badge {
  background: var(--bg-muted);
  color: var(--text-secondary);
  border-color: var(--border);
}

.source-badge.premium {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #78350f;
  border-color: #fcd34d;
}

[data-theme="dark"] .source-badge.premium {
  background: rgba(252, 211, 77, 0.12);
  color: #fcd34d;
  border-color: rgba(252, 211, 77, 0.3);
}

.source-badge.rss {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success-soft);
}

.category-badge {
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.25);
}

[data-theme="dark"] .category-badge {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

/* ============================================================
   Empty / loading states
   ============================================================ */
.loading-state,
.empty-state,
.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s-12) var(--s-6);
  color: var(--text-muted);
}

.empty-state .empty-icon,
.empty .empty-icon {
  font-size: 3rem;
  opacity: 0.5;
  display: block;
  margin-bottom: var(--s-3);
  animation: float-gentle 3s ease-in-out infinite;
}

@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.empty-state h4,
.empty h4 {
  margin: 0 0 var(--s-2);
  font-size: var(--text-lg);
  color: var(--text);
}

.empty-state p,
.empty p {
  margin: 0;
  font-size: var(--text-sm);
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--r-full);
  margin: 0 auto var(--s-3);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Modals
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--s-4);
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn var(--d-base) var(--ease);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-xl);
  animation: modalSlide var(--d-slow) var(--ease-out);
}

.modal.modal-lg { max-width: 840px; }

@keyframes modalSlide {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--s-5);
  color: var(--text);
  padding-inline-end: 50px;  /* مساحة لزر الإغلاق على اليسار */
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* لو الـ modal فيه header section خاص، نخفي العنوان الافتراضي */
.modal .modal-header-custom + h2 {
  display: none;
}

/* Modal sections styling */
.modal .modal-header {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--border);
  margin: calc(var(--s-8) * -1) calc(var(--s-8) * -1) var(--s-5);
  background: var(--bg-subtle);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

@media (max-width: 640px) {
  .modal .modal-header {
    margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-4);
    padding: var(--s-4) var(--s-5);
  }
}

.modal-close {
  position: absolute;
  top: var(--s-4);
  inset-inline-end: var(--s-4);  /* في RTL = اليسار */
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--bg-muted);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
  border: 1px solid var(--border);
  cursor: pointer;
  z-index: 10;
  font-size: 0;
}

.modal-close svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.modal-close:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
}

.modal-close:active {
  transform: scale(0.95);
}

@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 92vh;
    padding: var(--s-5);
  }
}

/* ============================================================
   Toast notifications
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: var(--s-6);
  inset-inline-end: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  z-index: 2000;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  pointer-events: auto;
  min-width: 240px;
  max-width: 400px;
  animation: toastSlide var(--d-base) var(--ease-out);
}

.toast.success { border-color: var(--success); color: var(--success); }
.toast.error { border-color: var(--danger); color: var(--danger); }
.toast.warn { border-color: var(--warn); color: var(--warn); }

@keyframes toastSlide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .toast-container { inset-inline-start: var(--s-3); inset-inline-end: var(--s-3); bottom: calc(var(--mbn-h) + var(--s-3)); }
  .toast { width: 100%; max-width: none; min-width: 0; }
}

/* ============================================================
   Mobile bottom nav
   ============================================================ */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  height: var(--mbn-h);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  padding: 0 var(--s-2);
  z-index: 45;
  align-items: stretch;
  justify-content: space-around;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

[data-theme="light"] .mobile-bottom-nav { background: rgba(255, 255, 255, 0.92); }
[data-theme="dark"] .mobile-bottom-nav { background: rgba(19, 20, 24, 0.92); }

@media (max-width: 1024px) {
  .mobile-bottom-nav { display: flex; }
}

.mbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 600;
  transition: color var(--d-fast) var(--ease);
}

.mbn-item:hover, .mbn-item.active { color: var(--accent); }

.mbn-fab {
  background: var(--accent);
  color: white !important;
  border-radius: var(--r-full);
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  margin-top: -16px;
  box-shadow: 0 8px 16px -4px rgb(234 88 12 / 0.5);
  align-self: center;
}

.mbn-fab svg { width: 22px; height: 22px; }

/* ============================================================
   Footer
   ============================================================ */
.app-footer {
  padding: var(--s-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: var(--s-12);
}

/* ============================================================
   Run row (history)
   ============================================================ */
.run-row {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.run-row.clickable { cursor: pointer; transition: all var(--d-fast) var(--ease); }
.run-row.clickable:hover { border-color: var(--accent); background: var(--accent-soft); }

.run-row-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.run-status {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
}

.run-status.success { background: var(--success-soft); color: var(--success); }
.run-status.error { background: var(--danger-soft); color: var(--danger); }
.run-status.warn { background: var(--warn-soft); color: var(--warn); }
.run-status.muted { background: var(--bg-muted); color: var(--text-muted); }

.run-trigger { font-size: var(--text-xs); color: var(--text-secondary); }
.run-time { font-size: var(--text-xs); color: var(--text-muted); margin-inline-start: auto; }
.run-row-body { font-size: var(--text-sm); color: var(--text-secondary); }
.run-row-body strong { color: var(--accent); font-weight: 700; }
.run-row-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.btn-icon-sm {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.btn-icon-sm.btn-danger { color: var(--danger); border-color: var(--danger-soft); }
.btn-icon-sm:hover { background: var(--bg-muted); }
.btn-icon-sm.btn-danger:hover { background: var(--danger); color: white; }

.run-detail-btn { display: inline-flex; align-items: center; gap: 4px; }

/* ============================================================
   Theme toggle (legacy in dropdown)
   ============================================================ */
.theme-toggle-item .theme-icon-dark,
.theme-toggle-item .theme-label-dark { display: none; }

[data-theme="dark"] .theme-toggle-item .theme-icon-light,
[data-theme="dark"] .theme-toggle-item .theme-label-light { display: none; }

[data-theme="dark"] .theme-toggle-item .theme-icon-dark,
[data-theme="dark"] .theme-toggle-item .theme-label-dark { display: inline-block; }

/* ============================================================
   Theme toggle button (light ↔ dark)
   - في light mode: نعرض icon القمر (للتبديل لـ dark)
   - في dark mode: نعرض icon الشمس (للتبديل لـ light)
   ============================================================ */
.theme-toggle-btn .theme-icon-light,
.theme-toggle-btn .theme-icon-dark { display: none; }

[data-theme="light"] .theme-toggle-btn .theme-icon-dark { display: block; }
[data-theme="dark"]  .theme-toggle-btn .theme-icon-light { display: block; }

.theme-toggle-btn:hover svg {
  color: var(--accent);
}

.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 100;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: fadeIn var(--d-fast) var(--ease);
}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--text) !important;
  font-size: var(--text-sm);
  font-weight: 600 !important;        /* أوضح */
  text-align: start;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  opacity: 1 !important;
}

.theme-option svg {
  flex-shrink: 0;
  color: var(--text) !important;       /* solid color بدل secondary */
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

.theme-option:hover {
  background: var(--bg-muted);
  color: var(--text) !important;
}

.theme-option:hover svg {
  color: var(--accent) !important;
  opacity: 1;
}

.theme-option .check-icon {
  margin-inline-start: auto;
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}

[data-theme-pref="light"] .theme-option[data-theme="light"] .check-icon,
[data-theme-pref="dark"]  .theme-option[data-theme="dark"]  .check-icon,
[data-theme-pref="auto"]  .theme-option[data-theme="auto"]  .check-icon {
  opacity: 1;
}

/* الـ option الـ active (currently selected) */
[data-theme-pref="light"] .theme-option[data-theme="light"],
[data-theme-pref="dark"]  .theme-option[data-theme="dark"],
[data-theme-pref="auto"]  .theme-option[data-theme="auto"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

[data-theme-pref="light"] .theme-option[data-theme="light"] svg,
[data-theme-pref="dark"]  .theme-option[data-theme="dark"]  svg,
[data-theme-pref="auto"]  .theme-option[data-theme="auto"]  svg {
  color: var(--accent);
}

/* ============================================================
   Page views (formerly modals)
   ============================================================ */
.page-view {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}

.page-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.page-title-icon {
  font-size: 1.5em;
  line-height: 1;
}

.page-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.page-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
}

.page-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-muted);
  padding: 4px;
  border-radius: var(--r-md);
  width: fit-content;
}

.page-tab {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: all var(--d-fast) var(--ease);
}

.page-tab:hover { color: var(--text); }
.page-tab.active {
  background: var(--bg-elevated);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

.page-tab svg { width: 14px; height: 14px; }

.page-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.page-section + .page-section {
  margin-top: var(--s-4);
}

.page-section-title {
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.page-section-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-4);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .page-title { font-size: var(--text-xl); }
  .page-section { padding: var(--s-4); }
  .page-tabs { width: 100%; overflow-x: auto; }
  .page-tab { flex: 1; justify-content: center; }
}

/* ============================================================
   View panes
   ============================================================ */
.view-pane[hidden] { display: none !important; }

/* ============================================================
   Misc + animations
   ============================================================ */
.fadeIn { animation: fadeIn var(--d-base) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Dark mode polish
   ============================================================ */
[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(251, 146, 60, 0.04), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.03), transparent 40%);
}

[data-theme="dark"] img { filter: brightness(0.95); }

/* ============================================================
   .ic — global SVG icon class (used everywhere by ic() helper)
   ============================================================ */
.ic {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  vertical-align: middle;
  display: inline-block;
}

/* contextual sizes */
.btn .ic, .btn-trigger .ic, .btn-refresh .ic { width: 14px !important; height: 14px !important; }
.btn-meta .ic, .btn-link .ic { width: 13px !important; height: 13px !important; }
.icon-btn .ic { width: 18px !important; height: 18px !important; }
.format-icon .ic { width: 28px !important; height: 28px !important; }
h2 .ic, h3 .ic { width: 18px !important; height: 18px !important; }
.page-title .ic { width: 22px !important; height: 22px !important; }

/* prevent any inline svg without size from blowing up */
svg:not([width]):not([height]):not(.ic) {
  max-width: 24px;
  max-height: 24px;
}

/* Format option (export modal) */
.format-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: var(--s-3) !important;
  gap: 6px !important;
}

.format-option .format-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border-radius: var(--r-md);
  color: var(--accent);
  margin-bottom: 4px;
}

.format-option .format-icon .ic {
  width: 20px !important;
  height: 20px !important;
}

/* ============================================================
   Pagination bar — horizontal على كل الأحجام
   ============================================================ */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}

.pg-info {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex-wrap: wrap;
}

.pg-pp {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: nowrap;
}

.pg-pp label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.select-sm {
  padding: 4px 10px;
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  color: var(--text);
  width: auto;
  min-width: 70px;
}

.pg-pages {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pg-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all var(--d-fast) var(--ease);
  flex: 0 0 auto;
}

.pg-btn:hover:not(:disabled) {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border-strong);
}

.pg-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

[data-theme="dark"] .pg-btn.active { color: var(--gray-900); }

.pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.pg-ellipsis {
  padding: 0 4px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  height: 36px;
}

@media (max-width: 640px) {
  .pagination-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .pg-info {
    justify-content: space-between;
    font-size: var(--text-xs);
  }
  .pg-pages {
    justify-content: center;
  }
  .pg-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
  }
}

/* ============================================================
   Settings modal — tabs
   ============================================================ */
.settings-tabs {
  display: flex;
  gap: var(--s-1);
  background: var(--bg-muted);
  padding: 4px;
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
}

.settings-tab {
  flex: 1;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  transition: all var(--d-fast) var(--ease);
}

.settings-tab:hover { color: var(--text); }
.settings-tab.active {
  background: var(--bg-elevated);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

/* Settings — source cards */
.source-config-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-3);
  overflow: hidden;
  transition: all var(--d-fast) var(--ease);
}

.source-config-card.enabled {
  border-color: var(--accent-ring);
}

.source-config-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  cursor: pointer;
}

.source-drag-handle { color: var(--text-muted); cursor: grab; }
.source-priority-badge {
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: var(--success);
  color: white;
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  font-weight: 700;
}

.source-config-info {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1;
  min-width: 0;
}

.source-icon-lg { font-size: 1.6rem; }
.source-config-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.source-config-text strong { font-size: var(--text-md); color: var(--text); }
.source-price { font-size: var(--text-xs); color: var(--accent); font-weight: 600; }
.source-desc { font-size: var(--text-xs); color: var(--text-muted); }

/* Switch (toggle) */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input { opacity: 0; width: 0; height: 0; }

.switch .slider {
  position: absolute;
  inset: 0;
  background: var(--gray-300);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease);
}

.switch .slider::before {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: var(--r-full);
  transition: transform var(--d-fast) var(--ease);
  box-shadow: var(--shadow-sm);
}

.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before {
  transform: translateX(20px);
}
[dir="rtl"] .switch input:checked + .slider::before {
  transform: translateX(-20px);
}

.source-collapse-btn {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
}

.source-collapse-btn:hover { background: var(--bg-muted); }

.source-config-body {
  padding: var(--s-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.source-config-body[hidden] { display: none; }

.form-field { display: flex; flex-direction: column; gap: var(--s-1); }
.form-field label {
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 600;
}

.field-help {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.token-input-row {
  display: flex;
  gap: var(--s-2);
}

.token-input-row .input { flex: 1; }

.locked-value {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
}

.locked-value code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--s-4);
}

.alert-info { background: var(--info-soft); color: var(--info); border-left: 3px solid var(--info); }
.alert-warn { background: var(--warn-soft); color: var(--warn); border-left: 3px solid var(--warn); }
.alert-danger { background: var(--danger-soft); color: var(--danger); border-left: 3px solid var(--danger); }
.alert-success { background: var(--success-soft); color: var(--success); border-left: 3px solid var(--success); }

[dir="rtl"] .alert-info,
[dir="rtl"] .alert-warn,
[dir="rtl"] .alert-danger,
[dir="rtl"] .alert-success {
  border-left: none;
  border-right: 3px solid;
}

.note, .note-info, .note-empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--s-3);
  background: var(--bg-muted);
  border-radius: var(--r-md);
  text-align: center;
}

/* Form rows for inline forms */
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
}

.form-inline {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.form-inline .form-row { flex: 1; min-width: 200px; margin-bottom: 0; }

/* Radio chip */
.radio-chip, .checkbox-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  font-size: var(--text-sm);
  user-select: none;
}

.radio-chip:hover, .checkbox-chip:hover { border-color: var(--border-strong); }
.radio-chip:has(input:checked),
.checkbox-chip:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.radio-chip input, .checkbox-chip input { accent-color: var(--accent); }

/* ============================================================
   Trigger form V2 — modal سحب جديد
   ============================================================ */
.trigger-form-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.trigger-form-v2 .alert {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: 0;
}

.trigger-form-v2 .alert svg {
  flex-shrink: 0;
}

.trigger-form-v2 .alert strong {
  color: inherit;
  font-weight: 700;
}

.trigger-form-v2 .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
}

.trigger-form-v2 .filter-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

/* Pages mode (radio chips) */
.trigger-form-v2 .trigger-pages-mode {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.trigger-form-v2 .radio-chip {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3);
  cursor: pointer;
  border-radius: var(--r-md);
  border: 2px solid var(--border);
  background: var(--bg-elevated);
  transition: all var(--d-fast) var(--ease);
}

.trigger-form-v2 .radio-chip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.trigger-form-v2 .radio-chip:hover {
  border-color: var(--border-strong);
}

.trigger-form-v2 .radio-chip:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.trigger-form-v2 .radio-chip:has(input:checked) svg {
  color: var(--accent);
}

.trigger-form-v2 .radio-chip input { display: none; }

/* Time preset buttons */
.trigger-form-v2 .time-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.trigger-form-v2 .preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  font-family: inherit;
}

.trigger-form-v2 .preset-btn svg { flex-shrink: 0; color: var(--text-muted); }
.trigger-form-v2 .preset-btn:hover { border-color: var(--border-strong); }
.trigger-form-v2 .preset-btn:hover svg { color: var(--text); }

.trigger-form-v2 .preset-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 8px -2px rgb(234 88 12 / 0.4);
}

[data-theme="dark"] .trigger-form-v2 .preset-btn.active { color: var(--gray-900); }

.trigger-form-v2 .preset-btn.active svg { color: currentColor; }

/* Field help with icon */
.trigger-form-v2 .field-help {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.trigger-form-v2 .field-help svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--text-muted);
}

/* Submit button — full width */
.trigger-form-v2 #startScrapeBtn {
  font-size: var(--text-md);
  padding: var(--s-3);
  font-weight: 700;
  margin-top: var(--s-2);
}

/* Note at bottom */
.trigger-form-v2 .trigger-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--s-3);
  background: var(--bg-muted);
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

.trigger-form-v2 .trigger-note svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* Trigger pages picker */
.trigger-form-v2 .trigger-pages-picker {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: var(--s-2);
}

.trigger-form-v2 .trigger-pages-toolbar {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border);
}

.trigger-form-v2 .trigger-pages-list {
  max-height: 240px;
  overflow-y: auto;
  padding: var(--s-2);
}

.trigger-form-v2 .trig-page-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--d-fast) var(--ease);
}

.trigger-form-v2 .trig-page-item:hover { background: var(--bg-muted); }

.trigger-form-v2 .trig-page-name { flex: 1; }

.trigger-form-v2 .trig-page-city {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.trigger-form-v2 .trigger-pages-count {
  padding: var(--s-2);
  background: var(--bg-muted);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
}

/* Trigger pages list (legacy in run modal) */
.trigger-pages-mode { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.trigger-pages-picker {
  margin-top: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.trigger-pages-toolbar {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border);
}
.trigger-pages-list { max-height: 280px; overflow-y: auto; padding: var(--s-2); }
.trig-page-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}
.trig-page-item:hover { background: var(--bg-muted); }
.trig-page-name { flex: 1; }
.trig-page-city { font-size: var(--text-xs); color: var(--text-muted); }
.trigger-pages-count {
  padding: var(--s-2);
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
}

/* Time presets */
.time-presets {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.preset-btn {
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid transparent;
  transition: all var(--d-fast) var(--ease);
}

.preset-btn:hover { color: var(--text); }
.preset-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

[data-theme="dark"] .preset-btn.active { color: var(--gray-900); }

/* Schedule/keywords cards */
.schedule-card, .keyword-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}

/* ============================================================
   Users management — cards modern
   ============================================================ */
.users-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}

.users-header h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--r-full);
}

.users-table {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.user-row {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: center;
  transition: all var(--d-fast) var(--ease);
}

.user-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.user-row-info {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.user-row-info > div:not(.user-avatar-sm) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-row-info strong {
  font-size: var(--text-md);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
}

.user-row-info .user-role {
  flex-shrink: 0;
}

.user-avatar-sm {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  border-radius: var(--r-full) !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
  color: white !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 700 !important;
  font-size: var(--text-md) !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: 44px !important;
  text-transform: uppercase;
  letter-spacing: 0;
  align-self: center;
  justify-self: center;
}

[data-theme="dark"] .user-avatar-sm { color: var(--gray-900) !important; }

.user-role {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
}

.user-role.admin {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: var(--warn);
}

.user-role.disabled {
  background: var(--gray-200);
  color: var(--text-muted);
  text-decoration: line-through;
}

[data-theme="dark"] .user-role.disabled {
  background: var(--gray-700);
}

.user-role.self {
  background: var(--info-soft);
  color: var(--info);
  border-color: var(--info);
}

.user-row-text {
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
}

.user-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: 4px;
}

.user-meta-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.dot-sep {
  color: var(--text-muted);
}

.user-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  justify-content: flex-end;
  align-items: center;
}

/* الأزرار الجديدة الموحّدة */
.user-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: all var(--d-fast) var(--ease);
  cursor: pointer;
  font-family: inherit;
}

.user-action-btn:hover:not(:disabled) {
  background: var(--bg-muted);
  border-color: var(--border-strong);
  color: var(--text);
}

.user-action-btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

[data-theme="dark"] .user-action-btn.primary { color: var(--gray-900); }

.user-action-btn.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.user-action-btn.danger {
  color: var(--danger);
  border-color: var(--danger-soft);
}

.user-action-btn.danger:hover:not(:disabled) {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.user-action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.user-action-btn svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .user-row { grid-template-columns: 1fr; }
  .user-row-actions { justify-content: flex-start; }
  .user-row-info { grid-template-columns: auto 1fr; }
}

@media (max-width: 540px) {
  .user-action-btn span { display: none; }
  .user-action-btn { padding: 8px; }
}

/* الـ users-header الجديد (count + زر) */
.users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.users-header h3 {
  display: none;  /* العنوان موجود في page-header، نخفيه هنا */
}

.users-count {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

/* Add user form (collapsed) */
.user-add-form, .card-soft {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}

.user-add-form h4 {
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: var(--s-3);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.form-actions {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

/* Lightbox — صورة بالكامل + controls قريبة منها */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
}

.lightbox-stage {
  position: relative;        /* لتثبيت الـ controls عليها */
  width: 100%;
  height: 100%;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
  display: block;
}

/* Controls داخل الـ lightbox container (أقرب للصورة) */
.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-full);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 300;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--d-fast) var(--ease);
  cursor: pointer;
  z-index: 10;
}

.lightbox-close {
  top: 20px;
  /* في RTL: inset-inline-end = اليسار، فنضعه يمين بصرياً */
  inset-inline-start: 20px;
  inset-inline-end: auto;
}

.lightbox-prev {
  top: 50%;
  /* prev في الـ RTL يكون يميناً (يرجع للسابق بالضغط على اليمين) */
  inset-inline-start: auto;
  inset-inline-end: 20px;
  transform: translateY(-50%);
}

.lightbox-next {
  top: 50%;
  /* next في الـ RTL يكون يساراً */
  inset-inline-start: 20px;
  inset-inline-end: auto;
  transform: translateY(-50%);
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.lightbox-prev:hover,
.lightbox-next:hover {
  transform: translateY(-50%) scale(1.05);
}

.lightbox-close:active,
.lightbox-nav:active {
  transform: scale(0.95);
}

.lightbox-prev:active,
.lightbox-next:active {
  transform: translateY(-50%) scale(0.95);
}

@media (max-width: 540px) {
  .lightbox {
    padding: var(--s-1);
  }
  .lightbox-close,
  .lightbox-nav {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .lightbox-close { top: 12px; inset-inline-start: 12px; }
  .lightbox-prev { inset-inline-end: 8px; }
  .lightbox-next { inset-inline-start: 8px; }
}

/* CSS قديم محذوف — استعمال الـ rules الجديدة في الأعلى (السطر ~3107) */

.lightbox-footer {
  position: absolute;
  bottom: var(--s-4);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--s-3);
  background: rgba(0, 0, 0, 0.6);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  color: white;
  font-size: var(--text-sm);
  backdrop-filter: blur(8px);
}

.lightbox-action { color: white; }
.lightbox-action:hover { color: var(--accent); }

/* ============================================================
   Auth (Login / Register) screen
   ============================================================ */
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 0%, var(--accent-soft), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(99, 102, 241, 0.08), transparent 50%);
  pointer-events: none;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: var(--s-8);
  box-shadow: var(--shadow-xl);
  z-index: 1;
}

.auth-header {
  text-align: center;
  margin-bottom: var(--s-6);
}

.auth-logo-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s-4);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 8px 24px -4px rgb(234 88 12 / 0.4);
}

.auth-logo-mark span {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  position: absolute;
  animation: dotPulse 2s ease-in-out infinite;
}

.auth-logo-mark span:nth-child(1) { top: 18px; left: 18px; animation-delay: 0s; }
.auth-logo-mark span:nth-child(2) { top: 18px; right: 18px; animation-delay: 0.3s; }
.auth-logo-mark span:nth-child(3) { bottom: 18px; left: 50%; transform: translateX(-50%); animation-delay: 0.6s; }

@keyframes dotPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

.auth-logo-mark span:nth-child(3) {
  animation-name: dotPulse3;
}

@keyframes dotPulse3 {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.3); }
}

.auth-title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  margin-bottom: var(--s-2);
}

.auth-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.auth-alert.error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.auth-alert.info {
  background: var(--info-soft);
  color: var(--info);
  border: 1px solid var(--info);
}

.auth-alert svg { flex-shrink: 0; margin-top: 2px; }

.auth-switcher {
  display: flex;
  background: var(--bg-muted);
  padding: 4px;
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
  gap: 2px;
}

.auth-switch-btn {
  flex: 1;
  padding: var(--s-2);
  border-radius: calc(var(--r-md) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  transition: all var(--d-fast) var(--ease);
  cursor: pointer;
}

.auth-switch-btn:hover { color: var(--text); }
.auth-switch-btn.active {
  background: var(--bg-elevated);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.auth-field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.auth-field label .req { color: var(--danger); }

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-field-icon {
  position: absolute;
  inset-inline-start: var(--s-3);
  color: var(--text-muted);
  pointer-events: none;
}

.auth-input-wrap input {
  width: 100%;
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-3);
  padding-inline-start: 38px;
  font-size: var(--text-base);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  transition: all var(--d-fast) var(--ease);
  font-family: inherit;
}

[data-theme="dark"] .auth-input-wrap input { background: var(--bg-muted); }

.auth-input-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--bg-elevated);
}

.pw-toggle {
  position: absolute;
  inset-inline-end: var(--s-3);
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-sm);
  transition: color var(--d-fast) var(--ease);
}

.pw-toggle:hover { color: var(--text); }
.pw-toggle.visible { color: var(--accent); }

.auth-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.auth-checkbox {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.auth-checkbox input { accent-color: var(--accent); }

.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--r-md);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-fast) var(--ease);
  margin-top: var(--s-2);
  box-shadow: 0 4px 12px -2px rgb(234 88 12 / 0.4);
}

[data-theme="dark"] .auth-submit { color: var(--gray-900); }

.auth-submit:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -2px rgb(234 88 12 / 0.5);
}

.auth-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-msg {
  font-size: var(--text-sm);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  text-align: center;
}

.auth-msg.error {
  background: var(--danger-soft);
  color: var(--danger);
}

.auth-msg.success {
  background: var(--success-soft);
  color: var(--success);
}

.auth-footnote {
  margin-top: var(--s-6);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .auth-card {
    padding: var(--s-5);
    border-radius: var(--r-lg);
  }
}

/* ============================================================
   Settings panes (in views)
   ============================================================ */
.settings-pane {
  display: block;
}

.settings-pane[hidden] {
  display: none;
}

.settings-intro {
  background: var(--info-soft);
  color: var(--info);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--s-4);
  border-inline-start: 3px solid var(--info);
}

.settings-intro strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}

/* Sources list */
#sourcesList {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Schedules list */
.schedules-wrapper, .schedules-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.btn-full {
  width: 100%;
  justify-content: center;
}

/* Card-soft (used by add-user form) */
.card-soft {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
}

/* ============================================================
   Profile / Account form (in settings)
   ============================================================ */
.profile-settings,
.account-settings {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.profile-settings h3,
.account-settings h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.profile-form .form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.profile-form .form-field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.profile-form .input,
.profile-form input[type="text"],
.profile-form input[type="email"],
.profile-form input[type="password"] {
  padding: var(--s-3);
  font-size: var(--text-base);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  transition: all var(--d-fast) var(--ease);
  width: 100%;
}

.profile-form .input:focus,
.profile-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.profile-form .input:disabled,
.profile-form input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg);
}

.profile-form .form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
  margin-top: var(--s-2);
}

.profile-form .form-actions button {
  padding: var(--s-2) var(--s-5);
  font-weight: 600;
}

/* ============================================================
   History view — runs list
   ============================================================ */
.history-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.history-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.history-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-2);
}

.history-section-head h3 {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
}

.history-status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
  padding: 4px;
  background: var(--bg-muted);
  border-radius: var(--r-md);
}

.hist-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--d-fast) var(--ease);
  font-family: inherit;
}

.hist-filter-btn:hover { color: var(--text); }
.hist-filter-btn.active {
  background: var(--bg-elevated);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

.hist-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--r-full);
}

.hist-filter-btn.active .hist-count {
  background: var(--accent-soft);
  color: var(--accent);
}

.history-rows-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Run row محسّن — أوضح وأنظف */
.run-row {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: center;
  transition: all var(--d-fast) var(--ease);
}

.run-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.run-row.clickable { cursor: pointer; }
.run-row.clickable:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.run-row-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.run-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

.run-status svg {
  flex-shrink: 0;
}

.run-status.success {
  background: var(--success-soft);
  color: var(--success);
}

.run-status.error {
  background: var(--danger-soft);
  color: var(--danger);
}

.run-status.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.run-status.muted {
  background: var(--bg-muted);
  color: var(--text-muted);
}

.run-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 600;
  padding: 4px 10px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}

.run-trigger svg { color: var(--text-muted); flex-shrink: 0; }

.run-time {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.run-time svg { color: var(--text-muted); flex-shrink: 0; }
.run-time span { direction: ltr; }

.run-dur {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.run-dur svg { color: var(--text-muted); flex-shrink: 0; }
.run-dur span { direction: ltr; }

/* Detail/cancel buttons inside run row */
.run-detail-btn,
.run-cancel-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

.run-detail-btn svg,
.run-cancel-btn svg { flex-shrink: 0; }

.run-row-body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.run-row-body strong {
  color: var(--accent);
  font-weight: 700;
  font-size: var(--text-md);
}

.run-row-body code {
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.run-row-actions {
  display: flex;
  gap: var(--s-1);
  align-items: center;
}

.run-detail-btn,
.run-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  font-family: inherit;
  white-space: nowrap;
}

.run-detail-btn:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border-strong);
}

.run-cancel-btn {
  color: var(--danger) !important;
  border-color: var(--danger-soft) !important;
}

.run-cancel-btn:hover {
  background: var(--danger) !important;
  color: white !important;
}

@media (max-width: 640px) {
  .run-row { grid-template-columns: 1fr; }
  .run-row-actions { justify-content: flex-end; }
}

/* ============================================================
   Schedules view — schedule cards
   ============================================================ */
.schedules-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.schedule-row,
.schedule-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  transition: all var(--d-fast) var(--ease);
}

.schedule-row:hover,
.schedule-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.schedule-row.disabled,
.schedule-card.disabled {
  opacity: 0.6;
}

/* Schedule toggle (switch) */
.schedule-row .switch {
  flex-shrink: 0;
}

.schedule-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.schedule-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.schedule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.schedule-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.schedule-next-run,
.schedule-last-run {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.schedule-actions {
  display: flex;
  gap: var(--s-1);
  align-items: center;
}

.schedule-action-btn,
.btn-icon-action {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
}

.schedule-action-btn:hover,
.btn-icon-action:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border-strong);
}

.schedule-action-btn.danger,
.btn-icon-action.danger {
  color: var(--danger);
  border-color: var(--danger-soft);
}

.schedule-action-btn.danger:hover,
.btn-icon-action.danger:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

@media (max-width: 640px) {
  .schedule-row,
  .schedule-card {
    grid-template-columns: 1fr;
  }
  .schedule-actions { justify-content: flex-start; }
}

/* ============================================================
   Pages view — pages manager
   ============================================================ */
.pages-manager {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.pages-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: flex-end;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}

.pages-search-bar {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

.pages-search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.pages-search-input-wrap svg {
  position: absolute;
  inset-inline-start: var(--s-3);
  color: var(--text-muted);
  pointer-events: none;
}

.pages-search-input-wrap input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  padding-inline-start: 38px;
  font-size: var(--text-base);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.pages-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pages-bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-muted);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}

.page-row,
.page-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  transition: all var(--d-fast) var(--ease);
}

.page-row:hover,
.page-item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.page-row.disabled,
.page-item.disabled {
  opacity: 0.55;
}

.page-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.page-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.page-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.page-actions {
  display: flex;
  gap: var(--s-1);
  align-items: center;
}

@media (max-width: 640px) {
  .page-row,
  .page-item {
    grid-template-columns: auto 1fr;
    grid-template-areas: "toggle info" "actions actions";
  }
  .page-actions { justify-self: end; }
  .pages-toolbar { justify-content: stretch; }
  .pages-toolbar > * { flex: 1; }
}

/* ============================================================
   Keywords (kw-*) — يستخدمها الـ JS الفعلي
   ============================================================ */
.kw-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.kw-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}

.kw-header-text {
  flex: 1;
  min-width: 240px;
}

.kw-header-text h2 {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.kw-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.kw-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.kw-summary-item strong {
  color: var(--accent);
  font-weight: 700;
  font-size: var(--text-sm);
}

.kw-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--success-soft);
  color: var(--success);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  animation: live-pulse-text 2s ease-in-out infinite;
}

@keyframes live-pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.kw-add-form {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.kw-add-form input {
  flex: 1;
}

.kw-add-form select {
  flex: 0 0 auto;
  width: auto;
  min-width: 110px;
}

.kw-add-form button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .kw-add-form { flex-wrap: wrap; }
  .kw-add-form input { flex-basis: 100%; }
}

.kw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-3);
}

.kw-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  cursor: pointer;
  transition: all var(--d-base) var(--ease);
  position: relative;
  overflow: hidden;
}

.kw-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--d-base) var(--ease);
}

.kw-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.kw-card:hover::before {
  transform: scaleY(1);
}

.kw-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.kw-card.active::before {
  transform: scaleY(1);
}

.kw-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
}

.kw-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.kw-card-text strong {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
  line-height: 1.3;
}

.kw-mode {
  display: inline-block;
  width: fit-content;
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-muted);
  border-radius: var(--r-full);
  font-weight: 500;
  margin-top: 2px;
}

.kw-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.kw-delete {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  font-size: 16px;
  font-weight: 600;
  line-height: 0;
}

.kw-delete:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.kw-card-stats {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) 0;
}

.kw-stat-num {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
  direction: ltr;
}

.kw-stat-lbl {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
}

.kw-card-footer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  text-align: center;
  margin-top: auto;
  transition: color var(--d-fast) var(--ease);
}

.kw-card:hover .kw-card-footer {
  color: var(--accent);
}

/* ============================================================
   Keywords view — keyword cards grid (legacy alias)
   ============================================================ */
.keywords-view {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.keywords-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}

.keywords-header-title h2 {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.keywords-header-title p {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.keywords-stats {
  display: flex;
  gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.keywords-add-form {
  display: flex;
  gap: var(--s-2);
  align-items: stretch;
  padding: var(--s-3);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.keywords-add-form input,
.keywords-add-form select {
  flex: 1;
}

.keywords-add-form select {
  flex: 0 0 auto;
  min-width: 100px;
}

.keywords-add-form .input { flex: 1; }

.keywords-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-3);
}

.keyword-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  position: relative;
}

.keyword-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.keyword-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
}

.keyword-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.keyword-text {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}

.keyword-mode {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.keyword-delete-btn {
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  flex-shrink: 0;
}

.keyword-delete-btn:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.keyword-count {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.keyword-count-num {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
  direction: ltr;
}

.keyword-count-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
}

.keyword-card-footer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
  text-align: center;
  margin-top: auto;
}

.keyword-card:hover .keyword-card-footer {
  color: var(--accent);
}

/* ============================================================
   Media library
   ============================================================ */
.media-library {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.media-tabs {
  display: flex;
  gap: var(--s-2);
  border-bottom: 1px solid var(--border);
}

.media-tab {
  padding: var(--s-3) var(--s-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  font-family: inherit;
}

.media-tab:hover { color: var(--text); }
.media-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3);
}

.media-item {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
}

.media-item:hover {
  border-color: var(--accent);
  transform: scale(1.02);
}

.media-item img,
.media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 50%);
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
  display: flex;
  align-items: flex-end;
  padding: var(--s-2);
  color: white;
  font-size: var(--text-xs);
}

.media-item:hover .media-item-overlay { opacity: 1; }

.media-item-type-icon {
  position: absolute;
  top: var(--s-2);
  inset-inline-end: var(--s-2);
  background: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

@media (max-width: 540px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--s-2);
  }
}

/* ============================================================
   Quick generic helpers
   ============================================================ */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.flex-row { display: flex; gap: var(--s-2); }
.flex-col { display: flex; flex-direction: column; gap: var(--s-2); }

/* أيّ list من divs بدون wrappers خاصة */
.cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ============================================================
   Pages manager — كامل (من renderPageRow في JS)
   ============================================================ */
.pages-manager {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.pages-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}

.pages-toolbar > * { flex: 0 0 auto; }
.pages-toolbar-spacer { flex: 1 1 auto; }

.pages-search-bar {
  display: flex;
  gap: var(--s-2);
  align-items: stretch;
  margin-bottom: var(--s-3);
}

.pages-search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.pages-search-input-wrap > svg:first-of-type {
  position: absolute;
  inset-inline-start: var(--s-3);
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}

.pages-search-input-wrap input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  padding-inline-start: 38px;
  font-size: var(--text-base);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.pages-search-input-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.pages-search-clear {
  position: absolute;
  inset-inline-end: var(--s-2);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
}

.pages-search-clear:hover { background: var(--bg-muted); }

.pages-bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  flex-wrap: wrap;
  padding-bottom: var(--s-2);
}

.pages-bulk-bar #pagesCount {
  font-weight: 600;
  color: var(--text);
}

.pages-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pages-footer {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

/* Page row (يستعمله pages manager) */
.page-row {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all var(--d-fast) var(--ease);
}

.page-row:hover {
  border-color: var(--border-strong);
}

.page-row-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
}

.page-row-head:hover {
  background: var(--bg-subtle);
}

.page-row-summary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-row-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.page-row-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.page-row .switch {
  flex-shrink: 0;
}

.page-row-body {
  padding: var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.page-row-body[hidden] { display: none; }

.page-row-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}

.page-row-inline .form-row { margin-bottom: 0; }

.page-collapse-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  transition: all var(--d-fast) var(--ease);
}

.page-collapse-btn:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.page-row.expanded .page-collapse-btn .chev,
.page-row.expanded .chev {
  transform: rotate(180deg);
}

.chev { transition: transform var(--d-fast) var(--ease); }

.page-test-btn,
.page-delete {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 16px;
  transition: all var(--d-fast) var(--ease);
}

.page-test-btn:hover {
  background: var(--info-soft);
  color: var(--info);
  border-color: var(--info);
}

.page-delete {
  color: var(--danger);
  border-color: var(--danger-soft);
  font-size: 20px;
  font-weight: 600;
  line-height: 0;
}

.page-delete:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

@media (max-width: 640px) {
  .page-row-head { flex-wrap: wrap; }
  .page-row-summary { flex-basis: 100%; order: 5; margin-top: var(--s-2); }
}

/* ============================================================
   Analytics view — full styling
   ============================================================ */
.analytics-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.analytics-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}

.analytics-header-text h2 {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.analytics-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.analytics-header-actions {
  display: flex;
  gap: var(--s-2);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--r-full);
}

.analytics-stamp {
  display: none;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}

.analytics-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all var(--d-base) var(--ease);
  position: relative;
  overflow: hidden;
}

.analytics-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--d-base) var(--ease);
}

.analytics-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.analytics-card:hover::before {
  transform: scaleY(1);
}

.analytics-num {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
  direction: ltr;
}

.analytics-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 500;
}

.analytics-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.analytics-section h3 {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Bar chart */
.bar-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-2);
  height: 180px;
  align-items: flex-end;
  padding-top: var(--s-3);
}

.bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
  padding-top: 24px;
}

.bar-fill {
  width: 80%;
  max-width: 60px;
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  min-height: 4px;
  transition: all var(--d-slow) var(--ease);
}

.bar-fill:hover {
  filter: brightness(1.1);
}

.bar-num {
  position: absolute;
  top: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text);
  direction: ltr;
}

.bar-day {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
  direction: ltr;
}

/* Analytics table */
.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.analytics-table th,
.analytics-table td {
  padding: var(--s-2) var(--s-3);
  text-align: start;
  border-bottom: 1px solid var(--border);
}

.analytics-table th {
  font-weight: 700;
  color: var(--text);
  background: var(--bg-muted);
  position: sticky;
  top: 0;
}

.analytics-table tbody tr {
  transition: background var(--d-fast) var(--ease);
}

.analytics-table tbody tr:hover {
  background: var(--bg-subtle);
}

.analytics-table td {
  color: var(--text-secondary);
  direction: ltr;
}

.analytics-table td:first-child {
  font-weight: 600;
  color: var(--text);
  direction: rtl;
  text-align: start;
}

/* Analytics row (2 sections side-by-side) */
.analytics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.analytics-section.half {
  /* nothing extra needed */
}

@media (max-width: 768px) {
  .analytics-row { grid-template-columns: 1fr; }
}

/* Source / type distribution */
.source-distribution {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.dist-row {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr;
  gap: var(--s-3);
  align-items: center;
}

.dist-label {
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.dist-bar {
  position: relative;
  height: 24px;
  background: var(--bg-muted);
  border-radius: var(--r-full);
  overflow: hidden;
}

.dist-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: var(--r-full);
  transition: width var(--d-slow) var(--ease);
  min-width: 4px;
}

.dist-num {
  position: absolute;
  inset-inline-end: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text);
  direction: ltr;
  pointer-events: none;
}

/* legacy alias */
.dist-bar-fill { @extend .dist-fill; }
.dist-pct {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent);
  direction: ltr;
}

/* ============================================================
   Top posts list (in analytics)
   ============================================================ */
.top-posts-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.top-post-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
}

.top-post-row:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.top-rank {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  font-weight: 800;
  direction: ltr;
}

[data-theme="dark"] .top-rank { color: var(--gray-900); }

.top-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.top-page {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

.top-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.top-reactions {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* ============================================================
   Schedules V2 — modern + bulk + SVG icons
   ============================================================ */
.schedules-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.sch-intro {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--info-soft);
  border: 1px solid var(--info);
  border-radius: var(--r-md);
}

.sch-intro-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--bg-elevated);
  color: var(--info);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sch-intro strong {
  display: block;
  font-size: var(--text-md);
  color: var(--info);
  font-weight: 700;
  margin-bottom: 2px;
}

.sch-intro p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.sch-add-btn {
  width: 100%;
  justify-content: center;
}

.sch-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  flex-wrap: wrap;
  animation: fadeIn var(--d-fast) var(--ease);
}

/* Schedule row */
.schedule-row {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all var(--d-fast) var(--ease);
  display: block !important;  /* override the grid layout from previous CSS */
}

.schedule-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.schedule-row.disabled {
  opacity: 0.6;
}

.schedule-row.enabled {
  border-color: var(--success);
}

.schedule-head {
  display: flex !important;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}

.sch-bulk-cb {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.schedule-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.schedule-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
}

.schedule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sch-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.sch-meta-chip svg { color: var(--text-muted); flex-shrink: 0; }

.schedule-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.schedule-action-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
}

.schedule-action-btn:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border-strong);
}

.schedule-action-btn.schedule-run-btn:hover {
  background: var(--success);
  color: white;
  border-color: var(--success);
}

.schedule-action-btn.schedule-edit-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.schedule-action-danger {
  color: var(--danger);
  border-color: var(--danger-soft);
}

.schedule-action-danger:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.schedule-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.sch-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sch-stat svg { color: var(--text-muted); }

.sch-stat strong {
  color: var(--text);
  font-weight: 700;
  margin-inline-start: 2px;
}

@media (max-width: 640px) {
  .schedule-head { flex-wrap: wrap; }
  .schedule-info { flex-basis: 100%; order: 5; }
  .schedule-actions { margin-inline-start: auto; }
  .schedule-stats { flex-direction: column; gap: 4px; }
  .sch-bulk-bar { flex-direction: column; align-items: stretch; }
  .sch-intro { flex-direction: column; }
}

/* ============================================================
   Schedule cards — refined layout (legacy)
   ============================================================ */
.schedule-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: all var(--d-fast) var(--ease);
}

.schedule-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.schedule-row .switch {
  flex-shrink: 0;
}

.schedule-row-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.schedule-row-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
}

.schedule-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.schedule-row-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.schedule-row-status {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 4px;
}

.schedule-row-actions {
  display: flex;
  gap: var(--s-1);
  align-items: center;
  flex-shrink: 0;
}

/* schedule editor (form) */
.schedule-editor,
.schedule-form {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.schedule-form .form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.schedule-form .form-field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 640px) {
  .schedule-row { grid-template-columns: 1fr; }
  .schedule-row .switch { justify-self: start; }
  .schedule-row-actions { justify-self: end; }
}

/* ============================================================
   Impersonation banner (داخل الـ sidebar الآن)
   ============================================================ */
.impersonation-banner {
  background: linear-gradient(135deg, var(--warn-soft), var(--accent-soft));
  border: 1px solid var(--warn);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin: 0 var(--s-2);
}

.imp-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.imp-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--warn);
  color: white;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.imp-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.imp-banner-label {
  font-size: 0.7rem;
  color: var(--warn);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.imp-banner-text strong {
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.imp-banner-by {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.imp-stop-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--warn);
  color: white;
  border: none;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter var(--d-fast) var(--ease);
}

.imp-stop-btn:hover { filter: brightness(1.1); }

/* ============================================================
   Sidebar overlay fix — يجب يكون block + clickable
   ============================================================ */
@media (max-width: 1024px) {
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 49;
    cursor: pointer;
    animation: fadeIn var(--d-base) var(--ease);
  }

  .sidebar.open ~ .sidebar-overlay,
  body:has(.sidebar.open) .sidebar-overlay {
    display: block;
  }

  .sidebar.open + .sidebar-overlay {
    display: block;
  }
}

/* ============================================================
   Topbar search — تحسين الشكل (تجاوز الـ generic input styling)
   ============================================================ */
.topbar-search {
  flex: 1;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px var(--s-4);
  background: var(--bg-muted);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  color: var(--text-muted);
  transition: all var(--d-fast) var(--ease);
  position: relative;
}

[data-theme="light"] .topbar-search {
  background: var(--bg);
  border-color: var(--border);
}

[data-theme="dark"] .topbar-search {
  background: var(--bg-muted);
  border-color: var(--border);
}

.topbar-search:hover {
  border-color: var(--border-strong);
}

.topbar-search:focus-within {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 4px var(--accent-ring);
  max-width: 600px;
}

.topbar-search > svg {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color var(--d-fast) var(--ease);
  pointer-events: none;
}

.topbar-search:focus-within > svg {
  color: var(--accent);
}

/* ⚠️ override generic input styling داخل الـ search box */
.topbar-search > input,
.topbar-search input[type="text"],
.topbar-search input[type="search"],
.topbar-search #searchInput {
  flex: 1 1 auto !important;
  width: auto !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: var(--text-base) !important;
  color: var(--text) !important;
  min-width: 0 !important;
  font-family: inherit !important;
  border-radius: 0 !important;
  height: auto !important;
}

.topbar-search > input:focus,
.topbar-search #searchInput:focus {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
}

.topbar-search input::placeholder {
  color: var(--text-muted);
}

/* ============================================================
   Post Card v2 — Unified design + fixed height
   ============================================================ */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: var(--s-4) !important;
  align-items: stretch !important;
}

.post-card-v2 {
  /* ارتفاع موحّد ثابت */
  height: 480px;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: all var(--d-base) var(--ease);
}

.post-card-v2:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.post-card-v2.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Top buttons: checkbox + delete */
.pc-checkbox {
  position: absolute;
  top: var(--s-2);
  inset-inline-start: var(--s-2);
  z-index: 5;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  border-radius: var(--r-sm);
  padding: 4px;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}

.pc-checkbox input { accent-color: var(--accent); cursor: pointer; margin: 0; }
.post-card-v2:hover .pc-checkbox,
.post-card-v2.selected .pc-checkbox { opacity: 1; }

.pc-delete {
  position: absolute;
  top: var(--s-2);
  inset-inline-end: var(--s-2);
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(4px);
  transition: all var(--d-fast) var(--ease);
}

.post-card-v2:hover .pc-delete { opacity: 1; }
.pc-delete:hover {
  background: var(--danger);
  color: white;
}

/* Media — ارتفاع ثابت 200px */
.pc-media {
  flex: 0 0 200px;
  height: 200px;
  width: 100%;
  position: relative;
  background: var(--bg-muted);
  overflow: hidden;
}

.pc-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--d-slow) var(--ease);
}

.post-card-v2:hover .pc-media > img {
  transform: scale(1.04);
}

.pc-media.has-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.2) 100%);
  pointer-events: none;
}

.pc-play {
  position: absolute;
  /* استعمال inset: 0 + margin: auto لضمان المركز الفعلي */
  inset: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  pointer-events: none;
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transition: all var(--d-fast) var(--ease);
}

.pc-play::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent white;
  margin-inline-start: 5px;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.4));
}

.post-card-v2:hover .pc-play {
  transform: scale(1.1);
  background: rgba(234, 88, 12, 0.9);
  border-color: white;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.4);
}

/* للـ list view play (smaller) */
.lst-play {
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  inset-inline-start: auto !important;   /* override the old positioning */
  inset-inline-end: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 32px;
  height: 32px;
}

/* Make pc-delete icon more polished */
.pc-delete {
  background: rgba(239, 68, 68, 0.85) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px);
}

.pc-delete:hover {
  background: var(--danger) !important;
  transform: scale(1.05);
}

.pc-media-count {
  position: absolute;
  bottom: var(--s-2);
  inset-inline-end: var(--s-2);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.pc-media-count::before {
  content: '🖼 ';
}

/* Placeholder للنصوص بدون صور */
.pc-media-text {
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-muted));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  gap: var(--s-2);
}

[data-theme="dark"] .pc-media-text {
  background: linear-gradient(135deg, var(--bg-muted), var(--bg-elevated));
}

.pc-media-text-icon {
  font-size: 2.5rem;
  opacity: 0.4;
}

.pc-media-text-snippet {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  font-weight: 500;
  opacity: 0.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

/* تم نقل النوع و التصنيف إلى pc-body بدل overlay على الصورة */
.pc-overlay-chips { display: none !important; }

/* Chips row في الـ body (نوع + تصنيف) */
.pc-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.pc-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* ألوان مخصصة لكل نوع منشور */
.pc-type-video {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.25);
}

[data-theme="dark"] .pc-type-video {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

.pc-type-photo {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
  border-color: rgba(2, 132, 199, 0.25);
}

[data-theme="dark"] .pc-type-photo {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.pc-type-link {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.25);
}

[data-theme="dark"] .pc-type-link {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.3);
}

.pc-type-live {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.4);
  animation: live-pulse-bg 2s ease-in-out infinite;
}

@keyframes live-pulse-bg {
  0%, 100% { background: rgba(220, 38, 38, 0.15); }
  50% { background: rgba(220, 38, 38, 0.25); }
}

/* Body */
.pc-body {
  flex: 1 1 auto;
  padding: var(--s-4);
  padding-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 0;
  overflow: hidden;
}

.pc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex-shrink: 0;
}

.pc-page-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.pc-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.pc-category-row {
  flex-shrink: 0;
}

.pc-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--r-full);
  white-space: nowrap;
}

[data-theme="dark"] .pc-category-chip {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

.pc-text {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 6;       /* زدنا 4 → 6 سطور */
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  word-break: break-word;
}

.pc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  margin-top: auto;
}

.pc-engagement {
  display: flex;
  gap: var(--s-3);
  flex-shrink: 0;
}

.pc-eng {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pc-eng span { direction: ltr; }
.pc-eng svg { color: var(--text-muted); }

.pc-eng.high { color: var(--accent); }
.pc-eng.high svg { color: var(--accent); fill: var(--accent); }

.pc-eng.has-detail { cursor: pointer; }
.pc-eng.has-detail:hover { color: var(--accent); }

.pc-eng-none {
  font-size: var(--text-xs);
  font-style: italic;
  opacity: 0.6;
}

.pc-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.pc-time svg { color: var(--text-muted); flex-shrink: 0; }
.pc-time span { direction: ltr; }

/* Mobile: tighter heights */
@media (max-width: 540px) {
  .post-card-v2 { height: 440px; }
  .pc-media { flex: 0 0 180px; height: 180px; }
  .pc-overlay-chips { top: 180px; }
}

/* Disable old post-card styles to avoid conflicts */
.post-card { display: none !important; }
.post-list-row { display: none !important; }   /* old list - replaced by v2 */

/* ============================================================
   Layout guards — تأكيد أن نوع واحد فقط من الـ items يظهر
   حسب الـ active layout. يحلّ مشكلة بقايا من layout سابق.
   ============================================================ */
.posts-grid.layout-list .post-card-v2 {
  display: none !important;
}

.posts-grid.layout-cards .post-list-row-v2,
.posts-grid:not(.layout-list) .post-list-row-v2 {
  display: none !important;
}

/* ============================================================
   Post List Row V2 — Modern list layout
   ============================================================ */
.posts-grid.layout-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-2) !important;
  grid-template-columns: none !important;
}

.post-list-row-v2 {
  display: grid;
  grid-template-columns: auto 96px 1fr auto;
  gap: var(--s-3);
  align-items: stretch;
  padding: var(--s-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  position: relative;
}

.post-list-row-v2:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  background: var(--bg-subtle);
}

.lst-cb {
  align-self: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.lst-thumb {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-muted);
  flex-shrink: 0;
  align-self: stretch;
}

.lst-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lst-thumb-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-muted));
  color: var(--accent);
}

[data-theme="dark"] .lst-thumb-placeholder {
  background: linear-gradient(135deg, var(--bg-muted), var(--bg-elevated));
  color: var(--accent);
}

.lst-thumb-icon {
  opacity: 0.5;
  display: grid;
  place-items: center;
}

.lst-play {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  pointer-events: none;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
}

.lst-play-icon {
  width: 12px;
  height: 12px;
  color: white;
  margin-inline-start: 2px;
}

.lst-count {
  position: absolute;
  bottom: 4px;
  inset-inline-end: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 1px 6px;
  border-radius: var(--r-full);
  font-size: 0.65rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.lst-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  justify-content: space-between;
}

.lst-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.lst-page {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.lst-text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.lst-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.lst-engagement {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.lst-eng {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lst-eng span { direction: ltr; }
.lst-eng svg { color: var(--text-muted); flex-shrink: 0; }

.lst-time {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.lst-time svg { color: var(--text-muted); }
.lst-time span { direction: ltr; }

.lst-delete {
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  flex-shrink: 0;
}

.lst-delete:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

@media (max-width: 640px) {
  .post-list-row-v2 {
    grid-template-columns: auto 64px 1fr;
    gap: var(--s-2);
  }
  .lst-thumb { width: 64px; height: 64px; }
  .lst-delete {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: var(--s-1);
  }
  .lst-page { max-width: 100%; }
  .lst-footer { gap: var(--s-2); }
}

/* ============================================================
   Post Detail Modal V2 — Full rebuild
   ============================================================ */
.post-detail-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.pdv-header {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-muted));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.pdv-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .pdv-avatar { color: var(--gray-900); }

.pdv-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdv-page-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
}

.pdv-time-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.pdv-time-row svg { color: var(--text-muted); }

.pdv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.pdv-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.pdv-flag-info {
  background: var(--info-soft);
  color: var(--info);
  border: 1px solid var(--info);
}

.pdv-flag-warn {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn);
}

/* Section general */
.pdv-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
}

.pdv-section-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdv-section-title svg { color: var(--accent); flex-shrink: 0; }

.pdv-text {
  font-size: var(--text-md);
  line-height: 1.85;
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
}

/* Stats */
.pdv-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

.pdv-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--s-3);
  background: var(--bg-muted);
  border-radius: var(--r-md);
  text-align: center;
}

.pdv-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}

.pdv-stat-heart { background: var(--danger-soft); color: var(--danger); }
.pdv-stat-chat { background: var(--info-soft); color: var(--info); }
.pdv-stat-share { background: var(--success-soft); color: var(--success); }

.pdv-stat-num {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
  direction: ltr;
}

.pdv-stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
}

/* Reactions breakdown pills (في detail) */
.reactions-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
}

.reaction-pill strong {
  color: var(--accent);
  direction: ltr;
  font-weight: 700;
}

/* Hashtags */
.hashtags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hashtag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--accent-ring);
}

/* External links */
.external-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.external-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--accent);
  text-decoration: none;
  font-size: var(--text-sm);
  word-break: break-all;
  transition: all var(--d-fast) var(--ease);
}

.external-links a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  text-decoration: none;
}

/* Comments list */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-height: 400px;
  overflow-y: auto;
}

.comment-item {
  background: var(--bg-muted);
  border-radius: var(--r-md);
  padding: var(--s-3);
}

.comment-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.comment-head strong { color: var(--text); font-size: var(--text-sm); }
.comment-time { font-size: var(--text-xs); color: var(--text-muted); }

.comment-likes {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-inline-start: auto;
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 600;
}

.comment-text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: break-word;
}

.comment-replies {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* Actions row */
.pdv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
}

.pdv-actions button,
.pdv-actions .btn-fb {
  flex: 1;
  min-width: 140px;
}

.btn-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3);
  background: linear-gradient(135deg, #1877F2, #0866FF);
  color: white !important;
  border: none;
  border-radius: var(--r-md);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none !important;
  transition: all var(--d-fast) var(--ease);
  box-shadow: 0 4px 12px -2px rgba(24, 119, 242, 0.4);
}

.btn-fb:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -2px rgba(24, 119, 242, 0.5);
  text-decoration: none !important;
}

.pdv-actions .btn-secondary svg,
.pdv-actions .btn svg { flex-shrink: 0; }

/* Meta details */
.pdv-meta {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}

.pdv-meta summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.pdv-meta summary svg { color: var(--text-muted); }

.pdv-meta[open] summary {
  color: var(--accent);
  margin-bottom: var(--s-3);
}

.pdv-meta[open] summary svg { color: var(--accent); }

.pdv-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  font-size: var(--text-xs);
}

.pdv-meta-grid > div {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pdv-meta-grid span {
  color: var(--text-muted);
  font-weight: 500;
}

.pdv-meta-grid code {
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  word-break: break-all;
}

.raw-json-view {
  background: #0f172a;
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  margin-top: var(--s-2);
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}

@media (max-width: 640px) {
  .pdv-stats { grid-template-columns: 1fr; gap: var(--s-2); }
  .pdv-stat { flex-direction: row; justify-content: flex-start; }
  .pdv-stat-icon { margin-bottom: 0; }
  .pdv-meta-grid { grid-template-columns: 1fr; }
  .pdv-actions { flex-direction: column; }
  .pdv-actions button, .pdv-actions .btn-fb { width: 100%; }
}

/* ============================================================
   Post Detail Modal — Header card مميز (legacy)
   ============================================================ */
.post-detail-header {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-muted));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
}

.post-detail-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .post-detail-avatar { color: var(--gray-900); }

.post-detail-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-detail-page {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
}

.post-detail-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.post-detail-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}

/* ============================================================
   Post Detail Modal — تحسينات
   ============================================================ */
.detail-section {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

.detail-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.detail-section h3 {
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

.detail-text {
  font-size: var(--text-md);
  line-height: 1.85;
  color: var(--text);
  background: var(--bg-muted);
  padding: var(--s-4);
  border-radius: var(--r-md);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
   Export Modal V2 — Full rebuild with SVG icons
   ============================================================ */
.export-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Banner at top */
.export-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.export-banner.filtered {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.export-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--bg-elevated);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.export-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.export-banner-text strong {
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 700;
}

.export-banner-text span {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.export-banner-text strong strong {
  color: var(--accent);
  font-size: var(--text-md);
  direction: ltr;
}

/* Block container */
.export-block {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.export-block-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

.export-block-title svg {
  color: var(--accent);
  flex-shrink: 0;
}

.export-block-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.export-block-title-row > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.export-block-actions {
  display: flex;
  gap: var(--s-1);
}

.export-block-help {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
}

/* Format cards (3 options: Excel/CSV/JSON) */
.export-formats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

.export-format {
  cursor: pointer;
}

.export-format input { display: none; }

.export-format-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--s-3);
  background: var(--bg-muted);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
  transition: all var(--d-fast) var(--ease);
}

.export-format:hover .export-format-card {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.export-format input:checked + .export-format-card {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.export-format-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}

.export-format-icon.excel {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

[data-theme="dark"] .export-format-icon.excel {
  background: rgba(52, 211, 153, 0.18);
  color: #34d399;
}

.export-format-icon.csv {
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
}

[data-theme="dark"] .export-format-icon.csv {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
}

.export-format-icon.json {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}

[data-theme="dark"] .export-format-icon.json {
  background: rgba(167, 139, 250, 0.18);
  color: #a78bfa;
}

.export-format-card strong {
  font-size: var(--text-sm);
  color: var(--text);
}

.export-format-card small {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Fields list */
.export-fields {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-1);
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.export-add-row {
  display: flex;
  gap: var(--s-2);
}

.export-add-row input { flex: 1; }

/* Grid 2 columns */
.export-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.export-grid-2 > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

@media (max-width: 540px) {
  .export-grid-2 { grid-template-columns: 1fr; }
  .export-formats { grid-template-columns: 1fr; }
}

/* Limit row */
.export-limit-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

/* Actions */
.export-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
}

.export-actions .btn { min-width: 120px; }

@media (max-width: 540px) {
  .export-actions { flex-direction: column-reverse; }
  .export-actions .btn { width: 100%; }
}

/* ============================================================
   Pages Manager V2 — Modern + bulk + SVG icons
   ============================================================ */
.pages-manager-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.pmv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.pmv-toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--border-strong);
}

.pmv-search-row {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

.pmv-search {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.pmv-search > svg:first-child {
  position: absolute;
  inset-inline-start: var(--s-3);
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}

.pmv-search input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  padding-inline-start: 38px;
  font-size: var(--text-base);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.pmv-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.pmv-search-clear {
  position: absolute;
  inset-inline-end: var(--s-2);
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
}

.pmv-search-clear:hover { background: var(--bg-muted); color: var(--text); }

.pmv-count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

/* Bulk action bar */
.pmv-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  flex-wrap: wrap;
  animation: fadeIn var(--d-fast) var(--ease);
}

.pmv-bulk-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.pmv-bulk-checkbox input { accent-color: var(--accent); cursor: pointer; }

.pmv-bulk-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* Quick actions row */
.pmv-quick-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.pmv-quick-spacer { flex: 1; }

/* Pages list */
.pmv-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Page row */
.page-row {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all var(--d-fast) var(--ease);
}

.page-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.page-row.expanded {
  border-color: var(--accent);
}

.page-row-head {
  display: flex !important;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  width: 100%;
}

.page-bulk-cb {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.page-row-summary {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
}

.page-row-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.page-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.page-meta-chip svg { color: var(--text-muted); flex-shrink: 0; }

.page-src-apify {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.25);
}

[data-theme="dark"] .page-src-apify {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}

.page-src-rss {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success);
}

/* Action buttons (modern square 32px) */
.page-row-action {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
}

.page-row-action:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border-strong);
}

.page-row-action-danger {
  color: var(--danger);
  border-color: var(--danger-soft);
}

.page-row-action-danger:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.page-row.expanded .page-collapse-btn .chev {
  transform: rotate(180deg);
}

.chev { transition: transform var(--d-fast) var(--ease); }

/* Body (form) */
.page-row-body {
  padding: var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.page-row-body[hidden] { display: none; }

.page-row-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
}

/* Footer */
.pmv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}

.pmv-help {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
  flex: 1;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .pmv-toolbar { flex-direction: column; align-items: stretch; }
  .pmv-toolbar > * { width: 100%; justify-content: center; }
  .pmv-toolbar-divider { display: none; }
  .pmv-bulk-bar { flex-direction: column; align-items: stretch; }
  .pmv-quick-actions { flex-direction: column; align-items: stretch; }
  .pmv-quick-spacer { display: none; }
  .pmv-search-row { flex-direction: column; }
  .pmv-footer { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Export Modal — تحسينات (legacy keep)
   ============================================================ */
.export-form,
.export-modal {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.export-section {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
}

.export-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.export-section-head h4 {
  font-size: var(--text-md);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
}

.export-section-actions {
  display: flex;
  gap: var(--s-1);
}

.export-formats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-2);
}

.format-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--s-3);
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  text-align: center;
}

.format-option:hover {
  border-color: var(--border-strong);
}

.format-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.format-option input { display: none; }

.format-option .format-icon {
  font-size: 1.4rem;
  color: var(--accent);
}

.format-option strong {
  font-size: var(--text-sm);
  color: var(--text);
}

.format-option small {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.export-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  padding: var(--s-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.export-field-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  font-size: var(--text-sm);
  transition: background var(--d-fast) var(--ease);
}

.export-field-item:hover { background: var(--bg-muted); }

.export-field-item.field-on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.export-field-item .drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 14px;
  user-select: none;
}

.export-field-item .field-name {
  flex: 1;
}

.export-field-item .field-toggle {
  margin-inline-start: auto;
  font-size: 14px;
  color: var(--text-muted);
}

.export-field-item.field-on .field-toggle { color: var(--accent); }

.export-add-custom {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.export-add-custom input { flex: 1; }

.export-actions {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

/* Detail media grid (في modal تفاصيل المنشور) */
.detail-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s-2);
}

.detail-media-grid .media-item {
  position: relative;
  aspect-ratio: 1 / 1;
  height: 160px !important;
  max-height: 160px !important;
  min-height: 160px !important;
  width: 100%;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}

.detail-media-grid .media-item.video-inline {
  cursor: default;
  aspect-ratio: 16/9;
  height: auto !important;
  max-height: 280px !important;
}

.detail-media-grid .media-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: black;
}

/* Reactions breakdown */
.reactions-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 500;
}

.reaction-pill strong {
  color: var(--accent);
  direction: ltr;
}

/* Comments list */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-height: 400px;
  overflow-y: auto;
  padding-inline-end: var(--s-2);
}

.comment-item {
  background: var(--bg-muted);
  border-radius: var(--r-md);
  padding: var(--s-3);
}

.comment-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.comment-head strong {
  font-size: var(--text-sm);
  color: var(--text);
}

.comment-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.comment-likes {
  font-size: var(--text-xs);
  color: var(--accent);
  margin-inline-start: auto;
}

.comment-text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: break-word;
}

.comment-replies {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* Lightbox image (overlay click-to-zoom) */
.media-image {
  background: transparent;
  border: 1px solid var(--border);
  cursor: zoom-in;
  padding: 0;
}

.video-external {
  position: relative;
  display: block;
  cursor: pointer;
}

.video-external img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-ext-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--gray-700), var(--gray-900));
}

.video-ext-label {
  position: absolute;
  bottom: var(--s-2);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.play-overlay {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.play-overlay::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent white;
  margin-inline-start: 4px;
}

/* ============================================================
   Media Library V2 — إعادة بناء كاملة
   ============================================================ */
.media-lib-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.media-lib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.media-lib-stats {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.ml-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-width: 90px;
  text-align: center;
}

.ml-stat-num {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  direction: ltr;
}

.ml-stat-lbl {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
}

.ml-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-muted);
  padding: 4px;
  border-radius: var(--r-md);
  width: fit-content;
}

.ml-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  font-family: inherit;
}

.ml-tab:hover { color: var(--text); }
.ml-tab.active {
  background: var(--bg-elevated);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

.ml-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--r-full);
}

.ml-tab.active .ml-tab-count {
  background: var(--accent-soft);
  color: var(--accent);
}

.ml-pane[hidden] { display: none; }

.ml-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-2);
}

.ml-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  height: 180px;
  width: 100%;
  background: var(--bg-muted);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  border: 1px solid var(--border);
}

.ml-tile:hover {
  transform: scale(1.03);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  z-index: 5;
}

.ml-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ml-tile-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ml-tile-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--gray-700), var(--gray-900));
}

.ml-tile-play {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.ml-tile-play::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent white;
  margin-inline-start: 4px;
}

.ml-tile-type-badge {
  position: absolute;
  top: var(--s-2);
  inset-inline-start: var(--s-2);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ml-tile-overlay {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: var(--s-3) var(--s-2) var(--s-2);
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.4) 60%, transparent);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
  pointer-events: none;
}

.ml-tile:hover .ml-tile-overlay {
  opacity: 1;
}

.ml-tile-page {
  font-size: var(--text-xs);
  font-weight: 700;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ml-tile-date {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.img-broken { background: var(--bg-muted); }
.img-broken::before {
  content: '🖼';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
  opacity: 0.3;
}

@media (max-width: 768px) {
  .ml-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .ml-tile { height: 140px; }
}

@media (max-width: 540px) {
  .ml-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .ml-tile { height: 110px; }
  .ml-tile-overlay { opacity: 1; padding: 6px 4px; }
  .ml-tile-page { font-size: 0.65rem; }
}

/* ============================================================
   Media library — old (keep for backward compat)
   ============================================================ */
.media-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: var(--s-3) !important;
  align-items: start !important;
}

.media-item {
  position: relative !important;
  width: 100% !important;
  height: 180px !important;
  max-height: 180px !important;
  min-height: 180px !important;
  aspect-ratio: auto !important;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden !important;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
}

.media-item:hover {
  border-color: var(--accent);
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
  z-index: 5;
}

.media-item > img,
.media-item > video,
.media-item > picture,
.media-item > picture > img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

@media (max-width: 768px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }
  .media-item {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
  }
}

@media (max-width: 540px) {
  .media-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  .media-item {
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
  }
}

/* ============================================================
   Clear/Delete Posts Modal V2
   ============================================================ */
.clear-modal-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.clear-warn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(90deg, var(--warn-soft), transparent);
  border: 1px solid var(--warn);
  border-inline-start: 4px solid var(--warn);
  border-radius: var(--r-md);
}

.clear-warn-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--warn);
  color: white;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.clear-warn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.clear-warn-text strong {
  font-size: var(--text-md);
  color: var(--warn);
  font-weight: 700;
}

.clear-warn-text span {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.clear-section-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

/* Option card */
.clear-option-v2 {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--d-fast) var(--ease);
}

.clear-option-v2:hover {
  border-color: var(--border-strong);
}

.clear-option-v2.clear-option-danger {
  border-color: var(--danger-soft);
  background: linear-gradient(135deg, var(--danger-soft), var(--bg-elevated));
}

.clear-option-v2.clear-option-danger:hover {
  border-color: var(--danger);
}

.clear-option-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--bg-muted);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.clear-option-danger .clear-option-icon {
  background: var(--danger);
  color: white;
}

.clear-option-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.clear-option-content h4 {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.clear-option-content p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.clear-option-content p strong {
  color: var(--accent);
  direction: ltr;
}

.clear-option-danger .clear-option-content p strong {
  color: var(--danger);
}

.clear-option-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-2);
}

.clear-option-controls .select {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.clear-option-controls .btn {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .clear-option-v2 {
    flex-direction: column;
  }
  .clear-option-icon {
    align-self: flex-start;
  }
  .clear-option-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .clear-option-controls .select,
  .clear-option-controls .btn {
    width: 100%;
    max-width: none;
  }
}

/* ============================================================
   Job Detail Modal (history detail)
   ============================================================ */
.job-detail {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.job-detail-meta {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.job-detail-meta .meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.meta-chip svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.meta-chip code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
}

.meta-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  color: var(--text);
}

.meta-stat svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.meta-stat strong {
  color: var(--accent);
  font-weight: 700;
  font-size: var(--text-md);
  direction: ltr;
}

.job-detail-toolbar strong {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.job-detail-toolbar strong svg { color: var(--text-muted); }

.job-detail-meta .meta-row strong {
  color: var(--text);
}

.job-detail-meta .meta-params {
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.job-detail-meta .meta-params code {
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
}

.job-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}

.job-detail-toolbar strong {
  font-size: var(--text-md);
  color: var(--text);
}

.job-detail-tools {
  display: flex;
  gap: var(--s-2);
}

.job-detail-log {
  background: #0f172a;
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--s-4);
  border-radius: var(--r-md);
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: pre-wrap;
  line-height: 1.6;
}

[data-theme="light"] .job-detail-log {
  background: #1e293b;
}

.job-detail-log .log-line {
  display: flex;
  gap: var(--s-2);
  padding: 2px 0;
}

.log-line .log-time {
  color: #64748b;
  font-size: var(--text-xs);
  flex-shrink: 0;
  min-width: 60px;
}

.log-line.log-info { color: #cbd5e1; }
.log-line.log-success { color: #34d399; }
.log-line.log-warn { color: #fbbf24; }
.log-line.log-error { color: #f87171; }

/* ============================================================
   Print
   ============================================================ */
@media print {
  .sidebar, .topbar, .mobile-bottom-nav,
  .filters-section, .content-toolbar,
  .modal-overlay, .lightbox { display: none !important; }
  .post-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .analytics-stamp { display: block; padding: var(--s-4); border-bottom: 1px solid #ccc; }
  [data-no-print] { display: none !important; }
  .analytics-card { break-inside: avoid; }
  .analytics-section { break-inside: avoid; box-shadow: none; }
}

/* ============================================================
   Print (legacy keep)
   ============================================================ */
@media print {
  .sidebar, .topbar, .mobile-bottom-nav,
  .filters-section, .content-toolbar,
  .modal-overlay, .lightbox { display: none !important; }
  .post-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}