/* Rad Stack — هوية موحدة لكل صفحات المنصة (أسلوب Codecademy: كحلي + أصفر + أيقونات خطية) */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=JetBrains+Mono:wght@400;600&display=swap");
@import url("/shared/tabler/tabler-icons.min.css");

:root {
  --rs-navy: #10162f;
  --rs-navy-2: #1b2347;
  --rs-yellow: #ffd300;
  --rs-yellow-2: #ffe566;
  --rs-violet: #3a10e5;
  --rs-violet-soft: #8a7dff;
  --rs-beige: #fff0e5;
  --rs-ink: #10162f;
  --rs-line: rgba(255, 255, 255, 0.1);
  --rs-h: 52px;
}

/* ألوان موحدة للصفحات الداكنة (الأغلبية) */
html.rs-dark:root {
  --bg: #0b1024 !important;
  --bg2: #10162f !important;
  --surface: #141b38 !important;
  --surface2: #1b2347 !important;
  --primary: #ffd300 !important;
  --primary-light: #ffe566 !important;
  --primary2: #ffe566 !important;
  --primary-dark: #e6be00 !important;
  --primary-bg: rgba(255, 211, 0, 0.12) !important;
  --f-accent: #ffd300 !important;
  --f-accent-ink: #10162f !important;
}
/* الصفحات الفاتحة: نفس الأزرار والروابط بس */
html.rs-light:root {
  --primary: #3a10e5 !important;
  --primary-dark: #2a0bb0 !important;
  --primary-bg: rgba(58, 16, 229, 0.08) !important;
  --accent: #3a10e5 !important;
}

html.rs-on body {
  font-family: "DM Sans", "IBM Plex Sans Arabic", "Cairo", "Segoe UI", sans-serif !important;
}
html.rs-on button, html.rs-on input, html.rs-on select, html.rs-on textarea { font-family: inherit; }
html.rs-on ::selection { background: rgba(255, 211, 0, 0.35); }
html.rs-on :focus-visible { outline: 2px solid var(--rs-yellow); outline-offset: 2px; }

/* الهيدر الموحد */
#rsHeader {
  position: fixed; inset: 0 0 auto 0; height: var(--rs-h); z-index: 2147483000;
  background: var(--rs-navy); color: #fff; display: flex; align-items: center; gap: 4px;
  padding: 0 16px; border-bottom: 1px solid var(--rs-line); direction: rtl;
  font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif; font-size: 14px; box-sizing: border-box;
}
#rsHeader * { box-sizing: border-box; font-family: inherit; }
#rsHeader .rs-logo { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; margin-left: 18px; white-space: nowrap; direction: ltr; }
#rsHeader .rs-logo .rs-mark { width: 28px; height: 28px; border-radius: 6px; background: var(--rs-yellow); color: var(--rs-navy); display: grid; place-items: center; font-size: 18px; }
#rsHeader .rs-logo b { color: var(--rs-yellow); font-weight: 700; }
#rsHeader nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
#rsHeader nav a {
  color: #d9dcea; text-decoration: none; padding: 7px 11px; border-radius: 6px; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 500;
}
#rsHeader nav a:hover { background: var(--rs-navy-2); color: #fff; }
#rsHeader nav a.on { color: var(--rs-yellow); box-shadow: inset 0 -2px 0 var(--rs-yellow); border-radius: 0; }
#rsHeader .ti { font-size: 18px; line-height: 1; }
#rsHeader .rs-tools { display: flex; align-items: center; gap: 6px; }
#rsHeader .rs-ibtn { width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; color: #d9dcea; text-decoration: none; background: none; border: 0; cursor: pointer; }
#rsHeader .rs-ibtn:hover { background: var(--rs-navy-2); color: #fff; }
#rsHeader .rs-cta { background: var(--rs-yellow); color: var(--rs-navy); font-weight: 700; padding: 7px 14px; border-radius: 4px; text-decoration: none; white-space: nowrap; }
#rsHeader .rs-cta:hover { background: var(--rs-yellow-2); }
#rsHeader .rs-av { width: 32px; height: 32px; border-radius: 50%; background: var(--rs-violet); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; text-decoration: none; }
@media (max-width: 760px) {
  #rsHeader nav a span { display: none; }
  #rsHeader .rs-logo span.rs-word { display: none; }
}

/* إزاحة الصفحة تحت الهيدر */
html.rs-on { scroll-padding-top: var(--rs-h); }
html.rs-on body { padding-top: var(--rs-h) !important; box-sizing: border-box; }
html.rs-on.rs-full body { height: 100vh !important; overflow: hidden; }

/* أيقونات خطية بدل الإيموجي */
html.rs-on i.rs-ic { font-style: normal; font-size: 1.15em; vertical-align: -0.15em; line-height: 1; display: inline-block; }

/* أزرار موحدة (أسلوب Codecademy: حواف 4px، وزن واضح) */
html.rs-on .btn, html.rs-on .tbtn, html.rs-on .abtn, html.rs-on .btn-primary, html.rs-on button.primary {
  border-radius: 4px !important; font-weight: 600;
}
html.rs-dark .btn-primary, html.rs-dark button.primary, html.rs-dark .btn.primary {
  background: var(--rs-yellow) !important; color: var(--rs-navy) !important; border-color: var(--rs-yellow) !important;
}
html.rs-light .btn-primary, html.rs-light button.primary, html.rs-light .btn.primary {
  background: var(--rs-violet) !important; color: #fff !important; border-color: var(--rs-violet) !important;
}

/* شريط تمرير هادي */
html.rs-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.rs-dark ::-webkit-scrollbar-thumb { background: #2a3360; border-radius: 6px; }
html.rs-dark ::-webkit-scrollbar-track { background: transparent; }

/* قايمة اللغات */
#rsHeader .rs-lang { position: relative; }
#rsHeader .rs-lang-menu { display: none; position: absolute; top: 40px; left: 0; background: #fff; border-radius: 8px; padding: 6px; min-width: 160px; box-shadow: 0 8px 24px rgba(16,22,47,.25); z-index: 2147483001; }
#rsHeader .rs-lang.open .rs-lang-menu { display: grid; }
#rsHeader .rs-lang-menu button { background: none; border: 0; text-align: start; padding: 8px 10px; border-radius: 4px; color: var(--rs-navy); cursor: pointer; font-size: 14px; }
#rsHeader .rs-lang-menu button:hover { background: var(--rs-beige); }
#rsHeader .rs-lang-menu button.on { background: var(--rs-yellow); font-weight: 700; }
/* إخفاء شريط جوجل للترجمة */
.goog-te-banner-frame, .skiptranslate > iframe, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }
html[dir="ltr"] #rsHeader { direction: ltr; }

/* ── أزرار موحدة لكل البرامج (نفس تنسيق الموقع) ── */
html.rs-on .btn, html.rs-on .btn-sm, html.rs-on .btn-s, html.rs-on .btn-xs, html.rs-on .act-btn, html.rs-on .tb-btn,
html.rs-on .btn-primary, html.rs-on .btn-p, html.rs-on .btn-accent, html.rs-on .btn-y, html.rs-on .pri, html.rs-on button.primary,
html.rs-on .btn-outline, html.rs-on .btn-o, html.rs-on .btn-ghost, html.rs-on .btn-danger, html.rs-on .btn-d, html.rs-on .btn-success, html.rs-on .btn-g {
  border-radius: 4px !important; font-weight: 600 !important; transition: background-color .15s, border-color .15s, color .15s, transform .05s;
}
html.rs-on .btn:active, html.rs-on .tbtn:active { transform: translateY(1px); }
html.rs-dark .btn-p, html.rs-dark .btn-accent, html.rs-dark .btn-y, html.rs-dark .pri {
  background: var(--rs-yellow) !important; color: var(--rs-navy) !important; border-color: var(--rs-yellow) !important;
}
html.rs-dark .btn-primary:hover, html.rs-dark .btn-p:hover, html.rs-dark .btn-accent:hover, html.rs-dark .btn-y:hover, html.rs-dark .pri:hover { background: var(--rs-yellow-2) !important; }
html.rs-light .btn-p, html.rs-light .btn-accent, html.rs-light .btn-y, html.rs-light .pri {
  background: var(--rs-violet) !important; color: #fff !important; border-color: var(--rs-violet) !important;
}
html.rs-on .btn-outline, html.rs-on .btn-o {
  background: transparent !important; border: 1.5px solid currentColor !important;
}
html.rs-on .btn-ghost:hover, html.rs-on .ghost:hover { background: rgba(127, 127, 127, .14) !important; }

/* ── الوضع الليلي: أبيض وأسود ── */
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) { filter: invert(1) hue-rotate(180deg); background: #fff; }
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) img, html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) video, html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) picture,
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) iframe, html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) canvas, html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) [style*="background-image"] { filter: invert(1) hue-rotate(180deg); }
html.rs-night #rsHeader { background: #000; border-bottom-color: #222; }
html.rs-night.rs-dark:root { --bg: #000 !important; --bg2: #0a0a0a !important; --surface: #111 !important; --surface2: #1a1a1a !important; }
/* الصفحات الفاتحة بتتعكس بالكامل — الهيدر يتلوّن أبيض عشان يطلع أسود بعد العكس */
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader { background: #fff; border-bottom-color: #ddd; }
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-ibtn, html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-logo { color: #000; }
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-ibtn:hover { background: #eee; }
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-mark { background: #000; color: #fff; }
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-logo b { color: #000; }
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-av { background: #000; color: #fff; }
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-lang-menu { filter: none; }


/* زر إظهار/إخفاء الباسورد */
.rs-pw { position: relative; display: block; width: 100%; }
.rs-pw > input { width: 100% !important; padding-inline-end: 40px !important; box-sizing: border-box; }
.rs-eye { position: absolute; top: 50%; inset-inline-end: 8px; transform: translateY(-50%); background: none !important; border: 0 !important; padding: 4px !important; margin: 0 !important; cursor: pointer; color: inherit; opacity: .65; line-height: 1; width: auto !important; min-width: 0 !important; }
.rs-eye:hover { opacity: 1; }
.rs-eye .ti { font-size: 18px; }

/* ═══════════ تنسيق Codecademy الكامل (خطوط، كروت، أزرار، قوائم، خانات، تحميل، حركة) ═══════════ */
:root { --rs-ease: cubic-bezier(.25,.1,.25,1); --rs-shadow-off: 4px; }
html.rs-on code, html.rs-on pre, html.rs-on kbd, html.rs-on samp { font-family: "JetBrains Mono", Consolas, monospace !important; }
html.rs-on h1, html.rs-on h2, html.rs-on h3 { letter-spacing: -0.01em; font-weight: 700; }

/* الكروت: حواف حادة + إطار واضح + ظل مُزاح عند المرور (توقيع Codecademy) */
html.rs-on .card, html.rs-on .panel, html.rs-on .box, html.rs-on .tile, html.rs-on .stat-card, html.rs-on .app-card, html.rs-on .prog-card, html.rs-on .course-card, html.rs-on .item-card {
  border-radius: 4px !important;
  transition: transform .2s var(--rs-ease), box-shadow .2s var(--rs-ease), border-color .2s var(--rs-ease) !important;
}
html.rs-dark .card, html.rs-dark .panel, html.rs-dark .stat-card, html.rs-dark .app-card, html.rs-dark .prog-card, html.rs-dark .course-card, html.rs-dark .item-card { border: 1px solid rgba(255,255,255,.14) !important; }
html.rs-light .card, html.rs-light .panel, html.rs-light .stat-card, html.rs-light .app-card, html.rs-light .prog-card, html.rs-light .course-card, html.rs-light .item-card { border: 1px solid var(--rs-navy) !important; }
html.rs-on a.card:hover, html.rs-on .app-card:hover, html.rs-on .prog-card:hover, html.rs-on .course-card:hover, html.rs-on .item-card:hover, html.rs-on .card[onclick]:hover {
  transform: translate(calc(var(--rs-shadow-off) * -1), calc(var(--rs-shadow-off) * -1));
}
html.rs-dark a.card:hover, html.rs-dark .app-card:hover, html.rs-dark .prog-card:hover, html.rs-dark .course-card:hover, html.rs-dark .item-card:hover, html.rs-dark .card[onclick]:hover { box-shadow: var(--rs-shadow-off) var(--rs-shadow-off) 0 var(--rs-yellow) !important; border-color: var(--rs-yellow) !important; }
html.rs-light a.card:hover, html.rs-light .app-card:hover, html.rs-light .prog-card:hover, html.rs-light .course-card:hover, html.rs-light .item-card:hover, html.rs-light .card[onclick]:hover { box-shadow: var(--rs-shadow-off) var(--rs-shadow-off) 0 var(--rs-navy) !important; }

/* الأزرار الأساسية: نفس الحركة — الزر يرتفع وظله يبان */
html.rs-on .btn-primary, html.rs-on .btn-p, html.rs-on .btn-accent, html.rs-on .btn-y, html.rs-on .pri, html.rs-on button.primary, html.rs-on .btn.primary {
  transition: transform .15s var(--rs-ease), box-shadow .15s var(--rs-ease), background-color .15s !important;
}
html.rs-on .btn-primary:hover, html.rs-on .btn-p:hover, html.rs-on .btn-accent:hover, html.rs-on .btn-y:hover, html.rs-on .pri:hover, html.rs-on button.primary:hover, html.rs-on .btn.primary:hover { transform: translate(-2px, -2px); }
html.rs-dark .btn-primary:hover, html.rs-dark .btn-p:hover, html.rs-dark .btn-accent:hover, html.rs-dark .btn-y:hover, html.rs-dark .pri:hover, html.rs-dark button.primary:hover { box-shadow: 2px 2px 0 #fff !important; }
html.rs-light .btn-primary:hover, html.rs-light .btn-p:hover, html.rs-light .btn-accent:hover, html.rs-light .btn-y:hover, html.rs-light .pri:hover, html.rs-light button.primary:hover { box-shadow: 2px 2px 0 var(--rs-navy) !important; }
html.rs-on .btn-primary:active, html.rs-on .btn-p:active, html.rs-on .pri:active, html.rs-on button.primary:active { transform: none; box-shadow: none !important; }
#rsHeader .rs-cta { transition: transform .15s var(--rs-ease), box-shadow .15s var(--rs-ease); }
#rsHeader .rs-cta:hover { transform: translate(-2px,-2px); box-shadow: 2px 2px 0 #fff; }

/* الخانات: إطار 1px، تركيز بإطار سميك بلون الهوية */
html.rs-on input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html.rs-on select, html.rs-on textarea {
  border-radius: 4px !important; transition: border-color .15s, box-shadow .15s !important;
}
html.rs-dark input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, html.rs-dark select:focus, html.rs-dark textarea:focus { border-color: var(--rs-yellow) !important; box-shadow: 0 0 0 1px var(--rs-yellow) !important; outline: none !important; }
html.rs-light input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, html.rs-light select:focus, html.rs-light textarea:focus { border-color: var(--rs-violet) !important; box-shadow: 0 0 0 1px var(--rs-violet) !important; outline: none !important; }
html.rs-on input[type=checkbox], html.rs-on input[type=radio] { accent-color: var(--rs-violet); }
html.rs-dark input[type=checkbox], html.rs-dark input[type=radio] { accent-color: var(--rs-yellow); }

/* القوائم المنسدلة والمودالات: حواف 4px، ظهور بحركة */
html.rs-on .dropdown-menu, html.rs-on .user-dropdown, html.rs-on .menu, html.rs-on .context-menu, html.rs-on .ctx-menu, #rsHeader .rs-lang-menu { border-radius: 4px !important; }
html.rs-on .modal, html.rs-on .modal-content, html.rs-on .modal-box, html.rs-on .dialog { border-radius: 4px !important; animation: rsPop .22s var(--rs-ease); }
#rsHeader .rs-lang.open .rs-lang-menu { animation: rsDrop .16s var(--rs-ease); }
@keyframes rsPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rsDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* الجداول */
html.rs-on table th { font-weight: 700; letter-spacing: .02em; }
html.rs-dark table tbody tr:hover { background: rgba(255,211,0,.05); }

/* التبويبات: خط سفلي بلون الهوية للتبويب النشط */
html.rs-on .tab.active, html.rs-on .tab.on, html.rs-on .tabs .active { box-shadow: inset 0 -3px 0 var(--rs-yellow) !important; }
html.rs-light .tab.active, html.rs-light .tab.on, html.rs-light .tabs .active { box-shadow: inset 0 -3px 0 var(--rs-violet) !important; }

/* علامات التحميل: شريط أعلى الصفحة + سبينر موحد */
#rsLoad { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 2147483002; background: var(--rs-yellow); transform-origin: left; transform: scaleX(0); animation: rsLoad 1.1s var(--rs-ease) forwards; pointer-events: none; }
#rsLoad.done { transform: scaleX(1); opacity: 0; transition: opacity .3s .1s; animation: none; }
@keyframes rsLoad { 0% { transform: scaleX(0); } 60% { transform: scaleX(.7); } 100% { transform: scaleX(.9); } }
html.rs-on .spinner, html.rs-on .loader, html.rs-on .loading-spinner, html.rs-on .spin {
  border: 3px solid rgba(127,127,127,.25) !important; border-top-color: var(--rs-yellow) !important; border-radius: 50% !important; animation: rsSpin .7s linear infinite !important;
}
html.rs-light .spinner, html.rs-light .loader, html.rs-light .loading-spinner, html.rs-light .spin { border-top-color: var(--rs-violet) !important; }
@keyframes rsSpin { to { transform: rotate(360deg); } }

/* دخول المحتوى بنعومة */
@media (prefers-reduced-motion: reduce) { html.rs-on *, #rsLoad { animation: none !important; transition: none !important; } }


/* ═══════════ Codecademy (مراجعة 2): هيدر أسود، لوجو بصندوق، أصفر/أسود، Mono للعناوين الصغيرة، نقط في الخلفية ═══════════ */
#rsHeader { background: #10162f !important; border-bottom: 1px solid #1f1f1f !important; height: 64px; }
:root { --rs-h: 64px; }
#rsHeader .rs-logo { font-size: 21px; font-weight: 500; gap: 0; letter-spacing: -.01em; }
#rsHeader .rs-logo b { color: #fff !important; border: 2px solid #fff; padding: 0 4px; margin-inline-end: 1px; font-weight: 500; line-height: 1.15; }
#rsHeader .rs-logo:hover b { background: #fff; color: #000 !important; }
#rsHeader .rs-cta { background: var(--rs-yellow) !important; color: #000 !important; border-radius: 4px; padding: 9px 18px; font-weight: 700; }
#rsHeader .rs-cta:hover { transform: none; box-shadow: none; background: #ffe566 !important; }
#rsHeader .rs-ibtn { color: #fff; }
#rsHeader nav { align-items: center; }
/* الشريط القديم بعد نقله جوه الهيدر */
#rsHeader .rs-moved { position: static !important; inset: auto !important; height: auto !important; min-height: 0 !important; width: auto !important; max-width: 100%; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center; gap: 8px; color: #fff; flex: 1; min-width: 0; transform: none !important; }
#rsHeader .rs-moved input { background: #111 !important; color: #fff !important; border: 1px solid #333 !important; height: 36px; border-radius: 4px !important; }
#rsHeader .rs-moved a, #rsHeader .rs-moved button { color: #fff; }

/* الصفحات الغامقة = Codecademy: أسود + أصفر + نقط خفيفة */
html.rs-dark:root { --bg: #10162f !important; --bg2: #141b38 !important; --surface: #1b2347 !important; --surface2: #232c56 !important; }
html.rs-night.rs-dark:root { --bg: #000 !important; --bg2: #0a0a0a !important; --surface: #0f0f0f !important; --surface2: #1a1a1a !important; }
html.rs-dark body { background-color: #10162f !important; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) !important; background-size: 6px 6px !important; color: #fff; }
html.rs-dark .card, html.rs-dark .panel, html.rs-dark .stat-card, html.rs-dark .app-card, html.rs-dark .prog-card, html.rs-dark .course-card, html.rs-dark .item-card { background-color: var(--bg) !important; border: 2px solid #fff !important; border-radius: 8px !important; }
html.rs-dark .card:hover, html.rs-dark .app-card:hover, html.rs-dark .prog-card:hover { border-color: var(--rs-yellow) !important; }
/* أزرار: أصفر بنص أسود، أو أبيض بنص أسود، حواف 4px، من غير ظل */
html.rs-dark .btn-primary, html.rs-dark .btn-p, html.rs-dark .btn-accent, html.rs-dark .btn-y, html.rs-dark .pri, html.rs-dark button.primary, html.rs-dark .btn.primary { background: var(--rs-yellow) !important; color: #000 !important; border: 0 !important; box-shadow: none !important; }
html.rs-on .btn-primary:hover, html.rs-on .btn-p:hover, html.rs-on .pri:hover, html.rs-on button.primary:hover, html.rs-on .btn.primary:hover { transform: none !important; box-shadow: none !important; filter: brightness(1.08); }
html.rs-dark .btn-outline, html.rs-dark .btn-o, html.rs-dark .btn-secondary { background: #fff !important; color: #000 !important; border: 0 !important; }
/* خط Mono للعناوين الصغيرة والشارات (توقيع Codecademy) */
html.rs-on .badge, html.rs-on .tag, html.rs-on .chip, html.rs-on .eyebrow, html.rs-on .kicker, html.rs-on .label-mono, html.rs-on th, html.rs-on .section-label { font-family: "JetBrains Mono", "IBM Plex Sans Arabic", monospace !important; letter-spacing: .02em; }
/* الخانات: أسود بإطار رمادي، تركيز أصفر */
html.rs-dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html.rs-dark select, html.rs-dark textarea { background-color: #000 !important; border: 1px solid #5c5c5c !important; color: #fff !important; }
html.rs-dark ::placeholder { color: #8c8c8c !important; }
/* روابط */
html.rs-dark a:not([class]) { color: var(--rs-yellow); }
/* الصفحات الفاتحة في الليل بتتعكس: الهيدر يتكتب أبيض عشان يطلع أسود */
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader { background: #fff !important; border-bottom-color: #e0e0e0 !important; }
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-logo b { color: #000 !important; border-color: #000; }
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-ibtn, html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-moved, html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-moved a, html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-moved button { color: #000; }
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) #rsHeader .rs-cta { background: #002cff !important; color: #fff !important; }
/* زرار أساسي في الصفحات المعكوسة ليلاً: أزرق قبل العكس = أصفر Codecademy بعده */
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]):root { --primary: #002cff !important; --accent: #002cff !important; }
html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) .btn-primary, html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) .btn-p, html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) .pri, html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) button.primary, html.rs-night.rs-light:not([data-rs-lite]):not([data-theme]):not([data-rs-radbit]):not([data-rs-rbdark]) .btn.primary { background: #002cff !important; border-color: #002cff !important; color: #fff !important; }

/* نهار = كحلي Codecademy، ليل = أسود Codecademy */
html.rs-night.rs-dark body { background-color: #000 !important; }
html.rs-night:not(.rs-light) #rsHeader, html.rs-night[data-rs-lite] #rsHeader { background: #000 !important; }
html.rs-dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html.rs-dark select, html.rs-dark textarea { background-color: var(--bg) !important; }
/* قايمة حساب اللانشر جوه الهيدر */
#rsHeader .rs-acct { position: relative; width: 0; height: 32px; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
#rsHeader .rs-acct > .av, #rsHeader .rs-acct > #userName, #rsHeader .rs-acct > .chev { display: none !important; }
#rsHeader .rs-acct .ud { position: fixed !important; top: 60px !important; inset-inline-end: 12px !important; left: auto; right: 12px !important; }
html[dir="ltr"] #rsHeader .rs-acct .ud { right: 12px !important; }
#rsHeader #notifBtn { position: relative; font-size: 16px; }
#rsHeader .rs-acct .ud { background: #fff !important; border: 1px solid #10162f !important; border-radius: 4px !important; min-width: 180px; padding: 6px !important; }
#rsHeader .rs-acct .ud-item { color: #10162f !important; font-size: 14px !important; padding: 9px 12px !important; }
#rsHeader .rs-acct .ud-item:hover { background: #fff0e5 !important; }
#rsHeader .rs-acct .ud-divider { background: #e0e0e0 !important; }

/* ═══ اللانشر (.frame بمتغيرات --f-*) بألوان Codecademy ═══ */
html.rs-on .frame {
  --f-surface: #ffffff !important; --f-surface2: #fff0e5 !important; --f-surface3: #fbe6d6 !important;
  --f-border: #10162f33 !important; --f-border2: #10162f40 !important;
  --f-ink: #10162f !important; --f-ink2: #3d4566 !important; --f-ink3: #5d6584 !important; --f-ink-faint: #8a90a8 !important;
  --f-accent: #3a10e5 !important; --f-accent-deep: #2a0bb0 !important; --f-accent-ink: #ffffff !important;
  --f-accent-soft: rgba(58,16,229,.3) !important; --f-accent-tint: #efeaff !important; --f-accent-faint: rgba(58,16,229,.08) !important;
  --f-primary: #3a10e5 !important; --f-primary-light: #8a7dff !important; --f-primary-glow: rgba(58,16,229,.25) !important;
  --f-scene-bg: #fff0e5 !important; --f-grid-line: #10162f !important;
  --f-input-bg: #ffffff !important; --f-input-border: #10162f !important;
  --f-item-bg: #ffffff !important; --f-item-border: #10162f26 !important;
  --f-toast-bg: #10162f !important; --f-glass-bg: rgba(255,255,255,.92) !important;
  font-family: "DM Sans", "IBM Plex Sans Arabic", sans-serif !important;
}
html.rs-on .frame.dark {
  --f-surface: #0a0a0a !important; --f-surface2: #141414 !important; --f-surface3: #1f1f1f !important;
  --f-border: #3a3a3a !important; --f-border2: #4a4a4a !important;
  --f-ink: #ffffff !important; --f-ink2: #cfcfcf !important; --f-ink3: #9a9a9a !important; --f-ink-faint: #6e6e6e !important;
  --f-accent: #ffd300 !important; --f-accent-deep: #e6be00 !important; --f-accent-ink: #000000 !important;
  --f-accent-soft: rgba(255,211,0,.32) !important; --f-accent-tint: rgba(255,211,0,.12) !important; --f-accent-faint: rgba(255,211,0,.08) !important;
  --f-primary: #ffd300 !important; --f-primary-light: #ffe566 !important; --f-primary-glow: rgba(255,211,0,.25) !important;
  --f-scene-bg: #000000 !important; --f-grid-line: #ffffff !important;
  --f-input-bg: #000000 !important; --f-input-border: #5c5c5c !important;
  --f-item-bg: #0a0a0a !important; --f-item-border: #3a3a3a !important;
  --f-toast-bg: #ffd300 !important; --f-toast-ink: #000 !important; --f-glass-bg: rgba(0,0,0,.85) !important;
}
html.rs-on .frame .topbar, html.rs-on .frame .tbtn, html.rs-on .frame .abtn { border-radius: 4px !important; }
html.rs-on .frame .tbtn:not(.gray):not(.icon) { background: var(--f-accent) !important; color: var(--f-accent-ink) !important; font-weight: 700 !important; border: 0 !important; }
/* لوحة إشعارات اللانشر: فوق الهيدر الموحد وتحته مباشرة */
html.rs-on #notifPanel { top: calc(var(--rs-h) + 6px) !important; left: auto !important; right: auto !important; inset-inline-end: 120px !important; z-index: 2147483001 !important; border-radius: 4px !important; background: #fff !important; color: #10162f !important; border: 1px solid #10162f !important; box-shadow: 0 8px 24px rgba(16,22,47,.25) !important; opacity: 1 !important; }
html.rs-night #notifPanel { background: #0a0a0a !important; color: #fff !important; border-color: #3a3a3a !important; }

/* ═══ Rad Pulse (social.html — متغيرات --bg/--panel/--acc) بألوان Codecademy ═══ */
html.rs-on[data-theme=light] { --g1:#3a10e5 !important; --g2:#3a10e5 !important; --grad:#3a10e5 !important; --bg:#fff0e5 !important; --bg-glow:none !important; --panel:#ffffff !important; --panel2:#fff7f0 !important; --line:#10162f26 !important; --text:#10162f !important; --muted:#5d6584 !important; --acc:#3a10e5 !important; --acc2:#efeaff !important; --ring:rgba(58,16,229,.3) !important; --side:#ffffff !important; }
html.rs-on[data-theme=dark] { --g1:#ffd300 !important; --g2:#ffd300 !important; --grad:#ffd300 !important; --bg:#000 !important; --bg-glow:none !important; --panel:#0a0a0a !important; --panel2:#141414 !important; --line:#3a3a3a !important; --text:#ffffff !important; --muted:#a8a8a8 !important; --acc:#ffd300 !important; --acc2:rgba(255,211,0,.12) !important; --ring:rgba(255,211,0,.3) !important; --side:#0a0a0a !important; }
html.rs-on[data-theme=dark] body { background-color: #000 !important; }
html.rs-on[data-theme] body { background-image: none !important; }
html.rs-on[data-theme=dark] .btn.pri, html.rs-on[data-theme=dark] .pri { color: #000 !important; }
/* Rad Pulse: تفاصيل Codecademy — حواف 4px، من غير دواير الزينة، لوجو بلون الهوية، نص الأزرار */
html.rs-on[data-theme] .kpi::after { display: none !important; }
html.rs-on[data-theme] .card, html.rs-on[data-theme] .kpi, html.rs-on[data-theme] .btn, html.rs-on[data-theme] .chip, html.rs-on[data-theme] .pill, html.rs-on[data-theme] .tab, html.rs-on[data-theme] .modal, html.rs-on[data-theme] .nav a, html.rs-on[data-theme] .side a, html.rs-on[data-theme] input, html.rs-on[data-theme] select, html.rs-on[data-theme] textarea { border-radius: 4px !important; }
html.rs-on[data-theme] .card, html.rs-on[data-theme] .kpi { box-shadow: none !important; }
html.rs-on[data-theme=light] .card, html.rs-on[data-theme=light] .kpi { border: 1px solid #10162f !important; }
html.rs-on[data-theme=dark] .card, html.rs-on[data-theme=dark] .kpi { border: 2px solid #fff !important; }
html.rs-on[data-theme] .card:hover, html.rs-on[data-theme] .kpi:hover { transform: none !important; }
html.rs-on[data-theme=dark] .card:hover, html.rs-on[data-theme=dark] .kpi:hover { border-color: #ffd300 !important; }
html.rs-on[data-theme] .logo > :first-child { background: var(--acc) !important; color: var(--bg) !important; border-radius: 4px !important; box-shadow: none !important; }
html.rs-on[data-theme] .side { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.rs-on[data-theme=light] .btn.pri, html.rs-on[data-theme=light] .pri { color: #fff !important; }
html.rs-on[data-theme] h1, html.rs-on[data-theme] h2, html.rs-on[data-theme] h3 { font-family: "DM Sans", "IBM Plex Sans Arabic", sans-serif !important; }
html.rs-on[data-theme] .kpi .lbl, html.rs-on[data-theme] .muted.small, html.rs-on[data-theme] .side h6, html.rs-on[data-theme] .side .sec { font-family: "JetBrains Mono", "IBM Plex Sans Arabic", monospace !important; }

/* ═══ Radbit (radwan-range — متغيرات --r-*) بألوان Codecademy ═══ */
html[data-rs-radbit] {
  --r-surface:#ffffff !important; --r-surface2:#fff0e5 !important; --r-surface3:#fbe6d6 !important;
  --r-border:#10162f33 !important; --r-border2:#10162f40 !important;
  --r-ink:#10162f !important; --r-ink2:#3d4566 !important; --r-ink3:#5d6584 !important; --r-ink-faint:#8a90a8 !important;
  --r-accent:#3a10e5 !important; --r-accent-deep:#2a0bb0 !important; --r-accent-ink:#ffffff !important;
  --r-accent-soft:rgba(58,16,229,.3) !important; --r-accent-tint:#efeaff !important; --r-accent-faint:rgba(58,16,229,.08) !important;
  --r-scene-bg:#fff0e5 !important; --r-grid-line:#10162f !important;
  --r-input-bg:#ffffff !important; --r-input-border:#10162f !important; --r-item-bg:#ffffff !important; --r-item-border:#10162f26 !important;
  --r-toast-bg:#10162f !important; --r-glass:rgba(255,255,255,.95) !important;
  --r-radius:4px !important; --r-radius-sm:4px !important;
}
html[data-rs-radbit].dark {
  --r-surface:#0a0a0a !important; --r-surface2:#141414 !important; --r-surface3:#1f1f1f !important;
  --r-border:#3a3a3a !important; --r-border2:#4a4a4a !important;
  --r-ink:#ffffff !important; --r-ink2:#cfcfcf !important; --r-ink3:#9a9a9a !important; --r-ink-faint:#6e6e6e !important;
  --r-accent:#ffd300 !important; --r-accent-deep:#e6be00 !important; --r-accent-ink:#000000 !important;
  --r-accent-soft:rgba(255,211,0,.32) !important; --r-accent-tint:rgba(255,211,0,.12) !important; --r-accent-faint:rgba(255,211,0,.08) !important;
  --r-scene-bg:#000000 !important; --r-grid-line:#ffffff !important;
  --r-input-bg:#000000 !important; --r-input-border:#5c5c5c !important; --r-item-bg:#0a0a0a !important; --r-item-border:#3a3a3a !important;
  --r-toast-bg:#ffd300 !important; --r-toast-ink:#000 !important; --r-glass:rgba(0,0,0,.9) !important; --r-node-shadow:rgba(255,211,0,.2) !important;
}
html[data-rs-radbit] body { font-family: "DM Sans", "IBM Plex Sans Arabic", sans-serif !important; background-image: none !important; background-color: var(--r-surface) !important; color: var(--r-ink) !important; }

/* Radbit: moved topbar controls inside navy header */
html[data-rs-radbit] #rsHeader .rs-moved .logo{display:none!important}

/* Radbit root pages (forum/chat/profile/badges...): old topbar nav → left sidebar #rsSide */
#rsSide{position:fixed;top:var(--rs-h,64px);left:0;bottom:0;width:220px;padding:16px 10px;overflow-y:auto;background:#fff;border-right:1px solid #e3dcd4;z-index:900;display:flex;flex-direction:column;gap:2px;font-family:"DM Sans","IBM Plex Sans Arabic",sans-serif}
html.rs-night #rsSide{background:#0a0a0a;border-right-color:#262626}
#rsSide .rs-moved, #rsSide .rs-moved div{position:static!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;width:100%!important;height:auto!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;transform:none!important}
#rsSide .rs-moved + .rs-moved{border-top:1px solid #e3dcd4!important;margin-top:10px!important;padding-top:10px!important}
html.rs-night #rsSide .rs-moved + .rs-moved{border-top-color:#262626!important}
#rsSide a, #rsSide button{display:flex!important;align-items:center;justify-content:flex-start;gap:10px;width:100%!important;padding:10px 12px!important;border-radius:4px!important;background:transparent!important;border:0!important;color:#10162f!important;font:600 14px "DM Sans","IBM Plex Sans Arabic",sans-serif!important;text-align:right;text-decoration:none;box-shadow:none!important;height:auto!important;cursor:pointer}
html.rs-night #rsSide a, html.rs-night #rsSide button{color:#fff!important}
#rsSide a:hover, #rsSide button:hover{background:rgba(58,16,229,.08)!important}
html.rs-night #rsSide a:hover, html.rs-night #rsSide button:hover{background:rgba(255,211,0,.1)!important}
#rsSide a.on, #rsSide a.active{background:#3a10e5!important;color:#fff!important}
html.rs-night #rsSide a.on, html.rs-night #rsSide a.active{background:#ffd300!important;color:#000!important}
#rsSide .page-title{font:700 11px "JetBrains Mono",monospace!important;color:#6b6b80!important;padding:4px 12px 8px!important;letter-spacing:.06em}
#rsSide .logo{display:none!important}
#rsSide .tb-btn[title]::after{content:attr(title)}
html.rs-on[data-rs-rbside] body{padding-left:220px!important}
@media (max-width:760px){#rsSide{width:60px;padding:10px 6px}html.rs-on[data-rs-rbside] body{padding-left:60px!important}#rsSide .page-title,#rsSide .tb-btn[title]::after{display:none!important}#rsSide a,#rsSide button{font-size:0!important;justify-content:center}#rsSide i{font-size:20px!important}}
#rsHeader .rs-search{flex:1;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:4px;color:#fff;transition:border-color .15s,background .15s}
#rsHeader .rs-search:focus-within{border-color:#ffd300;background:rgba(255,255,255,.12)}
#rsHeader .rs-search input{flex:1;min-width:0;background:transparent!important;border:0!important;outline:0;color:#fff!important;font:500 14px "DM Sans","IBM Plex Sans Arabic",sans-serif;height:auto;box-shadow:none!important}
#rsHeader .rs-search input::placeholder{color:rgba(255,255,255,.6)}
#rsHeader .rs-search i{font-size:18px;opacity:.8}
html.rs-on[data-rs-rbside] #rsHeader nav{flex:1;display:flex;justify-content:center;padding:0 16px}
@media (max-width:760px){#rsHeader .rs-search{height:36px}#rsHeader .rs-search input::placeholder{color:transparent}}
#rsSide [onclick*="launcher"]{display:none!important}

/* Radbit range: vertical app rail (.nav-tabs) lives inside header — undo header's white text-fill */
html[data-rs-radbit] #rsHeader .rs-moved .nav-tabs, html[data-rs-radbit] #rsHeader .rs-moved .nav-tabs *, html[data-rs-radbit] #rsHeader .rs-moved .app-rail-toggle{-webkit-text-fill-color:currentColor!important}
html[data-rs-radbit] #rsHeader .rs-moved .nav-tab{color:#5c5f70!important}
html[data-rs-radbit] #rsHeader .rs-moved .nav-tab:hover{color:#3a10e5!important;background:rgba(58,16,229,.08)!important}
html[data-rs-radbit] #rsHeader .rs-moved .nav-tab.active{color:#3a10e5!important;background:rgba(58,16,229,.1)!important}
html[data-rs-radbit].dark #rsHeader .rs-moved .nav-tab{color:#b8b8c0!important}
html[data-rs-radbit].dark #rsHeader .rs-moved .nav-tab:hover, html[data-rs-radbit].dark #rsHeader .rs-moved .nav-tab.active{color:#ffd300!important;background:rgba(255,211,0,.1)!important}
html[data-rs-radbit] #rsHeader .rs-moved .app-rail-toggle{color:#10162f!important}
html[data-rs-radbit].dark #rsHeader .rs-moved .app-rail-toggle{color:#fff!important}
html[data-rs-radbit] #rsHeader .rs-moved .topbar-right{display:none!important}

/* ═══ Rad Circuits + RAD CLOUD بألوان Codecademy ═══ */
html[data-rs-page="circuits"]:root{--bg:#fff0e5!important;--panel:#fff!important;--line:#e3d6cc!important;--line2:#d4c4b8!important;--ink:#10162f!important;--mute:#5c5f70!important;--soft:#fbe6d7!important;--accent:#3a10e5!important;--accent-ink:#fff!important;--sel:#3a10e5!important;--grid:#ecdccf!important;--card:#fffaf6!important}
html[data-rs-page="circuits"][data-theme="dark"]:root{--bg:#000!important;--panel:#0a0a0a!important;--line:#262626!important;--line2:#333!important;--ink:#fff!important;--mute:#a0a0a8!important;--soft:#141414!important;--accent:#ffd300!important;--accent-ink:#000!important;--sel:#ffd300!important;--grid:#1f1f1f!important;--card:#0f0f0f!important}
html[data-rs-page="cloud-app"]:root{--bg:#fff0e5!important;--bg2:#fbe6d7!important;--surface:#fff!important;--border:#e3d6cc!important;--primary:#3a10e5!important;--primary-light:rgba(58,16,229,.08)!important;--text:#10162f!important;--text2:#5c5f70!important;--sidebar:#fff!important;--hover:#fbe6d7!important;--radius:4px!important}
html[data-rs-page="cloud-app"][data-theme="dark"]:root{--bg:#000!important;--bg2:#0a0a0a!important;--surface:#0f0f0f!important;--border:#262626!important;--primary:#ffd300!important;--primary-light:rgba(255,211,0,.1)!important;--text:#fff!important;--text2:#a0a0a8!important;--sidebar:#0a0a0a!important;--hover:#1a1a1a!important}
html[data-rs-page="cloud-app"][data-theme="dark"] .btn-primary, html[data-rs-page="cloud-app"][data-theme="dark"] [class*="new-btn"]{color:#000!important}
html[data-rs-page="circuits"] body, html[data-rs-page="cloud-app"] body{font-family:"DM Sans","IBM Plex Sans Arabic",sans-serif!important}
/* Radbit rail: start under the site header, end above the status bar, scroll if short */
html[data-rs-radbit] #rsHeader .rs-moved .nav-tabs{top:var(--rs-h,64px)!important;bottom:28px!important;height:auto!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important}
/* RAD CLOUD: أدوات الملفات في صف الهيدر + سايدبار التخزين دايماً ظاهر تحت */
html[data-rs-page="cloud-app"] .topbar-right{display:flex;align-items:center;gap:8px}
html[data-rs-page="cloud-app"] .rs-cloud-tools{display:flex!important;align-items:center;gap:6px;margin:0!important}
html[data-rs-page="cloud-app"] .sidebar{display:flex!important;flex-direction:column!important;overflow:hidden!important}
html[data-rs-page="cloud-app"] .sidebar > .rs-grow{flex:1 1 0!important;min-height:60px;overflow-y:auto!important}
html[data-rs-page="cloud-app"] .sidebar > *{flex-shrink:0}
html[data-rs-page="cloud-app"] .storage-bar{margin-top:auto!important;flex:none!important}
html[data-rs-page="cloud-app"] .topbar-logo{display:none!important}
/* RAD CLOUD sidebar — نفس لغة Codecademy بتاعة باقي الصفحة */
html[data-rs-page="cloud-app"] .sidebar{background:var(--bg)!important;border-color:var(--border)!important;padding:12px 10px!important;font-family:"DM Sans","IBM Plex Sans Arabic",sans-serif!important}
html[data-rs-page="cloud-app"] .sidebar .tb-btn.primary{width:100%;height:42px;justify-content:center;border-radius:4px!important;background:var(--primary)!important;color:#fff!important;font-weight:700;box-shadow:none!important;border:0!important}
html[data-rs-page="cloud-app"][data-theme="dark"] .sidebar .tb-btn.primary{color:#000!important}
html[data-rs-page="cloud-app"] .sidebar .tb-btn.primary:hover{box-shadow:3px 3px 0 var(--text)!important;transform:translate(-1px,-1px)}
html[data-rs-page="cloud-app"] .sidebar-section{padding:6px 0!important;margin:0!important}
html[data-rs-page="cloud-app"] .sidebar-item, html[data-rs-page="cloud-app"] .ftree-i{border-radius:4px!important;margin:1px 0!important;color:var(--text)!important;font-size:14px;font-weight:500;border-inline-start:3px solid transparent;transition:background .12s}
html[data-rs-page="cloud-app"] .sidebar-item{height:40px;padding:0 12px!important}
html[data-rs-page="cloud-app"] .ftree-i{padding:6px 10px!important;font-size:13px}
html[data-rs-page="cloud-app"] .sidebar-item:hover, html[data-rs-page="cloud-app"] .ftree-i:hover{background:var(--primary-light)!important}
html[data-rs-page="cloud-app"] .sidebar-item.active, html[data-rs-page="cloud-app"] .ftree-i.active{background:var(--primary-light)!important;color:var(--primary)!important;font-weight:700;border-inline-start-color:var(--primary)}
html[data-rs-page="cloud-app"] .sidebar-item i, html[data-rs-page="cloud-app"] .ftree-i i{color:inherit!important}
html[data-rs-page="cloud-app"] .sidebar-tree-label{font:700 11px "JetBrains Mono",monospace!important;letter-spacing:.08em;text-transform:uppercase;color:var(--text2)!important;padding:8px 12px 6px!important}
html[data-rs-page="cloud-app"] .sidebar-divider{background:var(--border)!important;margin:6px 0!important}
html[data-rs-page="cloud-app"] .sidebar *{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
html[data-rs-page="cloud-app"] .sidebar ::-webkit-scrollbar{width:6px}
html[data-rs-page="cloud-app"] .sidebar ::-webkit-scrollbar-button{display:none;height:0}
html[data-rs-page="cloud-app"] .sidebar ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
html[data-rs-page="cloud-app"] .storage-bar{margin:8px 0 0!important;background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:4px!important;padding:12px!important}
html[data-rs-page="cloud-app"] .storage-label{font:700 11px "JetBrains Mono",monospace!important;letter-spacing:.06em;color:var(--text2)!important}
html[data-rs-page="cloud-app"] .storage-track{height:6px!important;border-radius:3px!important;background:var(--bg2)!important;margin:8px 0!important}
html[data-rs-page="cloud-app"] .storage-fill{background:var(--primary)!important;border-radius:3px!important}
html[data-rs-page="cloud-app"] .storage-text{font-size:12px!important;color:var(--text)!important;font-weight:600}
html[data-rs-page="cloud-app"] .sidebar-tree-label, html[data-rs-page="cloud-app"] .storage-label{letter-spacing:0!important;font-family:"IBM Plex Sans Arabic","DM Sans",sans-serif!important}

/* ═══ RAD HUB بتنسيق Codecademy ═══ */
html[data-rs-page="hub"]:not(.dark){--bg:#fff0e5!important;--surface:#fff!important;--surface2:#fbe6d7!important;--border:#e3d6cc!important;--text:#10162f!important;--text2:#5c5f70!important;--text3:#8a8794!important;--primary:#3a10e5!important;--primary2:#5533ff!important;--glow:transparent!important}
html[data-rs-page="hub"].dark{--bg:#000!important;--surface:#0a0a0a!important;--surface2:#141414!important;--border:#262626!important;--text:#fff!important;--text2:#b8b8c0!important;--text3:#8a8a92!important;--primary:#ffd300!important;--primary2:#ffe04d!important;--glow:transparent!important}
html[data-rs-page="hub"] body{background:var(--bg)!important;font-family:"DM Sans","IBM Plex Sans Arabic",sans-serif!important}
html[data-rs-page="hub"].dark body{background-image:radial-gradient(#1c1c1c 1px,transparent 1px)!important;background-size:22px 22px!important}
html[data-rs-page="hub"] .hero{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:4px!important}
html[data-rs-page="hub"].dark .hero{border:2px solid #fff!important}
html[data-rs-page="hub"] .hero:after{display:none!important}
html[data-rs-page="hub"] .hero h2 b{background:none!important;-webkit-text-fill-color:var(--primary)!important;color:var(--primary)!important}
html[data-rs-page="hub"] .hstats b{font-family:"JetBrains Mono",monospace;color:var(--primary)!important}
html[data-rs-page="hub"] .mb, html[data-rs-page="hub"] .tag{border-radius:4px!important;background:var(--surface2)!important;border:1px solid var(--border)!important;font-family:"JetBrains Mono",monospace;font-size:11.5px}
html[data-rs-page="hub"] .btn, html[data-rs-page="hub"] .tabs button, html[data-rs-page="hub"] .psrc button, html[data-rs-page="hub"] .bar, html[data-rs-page="hub"] .bar input, html[data-rs-page="hub"] .bar select, html[data-rs-page="hub"] .f input, html[data-rs-page="hub"] .f select, html[data-rs-page="hub"] .f textarea, html[data-rs-page="hub"] .card, html[data-rs-page="hub"] .modal, html[data-rs-page="hub"] .toast, html[data-rs-page="hub"] .tree, html[data-rs-page="hub"] .plist, html[data-rs-page="hub"] .drop, html[data-rs-page="hub"] .clone, html[data-rs-page="hub"] .gi, html[data-rs-page="hub"] .skel{border-radius:4px!important}
html[data-rs-page="hub"] .btn-p{background:var(--primary)!important;color:#fff!important;box-shadow:none!important}
html[data-rs-page="hub"].dark .btn-p{color:#000!important}
html[data-rs-page="hub"] .btn-p:hover{box-shadow:3px 3px 0 var(--text)!important;transform:translate(-1px,-1px)}
html[data-rs-page="hub"] .tabs button.on, html[data-rs-page="hub"] .psrc button.on{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}
html[data-rs-page="hub"].dark .tabs button.on, html[data-rs-page="hub"].dark .psrc button.on{color:#000!important}
html[data-rs-page="hub"] .bar{background:var(--surface)!important;backdrop-filter:none!important}
html[data-rs-page="hub"] .bar input, html[data-rs-page="hub"] .bar select{background:var(--bg)!important;border:1px solid var(--border)!important}
html[data-rs-page="hub"] .repo{border-radius:4px!important;background:var(--surface)!important;border:1px solid var(--border)!important;backdrop-filter:none!important}
html[data-rs-page="hub"].dark .repo{border:2px solid #fff!important}
html[data-rs-page="hub"] .repo:hover{transform:translate(-2px,-2px)!important;box-shadow:4px 4px 0 var(--primary)!important;border-color:var(--text)!important}
html[data-rs-page="hub"] .repo .cover{border-radius:3px 3px 0 0!important;background-color:var(--surface2)!important}
html[data-rs-page="hub"] .repo .ic{border-radius:4px!important;background:var(--surface2)!important;color:var(--primary)}
html[data-rs-page="hub"] .card{background:var(--surface)!important;backdrop-filter:none!important}
html[data-rs-page="hub"] .modal{background:var(--surface)!important}
html[data-rs-page="hub"] .bar input:focus, html[data-rs-page="hub"] .bar select:focus, html[data-rs-page="hub"] .f input:focus, html[data-rs-page="hub"] .f textarea:focus, html[data-rs-page="hub"] .f select:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)!important}
html[data-rs-page="hub"] .pitem:hover, html[data-rs-page="hub"] .trow:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)!important}
html[data-rs-page="hub"] .pitem.on{background:color-mix(in srgb,var(--primary) 15%,transparent)!important}

/* ── صفحات Radbit الجذرية (forum/profile/...) — تنسيق Codecademy ── */
html[data-rs-rbside]{--r-scene-bg:#fff0e5;--r-surface2:#ffffff;--r-accent:#3a10e5}
html[data-rs-rbside].dark{--r-scene-bg:#000;--r-surface:#0a0a0a;--r-surface2:#0a0a0a;--r-accent:#ffd300;--r-accent-deep:#e6be00;--r-accent-ink:#000;--r-accent-soft:rgba(255,211,0,.32);--r-accent-tint:rgba(255,211,0,.12);--r-accent-faint:rgba(255,211,0,.08)}
html[data-rs-rbside] body{background:#fff0e5!important}
html[data-rs-rbside].dark body{background:#000 radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px) 0 0/22px 22px!important}
html[data-rs-rbside] :is(.side-card,.composer,.empty-feed,.section-tabs,.post,.card,.panel-card){background:#fff!important;border:1px solid #10162f!important;border-radius:4px!important;box-shadow:none!important;transition:transform .15s,box-shadow .15s}
html[data-rs-rbside].dark :is(.side-card,.composer,.empty-feed,.section-tabs,.post,.card,.panel-card){background:#0a0a0a!important;border:2px solid #fff!important}
html[data-rs-rbside] :is(.side-card,.post,.card).fx-lift:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #10162f!important}
html[data-rs-rbside].dark :is(.side-card,.post,.card).fx-lift:hover{box-shadow:4px 4px 0 #ffd300!important}
html[data-rs-rbside] :is(.me-cover){background:#3a10e5!important}
html[data-rs-rbside].dark :is(.me-cover){background:#ffd300!important}
html[data-rs-rbside] :is(.av,.me-av,.composer-avatar){background:#3a10e5!important;color:#fff!important}
html[data-rs-rbside].dark :is(.av,.me-av,.composer-avatar){background:#ffd300!important;color:#000!important}
html[data-rs-rbside] :is(button,.btn,.act-btn,.mini-btn,.side-btn,.section-tab,.fbtn,input,textarea,select){border-radius:4px!important}
html[data-rs-rbside] :is(.act-btn.primary,.section-tab.on){background:#3a10e5!important;color:#fff!important;border-color:#3a10e5!important;background-image:none!important}
html[data-rs-rbside].dark :is(.act-btn.primary,.section-tab.on){background:#ffd300!important;color:#000!important;border-color:#ffd300!important}
html[data-rs-rbside] .act-btn.primary:hover{box-shadow:3px 3px 0 #10162f!important;transform:translate(-1px,-1px)}
html[data-rs-rbside].dark .act-btn.primary:hover{box-shadow:3px 3px 0 #fff!important}
html[data-rs-rbside].dark :is(textarea,input,select){background:#161616!important;color:#f5f5f5!important;border-color:#333!important}

/* ── اللانشر: لمسات Codecademy (زوايا 4px، زرار الهيدر أصفر، ظل المكعبات بلون الوضع) ── */
html.rs-on #rsHeader .frame-tb .tbtn:not(.gray):not(.icon), html.rs-on #rsHeader .topbar.rs-moved .tbtn:not(.gray):not(.icon) { background: #ffd300 !important; color: #000 !important; border-radius: 4px !important; }
html.rs-on .frame :is(.iso-tag,.glyph-badge,.app-card,.sb-toggle,.sb-item,.sb-search,.sb-switch,.sb-close,.wf-svc-card,#wfServicesPanel,.ac-radbit-link) { border-radius: 4px !important; }
html.rs-on .frame .iso-tag { border-color: #10162f !important; box-shadow: none !important; }
html.rs-on .frame.dark .iso-tag { border-color: #fff !important; }
html.rs-on .frame .iso-node:hover .iso-tag { box-shadow: 3px 3px 0 var(--f-accent) !important; }
html.rs-on .frame .cube-shadow { background: radial-gradient(var(--f-accent-soft), transparent 70%) !important; }
html.rs-on .frame .sb-toggle { box-shadow: none !important; }
html.rs-on .frame .sb-toggle:hover { box-shadow: 3px 3px 0 #10162f !important; }
html.rs-on .frame.dark .sb-toggle:hover { box-shadow: 3px 3px 0 #fff !important; }

/* ── هيدر اللانشر منظم: [جديد|حفظ] [أدوات التعديل كمجموعة] … البحث في النص … ── */
html.rs-on #rsHeader .topbar.rs-moved { gap: 8px !important; align-items: center !important; }
html.rs-on #rsHeader .topbar.rs-moved .tbtn.gray:not(.icon) { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.45) !important; border-radius: 4px !important; height: 32px !important; padding: 0 12px !important; font-weight: 700 !important; }
html.rs-on #rsHeader .topbar.rs-moved .tbtn.gray:not(.icon):hover { border-color: #ffd300 !important; color: #ffd300 !important; }
html.rs-on #rsHeader .topbar.rs-moved .tbtn:not(.gray):not(.icon) { height: 32px !important; padding: 0 16px !important; transition: transform .12s, box-shadow .12s !important; }
html.rs-on #rsHeader .topbar.rs-moved .tbtn:not(.gray):not(.icon):hover { transform: translate(-2px,-2px); box-shadow: 2px 2px 0 #fff !important; }
html.rs-on #rsHeader .topbar.rs-moved .tbar-sep { display: none !important; }
/* أدوات التعديل: شريط واحد ببوردر */
html.rs-on #rsHeader .topbar.rs-moved .tbtn.icon { margin: 0 !important; width: 32px !important; height: 32px !important; border-radius: 0 !important; background: transparent !important; border: 1px solid rgba(255,255,255,.25) !important; border-inline-start-width: 0 !important; color: #fff !important; filter: grayscale(1) brightness(1.6); }
html.rs-on #rsHeader .topbar.rs-moved .tbar-sep + .tbtn.icon { border-inline-start-width: 1px !important; border-start-start-radius: 4px !important; border-end-start-radius: 4px !important; margin-inline-start: 8px !important; }
html.rs-on #rsHeader .topbar.rs-moved .tbtn.icon:has(+ .spacer) { border-start-end-radius: 4px !important; border-end-end-radius: 4px !important; }
html.rs-on #rsHeader .topbar.rs-moved .tbtn.icon:hover { background: rgba(255,211,0,.14) !important; filter: none; }
/* البحث في نص الهيدر بنفس شكل بحث باقي الصفحات */
html.rs-on #rsHeader .topbar.rs-moved .quick-search { position: fixed !important; top: calc((var(--rs-h, 64px) - 36px) / 2) !important; left: 50% !important; transform: translateX(-50%) !important; width: min(440px, 34vw) !important; height: 36px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 10px !important; background: #0b1024 !important; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 4px !important; z-index: 5 !important; }
html.rs-on #rsHeader .topbar.rs-moved .quick-search:focus-within { border-color: #ffd300 !important; box-shadow: 0 0 0 1px #ffd300 !important; }
html.rs-on #rsHeader .topbar.rs-moved .quick-search .qs-ico { font-size: 0 !important; width: 14px; height: 14px; flex: none; background: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M21 21l-6-6'/%3E%3C/svg%3E"); }
html.rs-on #rsHeader .topbar.rs-moved .quick-search input { flex: 1 !important; width: auto !important; background: transparent !important; border: 0 !important; outline: 0 !important; color: #fff !important; font-size: 13px !important; box-shadow: none !important; }
html.rs-on #rsHeader .topbar.rs-moved .quick-search input::placeholder { color: rgba(255,255,255,.6) !important; }
html.rs-on #rsHeader .topbar.rs-moved .quick-search .qs-kbd { font-family: "Space Mono", monospace !important; font-size: 10px !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 3px !important; padding: 1px 6px !important; background: transparent !important; }
/* لو الهيدر فيه بحث المنصة العام كمان، في اللانشر نكتفي ببحث التطبيقات */
html.rs-on[data-rs-page="launcher"] #rsHeader .rs-search { display: none !important; }
html.rs-on #rsHeader .topbar.rs-moved .tbtn.icon + .tbtn.icon { margin-inline-start: -8px !important; border-radius: 0 !important; }
html.rs-on #rsHeader .topbar.rs-moved .tbtn.icon:has(+ .spacer) { border-start-end-radius: 4px !important; border-end-end-radius: 4px !important; }
html.rs-on[data-rs-page="launcher"] #rsHeader :is(#notifBtn,.notif-btn,[onclick*="otif"]) { filter: grayscale(1) brightness(2); }

/* ═══ RadAds (ads.html) — Codecademy: زوايا 4px، ألوان سادة، ظل offset ═══ */
html[data-rs-page="ads"] :is(.pill,.eyebrow,.search,.tool,.pc,.zoom,.ftools,.empty,.edc,.tool i,.pc i,.search button,.cx button,.cx select,.cx input,.rail button,.ftools button,.zoom button,.modal,.dlg,.card) { border-radius: 4px !important; }
html[data-rs-page="ads"] :is(#home, .hero, .home-hero) { background-image: none !important; }
html[data-rs-page="ads"] #home em, html[data-rs-page="ads"] .hero em { background: none !important; -webkit-text-fill-color: var(--r-accent) !important; color: var(--r-accent) !important; }
html[data-rs-page="ads"] :is(.pc,.tool) i, html[data-rs-page="ads"] .pc [class*="ico"] { background-image: none !important; background-color: var(--r-accent) !important; color: var(--r-accent-ink, #fff) !important; }
html[data-rs-page="ads"] .pc::before, html[data-rs-page="ads"] .pc::after { background: var(--r-accent) !important; background-image: none !important; border-radius: 0 !important; }
html[data-rs-page="ads"] :is(.pc,.tool,.search) { border: 1px solid #10162f !important; box-shadow: none !important; transition: transform .15s, box-shadow .15s !important; }
html[data-rs-page="ads"] :is(.pc,.tool):hover { transform: translate(-3px,-3px) !important; box-shadow: 4px 4px 0 #10162f !important; }
html[data-rs-page="ads"].dark :is(.pc,.tool,.search) { border: 2px solid #fff !important; }
html[data-rs-page="ads"].dark :is(.pc,.tool):hover { box-shadow: 4px 4px 0 #ffd300 !important; }
html[data-rs-page="ads"] :is(.pill,.eyebrow) { border-color: #10162f !important; font-family: "Space Mono", "IBM Plex Sans Arabic", monospace; }
html[data-rs-page="ads"] .search button, html[data-rs-page="ads"] button.on { background: var(--r-accent) !important; background-image: none !important; color: var(--r-accent-ink, #fff) !important; }
html[data-rs-page="ads"] :is([class*="fab"],.new-btn,#newBtn) { border-radius: 4px !important; background-image: none !important; background-color: var(--r-accent) !important; color: var(--r-accent-ink,#fff) !important; box-shadow: 3px 3px 0 #10162f !important; }
html[data-rs-page="ads"] .hero::before, html[data-rs-page="ads"] .hero::after { background: none !important; display: none !important; }
html[data-rs-page="ads"] .hero { background-image: none !important; }
html[data-rs-page="ads"] .edc::before { background: var(--r-accent) !important; }
html[data-rs-page="ads"] .edc { border: 1px solid #10162f !important; box-shadow: none !important; transition: transform .15s, box-shadow .15s !important; }
html[data-rs-page="ads"] .edc:hover { transform: translate(-3px,-3px) !important; box-shadow: 4px 4px 0 #10162f !important; }
html[data-rs-page="ads"].dark .edc { border: 2px solid #fff !important; }
html[data-rs-page="ads"].dark .edc:hover { box-shadow: 4px 4px 0 #ffd300 !important; }
html[data-rs-page="ads"] .edc i { background-image: none !important; background-color: var(--r-accent) !important; color: var(--r-accent-ink,#fff) !important; border-radius: 4px !important; }
html[data-rs-page="ads"] .tool i { background-image: none !important; background-color: var(--r-accent-tint, #efeaff) !important; color: var(--r-accent) !important; }
/* RadAds — أدوات المحرر في الهيدر والشريط الجانبي */
html[data-rs-page="ads"] #rsHeader .tb :is(.tbn,.tbp,.it,.btn) { border-radius: 4px !important; }
html[data-rs-page="ads"] #rsHeader .tb .tbn { background: transparent !important; border: 1px solid rgba(255,255,255,.3) !important; color: #fff !important; }
html[data-rs-page="ads"] #rsHeader .tb .tbn:hover { border-color: #ffd300 !important; color: #ffd300 !important; }
html[data-rs-page="ads"] #rsHeader .tb #theme { display: none !important; }
html[data-rs-page="ads"] #rsHeader .tb #mdl { background: #ffd300 !important; color: #000 !important; border: 0 !important; font-weight: 700 !important; }
html[data-rs-page="ads"] #rsHeader .tb #mdl:hover { box-shadow: 2px 2px 0 #fff !important; transform: translate(-1px,-1px); }
html[data-rs-page="ads"] #rail button { border-radius: 4px !important; color: var(--r-ink2) !important; }
html[data-rs-page="ads"] #rail button :is(svg,i,img) { filter: grayscale(1) contrast(1.2); }
html[data-rs-page="ads"] #rail button:hover, html[data-rs-page="ads"] #rail button.on { background: var(--r-accent-tint, rgba(58,16,229,.1)) !important; color: var(--r-accent) !important; }
html[data-rs-page="ads"] #rail button.on :is(svg,i,img) { filter: none; }
html[data-rs-page="ads"] #ftools button.on, html[data-rs-page="ads"] .ftools button.on { background: var(--r-accent) !important; color: var(--r-accent-ink,#fff) !important; }
html[data-rs-page="ads"] :is(.edc,.tool,.pc) :is(i,[class*="ico"]) { box-shadow: none !important; filter: none !important; }
html[data-rs-page="ads"] .tool i :is(img,span) { filter: grayscale(1); }

/* ── هيدر RadAds مضغوط: أزرار أصغر وأيقونات بدل الكلام ── */
html[data-rs-page="ads"] #rsHeader .tb { gap: 6px !important; }
html[data-rs-page="ads"] #rsHeader .tb :is(.tbn,.tbp) { height: 30px !important; min-width: 30px !important; padding: 0 9px !important; font-size: 12px !important; gap: 5px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
html[data-rs-page="ads"] #rsHeader .tb :is(.tbn,.tbp) svg { width: 15px !important; height: 15px !important; }
/* أيقونة بس: الرئيسية، الحملات، الخصائص */
html[data-rs-page="ads"] #rsHeader .tb :is(#gohome, a.tbn, #tprops) { font-size: 0 !important; padding: 0 !important; width: 30px !important; }
/* RadAds Pro → ✦ بس */
html[data-rs-page="ads"] #rsHeader .tb #tprops ~ * { }
html[data-rs-page="ads"] #rsHeader .tb a.tbn + button.tbn:not(#tprops) { font-size: 0 !important; padding: 0 !important; width: 30px !important; }
html[data-rs-page="ads"] #rsHeader .tb a.tbn + button.tbn:not(#tprops)::before { content: "✦"; font-size: 14px; }
/* تراجع/إعادة: مجموعة واحدة */
html[data-rs-page="ads"] #rsHeader .tb #undo { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; width: 30px !important; padding: 0 !important; }
html[data-rs-page="ads"] #rsHeader .tb #redo { border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; margin-inline-start: -7px !important; width: 30px !important; padding: 0 !important; }
/* "اتحفظ تلقائي" → علامة صغيرة */
html[data-rs-page="ads"] #rsHeader .tb #saved { font-size: 0 !important; width: 18px !important; display: inline-flex !important; justify-content: center; }
html[data-rs-page="ads"] #rsHeader .tb #saved::before { content: "✓"; font-size: 13px; font-weight: 700; color: #ffd300; }
/* اسم التصميم: خانة خفيفة */
html[data-rs-page="ads"] #rsHeader .tb #pname { width: 150px !important; height: 30px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.35) !important; border-radius: 0 !important; color: #fff !important; font-size: 13px !important; padding: 0 4px !important; }
html[data-rs-page="ads"] #rsHeader .tb #pname:focus { border-bottom-color: #ffd300 !important; outline: 0 !important; }
html[data-rs-page="ads"] #rsHeader .tb #mdl { padding: 0 12px !important; }
/* RadAds: المستخدم طلب شيل أزرار الشمال (الرئيسية/الحجم/ملف/تراجع/إعادة/محفوظ/الاسم) */
html[data-rs-page="ads"] #rsHeader .tb :is(#gohome,#undo,#redo,#saved,#pname,.mw:has(#mrs),.mw:has(#mfile)) { display: none !important; }
/* RadAds Pro (#pro fixed) — يبدأ تحت الهيدر الموحد */
html.rs-on[data-rs-page="ads"] #pro { top: var(--rs-h, 64px) !important; height: auto !important; bottom: 0 !important; }
/* شريط RadAds Pro (#pro > .tb): مسطح بلون الصفحة بدل التدرج البنفسجي */
html[data-rs-page="ads"] #pro > .tb { background: #fff !important; background-image: none !important; height: 40px !important; min-height: 40px !important; border-bottom: 1px solid #10162f !important; color: #10162f !important; padding: 0 10px !important; box-shadow: none !important; }
html[data-rs-page="ads"].dark #pro > .tb { background: #0a0a0a !important; border-bottom-color: #2e2e2e !important; color: #fff !important; }
html[data-rs-page="ads"] #pro > .tb :is(.tbn,b,span) { color: inherit !important; }
html[data-rs-page="ads"] #pro > .tb .tbn { background: transparent !important; border: 1px solid currentColor !important; border-radius: 4px !important; height: 28px !important; padding: 0 10px !important; font-size: 12px !important; opacity: .85; }
html[data-rs-page="ads"] #pro > .tb .tbn:hover { opacity: 1; color: var(--r-accent) !important; border-color: var(--r-accent) !important; }
/* RadAds Pro: نفس شغل الهيدر قبل كدا — شيل شريط الأزرار المكرر (الرئيسية/التحويل/الحملات موجودة في الهيدر) */
html[data-rs-page="ads"] #pro > .tb { display: none !important; }
html[data-rs-page="ads"] #pro #profr { height: 100% !important; }

/* ═══ محرر الفيديو (radads-video) + مساعد AI (ai.html) — Codecademy ═══ */
html:is([data-rs-page="radads-video"],[data-rs-page="ai"]) body :is(button,input,select,textarea,.btn,.chip,.pill,[class*="card"],[class*="panel"],[class*="modal"]):not(#rsHeader *):not(.rs-acct *) { border-radius: 4px !important; }
html:is([data-rs-page="radads-video"],[data-rs-page="ai"]) #rsHeader .rs-moved :is(button,a,select,input) { border-radius: 4px !important; height: 30px !important; font-size: 12px !important; box-shadow: none !important; }
html:is([data-rs-page="radads-video"],[data-rs-page="ai"]) #rsHeader .rs-moved :is(button,a):not(:has(svg:only-child)) { background: transparent !important; border: 1px solid rgba(255,255,255,.35) !important; color: #fff !important; padding: 0 10px !important; }
html:is([data-rs-page="radads-video"],[data-rs-page="ai"]) #rsHeader .rs-moved :is(button,a):hover { border-color: #ffd300 !important; color: #ffd300 !important; }
html:is([data-rs-page="radads-video"],[data-rs-page="ai"]) #rsHeader .rs-moved :is(select,input) { background: transparent !important; border: 1px solid rgba(255,255,255,.35) !important; color: #fff !important; }
html:is([data-rs-page="radads-video"],[data-rs-page="ai"]) #rsHeader .rs-moved option { color: #10162f; }
/* زرار التصدير الأساسي أصفر */
html[data-rs-page="radads-video"] #rsHeader .rs-moved :is(.tbp,.btn-p,.primary,[id*="export"],[onclick*="xport"]) { background: #ffd300 !important; color: #000 !important; border: 0 !important; font-weight: 700 !important; }
/* أزرار بنفسجي/أصفر سادة + ظل offset */
html:is([data-rs-page="radads-video"],[data-rs-page="ai"]) body :is(.primary,.btn-p,.btn-primary,.send,[class*="new-chat"],[id*="send"]):not(#rsHeader *) { background: var(--r-accent) !important; background-image: none !important; color: var(--r-accent-ink,#fff) !important; border: 0 !important; }
html:is([data-rs-page="radads-video"],[data-rs-page="ai"]) body :is(.primary,.btn-p,.btn-primary,.send,[class*="new-chat"],[id*="send"]):not(#rsHeader *):hover { box-shadow: 3px 3px 0 #10162f !important; transform: translate(-1px,-1px); }
html:is([data-rs-page="radads-video"],[data-rs-page="ai"]).dark body :is(.primary,.btn-p,.btn-primary,.send,[class*="new-chat"],[id*="send"]):not(#rsHeader *):hover { box-shadow: 3px 3px 0 #fff !important; }
html:is([data-rs-page="radads-video"],[data-rs-page="ai"]) body [style*="gradient"]:not(#rsHeader *), html:is([data-rs-page="radads-video"],[data-rs-page="ai"]) body [class*="avatar"]:not(#rsHeader *) { background-image: none !important; }
/* AI: خلفية بيج للصفحة، الشات أبيض، القايمة الجانبية بيضا ببوردر كحلي */
html[data-rs-page="ai"]:not(.dark) body { background: #fff0e5 !important; }
html[data-rs-page="ai"] :is(.welcome,.empty) :is(button,.chip,.sugg) { font-family: "Space Mono", "IBM Plex Sans Arabic", monospace !important; }

/* ═══ v74: ai + radads-video بنفس تنسيقات hub/forum/ads (بوردر كحلي، كروت بيضا، ظل offset، Space Mono) ═══ */
html:is([data-rs-page="ai"],[data-rs-page="radads-video"]) { --rs-bd: #10162f; --rs-sh: #10162f; --rs-card: #fff; --rs-bg: #fff0e5; --rs-ac: #3a10e5; }
html:is([data-rs-page="ai"],[data-rs-page="radads-video"]).dark { --rs-bd: #fff; --rs-sh: #ffd300; --rs-card: #0a0a0a; --rs-bg: #000; --rs-ac: #ffd300; }
/* AI */
html[data-rs-page="ai"] body, html[data-rs-page="ai"] .chat-shell, html[data-rs-page="ai"] .chat-area { background: var(--rs-bg) !important; }
html[data-rs-page="ai"] .sidebar { background: var(--rs-card) !important; border-inline-end: 1px solid var(--rs-bd) !important; }
html[data-rs-page="ai"] .chat-header { background: var(--rs-card) !important; border-bottom: 1px solid var(--rs-bd) !important; }
html[data-rs-page="ai"] :is(.sb-new,.send-btn) { background: var(--rs-ac) !important; color: var(--r-accent-ink,#fff) !important; border: 1px solid var(--rs-bd) !important; border-radius: 4px !important; }
html[data-rs-page="ai"].dark :is(.sb-new,.send-btn) { color: #000 !important; }
html[data-rs-page="ai"] :is(.sb-studio,.sb-search,.chip,.pick-btn,.plus-btn,.icon-btn,.hdr-menu-btn,.sidebar-btn) { background: var(--rs-card) !important; border: 1px solid var(--rs-bd) !important; border-radius: 4px !important; color: inherit !important; }
html[data-rs-page="ai"] :is(.sb-new,.sb-studio,.chip,.pick-btn,.plus-btn,.send-btn,.icon-btn) { transition: transform .12s, box-shadow .12s !important; }
html[data-rs-page="ai"] :is(.sb-new,.sb-studio,.chip,.pick-btn,.plus-btn,.send-btn,.icon-btn):hover { transform: translate(-2px,-2px) !important; box-shadow: 3px 3px 0 var(--rs-sh) !important; }
html[data-rs-page="ai"] .chip { font-family: "Space Mono", "IBM Plex Sans Arabic", monospace !important; padding: 8px 14px !important; }
html[data-rs-page="ai"] .chip i { color: var(--rs-ac) !important; }
html[data-rs-page="ai"] .composer { background: var(--rs-card) !important; border-top: 1px solid var(--rs-bd) !important; }
html[data-rs-page="ai"] .chat-input-row :is(textarea,input) { background: var(--rs-card) !important; border: 1px solid var(--rs-bd) !important; border-radius: 4px !important; }
html[data-rs-page="ai"] :is(.welcome-mascot,.mascot-mini) { border-radius: 4px !important; background: var(--rs-ac) !important; box-shadow: 4px 4px 0 var(--rs-sh) !important; border: 1px solid var(--rs-bd) !important; }
html[data-rs-page="ai"] .halo { display: none !important; }
html[data-rs-page="ai"] .chat-welcome h1, html[data-rs-page="ai"] .chat-welcome h2 { font-weight: 800 !important; }
/* محرر الفيديو */
html[data-rs-page="radads-video"] :is(.rail,.lpanel,.props) { background: var(--rs-card) !important; border-color: var(--rs-bd) !important; }
html[data-rs-page="radads-video"] .rail { border-inline-end: 1px solid var(--rs-bd) !important; }
html[data-rs-page="radads-video"] .lpanel { border-inline-end: 1px solid var(--rs-bd) !important; }
html[data-rs-page="radads-video"] .props { border-inline-start: 1px solid var(--rs-bd) !important; }
html[data-rs-page="radads-video"] :is(.lp-head,.props h3,.props h4) { font-family: "Space Mono", monospace !important; }
html[data-rs-page="radads-video"] .rail .on { background: var(--rs-ac) !important; color: var(--r-accent-ink,#fff) !important; border-radius: 4px !important; }
html[data-rs-page="radads-video"].dark .rail .on { color: #000 !important; }
html[data-rs-page="radads-video"] .drop { border: 2px dashed var(--rs-bd) !important; border-radius: 4px !important; background: var(--rs-bg) !important; }
html[data-rs-page="radads-video"] .center, html[data-rs-page="radads-video"] .stage { background: var(--rs-bg) !important; }
html[data-rs-page="radads-video"] .stage > * { box-shadow: 6px 6px 0 var(--rs-sh) !important; border-radius: 4px !important; }
html[data-rs-page="radads-video"] :is(.ctl,.tl,.tlbar) { background: var(--rs-card) !important; border-top: 1px solid var(--rs-bd) !important; }
html[data-rs-page="radads-video"] .play { background: var(--rs-ac) !important; border: 1px solid var(--rs-bd) !important; border-radius: 4px !important; }
html[data-rs-page="radads-video"].dark .play { color: #000 !important; }
html[data-rs-page="radads-video"] :is(.ib,.tlbar button) { border: 1px solid var(--rs-bd) !important; border-radius: 4px !important; background: var(--rs-card) !important; }
html[data-rs-page="radads-video"] :is(.play,.ib,.tlbar button,.drop):hover { transform: translate(-2px,-2px); box-shadow: 3px 3px 0 var(--rs-sh) !important; }
html[data-rs-page="radads-video"] .ruler { font-family: "Space Mono", monospace !important; border-bottom: 1px solid var(--rs-bd) !important; }
html[data-rs-page="radads-video"] .track { border-bottom: 1px solid color-mix(in srgb, var(--rs-bd) 25%, transparent) !important; }
html[data-rs-page="radads-video"] .ctl .ib.play { background: var(--rs-ac) !important; color: #fff !important; }
html[data-rs-page="radads-video"].dark .ctl .ib.play { color: #000 !important; }
html[data-rs-page="ai"] .welcome-mascot { filter: none !important; }
/* v76: هيدر محرر الفيديو — شيل العنوان/الاسم/تراجع/إعادة/زر الثيم المكرر، وزرار RadAds يتنقل جنب التصدير */
html[data-rs-page="radads-video"] #rsHeader .rs-moved :is(b:has(.ti-movie), #pname, #undo, #redo, #theme) { display: none !important; }
html[data-rs-page="radads-video"] #rsHeader .rs-moved { display: flex !important; align-items: center; gap: 8px; }
html[data-rs-page="radads-video"] #rsHeader .rs-moved #back { order: 99; }
html[data-rs-page="radads-video"] #rsHeader .rs-moved #export { order: 98; }

/* ═══ v77: RadAds Video Pro (radads-video-pro, Kobalte data-kb-theme) — Rad Stack ═══ */
html[data-kb-theme="light"] {
  --radius: 4px !important; --background: #fff !important; --sidebar: #fff !important; --foreground: #10162f !important;
  --card: #fff !important; --card-foreground: #10162f !important; --popover: #fff !important; --popover-foreground: #10162f !important;
  --primary: #3a10e5 !important; --primary-foreground: #fff !important; --primary-hover: #2a0bb0 !important; --primary-pressing: #1f0890 !important;
  --tertiary: #3a10e5 !important; --tertiary-hover: #2a0bb0 !important;
  --secondary: #fff0e5 !important; --secondary-hover: #ffe2cc !important; --accent: #fff0e5 !important; --accent-foreground: #10162f !important;
  --muted: #fff0e5 !important; --muted-foreground: #5d6584 !important; --border: #10162f !important; --ring: #3a10e5 !important;
}
html[data-kb-theme="dark"] {
  --radius: 4px !important; --background: #000 !important; --sidebar: #0a0a0a !important; --foreground: #fff !important;
  --card: #0a0a0a !important; --card-foreground: #fff !important; --popover: #0a0a0a !important; --popover-foreground: #fff !important;
  --primary: #ffd300 !important; --primary-foreground: #000 !important; --primary-hover: #e6be00 !important; --primary-pressing: #ccaa00 !important;
  --tertiary: #ffd300 !important; --tertiary-hover: #e6be00 !important;
  --secondary: #141414 !important; --secondary-hover: #1f1f1f !important; --accent: #141414 !important; --accent-foreground: #fff !important;
  --muted: #141414 !important; --muted-foreground: #a8a8a8 !important; --border: #3a3a3a !important; --ring: #ffd300 !important;
}
html[data-kb-theme="light"] body { background: #fff0e5 !important; }
html[data-kb-theme] body :is(button,input,select,textarea,[role="dialog"],[role="menu"],[role="listbox"]):not(#rsHeader *) { border-radius: 4px !important; }
html[data-kb-theme] body [class*="rounded-full"]:not(#rsHeader *):not(.size-4):not(.size-5):not([class*="size-2"]) { border-radius: 4px !important; }
/* الشريط العائم تحت المعاينة + صندوق الشات: بوردر وظل offset */
html[data-kb-theme] body .absolute[class*="bottom-"]:has(> button) { border: 1px solid var(--border) !important; box-shadow: 4px 4px 0 #10162f !important; border-radius: 4px !important; }
html[data-kb-theme="dark"] body .absolute[class*="bottom-"]:has(> button) { border: 2px solid #fff !important; box-shadow: 4px 4px 0 #ffd300 !important; }
html[data-kb-theme] body .bg-primary:not(#rsHeader *) { border: 1px solid var(--border) !important; }
html[data-kb-theme] body :is(.bg-primary,button):not(#rsHeader *):hover { box-shadow: 3px 3px 0 var(--foreground); }
html[data-kb-theme] body .text-xs.uppercase, html[data-kb-theme] body [class*="tracking-"] { font-family: "Space Mono", monospace !important; }

/* v80 cloud-app: header tools contrast + navy borders / offset shadows like ai & radads-video */
html[data-rs-page="cloud-app"]{--rs-nv:#10162f}
html[data-rs-page="cloud-app"][data-theme="dark"]{--rs-nv:#ffd300}
html[data-rs-page="cloud-app"] .rs-cloud-tools .tb-btn{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.45)!important;border-radius:4px!important;height:32px;padding:0 12px!important;font-weight:600}
html[data-rs-page="cloud-app"] .rs-cloud-tools .tb-btn:hover{border-color:#ffd300!important;color:#ffd300!important}
html[data-rs-page="cloud-app"] .rs-cloud-tools .tb-icon-btn{color:#fff!important;border-radius:4px!important}
html[data-rs-page="cloud-app"] .rs-cloud-tools .tb-icon-btn.active{background:rgba(255,255,255,.16)!important;color:#ffd300!important}
html[data-rs-page="cloud-app"] .file-card, html[data-rs-page="cloud-app"] .file-row{border-radius:4px!important;transition:transform .12s,box-shadow .12s}
html[data-rs-page="cloud-app"] .file-card:hover, html[data-rs-page="cloud-app"] .file-row:hover{background:var(--surface)!important;border-color:var(--rs-nv)!important;box-shadow:3px 3px 0 var(--rs-nv)!important;transform:translate(-1px,-1px)}
html[data-rs-page="cloud-app"] .file-card.selected, html[data-rs-page="cloud-app"] .file-row.selected{background:var(--primary-light)!important;border-color:var(--primary)!important;box-shadow:3px 3px 0 var(--primary)!important}
html[data-rs-page="cloud-app"] .file-card-icon, html[data-rs-page="cloud-app"] .file-row-icon{color:var(--rs-nv)}
html[data-rs-page="cloud-app"] .ctx-menu, html[data-rs-page="cloud-app"] .user-dropdown, html[data-rs-page="cloud-app"] .upload-bar{border:2px solid var(--rs-nv)!important;border-radius:4px!important;box-shadow:4px 4px 0 var(--rs-nv)!important}
html[data-rs-page="cloud-app"] .ctx-item:hover{background:var(--primary-light)!important;color:var(--primary)!important}
html[data-rs-page="cloud-app"] .modal{border:2px solid var(--rs-nv)!important;border-radius:4px!important;box-shadow:6px 6px 0 var(--rs-nv)!important}
html[data-rs-page="cloud-app"] .modal input[type=text]{border-radius:4px!important;border-color:var(--rs-nv)!important}
html[data-rs-page="cloud-app"] .modal-btn{border-radius:4px!important}
html[data-rs-page="cloud-app"] .modal-btn.primary{background:var(--primary)!important}
html[data-rs-page="cloud-app"][data-theme="dark"] .modal-btn.primary{color:#000!important}
html[data-rs-page="cloud-app"] .modal-btn.primary:hover{box-shadow:3px 3px 0 var(--rs-nv)}
html[data-rs-page="cloud-app"] .drop-zone{border-radius:4px!important;border-color:var(--primary)!important}
html[data-rs-page="cloud-app"] .toast{border-radius:4px!important;box-shadow:3px 3px 0 var(--rs-nv)}
html[data-rs-page="cloud-app"] .upload-progress-fill, html[data-rs-page="cloud-app"] .storage-fill{background:var(--primary)!important}
html[data-rs-page="cloud-app"] .breadcrumb span{border-radius:4px!important}
/* v81 header user card */
#rsHeader .rs-uc{position:relative}
#rsHeader button.rs-av{border:0;cursor:pointer;font-family:inherit}
#rsHeader .rs-uc.open button.rs-av{box-shadow:0 0 0 2px #ffd300}
#rsHeader .rs-uc-card{display:none;position:absolute;top:calc(100% + 10px);left:0;width:290px;background:#fff;color:#10162f;border:2px solid #10162f;border-radius:4px;box-shadow:5px 5px 0 #10162f;z-index:3000;text-align:right;font-family:"DM Sans","IBM Plex Sans Arabic",sans-serif}
html[dir="ltr"] #rsHeader .rs-uc-card{left:auto;right:0}
#rsHeader .rs-uc.open .rs-uc-card{display:block}
#rsHeader .rs-uc-head{display:flex;align-items:center;gap:12px;padding:16px;background:#fff0e5;border-bottom:2px solid #10162f}
#rsHeader .rs-uc-big{width:46px;height:46px;flex:none;border-radius:50%;background:#3a10e5;color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px}
#rsHeader .rs-uc-name{font-weight:700;font-size:15px;line-height:1.3;word-break:break-word}
#rsHeader .rs-uc-sub{font:12px "JetBrains Mono",monospace;color:#5c5f70;margin-top:2px}
#rsHeader .rs-uc-body{padding:8px 16px}
#rsHeader .rs-uc-row{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:13px;border-bottom:1px dashed #e3d6cc}
#rsHeader .rs-uc-row:last-child{border-bottom:0}
#rsHeader .rs-uc-row i{color:#3a10e5;font-size:16px}
#rsHeader .rs-uc-row span{color:#5c5f70;min-width:84px}
#rsHeader .rs-uc-row b{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:right}
#rsHeader .rs-uc-acts{border-top:2px solid #10162f;padding:6px}
#rsHeader .rs-uc-acts a,#rsHeader .rs-uc-acts button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:0;background:none;border-radius:4px;color:#10162f;font:600 13px inherit;font-family:inherit;text-decoration:none;cursor:pointer;text-align:right}
#rsHeader .rs-uc-acts a:hover,#rsHeader .rs-uc-acts button:hover{background:rgba(58,16,229,.08);color:#3a10e5}
#rsHeader .rs-uc-acts .rs-uc-out{color:#d93025}
#rsHeader .rs-uc-acts .rs-uc-out:hover{background:rgba(217,48,37,.08);color:#d93025}
html.rs-dark #rsHeader .rs-uc-card{background:#0f0f0f;color:#fff;border-color:#ffd300;box-shadow:5px 5px 0 #ffd300}
html.rs-dark #rsHeader .rs-uc-head{background:#000;border-color:#ffd300}
html.rs-dark #rsHeader .rs-uc-big{background:#ffd300;color:#000}
html.rs-dark #rsHeader .rs-uc-row{border-color:#262626}
html.rs-dark #rsHeader .rs-uc-row i{color:#ffd300}
html.rs-dark #rsHeader .rs-uc-row span,html.rs-dark #rsHeader .rs-uc-sub{color:#a0a0a8}
html.rs-dark #rsHeader .rs-uc-acts{border-color:#ffd300}
html.rs-dark #rsHeader .rs-uc-acts a,html.rs-dark #rsHeader .rs-uc-acts button{color:#fff}
html.rs-dark #rsHeader .rs-uc-acts a:hover,html.rs-dark #rsHeader .rs-uc-acts button:hover{background:rgba(255,211,0,.1);color:#ffd300}
#rsHeader .rs-uc-acts button.rs-uc-l{color:inherit}

/* ── Rad Office (office.html) — Codecademy style, v85 ── */
html[data-rs-page="office"] #rsHeader .rw-hbtn{display:none!important}
html[data-rs-page="office"] body{background:#fff0e5!important}
html[data-rs-page="office"] .section-title{color:#10162f!important;font-family:"DM Sans","IBM Plex Sans Arabic",sans-serif}
html[data-rs-page="office"] .st-line{background:#10162f!important;opacity:.25}
html[data-rs-page="office"] .st-count{background:#3a10e5!important;color:#fff!important;border-radius:4px!important}
html[data-rs-page="office"] :is(.new-tile,.doc-card){background:#fff!important;border:2px solid #10162f!important;border-radius:4px!important;box-shadow:none!important;transition:transform .12s,box-shadow .12s!important}
html[data-rs-page="office"] :is(.new-tile,.doc-card):hover{transform:translate(-3px,-3px)!important;box-shadow:4px 4px 0 #10162f!important}
html[data-rs-page="office"] :is(.new-tile-ico,.doc-ico){border-radius:4px!important;box-shadow:none!important}
html[data-rs-page="office"] :is(.new-tile-label,.doc-name){color:#10162f!important}
html[data-rs-page="office"] :is(.new-tile-sub,.doc-meta){color:#5c5f70!important}
html[data-rs-page="office"] .doc-ext{border-radius:4px!important;border:1px solid #10162f!important;background:#fff0e5!important;color:#10162f!important}
html[data-rs-page="office"] .files-search input{background:#fff!important;border:2px solid #10162f!important;border-radius:4px!important;color:#10162f!important}
html[data-rs-page="office"] .files-search input:focus{outline:none!important;box-shadow:3px 3px 0 #3a10e5!important}
html[data-rs-page="office"] .files-sort{background:#fff!important;border:2px solid #10162f!important;border-radius:4px!important;padding:2px!important}
html[data-rs-page="office"] .files-sort button{border-radius:2px!important;color:#10162f!important;background:none!important;font-weight:600}
html[data-rs-page="office"] .files-sort button.on{background:#3a10e5!important;color:#fff!important}
html[data-rs-page="office"] .modal{border:2px solid #10162f!important;border-radius:4px!important;box-shadow:6px 6px 0 #10162f!important}
html[data-rs-page="office"] .btn{border-radius:4px!important}
html[data-rs-page="office"] .btn:not(.ghost):not(.danger){background:#3a10e5!important;color:#fff!important;border:2px solid #10162f!important}
/* night: black + yellow */
html.rs-night[data-rs-page="office"] body{background:#000!important}
html.rs-night[data-rs-page="office"] :is(.section-title,.new-tile-label,.doc-name){color:#fff!important}
html.rs-night[data-rs-page="office"] .st-line{background:#fff!important}
html.rs-night[data-rs-page="office"] .st-count,html.rs-night[data-rs-page="office"] .files-sort button.on{background:#ffd300!important;color:#000!important}
html.rs-night[data-rs-page="office"] :is(.new-tile,.doc-card,.files-sort,.files-search input,.modal){background:#10162f!important;border-color:#fff!important;color:#fff!important}
html.rs-night[data-rs-page="office"] :is(.new-tile,.doc-card):hover{box-shadow:4px 4px 0 #ffd300!important}
html.rs-night[data-rs-page="office"] :is(.new-tile-sub,.doc-meta){color:#b5b9cc!important}
html.rs-night[data-rs-page="office"] .files-sort button{color:#fff!important}
html.rs-night[data-rs-page="office"] .doc-ext{background:#000!important;color:#ffd300!important;border-color:#ffd300!important}
html.rs-night[data-rs-page="office"] .files-search input:focus{box-shadow:3px 3px 0 #ffd300!important}
html.rs-night[data-rs-page="office"] .btn:not(.ghost):not(.danger){background:#ffd300!important;color:#000!important;border-color:#fff!important}
/* app logos: flat Codecademy tiles (solid colour, navy border + offset shadow) */
html[data-rs-page="office"] :is(.new-tile-ico,.doc-ico){border:2px solid #10162f!important;border-radius:4px!important;box-shadow:3px 3px 0 #10162f!important;background-image:none!important;filter:none!important;color:#fff!important;font-family:"DM Sans",sans-serif!important}
html[data-rs-page="office"] .new-tile-ico{width:56px!important;height:56px!important}
html[data-rs-page="office"] .new-tile:hover .new-tile-ico{transform:rotate(-4deg)}
html.rs-night[data-rs-page="office"] :is(.new-tile-ico,.doc-ico){border-color:#fff!important;box-shadow:3px 3px 0 #ffd300!important}
/* office has its own night colours: skip the generic invert */
html.rs-night[data-rs-page="office"],html.rs-night[data-rs-page="office"] :is(iframe,canvas,[style*="background-image"]){filter:none!important}
html.rs-night[data-rs-page="office"]{background:#000!important}
html.rs-night[data-rs-page="office"] #rsHeader{filter:invert(1) hue-rotate(180deg)!important}
/* Rad Office: back-to-office button in the header while an editor is open */
#rsHeader #rsOfficeBack{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;margin-inline-start:12px;background:#ffd300;color:#10162f;border:2px solid #fff;border-radius:4px;font:700 13px "DM Sans","IBM Plex Sans Arabic",sans-serif;cursor:pointer}
#rsHeader #rsOfficeBack:hover{box-shadow:3px 3px 0 #fff;transform:translate(-1px,-1px)}
html[dir="ltr"] #rsHeader #rsOfficeBack .ti-arrow-right{transform:scaleX(-1)}
html.rs-on[data-rs-page="office"] .view{top:64px!important}
/* Rad Office — Design Studio (rdsn) */
html[data-rs-page="office"] .ds-back{background:#ffd300;color:#10162f;border:2px solid #10162f;border-radius:4px;font:700 12px "DM Sans",sans-serif;padding:6px 12px;cursor:pointer;white-space:nowrap;margin-inline-end:6px}
html[data-rs-page="office"] .ds-back:hover{box-shadow:3px 3px 0 #10162f}
html[data-rs-page="office"] .ds-toolbar{background:#fff!important;border-bottom:2px solid #10162f!important}
html[data-rs-page="office"] :is(.ds-tool-btn,.ds-icon-btn,.ds-color){border-radius:4px!important}
html[data-rs-page="office"] .ds-icon-btn,html[data-rs-page="office"] .ds-color{border:2px solid #10162f!important}
html[data-rs-page="office"] .ds-tool-btn[class*="active"],html[data-rs-page="office"] .ds-tool-btn.on{background:#3a10e5!important;color:#fff!important;border-color:#10162f!important}
html[data-rs-page="office"] .ds-save-btn{background:#3a10e5!important;color:#fff!important;border:2px solid #10162f!important;border-radius:4px!important}
html[data-rs-page="office"] .ds-save-btn:hover{box-shadow:3px 3px 0 #10162f}
html[data-rs-page="office"] .ds-canvas-wrap{background:#fff0e5!important}
html[data-rs-page="office"] .ds-canvas-wrap canvas{border:2px solid #10162f;box-shadow:6px 6px 0 #10162f}
html[data-rs-page="office"] .ds-pop-menu{border:2px solid #10162f!important;border-radius:4px!important;box-shadow:4px 4px 0 #10162f!important}
html[data-rs-page="office"] .ds-sep{background:#10162f!important;opacity:.25}
html.rs-night[data-rs-page="office"] .ds-toolbar{background:#10162f!important;border-bottom-color:#ffd300!important}
html.rs-night[data-rs-page="office"] :is(.ds-tool-btn,.ds-icon-btn){color:#fff!important}
html.rs-night[data-rs-page="office"] :is(.ds-icon-btn,.ds-color){background:#000!important;border-color:#fff!important}
html.rs-night[data-rs-page="office"] .ds-tool-btn[class*="active"],html.rs-night[data-rs-page="office"] .ds-tool-btn.on,html.rs-night[data-rs-page="office"] .ds-save-btn{background:#ffd300!important;color:#000!important;border-color:#fff!important}
html.rs-night[data-rs-page="office"] .ds-canvas-wrap{background:#000!important}
html.rs-night[data-rs-page="office"] .ds-canvas-wrap canvas{border-color:#fff;box-shadow:6px 6px 0 #ffd300}
html.rs-night[data-rs-page="office"] .ds-back{border-color:#fff}
/* Rad Note: old brand row + breadcrumb/title removed (Rad Stack header is the logo) */
header.topbar.rs-moved .tb-title{display:none!important}
/* Rad Note sidebar: Rad Note logo replaces old brand + "notebooks" title; beige by day */
.app-shell > .sidebar > .sidebar-brand{display:none!important}
.app-shell > .sidebar .sidebar-title{font-size:0!important;display:inline-flex!important;align-items:center;gap:8px}
.app-shell > .sidebar .sidebar-title *{display:none!important}
.app-shell > .sidebar .sidebar-title::before{content:"";width:26px;height:26px;flex:none;border:2px solid #10162f;border-radius:4px;box-shadow:2px 2px 0 #10162f;background:#3a10e5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M9 4v16M13 8h3M13 12h3'/%3E%3C/svg%3E") center/18px no-repeat}
.app-shell > .sidebar .sidebar-title::after{content:"Rad Note";font:800 18px "DM Sans",sans-serif;letter-spacing:-.3px}
html:not(.rs-night) .app-shell > .sidebar{background:#fff0e5!important;border-inline-end:2px solid #10162f!important;color:#10162f!important}
html:not(.rs-night) .app-shell > .sidebar :is(.sidebar-title,.label,.chevron,.icon-btn,.tree-row){color:#10162f!important}
html:not(.rs-night) .app-shell > .sidebar .sidebar-header{border-bottom:2px solid #10162f!important}
html:not(.rs-night) .app-shell > .sidebar .tree-row:hover{background:#fff!important}
html:not(.rs-night) .app-shell > .sidebar .tree-row:is(.active,.selected,[aria-selected="true"]){background:#3a10e5!important;color:#fff!important;border-radius:4px}
html:not(.rs-night) .app-shell > .sidebar .tree-row:is(.active,.selected,[aria-selected="true"]) *{color:#fff!important}
html.rs-night .app-shell > .sidebar{background:#000!important;border-inline-end:2px solid #fff!important}
html.rs-night .app-shell > .sidebar .sidebar-title::before{background-color:#ffd300;border-color:#fff;box-shadow:2px 2px 0 #fff;filter:invert(1)}
html.rs-night .app-shell > .sidebar .sidebar-title{color:#fff!important}
/* Rad Note: page must not scroll under the fixed header (AI/audio buttons were hidden) */
html.rs-on:has(.app-shell > .sidebar),html.rs-on body:has(.app-shell > .sidebar){overflow:hidden!important;height:100%!important}
html.rs-on body:has(.app-shell > .sidebar) .app-shell{height:calc(100vh - var(--rs-h,64px))!important;max-height:calc(100vh - var(--rs-h,64px))!important}

/* ═══ Responsive foundation (refactor phase 5, 2026-10-04) — zero-specificity (:where) so any page rule still wins ═══ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* flex/grid layout roots: default min-width:auto let wide tables push the whole page past the screen on mobile */
:where(body) > :where(*), :where(main, .main, .content, .layout, .section, .card) { min-width: 0; }
:where(img, video) { max-width: 100%; }
:where(img[height], video[height]) { height: auto; }
/* keyboard / TV-remote navigation: always show where focus is */
:where(a, button, input, select, textarea, [tabindex], [role=button]):focus-visible { outline: 3px solid #ffd300; outline-offset: 2px; }
/* wide tables / bar charts scroll inside their own box instead of widening the page */
:where(.rw-twrap, .table-wrap, .table-responsive, .bar-chart, .chart-bar) { max-width: 100%; overflow-x: auto; }
/* toolbars: buttons wrap to a second line on small screens instead of running off-screen */
@media (max-width: 760px) {
  :where(.topbar, .top-bar, .toolbar, .page-header) { flex-wrap: wrap; row-gap: 8px; }
  :where(.topbar .actions, .topbar-actions, .header-actions, .page-actions) { flex-wrap: wrap; min-width: 0; max-width: 100%; }
}

/* ===== Night mode = Radbit dark look on every light page (2026-10-04) — replaces the invert filter ===== */
html[data-rs-rbdark]{filter:none!important;color-scheme:dark;
 --bg:#000!important;--bg2:#0a0a0a!important;--bg3:#161616!important;--surface:#0a0a0a!important;--surface2:#161616!important;--surface3:#1f1f1f!important;--card:#0a0a0a!important;--panel:#0a0a0a!important;--white:#0a0a0a!important;
 --border:#ffffff40!important;--border2:#ffffff59!important;--line:#ffffff40!important;--line2:#ffffff59!important;
 --text:#fff!important;--text2:#cfcfcf!important;--text3:#9a9a9a!important;--text4:#6e6e6e!important;--txt:#fff!important;--mut:#cfcfcf!important;--mut2:#9a9a9a!important;--ink:#fff!important;--muted:#9a9a9a!important;
 --primary:#ffd300!important;--primary-dark:#e6be00!important;--primary-light:#ffe566!important;--primary-bg:rgba(255,211,0,.12)!important;--pri:#ffd300!important;--pri2:#e6be00!important;--pri-tint:rgba(255,211,0,.12)!important;--pri-faint:rgba(255,211,0,.08)!important;--pri-soft:rgba(255,211,0,.32)!important;--accent:#ffd300!important;
 --shadow:none!important;--shadow-md:none!important;--sh:none!important;--sh-md:none!important;--sh-lg:none!important;--toast-bg:#ffd300!important}
html[data-rs-rbdark] body{background:#000 radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px) 0 0/22px 22px!important;color:#fff!important}
html[data-rs-rbdark] :is(.main,.content,.page,.chat-main,main){background-color:transparent!important}
html[data-rs-rbdark] :is(.card,.panel,.stat,.stats>*,.bigcard,.box,.widget,.kpi,.task-col,.task-card,.team-card,.file-card,.notif-item,.modal,.modal-content,.dialog,.side-card,.panel-card,.preview-card,.calendar-grid,.dash-hero,.sidebar,.chat-sidebar,table){background:#0a0a0a!important;color:#fff!important;border-color:#fff!important}
html[data-rs-rbdark] :is(.card,.panel,.stat,.bigcard,.kpi,.task-col,.task-card,.team-card,.file-card,.modal,.modal-content,.side-card,.panel-card,.dash-hero){border:2px solid #fff!important;border-radius:4px!important;box-shadow:none!important}
html[data-rs-rbdark] :is(.card,.stat,.task-card,.team-card,.file-card,.notif-item,.side-card):hover{box-shadow:4px 4px 0 #ffd300!important}
html[data-rs-rbdark] :is(input,select,textarea){background:#161616!important;color:#f5f5f5!important;border-color:#333!important}
html[data-rs-rbdark] :is(input,select,textarea):focus{border-color:#ffd300!important;box-shadow:0 0 0 1px #ffd300!important}
html[data-rs-rbdark] :is(th,thead td){background:#161616!important;color:#fff!important}
html[data-rs-rbdark] :is(td,tr,li,hr){border-color:#ffffff33!important}
html[data-rs-rbdark] :is(.btn-primary,.btn-p,.btn:not(.ghost):not(.red):not(.grn),button.primary,.pri,.hero-btn:first-child,.chat-send-btn){background:#ffd300!important;color:#000!important;border-color:#ffd300!important}
html[data-rs-rbdark] :is(.btn-primary,.btn-p,button.primary):hover{box-shadow:3px 3px 0 #fff!important}
html[data-rs-rbdark] :is(.nav-item.active,.tab.active,.tab.on,.active.nav-link){background:#ffd300!important;color:#000!important}
html[data-rs-rbdark] :is([style*="background:#fff"],[style*="background: #fff"],[style*="background:white"],[style*="background-color:#fff"],[style*="background:#ffffff"],[style*="background:#f8"],[style*="background:#f9"],[style*="background:#fa"],[style*="background:#f1"],[style*="background:#f3"],[style*="background:#f5"]){background:#0a0a0a!important;color:#fff!important}
html[data-rs-rbdark] :is([style*="color:#1"],[style*="color:#2"],[style*="color:#3"],[style*="color: #1"],[style*="color:#000"],[style*="color:black"]){color:#fff!important}
html[data-rs-rbdark] ::-webkit-scrollbar-thumb{background:#333!important}
html[data-rs-rbdark] :is(aside,nav.sidebar,header.topbar,.topbar,.navbar,.header,.page-header,.toolbar,.banner,.alert,.notice,.dropdown,.dropdown-menu,.menu,.popover,.tooltip,.list-group-item,.chip,.badge-light,.ghost,.btn.ghost,.btn-secondary,.btn-light,.btn-outline,.empty,.empty-state){background:#0a0a0a!important;color:#fff!important;border-color:#ffffff59!important}
html[data-rs-rbdark] :is(.stat-card,.info-card,.summary-card,.kpi-card,.metric-card,.dash-card,.item-card,.app-card,.prog-card,.course-card,.product-card,.form-card,.chart-card,.list-card){background:#0a0a0a!important;color:#fff!important;border:2px solid #fff!important;border-radius:4px!important;box-shadow:none!important}
html[data-rs-rbdark] :is(.stat-card,.item-card,.app-card,.prog-card,.course-card,.product-card):hover{box-shadow:4px 4px 0 #ffd300!important}
/* buttons next to the logo removed site-wide (menu stays on mobile) */
#rsHeader .rw-hbtn{display:none!important}
@media (max-width:900px){#rsHeader .rw-menu-btn{display:inline-flex!important}}
/* nothing beside the logo: page titles/icons + desktop menu toggles moved into the header are hidden (2026-10-04) */
#rsHeader .rs-moved :is(h1,h2,h3,.topbar-title,.page-title,.app-title,.logo-text,.brand){display:none!important}
@media (min-width:901px){#rsHeader .rs-moved :is(.menu-toggle,.menu-btn,.hamburger){display:none!important}}

/* ===== Day mode = Codecademy standard on EVERY page (2026-10-04) — html[data-rs-cc] set by radstack.js ===== */
html[data-rs-cc]{color-scheme:light;
 --bg:#fff0e5!important;--bg2:#ffffff!important;--bg3:#fbe6d6!important;--surface:#ffffff!important;--surface2:#fbe6d6!important;--surface3:#fbe6d6!important;--card:#ffffff!important;--card2:#fbe6d6!important;--card-bg:#ffffff!important;--panel:#ffffff!important;--white:#ffffff!important;
 --border:#10162f33!important;--border2:#10162f40!important;--border-strong:#10162f!important;--line:#10162f33!important;--line2:#10162f40!important;
 --text:#10162f!important;--text2:#3d4566!important;--text3:#5d6584!important;--text4:#8a90a8!important;--txt:#10162f!important;--mut:#3d4566!important;--mut2:#5d6584!important;--ink:#10162f!important;--muted:#5d6584!important;
 --primary:#3a10e5!important;--primary-dark:#2a0bb0!important;--primary-light:#8a7dff!important;--primary-bg:rgba(58,16,229,.08)!important;--primary-dim:rgba(58,16,229,.08)!important;--pri:#3a10e5!important;--pri2:#2a0bb0!important;--pri-tint:#efeaff!important;--pri-faint:rgba(58,16,229,.08)!important;--pri-soft:rgba(58,16,229,.25)!important;--accent:#3a10e5!important;
 --radius:4px!important;--radius-sm:4px!important;--r:4px!important;--rs:4px!important;--shadow:none!important;--shadow-md:none!important;--sh:none!important;--sh-md:none!important;--toast-bg:#10162f!important}
html[data-rs-cc] body{background:#fff0e5 radial-gradient(rgba(16,22,47,.22) 1px,transparent 1px) 0 0/22px 22px!important;color:#10162f!important}
html[data-rs-cc] :is(.main,.content,.page,.chat-main,main,.main-content,#main){background-color:transparent!important}
html[data-rs-cc] :is(.card,.panel,.stat,.stat-card,.info-card,.summary-card,.kpi,.kpi-card,.metric-card,.dash-card,.bigcard,.widget,.task-col,.task-card,.team-card,.file-card,.item-card,.app-card,.prog-card,.course-card,.product-card,.form-card,.chart-card,.list-card,.side-card,.panel-card,.preview-card,.modal,.modal-content,.modal-box,.dialog){background:#fff!important;color:#10162f!important;border:1px solid #10162f!important;border-radius:4px!important;box-shadow:none!important}
html[data-rs-cc] :is(.card-header,.panel-head,.panel-header,.modal-header){background:#fbe6d6!important;border-bottom:1px solid #10162f!important;color:#10162f!important}
html[data-rs-cc] :is(.stat,.stat-card,.task-card,.team-card,.file-card,.item-card,.app-card,.prog-card,.course-card,.product-card,.kpi-card,.side-card):hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #3a10e5!important}
html[data-rs-cc] :is(.sidebar,aside.sidebar,#sidebar,.side-nav,.sidenav){background:#fff!important;color:#10162f!important;border-color:#10162f!important}
html[data-rs-cc] :is(.nav-item,.nav-link,.menu-item,.side-item,.sidebar a,#sidebar a){border-radius:4px!important}
html[data-rs-cc] :is(.nav-item,.nav-link,.menu-item,.side-item):hover:not(.active){background:#fbe6d6!important;color:#10162f!important}
html[data-rs-cc] :is(.nav-item.active,.nav-link.active,.menu-item.active,.side-item.active,.sidebar a.active,#sidebar a.active,.nav-item.on){background:#ffd300!important;color:#10162f!important;font-weight:700!important;border-color:#ffd300!important}
html[data-rs-cc] :is(.nav-item.active,.nav-link.active,.menu-item.active) :is(i,svg,.nav-icon){color:#10162f!important;stroke:currentColor}
html[data-rs-cc] body :is(.btn-primary,.btn-p,.btn.primary,button.primary,.pri,.btn-accent,.chat-send-btn){background:#ffd300!important;color:#10162f!important;border:1px solid #ffd300!important;border-radius:4px!important;font-weight:700}
html[data-rs-cc] body :is(.btn-primary,.btn-p,.btn.primary,button.primary,.pri,.btn-accent):hover{box-shadow:3px 3px 0 #10162f!important;transform:translate(-1px,-1px)}
html[data-rs-cc] :is(.btn,button.btn,.btn-sm,.btn-secondary,.btn-ghost,.btn-outline,.btn-light){border-radius:4px!important}
html[data-rs-cc] :is(.btn-secondary,.btn-ghost,.btn-outline,.btn-light,.btn.ghost){background:#fff!important;color:#10162f!important;border:1px solid #10162f!important}
html[data-rs-cc] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){background:#fff!important;color:#10162f!important;border:1px solid #10162f59!important;border-radius:4px!important}
html[data-rs-cc] :is(input,select,textarea):focus{border-color:#3a10e5!important;box-shadow:0 0 0 1px #3a10e5!important}
html[data-rs-cc] :is(th,thead td){background:#fbe6d6!important;color:#10162f!important}
html[data-rs-cc] :is(.topbar,.top-bar,.page-header,.toolbar){background:transparent!important;border-color:#10162f33!important}
html[data-rs-cc] :is(.badge,.chip,.tag,.pill){border-radius:4px!important}
html[data-rs-cc] .tab.active, html[data-rs-cc] .tabs .active{box-shadow:inset 0 -3px 0 #3a10e5!important;color:#10162f!important}
/* nothing next to the logo: page tools moved into the header sit at the far end, beside the header icons */
#rsHeader nav{display:flex!important;justify-content:flex-end!important;flex:1 1 auto!important;min-width:0}
#rsHeader nav > .rs-moved{margin-inline-start:auto!important}
html[data-rs-page="shop"] .topbar{justify-content:flex-end!important;padding-inline-end:220px!important}

/* ===== كل الشاشات (2026-10-04) ===== */
/* أهداف لمس مريحة على الموبايل والتابلت */
@media (max-width:768px){html.rs-on :is(button,.btn,[role=button],select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])):not(#rsHeader *){min-height:38px}
 html.rs-on :is(.nav-item,.menu-item,.side-item,.sidebar a,#sidebar a){min-height:42px;display:flex;align-items:center}
 html.rs-on :is(table){display:block;max-width:100%;overflow-x:auto}
 html.rs-on :is(.modal,.modal-content,.modal-box,.dialog){max-width:calc(100vw - 24px)!important;max-height:calc(100vh - var(--rs-h) - 24px)!important;overflow:auto}}
/* شاشات التلفزيون/السمارت: تكبير الواجهة وتركيز واضح للريموت */
@media (min-width:2200px){html.rs-on{zoom:1.35}}
@media (min-width:3000px){html.rs-on{zoom:1.8}}

/* full-screen layout: no narrow centred page containers (2026-10-04) */
html.rs-on body :is(div.container#main, .w, .feed-layout, .wrap, .page, .store-layout, main#app, .programs-grid){max-width:none!important}

/* mobile header: toolbars scroll sideways instead of wrapping over the page (2026-10-04) */
@media (max-width:700px){
  #rsHeader nav{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;max-height:48px}
  #rsHeader nav::-webkit-scrollbar{display:none}
  #rsHeader nav *{flex-wrap:nowrap!important}
  #rsHeader nav > *, #rsHeader nav .rs-moved > *{flex-shrink:0}
  #rsHeader :is(input[type=search],.rs-search,.search){min-width:0!important;max-width:42vw!important}
}
@media (max-width:700px){
  html.rs-on #rsHeader .topbar.rs-moved .quick-search, #rsHeader .quick-search{position:static!important;transform:none!important;width:auto!important;flex:0 1 120px!important;min-width:90px!important;left:auto!important;right:auto!important}
}
@media (max-width:900px){ html[data-rs-page="management"] :is(.sidebar-header h2,.main .topbar h1){display:none!important} }