/* =====================================================================
   الثيم الملكي — «الفخامة الداكنة الزجاجية» (١) + بنتو (٣) + مركز القيادة (٦)
   تجريبي ومعزول تماماً: لا يعمل أي سطر هنا إلا عندما يحمل <body> صنف
   .royal (زر ✨ للمؤسس فقط، ويُحفظ على جهازه وحده). بقية المستخدمين
   لا يتأثرون إطلاقاً حتى الاعتماد الرسمي.
   ===================================================================== */

body.royal {
    --ry-bg0: #0b0f26;
    --ry-bg1: #1a2150;
    --ry-glass: rgba(255, 255, 255, 0.055);
    --ry-glass2: rgba(255, 255, 255, 0.085);
    --ry-line: rgba(200, 164, 90, 0.26);
    --ry-fg: #eef1fb;
    --ry-muted: #aab3d6;
}

/* ===== الخلفية العامة ===== */
body.royal {
    background:
        radial-gradient(900px 500px at 85% -5%, rgba(200, 164, 90, 0.13), transparent 60%),
        radial-gradient(700px 500px at -10% 108%, rgba(63, 81, 181, 0.22), transparent 60%),
        linear-gradient(135deg, var(--ry-bg0), var(--ry-bg1) 55%, #151b40);
    background-attachment: fixed;
    color: var(--ry-fg);
}

/* ===== الهيكل ===== */
body.royal .sidebar {
    background: rgba(13, 18, 48, 0.86);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-inline-end: 1px solid var(--ry-line);
}
body.royal .topbar {
    background: rgba(13, 18, 48, 0.76);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--ry-line);
}
body.royal .topbar h2 { color: var(--ry-fg); }
body.royal .topbar .icon-btn { color: var(--ry-fg); }
body.royal .content { background: transparent; }

/* ===== الأسطح الزجاجية ===== */
body.royal .panel,
body.royal .card-item,
body.royal .app-modal,
body.royal .detail-card,
body.royal .dept-chip,
body.royal .list-search {
    background: var(--ry-glass);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--ry-line);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
    color: var(--ry-fg);
}
body.royal a.card-item:hover {
    border-color: #c8a45a;
    background: var(--ry-glass2);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(200, 164, 90, 0.35);
}
body.royal.dark .app-modal { background: var(--ry-glass); }

/* ===== التباين الشامل: كل نص داخل سطح زجاجي يُقرأ فاتحاً =====
   (العلاج الجذري لمشكلة «الكلمات المختفية» — يشمل العناوين والفقرات
   والقوائم والجداول والروابط، ويستثني الوسوم والأزرار والحقول) */
body.royal :is(.panel, .card-item, .app-modal-body, .app-modal-head, .detail-card, .b-tile)
    :is(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, b, td, th, label, legend, dt, dd) {
    color: var(--ry-fg);
}
body.royal :is(.panel, .card-item, .app-modal-body, .detail-card, .b-tile)
    :is(small, .muted, .dc-k) {
    color: var(--ry-muted);
}
body.royal .page-head h3,
body.royal .back-link,
body.royal .home-event strong,
body.royal .read-ok,
body.royal .circular-body,
body.royal .loading { color: var(--ry-fg); }
body.royal .muted { color: var(--ry-muted); }
body.royal .list li { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.royal .kv li { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.royal .app-modal-close { color: var(--ry-fg); }
body.royal :is(.panel, .card-item, .app-modal-body) :is(td, th) { border-color: rgba(255, 255, 255, 0.12); }
body.royal .svc-row { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
body.royal .svc-row span { color: var(--ry-fg); }
body.royal .comment { border-color: rgba(255, 255, 255, 0.1); }

/* الوسوم تحتفظ بألوانها الدلالية فوق الزجاج */
body.royal .tag { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); }

/* ===== الحقول تبقى بيضاء فاتحة (أقصى وضوح) ===== */
body.royal input,
body.royal select,
body.royal textarea {
    background: #ffffff;
    color: #1a2140;
    border: 1px solid rgba(200, 164, 90, 0.5);
    border-radius: 10px;
}
body.royal input::placeholder, body.royal textarea::placeholder { color: #8a90ad; }
body.royal input[type='checkbox'], body.royal input[type='radio'] { accent-color: #c8a45a; }

/* ===== الأزرار ===== */
body.royal .btn-primary {
    background: linear-gradient(135deg, #d8b66c, #c8a45a 60%, #ad8a42);
    color: #171d45;
    border: none;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(200, 164, 90, 0.35);
}
body.royal .btn-primary:hover { filter: brightness(1.07); }
body.royal .btn-outline {
    background: var(--ry-glass);
    color: var(--ry-fg);
    border: 1px solid var(--ry-line);
}
body.royal .btn-mini.gray { background: rgba(255, 255, 255, 0.14); color: var(--ry-fg); }

/* لوحة الصدارة وموظف الشهر */
body.royal .leaderboard .lb-row {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
body.royal .lb-rowname, body.royal .lb-pts, body.royal .lb-hash { color: var(--ry-fg); }
body.royal .eom-card {
    background: linear-gradient(135deg, rgba(200, 164, 90, 0.2), var(--ry-glass));
    border: 1px solid #c8a45a;
    color: var(--ry-fg);
}
body.royal .eom-card h3, body.royal .eom-label, body.royal .eom-sub { color: var(--ry-fg); }

/* ===== الرئيسية «بنتو» (تظهر فقط مع الثيم) ===== */
body.royal .bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
body.royal .b-tile {
    background: var(--ry-glass);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--ry-line);
    border-radius: 20px;
    padding: 16px;
    color: var(--ry-fg);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
}
body.royal .b-tile:hover {
    transform: translateY(-4px) scale(1.012);
    background: var(--ry-glass2);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(200, 164, 90, 0.4);
}
body.royal .b-span2 { grid-column: span 2; }
body.royal .b-kicker { font-size: 0.72rem; font-weight: 800; color: #c8a45a; letter-spacing: 0.4px; }
body.royal .b-big { font-size: 2.3rem; font-weight: 900; color: #c8a45a; line-height: 1.1; font-variant-numeric: tabular-nums; }
body.royal .b-icon { font-size: 1.7rem; line-height: 1; }
body.royal .b-tile h4 { margin: 0; font-size: 1rem; }
body.royal .b-sub { color: var(--ry-muted); font-size: 0.8rem; }
body.royal .b-tile ul { list-style: none; margin: 4px 0 0; padding: 0; }
body.royal .b-tile ul li { padding: 6px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; gap: 8px; }
body.royal .b-tile ul li:last-child { border-bottom: none; }
body.royal .b-tile ul a { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
body.royal .b-welcome { flex-direction: row; align-items: center; gap: 14px; }
body.royal .b-welcome .dg-avatar {
    width: 58px; height: 58px; border-radius: 50%;
    background: linear-gradient(135deg, #d8b66c, #ad8a42);
    color: #171d45; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 900; flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(200, 164, 90, 0.25);
}
body.royal .b-quote { color: var(--ry-muted); font-size: 0.86rem; line-height: 1.8; margin: 4px 0 0; }
@media (max-width: 860px) {
    body.royal .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.royal .b-span2 { grid-column: span 2; }
}

/* ===== غرفة العمليات: كسوة «مركز القيادة» ===== */
body.royal .ops-root .ops-panel {
    background: rgba(10, 14, 33, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(200, 164, 90, 0.22);
    color: #dfe4fa;
}
body.royal .ops-root .ops-panel h5 { color: #c8a45a; }
body.royal .ops-root .ops-feed li { border-bottom: 1px dashed rgba(255, 255, 255, 0.08); color: #cdd4f0; }
body.royal .ops-root .ops-staff li { color: #cdd4f0; }
body.royal .ops-root .ops-staff li small { color: #8e97bd; }
body.royal .ops-root .ops-kpi {
    background: rgba(13, 18, 48, 0.9);
    border: 1px solid rgba(200, 164, 90, 0.25);
    box-shadow: inset 0 0 24px rgba(200, 164, 90, 0.06);
}
body.royal .ops-root .ops-kpi .v { color: #c8a45a; font-variant-numeric: tabular-nums; }
body.royal .ops-root .ops-kpi.hot { background: #7f1d1d; border-color: #ef4444; box-shadow: 0 0 22px rgba(239, 68, 68, 0.45); }
body.royal .ops-root .ops-kpi.hot .v { color: #fff; }
body.royal #opsDutyBar {
    background: rgba(10, 14, 33, 0.85) !important;
    border: 1px solid rgba(200, 164, 90, 0.22) !important;
    color: #cdd4f0;
}
body.royal .ops-root .ops-map { border-radius: 16px; box-shadow: 0 0 0 1px rgba(200, 164, 90, 0.3), 0 18px 50px rgba(0, 0, 0, 0.5); }

/* الجوال: الشريط السفلي */
body.royal .bottom-nav, body.royal #bottomNav {
    background: rgba(13, 18, 48, 0.9) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--ry-line) !important;
}

/* زر التجربة في الترويسة */
#royalToggle {
    border: 1px solid rgba(200, 164, 90, 0.6);
    background: transparent;
    color: #c8a45a;
    border-radius: 20px;
    padding: 4px 12px;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
}
body.royal #royalToggle { background: #c8a45a; color: #171d45; }

/* =====================================================================
   دفعة الأفكار المختارة (١،٦،١٨،٢٠،٢١،٢٣،٢٤،٢٥،٢٦،٢٨،٢٩،٣٣،٣٧،٣٨،٤٠،٤٥)
   كلها خلف body.royal — صفر تأثير على الوضع العادي.
   ===================================================================== */

/* ===== (١) شفق أورورا متنقل: سحب ضوئية خلف كل الصفحات ===== */
@keyframes ryDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, -40px) scale(1.2); }
}
@keyframes ryDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1.1); }
    50% { transform: translate(-70px, 30px) scale(0.95); }
}
body.royal::before,
body.royal::after {
    content: '';
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}
body.royal::before {
    width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
    top: -12vh; inset-inline-end: -8vw;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.32), transparent 65%);
    animation: ryDrift 16s ease-in-out infinite;
}
body.royal::after {
    width: 52vw; height: 40vw; max-width: 700px; max-height: 520px;
    bottom: -14vh; inset-inline-start: -10vw;
    background: radial-gradient(circle, rgba(200, 164, 90, 0.26), transparent 65%);
    animation: ryDrift2 20s ease-in-out infinite;
}
body.royal .app-wrap, body.royal .content, body.royal .sidebar { position: relative; z-index: 1; }
/* الرأس فوق المحتوى دائماً (قائمة الجرس تعيش داخله) */
body.royal .topbar { position: sticky; z-index: 60; }

/* ===== (٦) سماء بتوقيت الكويت: الخلفية تعيش اليوم ===== */
body.royal.ry-dawn {
    background: radial-gradient(900px 500px at 85% -5%, rgba(236, 130, 160, 0.14), transparent 60%),
        linear-gradient(135deg, #140f2e, #2a1a4e 55%, #1a1540);
    background-attachment: fixed;
}
body.royal.ry-day {
    background: radial-gradient(900px 500px at 85% -5%, rgba(200, 164, 90, 0.18), transparent 60%),
        linear-gradient(135deg, #10163a, #1f2a66 55%, #18204e);
    background-attachment: fixed;
}
body.royal.ry-sunset {
    background: radial-gradient(900px 520px at 80% -5%, rgba(240, 150, 70, 0.2), transparent 60%),
        linear-gradient(135deg, #150f2c, #35205a 50%, #12173c);
    background-attachment: fixed;
}
body.royal.ry-night {
    background: radial-gradient(900px 500px at 85% -5%, rgba(124, 58, 237, 0.16), transparent 60%),
        linear-gradient(135deg, #070a1c, #141b40 55%, #0e1332);
    background-attachment: fixed;
}

/* ===== (٢٠) انتقال صفحات سينمائي ===== */
@keyframes ryPageIn {
    from { opacity: 0; transform: scale(0.985) translateY(10px); filter: blur(5px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}
body.royal #content.ry-page > * { animation: ryPageIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* ===== (٢١) عناوين تنبض كلمة كلمة ===== */
@keyframes ryWord {
    from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}
body.royal .ry-w { display: inline-block; animation: ryWord 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* ===== (١٨+٢٤) دخول متقاطر بتجميع ناعم للبطاقات والقوائم ===== */
@keyframes ryAssemble {
    from { opacity: 0; transform: translateY(18px) rotate(var(--ry-r, 0.6deg)) scale(0.97); filter: blur(3px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}
body.royal #content.ry-page :is(.cards .card-item, .bento .b-tile, .panel) {
    animation: ryAssemble 0.55s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
body.royal #content.ry-page :is(.cards .card-item, .bento .b-tile, .panel):nth-child(odd) { --ry-r: -0.8deg; }
body.royal #content.ry-page :is(.cards .card-item, .bento .b-tile, .panel):nth-child(1) { animation-delay: 0.03s; }
body.royal #content.ry-page :is(.cards .card-item, .bento .b-tile, .panel):nth-child(2) { animation-delay: 0.09s; }
body.royal #content.ry-page :is(.cards .card-item, .bento .b-tile, .panel):nth-child(3) { animation-delay: 0.15s; }
body.royal #content.ry-page :is(.cards .card-item, .bento .b-tile, .panel):nth-child(4) { animation-delay: 0.21s; }
body.royal #content.ry-page :is(.cards .card-item, .bento .b-tile, .panel):nth-child(5) { animation-delay: 0.27s; }
body.royal #content.ry-page :is(.cards .card-item, .bento .b-tile, .panel):nth-child(6) { animation-delay: 0.33s; }
body.royal #content.ry-page :is(.cards .card-item, .bento .b-tile, .panel):nth-child(n+7) { animation-delay: 0.4s; }
@keyframes ryRow { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
body.royal #content.ry-page .list li { animation: ryRow 0.4s ease both; }
body.royal #content.ry-page .list li:nth-child(1) { animation-delay: 0.05s; }
body.royal #content.ry-page .list li:nth-child(2) { animation-delay: 0.1s; }
body.royal #content.ry-page .list li:nth-child(3) { animation-delay: 0.15s; }
body.royal #content.ry-page .list li:nth-child(4) { animation-delay: 0.2s; }
body.royal #content.ry-page .list li:nth-child(n+5) { animation-delay: 0.25s; }

/* ===== (٢٣) تحميل بلمعة ذهبية: هياكل بدل نص «جارٍ التحميل» ===== */
@keyframes ryShimmer { 0% { background-position: -240px 0; } 100% { background-position: 240px 0; } }
body.royal .loading {
    color: transparent !important;
    min-height: 130px;
    position: relative;
    overflow: hidden;
}
body.royal .loading::before,
body.royal .loading::after {
    content: '';
    position: absolute;
    inset-inline: 10%;
    height: 16px;
    border-radius: 9px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 25%, rgba(200, 164, 90, 0.32) 50%, rgba(255, 255, 255, 0.07) 75%);
    background-size: 240px 100%;
    animation: ryShimmer 1.3s linear infinite;
}
body.royal .loading::before { top: 34px; inset-inline-end: 10%; inset-inline-start: 30%; }
body.royal .loading::after { top: 68px; inset-inline-start: 10%; inset-inline-end: 24%; }

/* ===== (٢٥) شريط الأخبار المتحرك ===== */
@keyframes ryTick { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
body.royal .ry-ticker {
    grid-column: 1 / -1;
    background: rgba(200, 164, 90, 0.1);
    border: 1px solid var(--ry-line);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    height: 38px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
body.royal .ry-ticker::before {
    content: '📡 مباشر';
    position: absolute;
    inset-inline-start: 0;
    top: 0; bottom: 0;
    display: flex; align-items: center;
    padding-inline: 12px;
    background: #c8a45a;
    color: #171d45;
    font-weight: 900;
    font-size: 0.78rem;
    z-index: 2;
}
body.royal .ry-ticker-tx {
    position: absolute;
    white-space: nowrap;
    font-size: 0.85rem;
    color: #ffe9c0;
    font-weight: 700;
    animation: ryTick 22s linear infinite;
    will-change: transform;
}
body.royal .ry-ticker:hover .ry-ticker-tx { animation-play-state: paused; }

/* ===== (٢٦) لوحة مطار: الأرقام الكبيرة تتقلب دخولاً ===== */
@keyframes ryFlap {
    0% { transform: rotateX(-92deg); opacity: 0; }
    55% { transform: rotateX(16deg); opacity: 1; }
    100% { transform: rotateX(0); opacity: 1; }
}
body.royal .ry-flap {
    display: inline-block;
    background: rgba(10, 14, 36, 0.85);
    border: 1px solid rgba(200, 164, 90, 0.35);
    border-radius: 7px;
    padding: 0 7px;
    margin-inline-start: 3px;
    transform-origin: top;
    animation: ryFlap 0.5s cubic-bezier(0.3, 1.2, 0.4, 1) both;
    box-shadow: inset 0 -10px 14px rgba(0, 0, 0, 0.4);
}
body.royal .ry-flap:nth-child(2) { animation-delay: 0.12s; }
body.royal .ry-flap:nth-child(3) { animation-delay: 0.24s; }

/* ===== (٢٨) حلقة تقدم متوهجة ===== */
body.royal .ry-ring-wrap { display: flex; align-items: center; gap: 12px; }
body.royal .ry-ring-val {
    transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
    filter: drop-shadow(0 0 6px rgba(200, 164, 90, 0.8));
}

/* ===== (٢٩) جزيرة الإشعارات الحية ===== */
#ryIsland {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translate(-50%, -160%);
    z-index: 10050;
    background: rgba(5, 8, 24, 0.94);
    border: 1px solid rgba(200, 164, 90, 0.45);
    border-radius: 24px;
    padding: 9px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(86vw, 420px);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6), 0 0 24px rgba(200, 164, 90, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.55s cubic-bezier(0.3, 1.25, 0.4, 1);
    color: #eef1fb;
}
#ryIsland.open { transform: translate(-50%, 0); }
.ry-isl-dot { width: 9px; height: 9px; border-radius: 50%; background: #c8a45a; box-shadow: 0 0 10px #c8a45a; flex-shrink: 0; animation: opspulse 1.2s infinite; }
.ry-isl-tx { min-width: 0; display: flex; flex-direction: column; }
.ry-isl-tx strong { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ry-isl-tx small { color: #aab3d6; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== (٣٣) صفائح سفلية مطاطية على الجوال ===== */
@keyframes rySheetUp {
    from { transform: translateY(100%); }
    60% { transform: translateY(-10px); }
    to { transform: translateY(0); }
}
@media (max-width: 700px) {
    body.royal .app-modal-overlay { align-items: flex-end; padding: 0; }
    body.royal .app-modal {
        width: 100%;
        max-width: 100%;
        border-radius: 22px 22px 0 0;
        max-height: 88vh;
        overflow-y: auto;
        animation: rySheetUp 0.45s cubic-bezier(0.3, 1.15, 0.4, 1);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body.royal .app-modal::before {
        content: '';
        display: block;
        width: 44px; height: 5px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.3);
        margin: 10px auto 2px;
    }
}

/* ===== (٣٧) الأحداث الحية كخط زمني متوهج ===== */
@keyframes ryDotGlow { 0%, 100% { box-shadow: 0 0 4px #c8a45a; } 50% { box-shadow: 0 0 13px #c8a45a; } }
body.royal .ops-root .ops-feed { position: relative; padding-inline-start: 16px !important; }
body.royal .ops-root .ops-feed::before {
    content: '';
    position: absolute;
    inset-block: 6px;
    inset-inline-start: 4px;
    width: 2px;
    background: linear-gradient(180deg, #c8a45a, rgba(200, 164, 90, 0.08));
    border-radius: 2px;
}
body.royal .ops-root .ops-feed li { position: relative; }
body.royal .ops-root .ops-feed li::before {
    content: '';
    position: absolute;
    inset-inline-start: -16px;
    top: 10px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #c8a45a;
}
body.royal .ops-root .ops-feed li:first-child::before { animation: ryDotGlow 1.6s ease-in-out infinite; }

/* ===== (٣٨) خريطة عمليات منظورية + توهج الطلبات ===== */
body.royal .ops-map:not(.editing) #opsMap {
    transform: perspective(1400px) rotateX(7deg);
    transform-origin: center 78%;
}
body.royal .ops-unit.st-emergency rect { filter: drop-shadow(0 0 7px #ef4444) drop-shadow(0 -7px 11px rgba(239, 68, 68, 0.7)); }
body.royal .ops-unit.st-blink rect { filter: drop-shadow(0 0 6px var(--c, #c8a45a)) drop-shadow(0 -6px 9px rgba(200, 164, 90, 0.55)); }

/* ===== (٤٠) تنبيهات زجاجية بعمر مرئي ===== */
@keyframes ryToastBar { from { width: 100%; } to { width: 0; } }
body.royal .app-toast {
    background: rgba(10, 14, 33, 0.95) !important;
    border: 1px solid rgba(200, 164, 90, 0.45);
    color: #eef1fb !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
body.royal .app-toast.error { border-color: #ef4444; }
body.royal .app-toast.show::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    height: 3px;
    background: #c8a45a;
    animation: ryToastBar 3s linear forwards;
}
body.royal .app-toast.error.show::after { background: #ef4444; }

/* ===== (٤٥) افتتاحية رسم الشعار ===== */
#ryIntro {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: radial-gradient(700px 420px at 50% 42%, #1a2150, #070a1c 75%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.7s ease;
}
#ryIntro.out { opacity: 0; pointer-events: none; }
/* بنية الافتتاحية: شارة مربعة (حلقات + شعار متمركزان تماماً) ثم الاسم بمسافة ثابتة.
   حركات transform/opacity فقط — بلا blur متحرك (كان يسبب تقطيعاً على الهاتف) */
.ry-intro-box { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ry-intro-badge {
    position: relative;
    width: 168px;
    height: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ry-intro-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes ryRingDraw { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }
.ry-ring-draw { stroke-dasharray: 340; animation: ryRingDraw 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; will-change: stroke-dashoffset; }
.ry-ring-draw.d2 { stroke-dasharray: 290; animation-duration: 2s; }
@keyframes ryLogoIn {
    0%, 30% { opacity: 0; transform: scale(0.78); }
    70% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}
.ry-intro-logo {
    width: 104px; height: 104px; object-fit: contain;
    animation: ryLogoIn 1.9s cubic-bezier(0.3, 0.9, 0.3, 1) forwards;
    filter: drop-shadow(0 0 20px rgba(200, 164, 90, 0.55));
    will-change: transform, opacity;
}
@keyframes ryNameIn { from { opacity: 0; transform: translateY(10px); letter-spacing: 6px; } to { opacity: 1; transform: none; letter-spacing: 1px; } }
.ry-intro-name {
    margin: 0;
    color: #c8a45a;
    font-weight: 900;
    font-size: 1.15rem;
    opacity: 0;
    animation: ryNameIn 0.8s ease 1.3s forwards;
    will-change: transform, opacity;
}
/* مع الثيم الملكي: لا شاشة إقلاع قديمة — الافتتاحية الملكية وحدها */
body.royal .app-splash { display: none !important; }

/* احترام من يفضل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    body.royal *, body.royal::before, body.royal::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   ملاحظات أحمد ١ (2026-10-04): وضوح الاسم والخدمات + رأس الهاتف المضغوط
   + العبارات التحفيزية — كلها خلف body.royal.
   ===================================================================== */

/* (١) الكمبيوتر: الاسم والدور بجانب «خروج» واضحان فوق الزجاج */
body.royal .user-chip #userName { color: var(--ry-fg); font-weight: 800; }
body.royal .user-chip #userRole { color: var(--ry-muted); }
body.royal .user-chip .user-avatar {
    background: linear-gradient(135deg, #d8b66c, #ad8a42);
    color: #171d45;
    box-shadow: 0 0 0 2px rgba(200, 164, 90, 0.3);
}
body.royal .btn-logout {
    background: rgba(239, 68, 68, 0.12);
    color: #fda4a4;
    border: 1px solid rgba(239, 68, 68, 0.45);
}
body.royal #appLangToggle {
    color: #c8a45a;
    border: 1px solid var(--ry-line);
    background: rgba(200, 164, 90, 0.1);
    border-radius: 10px;
}

/* (٢) الهاتف: بلاطات الخدمات والعناوين زجاج واضح بنص فاتح */
body.royal.app-mobile { background: var(--ry-bg0); }
body.royal.app-mobile .content { color: var(--ry-fg); }
body.royal.app-mobile .page-head h3,
body.royal.app-mobile .section-title { color: var(--ry-fg); }
body.royal.app-mobile .service-tile,
body.royal .grid-card {
    background: var(--ry-glass);
    border: 1px solid var(--ry-line);
    color: var(--ry-fg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
body.royal.app-mobile .service-tile .svc-icon { filter: drop-shadow(0 0 8px rgba(200, 164, 90, 0.35)); }
body.royal .grid-card h4, body.royal .grid-card span { color: var(--ry-fg); }
body.royal .bottom-nav button { color: #aab3d6; }
body.royal .bottom-nav button.active { color: #c8a45a; }

/* (٣) رأس الهاتف: مضغوط ومنظم — الجرس يميناً وزر اللغة يساراً والعنوان وسطاً */
body.royal.app-mobile .topbar {
    background: rgba(13, 18, 48, 0.94);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--ry-line);
    padding-top: calc(0.4rem + env(safe-area-inset-top));
    padding-bottom: 0.4rem;
    grid-template-columns: 40px 40px 1fr auto auto;
    gap: 2px;
}
body.royal.app-mobile .topbar h2 {
    grid-column: 3;
    font-size: 1rem;
    text-align: center;
}
body.royal.app-mobile #backBtn { grid-column: 1; }
/* نفك حاوية الإجراءات لتتوزع عناصرها على أعمدة الرأس */
body.royal.app-mobile .topbar-actions { display: contents; }
body.royal.app-mobile .bell-wrap { grid-column: 2; justify-self: center; position: relative; }
body.royal.app-mobile #appLangToggle {
    grid-column: 5;
    justify-self: center;
    padding: 3px 10px;
    font-weight: 800;
    font-size: 0.82rem;
    margin-inline-end: 8px;
}
/* زر ✨ على الهاتف: أيقونة مدمجة فقط */
body.royal.app-mobile #royalToggle {
    grid-column: 4;
    justify-self: center;
    max-width: 36px;
    overflow: hidden;
    white-space: nowrap;
    direction: ltr;
    padding: 3px 0 3px 10px;
}
body.royal.app-mobile #printBtn { display: none; }
/* قائمة الجرس المنسدلة فوق الرأس الزجاجي */
body.royal .bell-dropdown {
    background: rgba(13, 18, 48, 0.97);
    border: 1px solid var(--ry-line);
    color: var(--ry-fg);
}
body.royal .bell-dropdown .bell-head { color: #c8a45a; }

/* (٤) العبارات التحفيزية: أكبر وبلون ذهبي مميز */
body.royal .b-quote {
    font-size: 1.12rem;
    line-height: 2.1;
    font-weight: 800;
    color: #f3d48c;
    background: linear-gradient(90deg, #ffe9c0, #c8a45a 60%, #e8c268);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 26px rgba(200, 164, 90, 0.25);
}
body.royal .quote-card p {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f3d48c;
}
body.royal .quote-mark { color: #c8a45a; font-size: 1.6rem; }

/* تثبيت كل عناصر رأس الهاتف في صف واحد — الـauto-placement كان ينزل
   الجرس واللغة صفاً ثانياً لأن مؤشر Grid لا يرجع للخلف */
body.royal.app-mobile .topbar > h2,
body.royal.app-mobile .topbar > #backBtn,
body.royal.app-mobile .bell-wrap,
body.royal.app-mobile #appLangToggle,
body.royal.app-mobile #royalToggle { grid-row: 1; align-self: center; }
body.royal.app-mobile .bell-wrap { height: 40px; display: flex; align-items: center; }
/* الجرس أقصى اليمين، والرجوع بجانبه عند ظهوره */
body.royal.app-mobile .bell-wrap { grid-column: 1; }
body.royal.app-mobile .topbar > #backBtn { grid-column: 2; }
/* قائمة الخدمات على الهاتف (.section-menu): نص فاتح واضح وأيقونات زجاجية */
body.royal .section-menu a { color: var(--ry-fg) !important; border-bottom-color: rgba(255, 255, 255, 0.09); }
body.royal .section-menu .sm-icon {
    background: rgba(255, 255, 255, 0.1);
    color: #c8a45a;
    border: 1px solid var(--ry-line);
}

/* =====================================================================
   ملاحظة أحمد ٣: رأس الهاتف أعيد بناؤه بـflex (كان Grid+contents هشاً مع
   اختلاف عدد الأزرار بين الحسابات — عند المؤسس زر ✨ إضافي كسر الصف).
   flex يستوعب أي عدد أزرار بصف واحد دائماً: جرس | رجوع | العنوان | ✨ | EN
   ===================================================================== */
body.royal.app-mobile .topbar {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    padding-inline: 10px;
}
body.royal.app-mobile .topbar > h2 {
    order: 3;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
body.royal.app-mobile .bell-wrap { order: 1; flex: 0 0 auto; }
body.royal.app-mobile .topbar > #backBtn { order: 2; flex: 0 0 auto; margin: 0; }
body.royal.app-mobile #royalToggle { order: 4; flex: 0 0 auto; }
body.royal.app-mobile #appLangToggle { order: 5; flex: 0 0 auto; margin: 0; }
body.royal.app-mobile #menuToggle,
body.royal.app-mobile .user-chip,
body.royal.app-mobile .btn-logout,
body.royal.app-mobile #printBtn { display: none !important; }

/* ملاحظة أحمد ٤: قائمة الجرس — كانت نصفها خارج الشاشة وشفافة صعبة القراءة */
/* على الهاتف: القائمة مثبتة بعرض الشاشة كاملاً تحت الرأس — يستحيل خروجها */
body.royal.app-mobile .bell-dropdown {
    position: fixed !important;
    inset-inline: 10px !important;
    top: calc(58px + env(safe-area-inset-top, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: 68vh;
    overflow-y: auto;
}
/* وعلى الكمبيوتر: تبقى منسدلة من الجرس لكن لا تتجاوز حافة الشاشة */
body.royal .bell-dropdown {
    background: #0d1230 !important;
    border: 1.5px solid rgba(200, 164, 90, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    border-radius: 16px;
}
body.royal .bell-head { color: #c8a45a; border-bottom: 1px solid rgba(200, 164, 90, 0.25); }
body.royal .bell-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
body.royal .bell-item strong { color: #eef1fb; }
body.royal .bell-item p { color: #c3cbe8; }
body.royal .bell-item small { color: #8e97bd; }
body.royal .bell-item.clickable:hover { background: rgba(200, 164, 90, 0.1); }
body.royal .bell-empty { color: #8e97bd; }
body.royal .bell-all { color: #c8a45a; font-weight: 800; }
/* صفحة الإشعارات الكاملة بنفس الوضوح */
body.royal .notif-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
body.royal .notif-item.unread { background: rgba(200, 164, 90, 0.12); border-color: rgba(200, 164, 90, 0.4); }
body.royal .notif-item strong { color: #eef1fb; }
body.royal .notif-item p { color: #c3cbe8; }
body.royal .notif-item small { color: #8e97bd; }
/* القائمة فوق كل شيء دائماً + رأسها بنفس الخلفية الصلبة */
body.royal .bell-dropdown { z-index: 10060 !important; }
body.royal .bell-dropdown .bell-head { background: #0d1230 !important; }
body.royal .bell-dropdown .bell-item { background: #0d1230; }
body.royal .bell-dropdown .bell-all { background: #0d1230; display: block; text-align: center; padding: 10px; }

/* ملاحظة أحمد ٥: بطاقات مختارات الأقسام (grid-card) — شريط الاسم كان
   أبيض الخلفية فصار النص الفاتح غير مقروء. توحيد زجاجي كامل: */
body.royal .grid-card .gc-label {
    background: transparent;
    color: var(--ry-fg);
}
body.royal .grid-card .gc-icon {
    background: rgba(200, 164, 90, 0.16);
    color: #c8a45a;
    box-shadow: inset 0 0 0 1px rgba(200, 164, 90, 0.3);
}
body.royal .grid-card .gc-icon.danger {
    background: rgba(220, 38, 38, 0.2);
    color: #fda4a4;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.45);
}

/* ═══════════ المحادثات — ضبط ألوان الثيم الملكي ═══════════ */
body.royal .chat-sidebar,
body.royal .chat-main {
    background: #141937;
    border: 1px solid rgba(200, 164, 90, 0.3);
    border-radius: 16px;
}
body.royal .chat-sidebar .page-head h3 { color: #f0e0b8; }
body.royal .room-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
}
body.royal .room-item:hover,
body.royal .room-item.active {
    background: rgba(200, 164, 90, 0.14);
    border-color: rgba(200, 164, 90, 0.45);
}
body.royal .room-avatar { background: #c8a45a; color: #171d45; }
body.royal .room-info strong { color: #eef1fb; }
body.royal .room-info small { color: #9aa4cc; }
body.royal .room-unread { background: #dc2626; color: #fff; }
body.royal .chat-empty { color: #9aa4cc; }
body.royal .chat-thread { background: transparent; }
body.royal .chat-msg {
    background: #1d2650;
    color: #eef1fb;
}
body.royal .chat-msg.mine { background: rgba(200, 164, 90, 0.26); color: #f6ecd7; }
body.royal .chat-author { color: #c8a45a; }
body.royal .chat-msg p { color: inherit; }
body.royal .chat-msg small { color: #96a0c6; }
body.royal .chat-msg.mine small { color: #cdbd97; }
body.royal .msg-reply {
    background: rgba(255, 255, 255, 0.08);
    color: #aab3d6;
    border-inline-start: 3px solid #c8a45a;
}
body.royal .msg-reply-btn { background: rgba(255, 255, 255, 0.12); color: #e8cf96; }
body.royal .chat-composer input[type="text"],
body.royal .chat-input input {
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #eef1fb;
}
body.royal .chat-composer input[type="text"]::placeholder,
body.royal .chat-input input::placeholder { color: #8d96bd; }
body.royal .chat-composer .icon-btn { background: rgba(255, 255, 255, 0.1); color: #e8cf96; border: none; }
body.royal .typing-indicator { color: #7cc5e8; }
body.royal .reply-bar { background: rgba(200, 164, 90, 0.12); color: #e8cf96; }
body.royal #newChatPicker select {
    background: #1d2650;
    color: #eef1fb;
    border: 1.5px solid rgba(200, 164, 90, 0.4);
}
body.royal .chat-msg a { color: #7cc5e8; }
body.royal .ticks { color: #7ec98f; }

/* صفحة المحادثة المستقلة — الثيم الملكي */
body.royal .chat-room-head { border-bottom-color: rgba(200, 164, 90, 0.3); }
body.royal .chat-back { color: #e8cf96; }
body.royal .chat-room-avatar { background: #c8a45a; color: #171d45; }
body.royal .chat-room-name { color: #f0e0b8; }

/* صفحة المحادثة المستقلة على الجوال — خلفية الثيم الملكي */
body.royal .chat-app.room-open {
    background: #0d1230;
    background-image:
        radial-gradient(ellipse at 50% -10%, rgba(124,58,237,0.16), transparent 55%);
}
body.royal .chat-app.room-open .chat-main { background: transparent; border: none; }
/* صندوق الغولف كار تحت الخريطة — ألوان الثيم الملكي */
body.royal #opsDutyBar .od-dh { color: #e8c77d; }
body.royal #opsDutyBar .od-chip.on { color: #86efac; background: rgba(34,197,94,0.14); }
body.royal #opsDutyBar .od-chip.busy { color: #fca5a5; background: rgba(239,68,68,0.16); }
body.royal #opsDutyBar .od-chip.rest { color: #fcd34d; background: rgba(245,158,11,0.14); }
body.royal #opsDutyBar .od-dl[style] { filter: brightness(1.6); }
/* عمود الطلبات المفتوحة في غرفة العمليات */
body.royal .ops-reqs-h { color: #e8c77d; }
body.royal .ops-rq:not([class*="t-"]) { background: rgba(10, 14, 33, 0.85); color: #cdd4f0; }