/* ═══════════════════════════════════════════════════════════════
   ثيمات الموقع — <html data-theme="sunny|night|mix"> (السيرفر يختاره، src/theme.js)
   sunny = الحالي (ما يحتاج شي هنا) · night = ألوان الحفلات · mix = المسرح ليلي والمعلومات نهارية
   الطريقة: نفس متغيّرات الألوان (--bg, --surface, --text…) بقيم ثانية. الملفات الأساسية تستعمل المتغيّرات،
   وهنا بس القيم + الحالات القليلة اللي لونها مكتوب مباشرة.
   ═══════════════════════════════════════════════════════════════ */

/* ─── ١ ألوان الحفلات (الأساس الليلي): للثيم الليلي كله، ولمناطق المسرح بالميكس ─── */
html[data-theme="night"] body.v3,
html[data-theme="night"] body.light,
html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer) {
  --bg: #160d2b;
  --bg-2: #1d1236;
  --surface: #241743;
  --surface-2: #2c1d50;
  --surface-3: #36255f;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .17);
  --text: #f6f2ff;
  --muted: #c9bdf0;
  --dim: #9488c2;
  --ink: #1a1030;
  --mix-ink: #fff;
  --pen-dim: rgba(246, 242, 255, .32);
  --gold: #f5b400;
  --coral: #ff7ab6;
  --violet: #9d7dff;
  --mint: #2ee6b6;
  --sky: #22d3ee;
  --grad-soft: linear-gradient(105deg, rgba(124, 77, 255, .22), rgba(34, 211, 238, .12) 50%, rgba(255, 122, 182, .16));
  --shadow: 0 22px 50px -24px rgba(0, 0, 0, .75);
  --soft-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8);
  --ai-ink: #cbb8ff;
  --ai-soft: rgba(124, 77, 255, .18);
  --ai-line: rgba(157, 125, 255, .34);
  color-scheme: dark;
  color: var(--text);
}
/* أزرار الحفلات: وردي ← بنفسجي ← سماوي */
html[data-theme="night"] body.v3,
html[data-theme="night"] body.light {
  --hot: linear-gradient(105deg, #ff7ab6 0%, #7c4dff 52%, #22d3ee 100%);
  --grad: linear-gradient(105deg, #ff7ab6 0%, #7c4dff 52%, #22d3ee 100%);
  --shadow-glow: 0 16px 36px -14px rgba(124, 77, 255, .7);
}
/* الميكس: تدرّج يجمع الاثنين — برتقالي، وردي، بنفسجي، سماوي */
html[data-theme="mix"] body.v3,
html[data-theme="mix"] body.light {
  --hot: linear-gradient(105deg, #ff9f1c 0%, #ff5c8a 34%, #7c4dff 68%, #22d3ee 100%);
  --grad: linear-gradient(105deg, #ff9f1c 0%, #ff5c8a 34%, #7c4dff 68%, #22d3ee 100%);
  --shadow-glow: 0 16px 36px -14px rgba(124, 77, 255, .55);
}

/* ─── ٢ خلفية الصفحة ─── */
html[data-theme="night"]:has(body.v3),
html[data-theme="night"]:has(body.light) {
  color-scheme: dark;
  background:
    radial-gradient(60vmax 50vmax at 100% 0%, rgba(124, 77, 255, .32), transparent 70%),
    radial-gradient(50vmax 45vmax at 0% 55%, rgba(34, 211, 238, .12), transparent 70%),
    radial-gradient(45vmax 40vmax at 85% 100%, rgba(255, 122, 182, .14), transparent 70%),
    #160d2b;
  background-attachment: fixed;
}
html[data-theme="night"] .v3-bg .b1 { background: #4b2a96; opacity: .45; }
html[data-theme="night"] .v3-bg .b2 { background: #10506a; opacity: .4; }
html[data-theme="night"] .v3-bg .b3 { background: #6a1f5c; opacity: .38; }
html[data-theme="night"] .v3-bg .b4 { background: #0d5547; opacity: .3; }
html[data-theme="night"] ::selection { background: #7c4dff; color: #fff; }

/* مناطق المسرح بالميكس: خلفيتها ليلية بالكامل */
html[data-theme="mix"] :is(.v3-hero, .v3-foot, .p-hero, .site-footer) {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(124, 77, 255, .35), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(34, 211, 238, .14), transparent 70%),
    #160d2b;
}

/* ─── ٣ الشعار: الإطار أبيض على الليل ─── */
html[data-theme="night"] .logo-mark__frame,
html[data-theme="mix"] :is(.v3-top, .v3-foot, .site-header, .site-footer) .logo-mark__frame { stroke: #fff; }
html[data-theme="night"] .logo-mark__beat,
html[data-theme="mix"] :is(.v3-top, .v3-foot, .site-header, .site-footer) .logo-mark__beat { stroke: var(--bg); }

/* ─── ٤ الأجزاء اللي لونها الفاتح مكتوب مباشرة ───
   N = الثيم الليلي كله + مناطق المسرح بالميكس (نفس القواعد للاثنين) */

/* زجاج الهيدر والقائمة والفوتر */
html[data-theme="night"] :is(.v3-top.is-scrolled, .v3-top.is-stuck),
html[data-theme="night"] .light .site-header,
html[data-theme="mix"] .light .site-header { background: rgba(22, 13, 43, .82); }
html[data-theme="night"] .light .site-header.is-scrolled,
html[data-theme="mix"] .light .site-header.is-scrolled { background: rgba(22, 13, 43, .92); box-shadow: 0 8px 30px -20px rgba(0, 0, 0, .8); }
html[data-theme="mix"] .v3-top { background: rgba(22, 13, 43, .9); color: var(--text); }
html[data-theme="night"] .light .mmenu { background: rgba(22, 13, 43, .97); }
html[data-theme="night"] .v3-foot { background: rgba(29, 18, 54, .78); }
html[data-theme="night"] .light .site-footer { background: rgba(29, 18, 54, .78); }

/* شارات وحقول فاتحة */
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) .v3-skills span,
html[data-theme="night"] .light .skill { background: var(--surface-2); color: var(--muted); }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) :is(.v3-chips select, .v3-pop__row select),
html[data-theme="night"] .v3 .form :is(input, select) { background-color: var(--surface-2); color: var(--text); border-color: var(--line-2); }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) .v3-chip .cnt { background: rgba(255, 255, 255, .12); }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) .v3-finder { box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .8), 0 0 0 1px var(--line); }
html[data-theme="night"] .light .acc { background: var(--surface-2); }
html[data-theme="night"] .light :is(.acc__src.is-auto, .p-work, .p-work .ic) { color: #2ee6b6; }
html[data-theme="mix"] .p-hero :is(.p-work, .p-work .ic) { color: #2ee6b6; }
html[data-theme="night"] .fit-panel { background: linear-gradient(160deg, var(--surface-2), var(--surface) 45%) !important; }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) .v3-how__k, html[data-theme="night"] .v3-foot li :is(a, button):hover { color: #ff7ab6; }

/* «انضم إلينا»: نفس الصندوق بألوان الليل */
html[data-theme="night"] .v3-join { background: linear-gradient(125deg, #3b2470 0%, #4a1d5c 48%, #133a5c 100%); }
html[data-theme="night"] .v3-join::before { background: rgba(255, 255, 255, .06); }
html[data-theme="night"] .v3-join::after { border-color: rgba(255, 255, 255, .08); }
html[data-theme="night"] .v3-join > div > p { color: var(--muted); }

/* حبوب داكنة بنص أبيض بالنهاري ← بالليل تنقلب: خلفية فاتحة ونص غامق */
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) :is(.toast, .skip, .chip.is-on, .btn--light),
html[data-theme="night"] .v3-fliptip { color: var(--ink); }

/* القلم: كل كلمة لونها من pen.js (--ink على الكلمة). بالليل نفتّح نفس اللون حتى ينقرا ويبقى التدرّج */
:is(html[data-theme="night"], html[data-theme="mix"] .v3-hero) :is(.v3-intro.ink .ink-w.is-on, .v3-intro.ink-done .ink-w) { color: color-mix(in srgb, var(--ink) 58%, #fff); }
/* عنوان «بمكان واحد» يمشي بألوان الحفلات */
html[data-theme="night"] .v3-mark { background-image: linear-gradient(90deg, #ff7ab6, #9d7dff, #22d3ee, #f5b400, #ff7ab6); }
html[data-theme="mix"] .v3-mark { background-image: linear-gradient(90deg, #ff9f1c, #ff5c8a, #9d7dff, #22d3ee, #ff9f1c); }

/* ─── ٥ داخل البطاقات (الرزمة والصفحة) ─── */
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) :is(.v3-ex, .v3-ask, .v3-vids a, .v3-geo span:nth-child(2)) { background: var(--surface-2); }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) .v3-ex { color: var(--text); }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) .v3-fit { background: rgba(124, 77, 255, .18); color: #d9ccff; box-shadow: inset 0 0 0 1px rgba(157, 125, 255, .3); }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) .v3-fit.is-strong { background: rgba(18, 184, 134, .18); color: #7ff0cf; box-shadow: inset 0 0 0 1px rgba(46, 230, 182, .3); }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) .v3-fit.is-weak { background: rgba(255, 122, 61, .16); color: #ffbf9e; box-shadow: inset 0 0 0 1px rgba(255, 122, 61, .3); }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) :is(.v3-level.is-weak, .v3-fitbox__why li.is-no::before) { background: rgba(255, 122, 61, .2); color: #ffbf9e; }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) .v3-fitbox__caution { background: rgba(255, 122, 61, .14); color: #ffc7aa; }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) .v3-back__body > .v3-fitbox { background: linear-gradient(150deg, rgba(124, 77, 255, .2), rgba(255, 79, 154, .1)) !important; }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) :is(.advice, .v3-goal) { background: linear-gradient(130deg, rgba(124, 77, 255, .2), rgba(255, 79, 154, .1)); }
:is(html[data-theme="night"], html[data-theme="mix"] :is(.v3-top, .v3-hero, .v3-foot, .site-header, .p-hero, .site-footer)) .tip { background: rgba(255, 255, 255, .12); color: var(--muted); }

/* ─── ٦ الألواح اللي تطلع فوق الصفحة (بالليلي بس — بالميكس تبقى نهارية) ─── */
html[data-theme="night"] .v3-menu__panel { background: radial-gradient(70% 40% at 100% 0%, rgba(124, 77, 255, .32), transparent 70%), radial-gradient(70% 40% at 0% 100%, rgba(34, 211, 238, .12), transparent 70%), var(--bg); box-shadow: 30px 0 80px -30px rgba(0, 0, 0, .8); }
html[data-theme="night"] .v3-menu__row { background: rgba(255, 255, 255, .06); }
html[data-theme="night"] .v3-menu__scrim, html[data-theme="night"] .task.is-sheet.is-on .task__scrim { background: rgba(8, 4, 20, .55); }
html[data-theme="night"] .chat { background: var(--bg-2); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px var(--ai-line); }
html[data-theme="night"] .chat__head { background: linear-gradient(120deg, rgba(124, 77, 255, .28), rgba(255, 79, 154, .14)); }
html[data-theme="night"] .chat-ctx { background: linear-gradient(120deg, rgba(255, 159, 28, .14), rgba(255, 79, 154, .12)); }
html[data-theme="night"] .chat__form textarea { background: var(--surface-2); }
html[data-theme="night"] .chat-human { color: #2ee6b6; background: rgba(18, 184, 134, .16); }
html[data-theme="night"] .btn--primary { color: #fff; }
html[data-theme="night"] .sp__bg { background: radial-gradient(60% 50% at 50% 45%, rgba(124, 77, 255, .26), transparent 70%), radial-gradient(40% 40% at 85% 10%, rgba(255, 122, 182, .18), transparent 70%), radial-gradient(45% 45% at 10% 90%, rgba(34, 211, 238, .14), transparent 70%), #160d2b; }
html[data-theme="night"] .sp__bg::after { background-image: radial-gradient(circle at 1px 1px, rgba(157, 125, 255, .3) 1px, transparent 1.4px); }
/* الجولة */
html[data-theme="night"] .tour__bar i { background: rgba(255, 255, 255, .12); }
html[data-theme="night"] .tour__sback { background: var(--surface-2); color: var(--text); }
html[data-theme="night"] .task__card { background: radial-gradient(90% 70% at 50% 0%, rgba(124, 77, 255, .3), transparent 70%), var(--surface); }
html[data-theme="night"] .task__arrow { background: #2e1d55; }
html[data-theme="night"] .task__time { background: rgba(245, 180, 0, .18); color: #ffd166; }

/* ─── شريط المعاينة (يطلع بس بوضع ?theme=) ─── */
.theme-preview {
  position: fixed; z-index: 400; bottom: calc(92px + env(safe-area-inset-bottom)); inset-inline: 0; margin-inline: auto; width: fit-content;
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; padding-inline: 14px 6px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  background: #12b886; color: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
}
.theme-preview b { font-size: 13.5px; font-weight: 800; }
.theme-preview span { font-size: 11.5px; font-weight: 600; opacity: .85; }
.theme-preview i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); font: 700 16px/1 sans-serif; font-style: normal; }
html[data-theme="night"] .tour__card { background: radial-gradient(80% 60% at 50% 0%, rgba(255, 122, 182, .22), transparent 70%), radial-gradient(70% 60% at 100% 100%, rgba(124, 77, 255, .3), transparent 70%), var(--surface); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); }