/* ══════════════════════════════════════════════════════════════════════
   NEON CORE OVERRIDE (2026-10-08) — تحويل متغيرات الهوية الأساسية للوضع النيون
   أساس التطبيق كان مبني على متغيرات فاتحة (--bg/--surface/--ink/...).
   هنا بنعيد تعريفها كلها بالألوان النيون فيغلب أي ثيم وأي prefers-color-scheme،
   وكل مكونات التطبيق (شات/كانفس/جداول/مودالات/ريل/توستات) بتتلون تلقائيًا لأنها كلها بتقرأ من نفس المتغيرات.
   ══════════════════════════════════════════════════════════════════════ */
:root,
html[data-theme],
html[data-theme="pearl"],
html[data-theme="mint"],
html[data-theme="sunrise"] {
    /* أسطح */
    --bg: #020806 !important;
    --bg-2: #06130f !important;
    --surface: rgba(5, 22, 16, .88) !important;
    --surface-2: rgba(8, 31, 22, .92) !important;
    --surface-solid: #05160f !important;
    --sunken: #03110b !important;
    /* حدود */
    --line: rgba(37, 255, 113, .26) !important;
    --line-2: rgba(37, 255, 113, .18) !important;
    --line-3: rgba(37, 255, 113, .40) !important;
    /* نصوص */
    --ink: #effff4 !important;
    --ink-2: #cfe8d6 !important;
    --ink-3: #9dbfa8 !important;
    --ink-4: #7a9a84 !important;
    /* الهوية */
    --iris: #25ff71 !important;
    --violet: #55f7d1 !important;
    --sky: #55f7d1 !important;
    --iris-deep: #0f7a43 !important;
    --on-solid: #04150c !important;
    --solid-shade: #00160a !important;
    --brand: linear-gradient(115deg, #0b9b4d 0%, #12b95c 58%, #25ff71 100%) !important;
    --brand-h: linear-gradient(115deg, #06703a 0%, #0d9b4c 58%, #1bd765 100%) !important;
    --brand-tint: linear-gradient(135deg, rgba(37,255,113,.12), rgba(37,255,113,.05)) !important;
    --iris-soft: rgba(37, 255, 113, .14) !important;
    --iris-glow: rgba(37, 255, 113, .45) !important;
    /* حالات */
    --ok: #25ff71 !important;
    --ok-bg: rgba(37, 255, 113, .12) !important;
    --ok-ink: #86ffb6 !important;
    --warn: #ffb020 !important;
    --warn-bg: rgba(255, 176, 32, .12) !important;
    --warn-ink: #ffcf7d !important;
    --bad: #ff6682 !important;
    --bad-bg: rgba(255, 102, 130, .12) !important;
    --bad-ink: #ff9db1 !important;
    --info: #55f7d1 !important;
    --info-bg: rgba(85, 247, 209, .12) !important;
    --info-ink: #8ffbe4 !important;
    /* ظلال + لمحات */
    --sh-1: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .30) !important;
    --sh-2: 0 4px 12px -4px rgba(0, 0, 0, .45), 0 2px 6px -2px rgba(0, 0, 0, .35) !important;
    --sh-3: 0 10px 26px -10px rgba(0, 0, 0, .55), 0 4px 10px -6px rgba(0, 0, 0, .40) !important;
    --sh-4: 0 24px 60px -22px rgba(0, 0, 0, .65), 0 0 30px rgba(37,255,113,.08) !important;
    --glow: 0 10px 28px -12px rgba(37, 255, 113, .40) !important;
    --edge-light: rgba(168, 255, 62, .12) !important;
    --edge: rgba(37, 255, 113, .16) !important;
    --edge-soft: rgba(37, 255, 113, .08) !important;
    --focus-ring: rgba(37, 255, 113, .38) !important;
    --top-light: inset 0 1px 0 rgba(168, 255, 62, .10) !important;
    /* الشريط العلوي/واجهة القوائم الفاتحة */
    --chrome-bg: rgba(3, 17, 11, .92) !important;
    --chrome-ink: #cfe8d6 !important;
    --chrome-ink-hover: #effff4 !important;
    --chrome-ink-on: #25ff71 !important;
    --chrome-ink-3: #7a9a84 !important;
    --chrome-icon: #4f8a63 !important;
    --chrome-line: rgba(37, 255, 113, .22) !important;
    --chrome-hover: rgba(37, 255, 113, .10) !important;
    --chrome-on-bg: rgba(37, 255, 113, .16) !important;
    --chrome-on-ink: #25ff71 !important;
    --chrome-badge-bg: rgba(37, 255, 113, .10) !important;
    --chrome-on-solid: #04150c !important;
    /* القائمة الجانبية */
    --side-bg: #04140d !important;
    --side-line: rgba(37, 255, 113, .22) !important;
    --side-ink: #d7efdd !important;
    --side-ink-3: #7a9a84 !important;
    --side-icon: #3f7a58 !important;
    --side-hover: rgba(37, 255, 113, .10) !important;
    --side-active: rgba(37, 255, 113, .16) !important;
    --toast-ink: #effff4 !important;
    /* هيرو اللوحة */
    --hero-1: #03150c !important;
    --hero-2: #0a3f22 !important;
    --hero-3: #0f5e31 !important;
    --hero-ink: #effff4 !important;
    --hero-ink-2: #cfe8d6 !important;
    --hero-btn-ink: #effff4 !important;
    --hero-btn-bg: rgba(37, 255, 113, .12) !important;
    --hero-btn-line: rgba(37, 255, 113, .45) !important;
    --hero-btn-primary-bg: #25ff71 !important;
    --hero-btn-primary-ink: #04150c !important;
    /* ريل الصفحات */
    --rail-bg: #03110b !important;
    --rail-panel: rgba(6, 26, 17, .94) !important;
    --rail-ink: #e6ffec !important;
    --rail-ink-2: #a7c9b2 !important;
    --rail-ink-3: #71967b !important;
    --rail-line: rgba(37, 255, 113, .25) !important;
    --rail-input: #02100a !important;
    --rail-accent: #25ff71 !important;
    --rail-hover: rgba(37, 255, 113, .12) !important;
    --rail-on: rgba(37, 255, 113, .18) !important;
    /* كانفس الأتمتة */
    --cv-bg: #04120b !important;
    --cv-panel: rgba(5, 22, 16, .94) !important;
    --cv-ink: #e9fff0 !important;
    --cv-ink-2: #bfe0c9 !important;
    --cv-line: rgba(37, 255, 113, .26) !important;
    /* طبقة light-* (المستخدمة في قواعد قديمة بتخلي الصفحة فاتحة) */
    --light-bg: #020806 !important;
    --light-surface: #05160f !important;
    --light-surface-2: #071b12 !important;
    --light-line: rgba(37, 255, 113, .22) !important;
    --light-text: #effff4 !important;
    --light-muted: #9dbfa8 !important;
    --light-blue: #25ff71 !important;
    --light-blue-2: #1fd464 !important;
    --light-teal: #55f7d1 !important;
    /* توكنز قديمة r-* / polish / ml / cy / od */
    --r-navy: #020806 !important;
    --r-ink: #effff4 !important;
    --r-muted: #9dbfa8 !important;
    --r-line: rgba(37, 255, 113, .22) !important;
    --r-surface: rgba(5, 22, 16, .90) !important;
    --r-brand: linear-gradient(115deg, #0b9b4d 0%, #25ff71 100%) !important;
    --polish-accent: #25ff71 !important;
    --polish-accent-2: #55f7d1 !important;
    --polish-glass: rgba(5, 22, 16, .88) !important;
    --ml-primary: #25ff71 !important;
    --ml-primary-2: #1fd464 !important;
    --ml-cyan: #55f7d1 !important;
    --ml-ink: #effff4 !important;
    --ml-muted: #9dbfa8 !important;
    --ml-line: rgba(37, 255, 113, .22) !important;
    --cy-bg: #020806 !important;
    --cy-panel: rgba(5, 22, 16, .86) !important;
    --cy-panel2: rgba(7, 28, 19, .95) !important;
    --cy-line: rgba(37, 255, 113, .25) !important;
    --cy-text: #effff4 !important;
    --cy-muted: #9dbfa8 !important;
    --cy-blue: #55f7d1 !important;
    --cy-cyan: #55f7d1 !important;
    --cy-glow: rgba(37, 255, 113, .45) !important;
    --od-accent: #25ff71 !important;
    --od-accent-deep: #0f7a43 !important;
    --od-accent-fill: rgba(37, 255, 113, .14) !important;
    --od-accent-soft: rgba(37, 255, 113, .10) !important;
    --od-bg-1: #03110b !important;
    --od-bg-2: #05180f !important;
    --od-line: rgba(37, 255, 113, .25) !important;
    --od-line-2: rgba(37, 255, 113, .16) !important;
    --od-surface: rgba(5, 22, 16, .92) !important;
    --od-surface-2: rgba(8, 31, 22, .94) !important;
    --od-chrome-1: #03110b !important;
    --od-chrome-2: #05180f !important;
    --od-fg: #effff4 !important;
    --od-muted: #9dbfa8 !important;
    --od-top-light: inset 0 1px 0 rgba(168, 255, 62, .10) !important;
    --stat-accent: #25ff71 !important;
    color-scheme: dark !important;
}
/* الأرضية نفسها (html/body) مهما كان الثيم */
html, html:root, html[data-theme] {
    background-color: #020806 !important;
}
html body, html:root body, html[data-theme] body {
    background:
        radial-gradient(900px 520px at 78% -10%, rgba(0, 217, 107, .13), transparent 62%),
        radial-gradient(720px 460px at 10% 108%, rgba(37, 255, 113, .10), transparent 65%),
        linear-gradient(135deg, #010403 0%, #03110b 52%, #020806 100%) !important;
    color: #effff4 !important;
}

/* RADDAN NEON GREEN — shared visual system
   Reference: dark glass dashboard, acid-green glow, angular tech panels. */
:root {
  --rdn-bg: #020806;
  --rdn-bg-2: #06130f;
  --rdn-panel: rgba(5, 22, 16, .88);
  --rdn-panel-2: rgba(8, 31, 22, .82);
  --rdn-line: rgba(37, 255, 113, .28);
  --rdn-line-strong: rgba(37, 255, 113, .72);
  --rdn-ink: #effff4;
  --rdn-ink-2: #b8d9c1;
  --rdn-ink-3: #71967b;
  --rdn-neon: #25ff71;
  --rdn-neon-2: #00d96b;
  --rdn-lime: #a8ff3e;
  --rdn-cyan: #55f7d1;
  --rdn-danger: #ff6682;
  --rdn-shadow: 0 18px 60px rgba(0,0,0,.48), 0 0 28px rgba(37,255,113,.08);
  --rdn-glow: 0 0 8px rgba(37,255,113,.82), 0 0 24px rgba(37,255,113,.26);
  --rdn-radius: 14px;
  color-scheme: dark;
}

html { background: var(--rdn-bg) !important; }
body, body.rd-body {
  background:
    radial-gradient(900px 520px at 78% -10%, rgba(0, 217, 107, .13), transparent 62%),
    radial-gradient(720px 460px at 10% 108%, rgba(37, 255, 113, .10), transparent 65%),
    linear-gradient(135deg, #010403 0%, #03110b 52%, #020806 100%) !important;
  color: var(--rdn-ink) !important;
  font-family: "Segoe UI", Tahoma, "Noto Kufi Arabic", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  min-height: 100vh;
}
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .75;
  background-image:
    linear-gradient(rgba(37,255,113,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,255,113,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}
body > * { position: relative; z-index: 1; }

/* Shared glass/tech surfaces */
.card, .feature, .price, .step, .mock, .rd-card, .rd-glass,
.login-card, .panel, .box, .section-card {
  background: linear-gradient(145deg, rgba(8, 34, 23, .92), rgba(2, 12, 8, .94)) !important;
  border: 1px solid var(--rdn-line) !important;
  border-radius: var(--rdn-radius) !important;
  box-shadow: var(--rdn-shadow), inset 0 1px 0 rgba(168,255,62,.10) !important;
  backdrop-filter: blur(16px) saturate(135%);
}
.card::before, .feature::before, .price::before, .step::before {
  background: linear-gradient(90deg, transparent, rgba(37,255,113,.75), transparent) !important;
}
.card:hover, .feature:hover, .price:hover, .step:hover {
  border-color: var(--rdn-line-strong) !important;
  box-shadow: var(--rdn-shadow), 0 0 22px rgba(37,255,113,.14) !important;
}

/* Dashboard shell */
.container { background: transparent !important; min-height: 100vh !important; padding-inline-start: 250px !important; padding-inline-end: 0 !important; }
.sidebar, aside.sidebar {
  background:
    linear-gradient(180deg, rgba(5,25,17,.98), rgba(1,9,6,.98)) !important;
  color: var(--rdn-ink) !important;
  border-left: 1px solid var(--rdn-line-strong) !important;
  box-shadow: -12px 0 38px rgba(0,0,0,.35), inset 1px 0 0 rgba(168,255,62,.11) !important;
}
.sidebar h2, .brand, .brand span, .hdr-brand, .hdr-brand b, .header h1 {
  color: var(--rdn-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 0 16px rgba(37,255,113,.28) !important;
}
.brand small, .brand-sub, .build-tag, .nav-group, .nav-group span { color: var(--rdn-ink-3) !important; }
.nav-item, .nav-more-toggle {
  background: rgba(8, 36, 24, .68) !important;
  color: var(--rdn-ink-2) !important;
  border: 1px solid rgba(37,255,113,.16) !important;
  border-radius: 11px !important;
  transition: .2s ease !important;
}
.nav-item:hover, .nav-more-toggle:hover { background: rgba(20, 73, 43, .72) !important; color: var(--rdn-ink) !important; border-color: var(--rdn-line-strong) !important; transform: translateX(-3px); }
.nav-item.active { background: linear-gradient(100deg, rgba(37,255,113,.24), rgba(0,217,107,.08)) !important; color: var(--rdn-neon) !important; border-color: var(--rdn-neon) !important; box-shadow: var(--rdn-glow) !important; }
.nav-item .ni, .icon-btn, .cm-btn, .fpb-btn, .fpb-tab, .nav-toggle, .theme-launcher {
  color: var(--rdn-neon) !important;
  background: rgba(0, 39, 22, .82) !important;
  border: 1px solid var(--rdn-line) !important;
  box-shadow: inset 0 0 10px rgba(37,255,113,.08), 0 0 10px rgba(37,255,113,.08) !important;
}
.main-content { background: transparent !important; }
.header {
  background: rgba(2, 13, 9, .82) !important;
  color: var(--rdn-ink) !important;
  border-bottom: 1px solid var(--rdn-line) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(18px) !important;
}
.content { background: transparent !important; }
.hdr-page, .theme-launcher, .status-badge {
  background: rgba(7, 43, 27, .72) !important;
  color: var(--rdn-ink-2) !important;
  border: 1px solid var(--rdn-line) !important;
}
.status-online { background: rgba(37,255,113,.14) !important; color: var(--rdn-neon) !important; border-color: var(--rdn-neon) !important; box-shadow: 0 0 14px rgba(37,255,113,.18) !important; }

/* Dashboard content */
.hero, .welcome, .hero-banner, .dashboard-hero {
  background:
    linear-gradient(135deg, rgba(3,22,14,.96), rgba(5,46,27,.82) 58%, rgba(10,76,38,.62)) !important;
  color: var(--rdn-ink) !important;
  border-color: var(--rdn-line-strong) !important;
  box-shadow: var(--rdn-shadow), 0 0 38px rgba(37,255,113,.10) !important;
}
.hero h1, .welcome h1, .hero-banner h1 { color: var(--rdn-ink) !important; text-shadow: var(--rdn-glow) !important; }
.card h3, .feature h3, .step h3, .price h3, .section h2, .section h3 { color: var(--rdn-ink) !important; border-color: var(--rdn-line) !important; }
.stat, .stat-card, .metric, .kpi, .customer-item, .message, .messages-list, .table-wrap {
  background: rgba(5, 28, 18, .78) !important;
  color: var(--rdn-ink-2) !important;
  border-color: rgba(37,255,113,.20) !important;
}
.stat b, .metric strong, .kpi strong, .number, .value { color: var(--rdn-neon) !important; text-shadow: 0 0 16px rgba(37,255,113,.45) !important; }
.customer-item:hover, .customer-item.selected, .message.incoming { background: rgba(16, 67, 39, .72) !important; border-color: var(--rdn-neon) !important; }
.message.outgoing { background: linear-gradient(135deg, #08763e, #064c2a) !important; color: #effff4 !important; }

/* Controls */
button, .btn, input, textarea, select {
  font-family: inherit !important;
}
button, .btn, .rd-btn {
  border-radius: 10px !important;
  border: 1px solid var(--rdn-line-strong) !important;
  background: linear-gradient(135deg, #0b9b4d, #036d36) !important;
  color: #f2fff5 !important;
  box-shadow: 0 0 14px rgba(37,255,113,.17), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
button:hover, .btn:hover, .rd-btn:hover { filter: brightness(1.16) saturate(1.12) !important; transform: translateY(-1px); }
.btn-light, .btn.ghost { background: rgba(8, 39, 25, .80) !important; color: var(--rdn-ink-2) !important; border-color: var(--rdn-line) !important; }
input, textarea, select {
  background: rgba(2, 15, 10, .88) !important;
  color: var(--rdn-ink) !important;
  border: 1px solid rgba(37,255,113,.28) !important;
  border-radius: 10px !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--rdn-neon) !important; box-shadow: 0 0 0 3px rgba(37,255,113,.14), 0 0 18px rgba(37,255,113,.16) !important; }
label, .muted, .sub, .hero-copy, .section-head p, .feature p, .step p, .price .desc, .price li, .hint, .foot { color: var(--rdn-ink-2) !important; }

/* Marketing page */
.topbar { background: rgba(2, 13, 9, .78) !important; border-color: var(--rdn-line) !important; }
.navlinks { color: var(--rdn-ink-2) !important; }
.navlinks a:hover, .kicker, .eyebrow { color: var(--rdn-neon) !important; }
.eyebrow { background: rgba(37,255,113,.10) !important; border-color: var(--rdn-line) !important; }
.hero { background: radial-gradient(circle at 12% 12%, rgba(37,255,113,.16), transparent 30%), linear-gradient(180deg, #03140c, #020806) !important; }
.hero-copy, .section-head p { color: var(--rdn-ink-2) !important; }
.mock { transform: rotate(0deg) !important; }
.mock-side { background: #02130b !important; border: 1px solid var(--rdn-line) !important; }
.mock-brand, .mock-welcome strong { color: var(--rdn-neon) !important; }
.mock-welcome, .chart { background: rgba(7,45,27,.72) !important; border-color: var(--rdn-line) !important; }
.strip, .cta-box { background: linear-gradient(120deg, #02130b, #07552d 58%, #0b9b4d) !important; }
.workflow, .pricing { background: rgba(2, 10, 7, .72) !important; }

/* Login */
.wrap .card, body:has(.wrap) .card { background: linear-gradient(145deg, rgba(8,34,23,.96), rgba(2,12,8,.96)) !important; }
body:has(.wrap) h1 { color: var(--rdn-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; text-shadow: var(--rdn-glow) !important; }
body:has(.wrap) .logo { filter: drop-shadow(0 0 24px rgba(37,255,113,.48)) !important; }
body:has(.wrap) .sub, body:has(.wrap) .role-note, body:has(.wrap) .hint, body:has(.wrap) .foot { color: var(--rdn-ink-2) !important; }
body:has(.wrap) .role-label { color: var(--rdn-neon) !important; border-color: var(--rdn-neon) !important; }

/* Splash */
body:has(.bar) { background: radial-gradient(800px 520px at 50% 0%, #064d2b, #010604 72%) !important; }
body:has(.bar) h1 { color: var(--rdn-neon) !important; text-shadow: var(--rdn-glow) !important; }
body:has(.bar) .sub, body:has(.bar) #log { color: var(--rdn-ink-2) !important; }
body:has(.bar) .bar { background: rgba(255,255,255,.10) !important; border: 1px solid var(--rdn-line) !important; }
body:has(.bar) .bar i { background: linear-gradient(90deg, #a8ff3e, #25ff71, #00a957) !important; box-shadow: var(--rdn-glow); }

/* Splash: توهج اللوجو يبقى نيون أخضر بدل الأزرق القديم */
body:has(.bar) img { filter: drop-shadow(0 18px 34px rgba(37,255,113,.45)) !important; }

/* Angular neon cuts, inspired by the reference dashboard */
.card, .hero, .feature, .price, .step, .mock, .cta-box { clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px)); }

@media (max-width: 760px) {
  .sidebar { border-left: 0 !important; }
  .card, .hero, .feature, .price, .step, .mock, .cta-box { clip-path: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* SIDEBAR BACKDROP — geometric black panels with neon-green cuts */
.sidebar, aside.sidebar {
  position: fixed !important;
  top: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  bottom: 0 !important;
  height: 100dvh !important;
  width: 250px !important;
  max-height: 100dvh !important;
  isolation: isolate !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background-color: #020806 !important;
  background-image:
    linear-gradient(180deg, rgba(1, 9, 5, .70), rgba(1, 7, 4, .88)),
    url('raddan-sidebar-bg.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  z-index: 50 !important;
}
.sidebar::before, aside.sidebar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(37,255,113,.10), transparent 34%, rgba(0,0,0,.22)),
    radial-gradient(70% 34% at 50% 8%, rgba(37,255,113,.14), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.58) 100%);
  mix-blend-mode: screen;
}
.sidebar::after, aside.sidebar::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border: 1px solid rgba(37,255,113,.22);
  box-shadow: inset 0 0 34px rgba(0,0,0,.48), inset 0 0 18px rgba(37,255,113,.06);
}
.sidebar > *, aside.sidebar > * { position: relative !important; z-index: 1 !important; }
.sidebar .nav-item, aside.sidebar .nav-item { backdrop-filter: blur(5px) !important; }

/* ══════════════════════════════════════════════════════════════════════
   تهدئة الحركة (2026-10-09) — إيقاف كل الحركات المستمرة والديكورية
   (خلفيات طايرة/نبضات/لمعات دوارة/تمايل بالماوس/مؤثرات اللمس)
   الباقي: انتقالات خفيفة سريعة (هوفر/توست/دخول الصفحة مرة واحدة).
   ══════════════════════════════════════════════════════════════════════ */
/* 1) خلفيات وهالات لا نهائية */
body::before, .container::before, .container::after, .main-content::before, .main-content::after { animation: none !important; }
.sidebar::after { animation: none !important; }
.dash-hero::after, html[data-theme] .dash-hero::after { animation: none !important; }
body::after { animation: none !important; }
/* 2) لمعان عنوان الهيرو (كان بيعدي كل 16 ثانية) */
.dash-hero .dh-title, .header h1 { animation: none !important; background-size: 100% 100% !important; }
/* 3) عناصر الهيرو الطايرة (اللوجو/الأوكس) */
html[data-theme] .dh-art img { animation: none !important; }
.dh-orb, .dh-orb.a, .dh-orb.b,
html[data-theme] .dh-orb, html[data-theme] .dh-orb.a, html[data-theme] .dh-orb.b { animation: none !important; }
/* 4) نبضات الإحصاءات وحالة الاتصال */
.stat-box::before, .stat-box::after,
html[data-theme] .stat-box::before, html[data-theme] .stat-box::after { animation: none !important; }
.status-online, .status-online::before { animation: none !important; }
.port.pulse { animation: none !important; }
/* 5) اللوجو (جلو/دوران) */
.brand-mark, .brand-mark::after { animation: none !important; }
/* 6) طبقة الـ3D: مفيش حركة نهائيًا + بقاء دخول السبلاش الناعم فقط */
.rd3-bg, .rd3-bg *, .rd-bg, .rd-bg *, .rd3-floor i, .rd3-gyro, .rd3-cube { animation: none !important; }
.rd3-logo3d { animation: pop .6s ease !important; }
/* 7) مؤثرات اللمس (ripple مع كل كليك) وتتابع النافبار عند التحميل */
.rdm-rpl { display: none !important; }
html.rdm-on .sidebar .nav-item, html.rdm-on .sidebar .nav-more-toggle { animation: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   وضوح الكتابة — إصلاح «صفحة الترحيب» وباقي الأقسام (2026-10-09)
   المستخدم لاحظ إن نصوص صفحة الترحيب غامقة على أرضية غامقة.
   السبب: كتلة «الثيم الفاتح» القديمة في index.html (raddan-pro-theme)
   بتفرض لون غامق (#183453) على الحقول وعناصر الأقسام، وبتحوّل صندوق
   «اللمسة التسويقية» (#kbBox) لأرضية فاتحة ومعاها نص فاتح — وده بيتعارض
   مع أسطح النيون الغامقة. ملف النيون آخر ملف CSS بيتحمّل، فبنصلّح هنا.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) كل حقول الإدخال داخل أقسام المحتوى: سطح غامق + نص فاتح عشان يبان */
html body .content .section:not(#automation) input:not([type="checkbox"]):not([type="radio"]),
html body .content .section:not(#automation) textarea,
html body .content .section:not(#automation) select {
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
    background: rgba(2, 15, 10, .88) !important;
    border-color: rgba(37, 255, 113, .28) !important;
}
html body .content .section:not(#automation) input[type="checkbox"],
html body .content .section:not(#automation) input[type="radio"] {
    color: var(--rdn-ink) !important;
    accent-color: var(--rdn-neon) !important;
}
html body .content .section:not(#automation) input::placeholder,
html body .content .section:not(#automation) textarea::placeholder {
    color: var(--rdn-ink-3) !important;
    -webkit-text-fill-color: var(--rdn-ink-3) !important;
    opacity: 1 !important;
}
html body .content .section:not(#automation) select option {
    background: #05160f !important;
    color: var(--rdn-ink) !important;
}

/* 2) كارت صفحة الترحيب: كل النصوص على السطح الغامق تبقى فاتحة.
   استثنينا صندوق «اللمسة التسويقية» (#kbBox) لأن أرضيته فاتحة، وأزرار
   الأساس الملوّنة اللي نصها غامق عن قصد (.btn-primary). */
#welcome .card :not(#kbBox):not(#kbBox *):not(input):not(textarea):not(select):not(option):not(.btn-primary) {
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
}

/* 3) صندوق «اللمسة التسويقية» (#kbBox): بقى زجاج نيون غامق زي باقي الثيم
   (كان تدرّج فاتح بيّض — المستخدم طلب كل البطاقات البيضا تبقى بلغة النيون).
   كل نصوصه فاتحة، التلميحات أخف، أزرار النيون تفضل خضرا غامقة بنص فاتح،
   شرائح الستايلات (#kbPresets) بقت شرائح غامقة بنص فاتح، ومعاينة الماسنجر
   (#kbPreview) بقت تليفون غامق بفقاعات زجاج نيون. */
html body .main-content .content .section#welcome .card #kbBox {
    background: linear-gradient(160deg, rgba(9, 42, 26, .97), rgba(2, 13, 8, .97)) !important;
    border: 1px solid rgba(37, 255, 113, .30) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(37, 255, 113, .06) !important;
}
html body .main-content .content .section#welcome .card #kbBox,
html body .main-content .content .section#welcome .card #kbBox * {
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
}
/* التلميحات/النصوص الثانوية جواه: أفتح قليلًا */
html body .main-content .content .section#welcome .card #kbBox .kb-sub,
html body .main-content .content .section#welcome .card #kbBox .hint-line,
html body .main-content .content .section#welcome .card #kbBox #kbHint,
html body .main-content .content .section#welcome .card #kbBox[data-ex] p,
html body .main-content .content .section#welcome .card #kbBox #kbPresets > span {
    color: var(--rdn-ink-3) !important;
    -webkit-text-fill-color: var(--rdn-ink-3) !important;
}
/* أزرار النيون جواه تفضل على هوية الثيم (سطح خضرا غامقة + نص فاتح) */
html body .main-content .content .section#welcome .card #kbBox .btn,
html body .main-content .content .section#welcome .card #kbBox .ex-toggle {
    background: linear-gradient(135deg, #0b9b4d, #036d36) !important;
    color: #f2fff5 !important;
    -webkit-text-fill-color: #f2fff5 !important;
}
html body .main-content .content .section#welcome .card #kbBox .btn *,
html body .main-content .content .section#welcome .card #kbBox .ex-toggle * {
    color: #eafff0 !important;
    -webkit-text-fill-color: #eafff0 !important;
}
/* شرائح الستايلات الجاهزة (#kbPresets): زجاج غامق بدل الأبيض */
html body .main-content .content .section#welcome .card #kbBox #kbPresets .btn {
    background: rgba(5, 30, 19, .92) !important;
    border-color: rgba(37, 255, 113, .38) !important;
    color: var(--rdn-ink-2) !important;
    -webkit-text-fill-color: var(--rdn-ink-2) !important;
    box-shadow: 0 4px 12px -8px rgba(0, 0, 0, .6) !important;
}
html body .main-content .content .section#welcome .card #kbBox #kbPresets .btn * {
    color: var(--rdn-ink-2) !important;
    -webkit-text-fill-color: var(--rdn-ink-2) !important;
}
/* معاينة الماسنجر (#kbPreview): الغلاف والفقرات كلها زجاج غامق + حدود نيون */
html body .main-content .content .section#welcome .card #kbPreview {
    background: rgba(1, 12, 8, .92) !important;
    border: 1px solid rgba(37, 255, 113, .28) !important;
    border-radius: 20px !important;
    padding: 14px !important;
}
html body .main-content .content .section#welcome .card #kbPreview * {
    background: rgba(7, 36, 23, .92) !important;
    border-color: rgba(37, 255, 113, .22) !important;
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
    box-shadow: none !important;
}

/* 4) صفحة الأتمتة — «قائمة العقد» (flow-palette): أسماء العقد فاتحة/بيضاء.
   السبب: قاعدة قديمة في index.html بتفرض #294766 على محتوى القائمة، وأرضية
   القائمة غامقة (--surface) → نص غامق على غامق. النيون آخر ملف CSS فيكسب. */
html body .content .section#automation .flow-palette,
html body .content .section#automation .flow-palette * {
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
}
/* تلميح العقدة (الوصف الصغير) يبقى ثانوي بلون فاتح مخفّف */
html body .content .section#automation .flow-palette .pal-hint {
    color: var(--rdn-ink-3) !important;
    -webkit-text-fill-color: var(--rdn-ink-3) !important;
}
/* كارت العقدة: سطح أغمق قليلًا عن القائمة + حدود نيون عشان يفصل */
html body .content .section#automation .flow-palette .pal-item {
    background: rgba(8, 36, 24, .72) !important;
    border-color: var(--rdn-line) !important;
}
html body .content .section#automation .flow-palette .pal-item:hover {
    background: rgba(20, 73, 43, .72) !important;
    border-color: var(--rdn-neon) !important;
}
/* 5) شريط الأتوميشنات (#autoBar): النص العادي/التلميحات فاتح على السطح الغامق
   (نستثني الأزرار والحقول اللي أرضيتها فاتحة ونصها غامق عن قصد). */
html body .content .section#automation #autoBar label {
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
}
html body .content .section#automation #autoBar #autoHint {
    color: var(--rdn-neon) !important;
    -webkit-text-fill-color: var(--rdn-neon) !important;
}

/* 6) القائمة الجانبية (الناحية اليمين): أزرار الناف بتقعد بلغة الثيم النيون
   مش بيضا. النسخة الحالية في index.html (raddan-nav-3d) بترغم أزرار بيضا
   بنص كحلي — بنرجعها أسطح خضرا غامقة بنص فاتح وحدود نيون خفيفة، والقسم
   النشط بتعبئة نيون متوهّجة. مكتوبة بنسختين (مع وبدون html[data-theme])
   عشان تغلب في الحالتين زي كتلة nav-3d نفسها. */
html[data-theme] body .sidebar button.nav-item.nav-3d,
html body .sidebar button.nav-item.nav-3d {
    background: rgba(8, 36, 24, .68) !important;
    border: 1px solid rgba(37, 255, 113, .16) !important;
    color: var(--rdn-ink-2) !important;
    -webkit-text-fill-color: var(--rdn-ink-2) !important;
    box-shadow: inset 0 0 0 1px rgba(37, 255, 113, .04), 0 2px 10px -8px rgba(0, 0, 0, .55) !important;
}
html[data-theme] body .sidebar button.nav-item.nav-3d:hover,
html body .sidebar button.nav-item.nav-3d:hover {
    background: rgba(20, 73, 43, .72) !important;
    border-color: rgba(37, 255, 113, .72) !important;
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
    box-shadow: 0 0 14px rgba(37, 255, 113, .12) !important;
    transform: translateY(-1px) !important;
}
html[data-theme] body .sidebar button.nav-item.nav-3d:active,
html body .sidebar button.nav-item.nav-3d:active {
    background: rgba(10, 48, 29, .9) !important;
    border-color: var(--rdn-neon) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4) !important;
    transform: none !important;
}
html[data-theme] body .sidebar button.nav-item.nav-3d.active,
html body .sidebar button.nav-item.nav-3d.active {
    background: linear-gradient(100deg, rgba(37, 255, 113, .22), rgba(0, 217, 107, .08)) !important;
    border-color: var(--rdn-neon) !important;
    border-inline-start-width: 3px !important;
    border-inline-start-style: solid !important;
    border-inline-start-color: var(--rdn-neon) !important;
    color: var(--rdn-neon) !important;
    -webkit-text-fill-color: var(--rdn-neon) !important;
    box-shadow: 0 0 18px rgba(37, 255, 113, .18) !important;
}
html[data-theme] body .sidebar button.nav-item.nav-3d.active:hover,
html body .sidebar button.nav-item.nav-3d.active:hover {
    background: linear-gradient(100deg, rgba(37, 255, 113, .30), rgba(0, 217, 107, .12)) !important;
    color: var(--rdn-neon) !important;
    -webkit-text-fill-color: var(--rdn-neon) !important;
    transform: none !important;
}
/* بلاطة الأيقونة: سطح غامق + لون أيقونة العنصر (--acc) واضح عليه */
html[data-theme] body .sidebar button.nav-item.nav-3d .ni,
html body .sidebar button.nav-item.nav-3d .ni {
    background: rgba(0, 39, 22, .85) !important;
    border: 1px solid rgba(37, 255, 113, .22) !important;
    color: var(--acc, var(--rdn-neon)) !important;
    -webkit-text-fill-color: var(--acc, var(--rdn-neon)) !important;
    box-shadow: inset 0 1px 0 rgba(37, 255, 113, .08) !important;
}
html[data-theme] body .sidebar button.nav-item.nav-3d:hover .ni,
html[data-theme] body .sidebar button.nav-item.nav-3d.active .ni,
html body .sidebar button.nav-item.nav-3d:hover .ni,
html body .sidebar button.nav-item.nav-3d.active .ni {
    background: rgba(8, 48, 30, .9) !important;
    border-color: rgba(37, 255, 113, .45) !important;
}
/* النمط الفرعي (بداية المحادثة): سطح أغمق هادي */
html[data-theme] body .sidebar button.nav-item.nav-3d.nav-sub,
html body .sidebar button.nav-item.nav-3d.nav-sub {
    background: rgba(5, 30, 19, .74) !important;
}
/* زر «أدوات إضافية»: نفس لغة النيون */
html[data-theme] body .sidebar button.nav-more-toggle,
html body .sidebar button.nav-more-toggle {
    background: rgba(8, 36, 24, .55) !important;
    border: 1px solid rgba(37, 255, 113, .18) !important;
    color: var(--rdn-ink-2) !important;
    -webkit-text-fill-color: var(--rdn-ink-2) !important;
    box-shadow: none !important;
}

/* 7) اسم اللوجو في القائمة الجانبية: كتلة nav-3d بتلوّنه نيلي غامق
   (linear-gradient أزرق-نيلي) فبيبقى مش مقروء على الخلفية الغامقة —
   بنرجّعه نص فاتح بتوهّج نيون خفيف نفس باقي عناوين القائمة. */
html[data-theme] body .sidebar h2.brand .brand-name,
html body .sidebar h2.brand .brand-name {
    color: var(--rdn-ink) !important;
    background: none !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    filter: none !important;
    text-shadow: 0 0 16px rgba(37, 255, 113, .28) !important;
    letter-spacing: 4px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   NEON POLISH — #2 (2026-10-09)
   إضاءة نيون متوازنة «بحلو» + الأزرار بلون الثيم بدل الأبيض
   ────────────────────────────────────────────────────────────────────
   1) الأزرار كلها بتاخد هوية الثيم:
      - الأساسي: تدرّج النيون + نص غامق (تباين عالي) + توهج طبقات
      - العادي: زجاج أخضر داكن + حدود نيون + نص فاتح — مفيش أبيض ولا نيلي
   2) الشريط العلوي يبقى نيون أخضر (كان أزرق/بنفسجي من طبقة قديمة)
   3) قيم الإحصائيات: نيون زاهي + توهج نصي
   4) أسطح بيضا (لوحة الإعدادات/شريط الصفحات/الريل) تتلون زجاج النيون
   ══════════════════════════════════════════════════════════════════════ */

/* ───────── 1) الأزرار: لون الثيم بدل الأبيض ─────────
   بنستخدم html[data-theme]-prefixed عشان نتغلب على قواعد قديمة
   بتفرض أبيض/نيلي بنفس التخصص ده (غير المهم !important). */
.btn:not(.btn-primary),
.btn-secondary,
.rd-btn,
.dh-btn.ghost,
html[data-theme] .btn,
html[data-theme] .btn-secondary,
html[data-theme] .dh-btn.ghost {
    background: linear-gradient(180deg, rgba(10, 60, 35, .88), rgba(3, 26, 15, .94)) !important;
    border: 1px solid rgba(37, 255, 113, .38) !important;
    color: var(--rdn-ink-2) !important;
    -webkit-text-fill-color: var(--rdn-ink-2) !important;
    box-shadow: inset 0 1px 0 rgba(168, 255, 62, .10), 0 0 14px rgba(37, 255, 113, .08) !important;
}
.btn:not(.btn-primary):hover,
.btn-secondary:hover,
.rd-btn:hover,
.dh-btn.ghost:hover,
html[data-theme] .btn:hover,
html[data-theme] .btn-secondary:hover,
html[data-theme] .dh-btn.ghost:hover {
    background: linear-gradient(180deg, rgba(13, 84, 48, .95), rgba(5, 42, 24, .97)) !important;
    border-color: var(--rdn-neon) !important;
    color: #effff4 !important;
    -webkit-text-fill-color: #effff4 !important;
    box-shadow: inset 0 1px 0 rgba(168, 255, 62, .16), 0 0 20px rgba(37, 255, 113, .18) !important;
}

/* الأساسي — تدرّج النيون + نص غامق + توهج طبقات */
.btn-primary,
.btn-success,
.fi-btn,
.dh-btn.primary,
.fpb-btn.primary,
html[data-theme] .btn-primary,
html[data-theme] .btn-success,
html[data-theme] .fi-btn,
html[data-theme] .dh-btn.primary {
    background: var(--brand) !important;
    border: 1px solid rgba(168, 255, 62, .60) !important;
    color: #04150c !important;
    -webkit-text-fill-color: #04150c !important;
    box-shadow:
        0 0 12px rgba(37, 255, 113, .34),
        0 0 32px rgba(37, 255, 113, .14),
        inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.btn-primary:hover,
.btn-success:hover,
.fi-btn:hover,
.dh-btn.primary:hover,
html[data-theme] .btn-primary:hover,
html[data-theme] .btn-success:hover,
html[data-theme] .fi-btn:hover,
html[data-theme] .dh-btn.primary:hover {
    filter: brightness(1.08) saturate(1.08) !important;
    box-shadow:
        0 0 18px rgba(37, 255, 113, .5),
        0 0 46px rgba(37, 255, 113, .22),
        inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}

/* الخطر — وردي نيون الثيم (نفس النظام، لون دلالي) */
.btn-danger,
html[data-theme] .btn-danger {
    background: linear-gradient(135deg, #ff5472, #c2233f) !important;
    border: 1px solid rgba(255, 102, 130, .55) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 0 14px rgba(255, 102, 130, .28), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
.btn-danger:hover,
html[data-theme] .btn-danger:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 0 22px rgba(255, 102, 130, .40), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}

/* الأزرار الصغيرة والأدوات — زجاج أخضر بدل الأبيض */
.fpb-btn, .cm-btn, .icon-btn, .theme-launcher, .nav-toggle, .tab-btn,
.selbar button, .cv-toolbar button,
html[data-theme] .fpb-btn, html[data-theme] .cm-btn, html[data-theme] .icon-btn,
html[data-theme] .theme-launcher, html[data-theme] .nav-toggle, html[data-theme] .tab-btn {
    background: rgba(5, 30, 18, .82) !important;
    color: var(--rdn-ink-2) !important;
    -webkit-text-fill-color: var(--rdn-ink-2) !important;
    border-color: rgba(37, 255, 113, .30) !important;
    box-shadow: inset 0 0 10px rgba(37, 255, 113, .06), 0 0 10px rgba(37, 255, 113, .06) !important;
}
.fpb-btn:hover, .cm-btn:hover, .icon-btn:hover, .theme-launcher:hover, .nav-toggle:hover,
.tab-btn:hover, .selbar button:hover, .cv-toolbar button:hover,
html[data-theme] .fpb-btn:hover, html[data-theme] .cm-btn:hover, html[data-theme] .icon-btn:hover,
html[data-theme] .theme-launcher:hover, html[data-theme] .nav-toggle:hover, html[data-theme] .tab-btn:hover {
    background: rgba(10, 56, 33, .95) !important;
    border-color: var(--rdn-neon) !important;
    color: #effff4 !important;
    -webkit-text-fill-color: #effff4 !important;
    box-shadow: inset 0 0 12px rgba(37, 255, 113, .10), 0 0 14px rgba(37, 255, 113, .14) !important;
}

/* التبويبات المفعّلة وتبويبات شريط الصفحات — نيون (كانوا أزرق/خمري) */
.tab-btn.active,
.fpb-tab.on,
html[data-theme] .tab-btn.active,
html[data-theme] .fpb-tab.on {
    color: var(--rdn-neon) !important;
    -webkit-text-fill-color: var(--rdn-neon) !important;
    border-bottom-color: var(--rdn-neon) !important;
    background: linear-gradient(180deg, rgba(14, 74, 43, .95), rgba(5, 40, 23, .95)) !important;
    box-shadow: 0 0 0 2px rgba(37, 255, 113, .18), 0 0 16px rgba(37, 255, 113, .18) !important;
}

/* زرار الهيرو: العادي زجاج، الأساسي مصمت متدرّج، ghost شفاف */
.dh-btn,
html[data-theme] .dh-btn {
    background: rgba(37, 255, 113, .14) !important;
    border: 1px solid rgba(37, 255, 113, .55) !important;
    color: #effff4 !important;
    -webkit-text-fill-color: #effff4 !important;
    box-shadow: 0 0 16px rgba(37, 255, 113, .12), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
.dh-btn:hover,
html[data-theme] .dh-btn:hover {
    background: rgba(37, 255, 113, .22) !important;
    border-color: var(--rdn-neon) !important;
    box-shadow: 0 0 22px rgba(37, 255, 113, .22), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}
.dh-btn.ghost,
html[data-theme] .dh-btn.ghost {
    background: transparent !important;
    border-color: rgba(37, 255, 113, .34) !important;
    color: var(--rdn-ink-2) !important;
    -webkit-text-fill-color: var(--rdn-ink-2) !important;
    box-shadow: none !important;
}

/* ───────── 2) الشريط العلوي: نيون أخضر موحّد (كان أزرق/بنفسجي) ───────── */
body:has(.container)::after,
html[data-theme] body:has(.container)::after {
    height: 3px !important;
    background: linear-gradient(90deg, #a8ff3e 0%, #25ff71 38%, #00d96b 72%, #55f7d1 100%) !important;
    box-shadow: 0 0 12px rgba(37, 255, 113, .5), 0 0 28px rgba(37, 255, 113, .16) !important;
    opacity: .95 !important;
}

/* ───────── 3) قيم الإحصائيات: نيون زاهي + توهج ───────── */
.stat-box .value, .metric strong, .kpi strong, .number, .stat b,
html[data-theme] .stat-box .value {
    color: var(--rdn-neon) !important;
    -webkit-text-fill-color: var(--rdn-neon) !important;
    background: none !important;
    text-shadow: 0 0 14px rgba(37, 255, 113, .55), 0 0 30px rgba(37, 255, 113, .22) !important;
}
.stat-box,
html[data-theme] .stat-box {
    border-color: rgba(37, 255, 113, .26) !important;
    box-shadow: 0 18px 42px -18px rgba(0, 0, 0, .55), 0 0 22px rgba(37, 255, 113, .07), inset 0 1px 0 rgba(168, 255, 62, .10) !important;
}
.status-online,
html[data-theme] .status-online {
    box-shadow: 0 0 0 1px rgba(37, 255, 113, .18), 0 0 16px rgba(37, 255, 113, .30) !important;
    text-shadow: 0 0 8px rgba(37, 255, 113, .5) !important;
}

/* ───────── 4) إضاءة متوازنة: خلفية + كروت + حقول ───────── */
body, html body.rd-body, html[data-theme] body {
    background:
        radial-gradient(1000px 560px at 82% -8%, rgba(0, 217, 107, .16), transparent 60%),
        radial-gradient(780px 480px at 6% 104%, rgba(37, 255, 113, .12), transparent 64%),
        radial-gradient(600px 340px at 96% 108%, rgba(85, 247, 209, .08), transparent 62%),
        linear-gradient(135deg, #010403 0%, #03110b 52%, #020806 100%) !important;
}
.card,
html[data-theme] .card {
    background: linear-gradient(145deg, rgba(9, 38, 25, .94), rgba(3, 17, 10, .97)) !important;
    border: 1px solid var(--rdn-line) !important;
    box-shadow:
        0 18px 60px rgba(0, 0, 0, .48),
        0 0 24px rgba(37, 255, 113, .07),
        inset 0 1px 0 rgba(168, 255, 62, .10) !important;
}
.card:hover,
html[data-theme] .card:hover {
    border-color: var(--rdn-neon) !important;
    box-shadow:
        0 18px 60px rgba(0, 0, 0, .48),
        0 0 30px rgba(37, 255, 113, .16),
        inset 0 1px 0 rgba(168, 255, 62, .14) !important;
}
/* زجاج الرسائل (أعمدة المحادثة) */
.cm-side, .cm-main, .cm-thread,
html[data-theme] .cm-side, html[data-theme] .cm-main, html[data-theme] .cm-thread {
    background: rgba(5, 28, 18, .72) !important;
    border-color: rgba(37, 255, 113, .20) !important;
}

/* أسطح بيضا من طبقات قديمة تتلون زجاج النيون (لوحة الإعدادات/شريط الصفحات) */
.flow-inspector,
html[data-theme] .flow-inspector {
    background: linear-gradient(180deg, rgba(7, 30, 20, .97), rgba(3, 18, 11, .98)) !important;
    border-inline-end: 1px solid var(--rdn-line) !important;
    color: var(--rdn-ink) !important;
}
.flow-inspector .fi-label,
html[data-theme] .flow-inspector .fi-label { color: var(--rdn-ink-2) !important; }
.flow-inspector .btn-row,
html[data-theme] .flow-inspector .btn-row {
    background: rgba(6, 28, 18, .6) !important;
    border-color: var(--rdn-line) !important;
}
.flow-pagebar,
html[data-theme] .flow-pagebar {
    background: linear-gradient(180deg, #072a19, #03160c) !important;
    border-bottom-color: var(--rdn-line) !important;
}
.fpb-label,
html[data-theme] .fpb-label { color: var(--rdn-ink-2) !important; }
.selbar,
html[data-theme] .selbar {
    background: linear-gradient(180deg, rgba(13, 74, 43, .96), rgba(4, 36, 20, .96)) !important;
    border: 1px solid var(--rdn-line-strong) !important;
    box-shadow: 0 0 18px rgba(37, 255, 113, .20) !important;
}
.sock-head,
html[data-theme] .sock-head {
    background: linear-gradient(180deg, #062a19, #04160e) !important;
    border-bottom: 1px solid var(--rdn-line) !important;
}

/* الحقول: توهج تركيز أعمق + لون نص فاتح */
input:focus, textarea:focus, select:focus,
html[data-theme] input:focus, html[data-theme] textarea:focus, html[data-theme] select:focus {
    border-color: var(--rdn-neon) !important;
    box-shadow: 0 0 0 3px rgba(37, 255, 113, .16), 0 0 22px rgba(37, 255, 113, .20) !important;
}
::selection,
html[data-theme] ::selection {
    background: rgba(37, 255, 113, .30) !important;
    color: #04150c !important;
}

/* الهيدر: خط سفلي نيون خافت */
.header,
html[data-theme] .header {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28), inset 0 -1px 0 rgba(37, 255, 113, .14) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   NEON POLISH — رفع التخصص (#3, 2026-10-09)
   قواعد قديمة بتخصص أعلى كانت بتفرض:
   - نص أبيض على الأزرار الأساسية (تباين ضعيف على النيون الزاهي)
   - خلفية مصمتة #25ff71 على زرار الهيرو الأساسي
   - حدود شفافة + قيم إحصائيات باهتة (--ink-2 بدل النيون)
   هنا بنعكس نفس أنماط الـ selectors دي مع تخصص أعلى عشان
   النيون الكامل يثبت في كل مكان.
   ══════════════════════════════════════════════════════════════════════ */

/* الأزرار الأساسية: تدرّج الهوية + نص غامق + توهج — يتغلب على
   .content .section .btn-primary{color:#fff} (0,3,0)
   #automation #autoBar .btn-primary (2,1,0)
   html[data-theme] .btn.btn-primary{border-color:transparent} (0,3,1) */
.btn-primary,
.btn-success,
.fi-btn,
.dh-btn.primary,
.fpb-btn.primary,
html[data-theme] .btn-primary,
html[data-theme] .btn-success,
html[data-theme] .fi-btn,
html[data-theme] .dh-btn.primary,
html[data-theme] .content .section .btn-primary,
html[data-theme] .content .section .btn-success,
html[data-theme] .content .section .fi-btn,
html[data-theme] .content .section .fpb-btn.primary,
html[data-theme] .content .section#automation #autoBar .btn-primary,
html body .content .section:not(#automation) .btn-primary[class][class],
html body .content .section:not(#automation) .btn-success[class][class],
html body .content .section:not(#automation) .fi-btn[class][class],
html body .content .section:not(#automation) .fpb-btn.primary[class][class],
html[data-theme] .content .section:not(#automation) .dash-hero .dh-btn.primary[class][class][class] {
    background: var(--brand) !important;
    border: 1px solid rgba(168, 255, 62, .60) !important;
    color: #04150c !important;
    -webkit-text-fill-color: #04150c !important;
    box-shadow:
        0 0 12px rgba(37, 255, 113, .34),
        0 0 32px rgba(37, 255, 113, .14),
        inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.btn-primary:hover,
.btn-success:hover,
.fi-btn:hover,
.fpb-btn.primary:hover,
html[data-theme] .content .section .btn-primary:hover,
html[data-theme] .content .section .btn-success:hover,
html[data-theme] .content .section#automation #autoBar .btn-primary:hover,
html body .content .section:not(#automation) .btn-primary[class][class]:hover,
html body .content .section:not(#automation) .btn-success[class][class]:hover,
html[data-theme] .content .section:not(#automation) .dash-hero .dh-btn.primary[class][class][class]:hover {
    filter: brightness(1.08) saturate(1.08) !important;
    box-shadow:
        0 0 18px rgba(37, 255, 113, .5),
        0 0 46px rgba(37, 255, 113, .22),
        inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}

/* زرار الهيرو الثانوي (غير الأساسي): زجاج بألوان النيون — يتغلب على
   html[data-theme] .content .section:not(#automation) .dash-hero .dh-btn (1,5,1) */
html[data-theme] .content .section:not(#automation) .dash-hero .dh-btn:not(.primary)[class][class],
html[data-theme] .content .section:not(#automation) .dash-hero .dh-btn:not(.primary)[class][class]:hover {
    background: rgba(37, 255, 113, .14) !important;
    border: 1px solid rgba(37, 255, 113, .55) !important;
    color: #effff4 !important;
    -webkit-text-fill-color: #effff4 !important;
    box-shadow: 0 0 16px rgba(37, 255, 113, .12), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

/* قيم الإحصائيات: نيون زاهي + توهج — يتغلب على قاعدة readability
   html[data-theme] .content .section:not(#automation) ... اللي كانت بتفرض --ink-2 */
html[data-theme] .content .section:not(#automation) .stat-box .value[class][class],
html body .stat-box .value[class][class],
html body .content .section:not(#automation) .kpi strong[class][class] {
    color: var(--rdn-neon) !important;
    -webkit-text-fill-color: var(--rdn-neon) !important;
    background: none !important;
    text-shadow: 0 0 14px rgba(37, 255, 113, .55), 0 0 30px rgba(37, 255, 113, .22) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   كل «المستطيلات البيضا» المتبقية في اللوحة → زجاج النيون الغامق (2026-10-09)
   المستخدم طلب إن أي بطاقة/مستطيل أرضيته بيضا يبقى بلغة الثيم النيون.
   الاستثناء الوحيد: خامة الـ QR (#qrLinkHolder) تفضل بيضا عشان الكود يمسح.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) بلاطات أيقونات العقد (الأتمتة/الكانفاس): كانت بيضا بحواف نيلية */
html body .pal-ico, html body .tpl-ico, html body .tp-ico, html body .ph-ico, html body .cnode-ico,
html[data-theme] body .pal-ico, html[data-theme] body .tpl-ico, html[data-theme] body .tp-ico, html[data-theme] body .ph-ico, html[data-theme] body .cnode-ico {
    background: rgba(5, 30, 19, .9) !important;
    border: 1px solid rgba(37, 255, 113, .28) !important;
    box-shadow: inset 0 1px 0 rgba(37, 255, 113, .07), 0 3px 0 rgba(0, 0, 0, .3) !important;
    filter: none !important;
    text-shadow: none !important;
}

/* 2) نافذة «نسخ المسار» (modal): بيضا → زجاج نيون غامق + نص فاتح */
html body .modal,
html[data-theme] body .modal {
    background: linear-gradient(160deg, rgba(9, 42, 26, .98), rgba(2, 13, 8, .98)) !important;
    border: 1px solid rgba(37, 255, 113, .3) !important;
    color: var(--rdn-ink) !important;
}
html body .modal h3, html body .modal .cp-from, html body .modal .cp-row,
html[data-theme] body .modal h3, html[data-theme] body .modal .cp-from, html[data-theme] body .modal .cp-row {
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
    border-color: rgba(37, 255, 113, .18) !important;
}
html body .modal .cp-list,
html[data-theme] body .modal .cp-list {
    background: rgba(2, 15, 10, .9) !important;
    border-color: rgba(37, 255, 113, .2) !important;
}
html body .modal .cp-row:hover,
html[data-theme] body .modal .cp-row:hover {
    background: rgba(20, 73, 43, .7) !important;
}
html body .modal .cp-row i,
html[data-theme] body .modal .cp-row i {
    background: rgba(5, 30, 19, .9) !important;
    color: var(--rdn-ink-2) !important;
    -webkit-text-fill-color: var(--rdn-ink-2) !important;
}

/* 3) لوحات إعدادات العقد في الكانفاس (.cf-sec / .cf-lbl-add): بيضا → غامق */
html body .cf-sec, html body .cf-lbl-add,
html[data-theme] body .cf-sec, html[data-theme] body .cf-lbl-add {
    background: rgba(5, 30, 19, .88) !important;
    border-color: rgba(37, 255, 113, .22) !important;
    color: var(--rdn-ink-2) !important;
    -webkit-text-fill-color: var(--rdn-ink-2) !important;
}

/* 4) فقاعة الرسائل الواردة في «محادثات ماسنجر»: بيضا → زجاج غامق */
html body #messages .cm-row.in .cm-b,
html[data-theme] body #messages .cm-row.in .cm-b {
    background: rgba(5, 30, 19, .92) !important;
    border-color: rgba(37, 255, 113, .22) !important;
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
}

/* 5) شرائح سياق الصفحات (.pc-chip) في شريط «الصفحات»: بيضا → غامق */
html body .page-ctx .pc-chip,
html[data-theme] body .page-ctx .pc-chip {
    background: rgba(5, 30, 19, .9) !important;
    border-color: rgba(37, 255, 113, .25) !important;
    color: var(--rdn-neon) !important;
    -webkit-text-fill-color: var(--rdn-neon) !important;
}
html body .page-ctx .pc-chip.warn,
html[data-theme] body .page-ctx .pc-chip.warn {
    background: rgba(63, 32, 8, .9) !important;
    border-color: rgba(245, 158, 11, .4) !important;
    color: #ffd28a !important;
    -webkit-text-fill-color: #ffd28a !important;
}

/* 6) بانل «ضيف كلمة» / «ضيف إجراء» (لونهم #f8fafc): بيضا → غامق */
html body #keywords .card div:has(#kwNewKeyword),
html body #postbacks .card div:has(#pbNewName),
html[data-theme] body #keywords .card div:has(#kwNewKeyword),
html[data-theme] body #postbacks .card div:has(#pbNewName) {
    background: rgba(7, 36, 23, .88) !important;
    border-color: rgba(37, 255, 113, .22) !important;
    border-radius: 10px !important;
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
}

/* 7) إطار صندوق الـ QR يبقى غامق، وخامة الـ QR نفسها تفضل بيضا */
html body #qrLinkBox,
html[data-theme] body #qrLinkBox {
    background: rgba(7, 36, 23, .88) !important;
    border-color: rgba(37, 255, 113, .25) !important;
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   القوائم المنسدلة (<select>) على كل الصفحات — 2026-10-14
   كانت خيارات القوائم المنسدلة بتطلع بخلفية بيضاء (أو افتراضية فاتحة) والنص
   فاتح، فمش بتتبان وبيصعب الاختيار. هنا بنوحّد خلفية/لون كل الخيارات على
   سطح النيون الغامق في كل الأقسام (مش بس الأقسام اللي جوه .content).
   ══════════════════════════════════════════════════════════════════════ */
select { color-scheme: dark !important; }
select option,
select optgroup {
    background-color: #05160f !important;
    color: #effff4 !important;
    -webkit-text-fill-color: #effff4 !important;
}
select option:checked,
select option:hover,
select option:focus {
    background-color: #0f7a43 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
select optgroup { font-weight: 700 !important; font-style: normal !important; }
html body #qrLinkHolder,
html[data-theme] body #qrLinkHolder {
    background: #ffffff !important;
}

/* 8) فقاعة شرح عنوان القسم (.ttl-ex-line): بيضا → غامق + حدود نيون */
html body .ttl-ex-line:not([hidden]),
html[data-theme] body .ttl-ex-line:not([hidden]) {
    background: rgba(5, 30, 19, .9) !important;
    border-color: rgba(37, 255, 113, .25) !important;
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
}

/* 9) نتفيذ لمسات البياض عند المرور (hover) على أزرار/تبويبات/صفوف:
   .fpb-tab · .tab-btn · .ex-toggle · .customer-item — بيضى → زجاج نيون */
html body .fpb-tab:hover, html body .tab-btn:hover, html body .ex-toggle:hover, html body .customer-item:hover,
html[data-theme] body .fpb-tab:hover, html[data-theme] body .tab-btn:hover, html[data-theme] body .ex-toggle:hover, html[data-theme] body .customer-item:hover {
    background: rgba(20, 73, 43, .8) !important;
    border-color: rgba(37, 255, 113, .4) !important;
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
}
html body .fpb-tab.on,
html[data-theme] body .fpb-tab.on {
    background: linear-gradient(100deg, rgba(37, 255, 113, .18), rgba(0, 217, 107, .06)) !important;
    border-color: var(--rdn-neon) !important;
    color: var(--rdn-neon) !important;
    -webkit-text-fill-color: var(--rdn-neon) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   10) إزالة كلمة «WORKSPACE» من الشريط الجانبي (2026-10-09)
   المستخدم طلب شيل الكلمة اللي بتظهر تحت اللوجو في القائمة اليمنى.
   مصدرها: html[data-theme] .sidebar h2.brand::after { content:"WORKSPACE" }.
   ══════════════════════════════════════════════════════════════════════ */
html[data-theme] .sidebar h2.brand::after,
html[data-theme] body .sidebar h2.brand::after {
    content: none !important;
}

/* 🛠️ 2026-10-14: إصلاح جهة القائمة الرئيسية (يمين) + مساحة المحتوى الذكية */
body.nav-off > .container,
body.flowonly > .container,
body:has(#automation.active) > .container {
  padding-inline-start: 0 !important;
}
body:not(.nav-off):not(.flowonly):not(:has(#automation.active)) > .container {
  padding-inline-start: 264px !important;
}

/* 🧊 (2026-10-14 v3) صور الصفحات — 3D خفيف وواضح جدًا (تقليل الإضاءة لتمييز اللوجو) */
.ct-av, .pg-av, .pr-av, .pg3d {
  position: relative !important;
  border-radius: 30% !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
  transform: perspective(240px) rotateX(5deg) rotateY(-6deg) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  background: linear-gradient(180deg, rgba(10,34,22,.96), rgba(4,18,12,.96)) !important;
  border: 1px solid rgba(37,255,113,.35) !important;
  color: #d6ffe8 !important;
  box-shadow: 0 6px 12px -6px rgba(0,0,0,.65) !important;
}
.ct-av { width:34px !important; height:34px !important; flex: 0 0 34px !important; font-size:14px !important; }
.pr-av { width:56px !important; height:56px !important; font-size:19px !important; }
.pg-av { width:72px !important; height:72px !important; font-size:24px !important; }
.ct-av img, .pg-av img, .pr-av img, .pg3d img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  border-radius: 30% !important;
  display: block !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
/* ✨ لمعة خفيفة جدًا كل فترة — لا تعيق رؤية اللوجو */
.ct-av::before, .pg-av::before, .pr-av::before, .pg3d::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 30% !important;
  background-image: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 60%) !important;
  background-size: 280% 100%;
  background-position: 140% 0;
  animation: pg3dFlash 6.5s ease-in-out infinite;
  pointer-events: none !important;
  z-index: 3 !important;
}
.cmt-chip:nth-child(3n) .pg3d::before { animation-delay: 2s !important; }
.cmt-chip:nth-child(3n+2) .pg3d::before { animation-delay: 4s !important; }
/* ظل أرضي خفيف */
.ct-av::after, .pg-av::after, .pr-av::after, .pg3d::after {
  content: "" !important;
  position: absolute !important;
  left: 18% !important; right: 18% !important; bottom: -5px !important; height: 6px !important;
  border-radius: 50% !important;
  background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent 76%) !important;
  filter: blur(1.6px) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
.conv-tab:hover .ct-av, .pg-card:hover .pg-av, .pr-card:hover .pr-av,
.cmt-chip:hover .pg3d, .cmt-chip.sel .pg3d {
  transform: perspective(240px) rotateX(0deg) rotateY(0deg) translateZ(5px) scale(1.06) !important;
  border-color: rgba(37,255,113,.85) !important;
  box-shadow: 0 10px 20px -8px rgba(0,0,0,.8), 0 0 14px rgba(37,255,113,.30) !important;
}
@keyframes pg3dFlash {
  0% { background-position: 140% 0; }
  55% { background-position: -140% 0; }
  100% { background-position: -140% 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   11) فقاعات المحادثات (ماسنجر + واتساب) — تباين مضمون (2026-10-14)
   المشكلة: على ثيم النيون الغامق، الفقاعة الواردة في تبويب واتساب كانت
   بيضا (#fff) والنص فاتح (--ink-2) ⇒ مش باين خالص. والفقاعة الصادرة كانت
   نيون أخضر فاتح والنص أبيض ⇒ تباين ~1.3:1 (صعب جدًا).
   الحل: الوارد = زجاج نيون غامق + نص فاتح (نفس اللي اتعمل في #messages).
          الصادر = نفس الخلفية الزاهية + نص غامق (زي أزرار البراند).
   ⚠️ المحددات محتاجة id عشان تتغلب على قواعد `:not(#automation)` في
      theme-engine.css اللي بتفرض --ink-2 / --hero-ink على الفقاعات.
   ══════════════════════════════════════════════════════════════════════ */

/* الوارد (من العميل): زجاج غامق واضح في كل الأعمدة */
html body #conversations #messages .cm-row.in .cm-b,
html body #conversations #wa-chats .cm-row.in .cm-b,
html[data-theme] body #conversations #messages .cm-row.in .cm-b,
html[data-theme] body #conversations #wa-chats .cm-row.in .cm-b {
    background: rgba(5, 30, 19, .92) !important;
    border-color: rgba(37, 255, 113, .22) !important;
    color: var(--rdn-ink) !important;
    -webkit-text-fill-color: var(--rdn-ink) !important;
}

/* الصادر (بوت / رد يدوي / تسلسل): نص غامق على الخلفية الزاهية
   ⚠️ لازم id-ين (#conversations + العمود) لأن theme-engine بتفرض لون
   الفقاعة بـ `:not(#automation)` (id) على `.cm-row.out *` (5 كلاسات). */
html body #conversations #messages .cm-row.out .cm-b,
html body #conversations #wa-chats .cm-row.out .cm-b,
html[data-theme] body #conversations #messages .cm-row.out .cm-b,
html[data-theme] body #conversations #wa-chats .cm-row.out .cm-b,
html body #conversations #messages .cm-row.out .cm-b *,
html body #conversations #wa-chats .cm-row.out .cm-b *,
html[data-theme] body #conversations #messages .cm-row.out .cm-b *,
html[data-theme] body #conversations #wa-chats .cm-row.out .cm-b * {
    color: #04150c !important;
    -webkit-text-fill-color: #04150c !important;
}
/* اللينكات/الملفات جوه الفقاعة الصادرة تفضل واضحة */
html body #conversations #messages .cm-row.out .cm-b .cm-file,
html body #conversations #wa-chats .cm-row.out .cm-b .cm-file,
html[data-theme] body #conversations #messages .cm-row.out .cm-b .cm-file,
html[data-theme] body #conversations #wa-chats .cm-row.out .cm-b .cm-file {
    background: rgba(4, 21, 12, .10) !important;
    color: #04150c !important;
    -webkit-text-fill-color: #04150c !important;
}

/* 12) باقي نصوص صفحة المحادثات اللي كانت فاتحة على خلفية فاتحة */
/* أفاتار أول حرف في قائمة المحادثات: كان فاتح على تدرّج النيون الفاتح.
   ⚠️ id-ين مطلوبين عشان نتغلب على قاعدة theme-engine العامة للـ span (1,3,2). */
html body #conversations #messages .cm-av,
html body #conversations #wa-chats .cm-av,
html[data-theme] body #conversations #messages .cm-av,
html[data-theme] body #conversations #wa-chats .cm-av {
    color: #04150c !important;
    -webkit-text-fill-color: #04150c !important;
}
/* 🔔 شارة عدد غير المقروء على تبويب المحادثات:
   على التبويب المفعّل خلفيتها بيضا والنص كان فاتح ⇒ الرقم مش باين. */
html body #conversations #convTabs .conv-tab .ct-badge,
html[data-theme] body #conversations #convTabs .conv-tab .ct-badge {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body #conversations #convTabs .conv-tab.on .ct-badge,
html[data-theme] body #conversations #convTabs .conv-tab.on .ct-badge {
    color: #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
}
html body #conversations #convTabs .conv-tab.wa.on .ct-badge,
html[data-theme] body #conversations #convTabs .conv-tab.wa.on .ct-badge {
    color: #047857 !important;
    -webkit-text-fill-color: #047857 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   13) رسائل ماسنجر الغنية (قوالب/كروت/أزرار/ردود سريعة) — تباين مضمون
   المشكلة: قاعدتا theme-engine بتفرضان --ink-2 / --hero-ink على كل
   span/div جوه الأقسام، وعلى كل ما هو جوه `.cm-row.out *` — فبتغسل ألوان
   الكارت الأبيض والأزرار الزرقاء. الحل: محددات بـ id-ين عشان تكسب.
   ══════════════════════════════════════════════════════════════════════ */

/* الكارت الأبيض نفسه */
html body #conversations #messages .cm-card,
html[data-theme] body #conversations #messages .cm-card {
    background: #ffffff !important;
    border-color: #e4e6eb !important;
}
/* نص الكارت (عنوان/وصف) */
html body #conversations #messages .cm-card-t,
html[data-theme] body #conversations #messages .cm-card-t {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}
html body #conversations #messages .cm-card-s,
html[data-theme] body #conversations #messages .cm-card-s {
    color: #65676b !important;
    -webkit-text-fill-color: #65676b !important;
}
/* أزرار الكارت (لينك أو postback) */
html body #conversations #messages .cm-row.tpl .cm-card-btn,
html[data-theme] body #conversations #messages .cm-row.tpl .cm-card-btn {
    background: #ffffff !important;
    color: #0084ff !important;
    -webkit-text-fill-color: #0084ff !important;
    border-color: #e4e6eb !important;
}
html body #conversations #messages .cm-row.tpl .cm-card-btn:hover,
html[data-theme] body #conversations #messages .cm-row.tpl .cm-card-btn:hover {
    background: #f0f6ff !important;
}
/* شرائح الردود السريعة جوه الفقاعة الصادرة (كانت بتاخد نص غامق) */
html body #conversations #messages .cm-row.out .cm-b .cm-qrs .cm-qr,
html body #conversations #wa-chats .cm-row.out .cm-b .cm-qrs .cm-qr,
html[data-theme] body #conversations #messages .cm-row.out .cm-b .cm-qrs .cm-qr,
html[data-theme] body #conversations #wa-chats .cm-row.out .cm-b .cm-qrs .cm-qr {
    background: #ffffff !important;
    color: #0084ff !important;
    -webkit-text-fill-color: #0084ff !important;
    border-color: #d7dbe0 !important;
}
html body #conversations #messages .cm-row.out .cm-b .cm-qrs .cm-qr:hover,
html body #conversations #wa-chats .cm-row.out .cm-b .cm-qrs .cm-qr:hover,
html[data-theme] body #conversations #messages .cm-row.out .cm-b .cm-qrs .cm-qr:hover,
html[data-theme] body #conversations #wa-chats .cm-row.out .cm-b .cm-qrs .cm-qr:hover {
    background: #f0f6ff !important;
}
/* نص الرسالة الغنية (لو جت فقاعة نص + أزرار) */
html body #conversations #messages .cm-row .cm-tx-t,
html body #conversations #wa-chats .cm-row .cm-tx-t,
html[data-theme] body #conversations #messages .cm-row .cm-tx-t,
html[data-theme] body #conversations #wa-chats .cm-row .cm-tx-t {
    white-space: pre-wrap !important;
}