/* ============================================================================
   ui.css — مكوّنات ساو تيك لايف المشتركة · الأزرار
   ============================================================================
   ملف واحد يحكم كل زرّ في الموقع. تغيير شكل الأزرار = تعديل هذا الملف وحده.

   ── يعمل في أي صفحة بلا اعتماد على غيره ───────────────────────────────────
   كل لون مكتوب var(--رمز, قيمة-احتياطية). فإن كانت الصفحة تعرّف الرمز
   (اللوحة تعرّفه، والسمات body[data-theme] تعيد تعريفه) اتّبعها الزرّ وتلوّن
   معها؛ وإن لم تعرّفه عملت القيمة الاحتياطية. لا ملف آخر مطلوب.

   ── الأدوار الخمسة (لا سادس) ──────────────────────────────────────────────
   .btn--primary    الفعل الرئيسي — واحد فقط في الشاشة. توهّج دوّار عند التمرير.
   .btn--secondary  فعل مساند
   .btn--ghost      تراجع/إلغاء
   .btn--danger     لا رجعة فيه (حذف)
   .btn--tool       صغير ومتكرّر (نسخ · فتح · ⚙)

   ── المقاسات ──────────────────────────────────────────────────────────────
   .btn--sm  ·  (الافتراضي)  ·  .btn--lg  ·  .btn--block (عرض كامل)

   ── الحالات ───────────────────────────────────────────────────────────────
   disabled · .btn--loading (مع <span class="ld"></span> داخله)
   ========================================================================= */

:root {
    --btn-r: 999px;                                   /* كبسولة */
    --btn-t: 160ms;                                   /* انتقال واحد لكل زرّ */
    --btn-ease: cubic-bezier(.4, 0, .2, 1);
    --btn-ink: #140d22;                               /* داكن الزرّ الأساسي */
}

/* ═══════════ الأساس — يشترك فيه كل زرّ ═══════════ */
.btn,
.grant-btn,
.btn-copy,
.btn-open,
.screen-row__copy,
.chatbot-logout-btn,
.btn-connect,
.tts-test-btn,
.create-action-btn,
.gc-add-gift-btn,
.user-btn,
.btn-advanced,
.gc-btn,
.cg-btn,
.dl-settings-btn,
.mp-save-btn,
.btn-settings-mini,
.btn-save,
.save-flags-btn,
.chatbot-login-btn,
.btn-cancel,
.widget-action-btn,
.modal-close {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-weight: 800; font-size: .95rem; line-height: 1;
    padding: 12px 24px; border-radius: var(--btn-r); border: 1px solid transparent;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    /* لا transform ولا all: الأول يزيح، والثاني ينشّط خصائص تخطيط بلا داعٍ */
    transition: background var(--btn-t) var(--btn-ease),
                border-color var(--btn-t) var(--btn-ease),
                box-shadow var(--btn-t) var(--btn-ease),
                color var(--btn-t) var(--btn-ease),
                scale var(--btn-t) var(--btn-ease),
                opacity var(--btn-t) var(--btn-ease);
}

/* التمرير لا يزيح الزرّ إطلاقًا (CLAUDE.md §23): الإزاحة تسحب الحافة من تحت
   المؤشّر بين mousedown وmouseup فلا يقع click أصلًا. التغذية الراجعة بالظلّ
   واللون. والضغط يصغّره — تصغيرٌ لا يقلّص مساحة الإصابة تحت المؤشّر. */
.btn:active:not(:disabled),
.grant-btn:active:not(:disabled),
.btn-save:active,
.btn-cancel:active,
.widget-action-btn:active,
.modal-close:active { scale: .97; }

/* حلقة تركيز الكيبورد — معدومة اليوم في اللوحة والأدمن (outline:none بلا بديل) */
.btn:focus-visible,
.grant-btn:focus-visible,
.btn-save:focus-visible,
.btn-cancel:focus-visible,
.widget-action-btn:focus-visible,
.modal-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dark, #150c29),
                0 0 0 5px var(--purple-light, #d9abfa);
}

.btn:disabled, .btn[disabled],
.grant-btn:disabled, .grant-btn[disabled] { opacity: .42; cursor: not-allowed; }

/* ═══════════ الأساسي — التوهّج الدوّار ═══════════
   ::before هالة conic تدور حول الزرّ · ::after يغطّي وسطه فلا يظهر إلا الإطار.
   الحركة paused حتى التمرير ⇒ كلفتها صفر وهي ساكنة (مقيسة: 0.0 ms/ث ساكنًا،
   ~63 ms/ث من ميزانية 1000 أثناء التمرير، وزرّ واحد فقط يتوهّج في أي لحظة). */
@property --glow-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.btn--primary,
.grant-btn,
.btn-save,
.save-flags-btn,
.chatbot-login-btn,
.chatbot-logout-btn,
.btn-connect,
.tts-test-btn,
.create-action-btn,
.gc-add-gift-btn {
    position: relative; isolation: isolate; z-index: 0;
    background: var(--btn-ink); color: #fff; border: 0; box-shadow: none;
}
.btn--primary::before,
.grant-btn::before,
.btn-save::before,
.save-flags-btn::before,
.chatbot-login-btn::before,
.chatbot-logout-btn::before,
.btn-connect::before,
.tts-test-btn::before,
.create-action-btn::before,
.gc-add-gift-btn::before {
    content: ""; position: absolute; inset: -2px; z-index: -2;
    border-radius: calc(var(--btn-r) + 2px); opacity: 0; filter: blur(6px);
    /* مبنيّ من سلّم السمة نفسه، فيتبعها التوهّج تلقائيًا. كان طرفاه لونين
       مثبّتين (#2e1065 و#ffffff) فبقي بنفسجيًّا مهما تغيّرت الهوية. */
    background: conic-gradient(from var(--glow-a),
        var(--p-900, #2e1065),
        var(--p-700, #6d34df),
        var(--p-500, #8b5cf6),
        var(--p-400, #d9abfa),
        var(--p-300, #ffffff),
        var(--p-400, #d9abfa),
        var(--p-500, #8b5cf6),
        var(--p-700, #6d34df),
        var(--p-900, #2e1065));
    animation: glowSpin 2.4s linear infinite;
    animation-play-state: paused;
    transition: opacity 260ms ease-in-out;
}
.btn--primary::after,
.grant-btn::after,
.btn-save::after,
.save-flags-btn::after,
.chatbot-login-btn::after,
.chatbot-logout-btn::after,
.btn-connect::after,
.tts-test-btn::after,
.create-action-btn::after,
.gc-add-gift-btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: var(--btn-r); background: var(--btn-ink);
    transition: background-color var(--btn-t) var(--btn-ease);
}
.btn--primary:hover:not(:disabled)::before,
.btn--primary:focus-visible::before,
.grant-btn:hover:not(:disabled)::before,
.grant-btn:focus-visible::before,
.btn-save:hover::before,
.save-flags-btn:hover::before,
.chatbot-login-btn:hover::before,
.chatbot-logout-btn:hover::before,
.btn-connect:hover::before,
.tts-test-btn:hover::before,
.create-action-btn:hover::before,
.gc-add-gift-btn:hover::before { opacity: 1; animation-play-state: running; }
.btn--primary:active::after,
.grant-btn:active::after,
.btn-save:active::after { background: transparent; }

@keyframes glowSpin { to { --glow-a: 360deg; } }

/* ═══════════ بقيّة الأدوار ═══════════ */
.user-btn,
.btn-advanced,
.gc-btn,
.cg-btn,
.dl-settings-btn,
.mp-save-btn,
.btn-settings-mini,
.btn--secondary {
    background: rgba(var(--lux-rgb, 109,52,223), .14);
    color: var(--text, #f3ecff);
    border-color: rgba(var(--lux-rgb, 109,52,223), .42);
}
.user-btn:hover,
.btn-advanced:hover,
.gc-btn:hover,
.cg-btn:hover,
.dl-settings-btn:hover,
.mp-save-btn:hover,
.btn-settings-mini:hover,
.btn--secondary:hover:not(:disabled) {
    background: rgba(var(--lux-rgb, 109,52,223), .24);
    border-color: var(--purple, #6d34df);
}

.btn--ghost,
.btn-cancel { background: transparent; color: var(--text-dim, rgba(217,171,250,.72)); }
.btn--ghost:hover:not(:disabled),
.btn-cancel:hover {
    background: rgba(var(--lux-light-rgb, 217,171,250), .09);
    color: var(--text, #f3ecff);
}

.btn--danger {
    background: transparent; color: var(--red, #ff5c72);
    border-color: rgba(255, 92, 114, .45);
}
.btn--danger:hover:not(:disabled) {
    background: var(--red, #ff5c72); color: #fff; border-color: var(--red, #ff5c72);
    box-shadow: 0 4px 18px rgba(255, 92, 114, .4);
}

.btn--tool,
.btn-copy,
.btn-open,
.screen-row__copy,
#page-donation-actions .da-overlay-url button,
.widget-action-btn,
.modal-close {
    background: rgba(var(--lux-light-rgb, 217,171,250), .07);
    color: var(--text-dim, rgba(217,171,250,.72));
    border-color: rgba(var(--lux-light-rgb, 217,171,250), .16);
    font-size: .8rem; font-weight: 700; padding: 8px 14px;
}
.btn--tool:hover:not(:disabled),
.btn-copy:hover,
.btn-open:hover,
.screen-row__copy:hover,
#page-donation-actions .da-overlay-url button:hover,
.widget-action-btn:hover,
.modal-close:hover {
    background: rgba(var(--lux-light-rgb, 217,171,250), .14);
    color: var(--text, #f3ecff);
}

/* حالة قطع الاتصال: فعلٌ يقطع البثّ — دلالته خطر لا فعل رئيسي، فتتلوّن
   هالته بالأحمر وحدها ويبقى البناء واحدًا. */
.btn-connect.disconnect { color: var(--red, #ff5c72); }
.btn-connect.disconnect::before {
    background: conic-gradient(from var(--glow-a),
        var(--p-900, #2e1065), var(--red, #ff5c72), #ffb3bd,
        var(--red, #ff5c72), var(--p-900, #2e1065));
}
.btn-connect:disabled { opacity: .55; cursor: not-allowed; }

/* ═══════════ شكل أيقوني — لأزرار الأيقونة المفردة ═══════════
   الكبسولة شكلٌ لنصّ؛ أيقونة مفردة (× · ⚙ · ▶) تُحاط بدائرة لا بكبسولة
   ممدودة. الدور يبقى من الأدوار الخمسة (عادةً --tool)، والشكل وحده يتغيّر.
   المقاس 36px: هدف لمس مريح، وأوسع من أيقونة 16px بهامش كافٍ. */
.btn--icon,
.widget-action-btn:not(.with-label),
.modal-close,
.rk-nav > button,
.rk-add-btn {
    width: 36px; height: 36px; padding: 0;
    border-radius: 50%;
    flex: 0 0 auto;
}
/* صفّ تنقّل (‹ تسمية ›) — ليس سِكّة اختيار بل تنقّل حول تسمية، فلا حاوية
   مستديرة له؛ الزرّان وحدهما دائريّان. */
.rk-nav { display: inline-flex; align-items: center; gap: 10px; }

/* بنصٍّ بجانب الأيقونة يعود كبسولةً */
.widget-action-btn.with-label {
    width: auto; height: auto;
    border-radius: var(--btn-r);
    padding: 8px 14px; gap: 6px;
}

/* ═══════════ المقاسات ═══════════ */
.btn--sm { font-size: .82rem; padding: 8px 16px; }
.btn--lg { font-size: 1.05rem; padding: 15px 34px; }
.btn--block { width: 100%; }

/* ═══════════ حالة التحميل ═══════════
   المؤشّر عنصر حقيقي <span class="ld"> لا ::before — الزوجان محجوزان للتوهّج،
   والمؤشّر محتوًى لا زخرفة فمكانه عنصر على أي حال. */
.btn--loading { pointer-events: none; opacity: .85; }
.btn--loading .ld {
    width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff;
    animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { rotate: 360deg; } }

/* ═══════════ احترام تقليل الحركة ═══════════ */
@media (prefers-reduced-motion: reduce) {
    .btn--primary::before, .grant-btn::before { animation: none; }
    .btn--loading .ld { animation-duration: 2s; }
}

/* ============================================================================
   جسور الأسماء القديمة — كي لا نضطرّ لتغيير آلاف أسطر HTML دفعةً واحدة.
   كل اسم قديم يرث دوره الجديد. تُحذف هذي الكتلة تدريجيًا كلّما هُجّرت صفحة.
   =========================================================================

   الطريقة: يُضمّ الاسم القديم لقوائم محدِّدات الدور المناسب أعلاه، فلا سطر
   HTML واحد يتغيّر. وتُحذف قواعده البصرية القديمة من مصدرها — لا تُركَّب
   الهوية فوقها (درس القائمة الجانبية: التركيب يُخرج خليطًا مشوّهًا).

     grant-btn · btn-save · save-flags-btn · chatbot-login-btn  →  أساسي
     btn-cancel                                                 →  شبح
     widget-action-btn · modal-close                            →  أداة أيقونية

   هذي الأسماء يُنشئها JS أيضًا (grant-btn في 3 مواضع بالأدمن، وأزرار الودجت
   ديناميكيًّا)، فإبقاؤها يجعل ما يُنشأ لاحقًا يتبع النظام تلقائيًا. */

/* ============================================================================
   الحقول — تتناسق مع الأزرار
   ============================================================================
   الحقل ذو السطر الواحد يأخذ نفس كبسولة الزرّ ونفس مدّة الانتقال، فيقرأ
   الاثنان كعائلة واحدة. أمّا textarea فيبقى مستطيلًا مستدير الزوايا: الكبسولة
   شكلٌ لسطرٍ واحد، وتطبيقها على صندوق متعدّد الأسطر يقصّ زواياه على النص.
   مستثنى أيضًا: checkbox · radio · range · color · file — لكلٍّ منها شكل
   يرسمه النظام نفسه، وفرض استدارة عليه يشوّهه.
   ========================================================================= */
.ui-field,
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
select {
    border-radius: var(--btn-r);
    padding: 11px 18px;
    font-family: inherit;
    font-size: .9rem;
    color: var(--text, #f3ecff);
    background: var(--input-bg, rgba(217, 171, 250, .06));
    border: 1px solid var(--input-border, rgba(109, 52, 223, .25));
    transition: border-color var(--btn-t) var(--btn-ease),
                box-shadow var(--btn-t) var(--btn-ease),
                background var(--btn-t) var(--btn-ease);
}
textarea {
    border-radius: 18px;
    padding: 12px 16px;
    font-family: inherit;
    color: var(--text, #f3ecff);
    background: var(--input-bg, rgba(217, 171, 250, .06));
    border: 1px solid var(--input-border, rgba(109, 52, 223, .25));
    transition: border-color var(--btn-t) var(--btn-ease),
                box-shadow var(--btn-t) var(--btn-ease);
}

/* نفس حلقة التركيز التي للأزرار — بلا outline:none عارٍ */
.ui-field:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--purple, #6d34df);
    box-shadow: 0 0 0 3px rgba(var(--lux-rgb, 109,52,223), .22);
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted, rgba(217, 171, 250, .42));
}

/* ═══════════ المقسّم — خيارات متجاورة في سِكّة واحدة ═══════════
   ليس دورًا سادسًا للأزرار: مجموعةُ خيارات يُختار منها **واحد** (اختيار
   تصميم · وضع عرض · محاذاة). الكبسولات المستقلّة تُفكّك المجموعة بصريًّا
   فتُقرأ ثلاثة أفعال منفصلة؛ والسِكّة تجمعها فتُقرأ خيارًا واحدًا من ثلاثة.

   يُطبَّق على الحاوية القائمة مباشرةً (.layer-style-bar) فلا يتغيّر سطر HTML.
   الأزرار بداخلها لا تحمل حدودًا مستقلّة — الحدّ للسِكّة وحدها، والمختار
   يمتلئ بلون الهوية. */
.seg,
.layer-style-bar,
.lang-switch,
.dg-seg,
.rk-cats,
.rk-periods,
.mp-tbtn-row,
.dl-dir-toggle,
.dl-tog-row,
.admin-top-tabs,
.tabs,
.bpv__mode {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px; flex-wrap: wrap;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--card-border, rgba(109,52,223,.28));
    border-radius: var(--btn-r);
}
.seg > button,
.seg > .btn,
.layer-style-bar .lsb-btn,
.lang-switch .lang-btn,
.dg-seg .dg-seg-btn,
.rk-cats .rk-cat,
.rk-periods .rk-period,
.mp-tbtn-row .mp-tbtn,
.dl-dir-toggle .dl-dir-btn,
.dl-tog-row .dl-tog-btn,
.admin-top-tabs .admin-tab-btn,
.tabs .tab-btn,
.bpv__mode .grant-btn {
    padding: 7px 15px;
    font-family: inherit; font-size: .82rem; font-weight: 700; line-height: 1;
    background: transparent; border: 0; box-shadow: none;
    color: var(--text-dim, rgba(217,171,250,.72));
    border-radius: var(--btn-r);
    cursor: pointer; white-space: nowrap;
    transition: background var(--btn-t) var(--btn-ease),
                color var(--btn-t) var(--btn-ease);
}
.seg > button:hover:not(.on):not(.active):not(:disabled),
.seg > .btn:hover:not(.on):not(.active):not(:disabled),
.layer-style-bar .lsb-btn:hover:not(.on):not(.active):not(:disabled),
.lang-switch .lang-btn:hover:not(.on):not(.active):not(:disabled),
.dg-seg .dg-seg-btn:hover:not(.on):not(.active):not(:disabled),
.rk-cats .rk-cat:hover:not(.on):not(.active):not(:disabled),
.rk-periods .rk-period:hover:not(.on):not(.active):not(:disabled),
.mp-tbtn-row .mp-tbtn:hover:not(.on):not(.active):not(:disabled),
.dl-dir-toggle .dl-dir-btn:hover:not(.on):not(.active):not(:disabled),
.dl-tog-row .dl-tog-btn:hover:not(.on):not(.active):not(:disabled),
.admin-top-tabs .admin-tab-btn:hover:not(.on):not(.active):not(:disabled),
.tabs .tab-btn:hover:not(.on):not(.active):not(:disabled),
.bpv__mode .grant-btn:hover:not(.on):not(.active):not(:disabled) {
    background: rgba(var(--lux-light-rgb, 217,171,250), .10);
    color: var(--text, #f3ecff);
}
.seg > button.on,
.seg > .btn.on,
.layer-style-bar .lsb-btn.on,
.lang-switch .lang-btn.on,
.dg-seg .dg-seg-btn.on,
.rk-cats .rk-cat.on,
.rk-periods .rk-period.on,
.mp-tbtn-row .mp-tbtn.on,
.dl-dir-toggle .dl-dir-btn.on,
.dl-tog-row .dl-tog-btn.on,
.admin-top-tabs .admin-tab-btn.on,
.tabs .tab-btn.on,
.bpv__mode .grant-btn.on,
.seg > button.active,
.seg > .btn.active,
.layer-style-bar .lsb-btn.active,
.lang-switch .lang-btn.active,
.dg-seg .dg-seg-btn.active,
.rk-cats .rk-cat.active,
.rk-periods .rk-period.active,
.mp-tbtn-row .mp-tbtn.active,
.dl-dir-toggle .dl-dir-btn.active,
.dl-tog-row .dl-tog-btn.active,
.admin-top-tabs .admin-tab-btn.active,
.tabs .tab-btn.active,
.bpv__mode .grant-btn.active,
.seg > button[aria-selected="true"],
.seg > .btn[aria-selected="true"],
.layer-style-bar .lsb-btn[aria-selected="true"],
.lang-switch .lang-btn[aria-selected="true"],
.dg-seg .dg-seg-btn[aria-selected="true"],
.rk-cats .rk-cat[aria-selected="true"],
.rk-periods .rk-period[aria-selected="true"],
.mp-tbtn-row .mp-tbtn[aria-selected="true"],
.dl-dir-toggle .dl-dir-btn[aria-selected="true"],
.dl-tog-row .dl-tog-btn[aria-selected="true"],
.admin-top-tabs .admin-tab-btn[aria-selected="true"],
.tabs .tab-btn[aria-selected="true"],
.bpv__mode .grant-btn[aria-selected="true"] {
    background: var(--purple, #6d34df);
    color: #fff;
}
.seg > button:focus-visible,
.seg > .btn:focus-visible,
.layer-style-bar .lsb-btn:focus-visible,
.lang-switch .lang-btn:focus-visible,
.dg-seg .dg-seg-btn:focus-visible,
.rk-cats .rk-cat:focus-visible,
.rk-periods .rk-period:focus-visible,
.mp-tbtn-row .mp-tbtn:focus-visible,
.dl-dir-toggle .dl-dir-btn:focus-visible,
.dl-tog-row .dl-tog-btn:focus-visible,
.admin-top-tabs .admin-tab-btn:focus-visible,
.tabs .tab-btn:focus-visible,
.bpv__mode .grant-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--dark, #150c29), 0 0 0 4px var(--purple-light, #d9abfa);
}
/* .grant-btn مجسورة للدور الأساسي فتحمل هالة التوهّج؛ داخل السِكّة تُلغى
   — السِكّة تجمع خيارات لا أفعالًا رئيسية. */
.bpv__mode .grant-btn::before,
.bpv__mode .grant-btn::after { content: none; }

/* عنوان السِكّة يقع خارجها بصريًّا */
.lsb-title { font-size: .8rem; color: var(--muted, #7c658d); margin-inline-end: 8px; }

/* ═══════════ شريط رابط الأوفرلي ═══════════
   حقل قراءة فقط يحمل رابط الشاشة، وبجانبه «نسخ» (وأحيانًا «فتح»).
   كان له شكلٌ خاصّ موصوف في CLAUDE.md §12 — تدرّج بنفسجي واستدارة 11px —
   وُضع حين لم يكن ثمّة نظام أزرار. الآن يرث النظام: الحقل كبسولة كبقيّة
   الحقول، وزرّاه من دور «أداة». ويبقى للحقل ما يخصّه وظيفيًّا فقط:
   خطّ أحادي المسافة واتجاه LTR — الرابط لاتينيّ ويجب أن يُقرأ حرفًا بحرف. */
.widget-url,
.screen-row__url,
#page-donation-actions .da-overlay-url input {
    flex: 1; min-width: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .78rem;
    direction: ltr; text-align: left;
    padding: 9px 16px;
    border-radius: var(--btn-r);
    color: var(--text, #f3ecff);
    background: rgba(0, 0, 0, .30);
    border: 1px solid var(--input-border, rgba(109,52,223,.25));
    transition: border-color var(--btn-t) var(--btn-ease),
                box-shadow var(--btn-t) var(--btn-ease);
}
.widget-url:focus,
.screen-row__url:focus,
#page-donation-actions .da-overlay-url input:focus {
    outline: none;
    border-color: var(--purple, #6d34df);
    box-shadow: 0 0 0 3px rgba(var(--lux-rgb, 109,52,223), .22);
}


/* ============================================================================
   النوافذ — مكوّن واحد
   ============================================================================
   حُذف قبله تعريف النافذة القديم من dashboard.css (الغلاف · اللوحة · الرأس ·
   الجسم · التذييل)، وحُذفت .modal من ثلاث قواعد «الزجاج القديم» التي كانت
   تفرض عليها حدًّا أبيض 16% ولمعةً بيضاء داخلية و::before قبّة — وهي ما كان
   يظهر «شكلًا قديمًا» في نوافذ صفحة التصنيف وغيرها.

   اللوحة سطح صلب من سلّم الهوية (لا شفافية ⇒ لا ضبابية ⇒ لا كلفة إعادة رشّ)،
   والغلاف وحده يموّه لأنه عابر. الحدود والفواصل من السلّم نفسه فتتبع تبديل
   ق/ظ تلقائيًّا.
   ========================================================================= */

/* Shared setting cards: low specificity preserves existing page layouts. */
:where(.setting-card) {
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(var(--lux-light-rgb,217,171,250),.12);
    border-radius: 12px;
    padding: 16px 18px;
}
:where(.setting-label) {
    display: flex; align-items: center; gap: 8px;
    font-size: .85rem; font-weight: 700;
    color: var(--text-dim, var(--text)); margin-bottom: 12px;
}
:where(.setting-label svg) { width: 16px; height: 16px; color: var(--purple-light); }
:where(.setting-control) { display: flex; align-items: center; justify-content: flex-end; }

.modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 500;
    align-items: center; justify-content: center;
    background: rgba(var(--p-950-rgb, 29,10,51), .74);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-overlay.show { display: flex; animation: modalFadeIn .22s var(--ease); }
@keyframes modalFadeIn { from { opacity: 0 } to { opacity: 1 } }

.modal {
    width: 480px; max-width: 92vw; max-height: 85vh;
    display: flex; flex-direction: column;
    background: var(--p-900);
    border: 1px solid var(--p-700);
    border-radius: var(--r-2xl);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
    animation: modalRise .26s var(--ease);
}
@keyframes modalRise {
    from { transform: translateY(14px) scale(.985); opacity: 0 }
    to   { transform: none; opacity: 1 }
}

.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 22px;
    border-bottom: 1px solid var(--p-800);
}
.modal-title {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-body);
    font-size: 1.02rem; font-weight: 800;
    color: var(--p-300);
}

.modal-body {
    padding: 20px 22px; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 14px;
}

.modal-footer {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--p-800);
    background: rgba(0, 0, 0, .16);
    border-radius: 0 0 calc(var(--r-2xl) - 1px) calc(var(--r-2xl) - 1px);
}

/* Approved button appearance and legacy page integration. */
/* Subtle polish: original capsules, colors, sizes and glow retained. */
.btn--primary::after { background-image:linear-gradient(180deg,rgba(255,255,255,.055),transparent 65%); box-shadow:inset 0 0 0 1px rgba(var(--lux-light-rgb,217,171,250),.18),inset 0 1px 0 rgba(255,255,255,.10); }
.btn--primary:not(:disabled) { box-shadow:0 3px 9px rgba(0,0,0,.18); }
.btn--primary::before { filter:blur(5px); animation-duration:3.2s; }
.btn--secondary { box-shadow:inset 0 1px 0 rgba(255,255,255,.055); }
.btn--tool { box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.btn--danger:hover:not(:disabled) { box-shadow:0 3px 12px rgba(255,92,114,.20); }
.btn:disabled { box-shadow:none; }
@media(prefers-reduced-motion:reduce) { .btn--primary::before { animation:none; } }
/* Legacy page rules no longer own the visuals of explicitly migrated buttons. */
body[data-saw-ui] .btn {
 align-items:center;justify-content:center;gap:8px;
 font-family:inherit;font-weight:800;line-height:1.2;padding:12px 24px;
 border-radius:var(--btn-r);border:1px solid transparent;cursor:pointer;
 text-decoration:none;overflow:visible;filter:none;
}
body[data-saw-ui] .btn--primary { position:relative;isolation:isolate;z-index:0;background:var(--btn-ink);color:#fff;box-shadow:none;border:0; }
body[data-saw-ui] .btn--primary::before {
 content:'';position:absolute;inset:-2px;width:auto;height:auto;z-index:-2;
 border-radius:inherit;opacity:0;filter:blur(5px);transform:none;
 background:conic-gradient(from var(--glow-a),var(--p-900,#2e1065),var(--p-700,#6d34df),var(--p-500,#8b5cf6),var(--p-400,#d9abfa),var(--p-300,#fff),var(--p-400,#d9abfa),var(--p-500,#8b5cf6),var(--p-700,#6d34df),var(--p-900,#2e1065));
 animation:glowSpin 3.2s linear infinite;animation-play-state:paused;pointer-events:none;
}
body[data-saw-ui] .btn--primary::after { content:'';position:absolute;inset:0;width:auto;height:auto;z-index:-1;border-radius:inherit;background:var(--btn-ink);box-shadow:inset 0 1px 0 #ffffff1a;transform:none;opacity:1;pointer-events:none; }
body[data-saw-ui] .btn--primary:is(:hover,:focus-visible):not(:disabled)::before { opacity:1;animation-play-state:running; }
body[data-saw-ui] .btn--secondary { background:rgba(var(--lux-rgb,109,52,223),.14);color:var(--text,#f3ecff);border-color:rgba(var(--lux-rgb,109,52,223),.42);box-shadow:inset 0 1px 0 #ffffff0e; }
body[data-saw-ui] .btn--secondary:hover { background:rgba(var(--lux-rgb,109,52,223),.24);border-color:var(--purple,#6d34df); }
body[data-saw-ui] .btn--ghost { background:transparent;color:var(--text-dim,#b9a5d8);box-shadow:none; }
body[data-saw-ui] .btn--danger { background:transparent;color:var(--red,#ff5c72);border-color:var(--red,#ff5c72);box-shadow:none; }
body[data-saw-ui] .btn--danger:hover { background:var(--red,#ff5c72);color:#fff; }
body[data-saw-ui] .btn--tool { padding:8px 14px;font-size:.8rem;background:rgba(var(--lux-light-rgb,217,171,250),.07);color:var(--text-dim,#b9a5d8);border-color:rgba(var(--lux-light-rgb,217,171,250),.16);box-shadow:none; }
body[data-saw-ui] .btn:is(.btn--secondary,.btn--ghost,.btn--danger,.btn--tool)::before,
body[data-saw-ui] .btn:is(.btn--secondary,.btn--ghost,.btn--danger,.btn--tool)::after { content:none; }
body[data-saw-ui] .btn:not(.toggle-pass):hover { transform:none;translate:none;filter:none; }
body[data-saw-ui] .btn:focus-visible { outline:2px solid var(--purple-light,#d9abfa);outline-offset:3px; }
body[data-saw-ui] .btn:disabled { opacity:.42;cursor:not-allowed; }
body[data-saw-ui] .btn--sm { padding:8px 16px;font-size:.82rem; }
body[data-saw-ui] .btn--lg { padding:15px 34px;font-size:1.05rem; }
body[data-saw-ui] .btn--icon { padding:0;width:36px;height:36px;flex-shrink:0;border-radius:50%; }
body[data-saw-ui] .btn { box-sizing:border-box; }
body[data-saw-ui] .btn--primary::before,body[data-saw-ui] .btn--primary::after { translate:none;rotate:none;scale:none; }
body[data-saw-ui] .btn--primary::after { animation:none;transition:none;transform:none; }
body[data-saw-ui] .btn.toggle-pass { padding:0;width:32px;height:32px; }
body[data-saw-ui] .btn.toggle-pass svg { display:block;width:20px;height:20px; }