:root {
    --exam-font: 'Cairo', sans-serif;
    --content-font-weight: 800;
    --exam-line-height: 1.5;
    
    --doc-font-size: 10px;
    --question-font-size: 11.5px;
    --header-font-size: 11px;
    
    --answer-line-gap: 22px;
    --questions-gap: 10px;

    --doc-min-height: 90px;
    --doc-width-percent: 100%;

    --page-padding-y: 5mm;
    --page-padding-x: 6mm;

    --doc-border-width: 1.5px;
    --doc-border-style: solid;
    --doc-border-color: #000000;
    --doc-border-radius: 12px;
    --doc-bg-color: #f8fafc;

    --col-right-width: 33%;
    --col-center-width: 34%;
    --col-left-width: 33%;

    --accent-color: #000000; 
    --accent-text-color: #ffffff;
    
    --table-bg-color: #ffffff;
    --th-bg-color: #f1f5f9;

    --watermark-text: none;
    --watermark-opacity: 0.04;
    --watermark-size: 4.5rem;

    --essay-preamble-size: 11px;
    --essay-bullets-size: 11px;
    --essay-head-size: 13px;
    --lesson-title-size: 14px;

    /* ============================================================
       نظام التصميم الحيادي (Neutral Design System) — هوية 2026
       لوحة محايدة فاتحة + لون أساسي زمردي واحد + ظلال خفيفة
       خط العلامة: تجوال Tajawal (بديل حر لخط الجزيرة المملوك)
       ============================================================ */
    --brand-font: 'Tajawal', 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
    --brand-font-display: 'Tajawal', 'El Messiri', 'Cairo', sans-serif;

    --surface-0: #ffffff;              /* بطاقات / أسطح */
    --surface-1: #f7f8f9;              /* خلفية الصفحة */
    --surface-2: #f1f3f5;              /* أسطح ثانوية */
    --surface-3: #e9ecef;              /* أسفل الثانوية */
    --border-1: #e3e7ea;               /* حدود رفيعة */
    --border-2: #d4dae0;               /* حدود أقوى */
    --ink-1: #131a20;                  /* النص الأساسي */
    --ink-2: #4d5762;                  /* النص الثانوي */
    --ink-3: #7c8794;                  /* النص الباهت */
    --primary: #0b6b4f;                /* اللون الأساسي (زمردي عميق) */
    --primary-hover: #085239;
    --primary-soft: #e9f3ee;           /* خلفية تحويم ناعمة */
    --primary-ink: #ffffff;
    --shadow-xs: 0 1px 2px rgba(20, 28, 36, .05);
    --shadow-sm: 0 1px 3px rgba(20, 28, 36, .06), 0 1px 2px rgba(20, 28, 36, .04);
    --shadow-md: 0 4px 14px -6px rgba(20, 28, 36, .12), 0 1px 3px rgba(20, 28, 36, .05);
    --shadow-lg: 0 12px 32px -12px rgba(20, 28, 36, .18), 0 2px 6px rgba(20, 28, 36, .06);
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;

    /* ============================================================
       فلسفة 2026 — «الضياء الزجاجي» (Glass Aurora)
       خلفيات أورورا شبكية + حرير بصري + زجاج ناعم + ألوان أرضية
       ============================================================ */
    /* ألوان الأورورا الثلاثة (تظهر في الخلفيات الشبكية فقط) */
    --aurora-1: #0b6b4f;               /* زمردي — هوية */
    --aurora-2: #0e7490;               /* فيروزي عميق */
    --aurora-3: #3b82f6;               /* أزرق جوي */
    /* أضواء ناعمة لتدرج الأورورا */
    --aurora-glow: rgba(11, 107, 79, .10);
    --aurora-glow-2: rgba(14, 116, 144, .09);
    --aurora-glow-3: rgba(59, 130, 246, .08);
    /* الزجاج: شفافية + طمس + حدّ زجاجي */
    --glass-bg: rgba(255, 255, 255, .62);
    --glass-bg-strong: rgba(255, 255, 255, .78);
    --glass-border: rgba(255, 255, 255, .65);
    --glass-blur: 18px;
    --glass-saturate: 1.6;
    --glass-shadow: 0 8px 32px -12px rgba(20, 28, 36, .22), inset 0 1px 0 0 rgba(255, 255, 255, .55);
    /* إبراز الزجاج: خط الضوء العلوي */
    --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, .75);
    /* نِسَب العمق للأورورا */
    --aurora-soft: 0.55;               /* شدة الأورورا في الوضع الفاتح */
}

body {
    font-family: var(--brand-font);
    font-weight: 400;
    background-color: var(--surface-1);
    transition: background-color 0.3s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* ===== خلفية أورورا شبكية 2026 ===== */
    background-image:
        radial-gradient(38rem 26rem at 88% -8%, var(--aurora-glow), transparent 62%),
        radial-gradient(34rem 24rem at 6% 4%, var(--aurora-glow-2), transparent 60%),
        radial-gradient(30rem 30rem at 50% 108%, var(--aurora-glow-3), transparent 64%);
    background-attachment: fixed;
}

/* ===== حماية عامة من التمرير الأفقي غير المقصود على الجوال =====
   العناصر التي تتجاوز عرض الشاشة (شهادات A4، لوحات بيضاء) تُقصّ
   داخل حاوياتها بدل أن تدفع الصفحة كلها أفقياً. */
@media (max-width: 1023px) {
    html, body { overflow-x: clip; }
    /* الاستثناء: مساحات العمل التي تحتاج تمريراً داخلياً تديره بنفسها */
    #view-docs .dg-workspace, #editor-canvas-wrap, .mm-workspace { overflow-x: auto; }
}

/* حرير بصري Grain — طبقة تشويش دقيقة فوق كل شيء
   تكسر المظهر الاصطناعي للـ AI وتمنح عمقاً سينمائياً */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { body::after { display: none; } }
@media (prefers-reduced-motion: reduce) { body { background-attachment: scroll; } }

h1, h2, h3, h4, h5 {
    font-family: var(--brand-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.font-display { font-family: 'El Messiri', 'Cairo', sans-serif; }

.login-backdrop {
    background-color: var(--surface-1);
}

.overflow-warn {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    background: #fef2f2; color: #b91c1c; border: 1.5px solid #fca5a5;
    font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 11px;
    padding: 4px 14px; border-radius: 9999px; z-index: 60; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.15);
}

/* Document Text & Tables (Controlled by --doc-font-size) */
.doc-container,
.doc-container [id*="-node-text"],
.doc-container [id*="-node-text"] *,
.doc-container [id*="-node-table"],
.doc-container [id*="-node-table"] *,
.doc-container table th,
.doc-container table td,
.doc-container ul,
.doc-container ol,
.doc-container li,
.doc-container li *,
.scalable-doc-text th,
.scalable-doc-text td {
    font-size: var(--doc-font-size) !important;
    line-height: var(--exam-line-height) !important;
}

.source-label, 
.doc-container [id*="-src"],
.doc-container [id*="-src"] * {
    font-size: calc(var(--doc-font-size) * 0.95) !important;
    line-height: 1.4 !important;
}

[id*="-p2-"][id$="-prem"], [id*="-p2-"][id$="-prmpt"] {
    font-size: var(--essay-preamble-size, var(--question-font-size)) !important;
}
[id*="-p2-"][id$="-head"] {
    font-size: var(--essay-head-size, 13px) !important;
}
[id*="-p2-"][id$="-b1"], [id*="-p2-"][id$="-b2"],
[id*="-p2-"][id$="-b3"], [id*="-p2-"][id$="-b4"],
[id*="-p2-"][id$="-b5"] {
    font-size: var(--essay-bullets-size, var(--question-font-size)) !important;
}

/* Question, True/False, Match, Checkbox & Essay Text (Controlled by --question-font-size) */
.question-text,
.question-text *:not(.accent-header):not(.accent-header *),
.questions-gap-wrapper > .group.relative,
.questions-gap-wrapper > .group.relative *:not(.no-print):not(.no-print *),
[id*="-q-new-"],
[id*="-q-new-"] *:not(.no-print):not(.no-print *),
[id$="-match-container"],
[id$="-match-container"] *,
[id$="-checkbox-container"],
[id$="-checkbox-container"] *,
[id$="-tf-body"],
[id$="-tf-body"] *,
[id*="-q1"], [id*="-q2"], [id*="-q3"], [id*="-q4"], [id*="-q5"], [id*="-q6"], [id*="-q7"],
[id*="-instr"], [id*="-essay-title"] {
    font-size: var(--question-font-size) !important;
    line-height: var(--exam-line-height) !important;
}

/* Component Header Bars (Fixed prominent styling, independent of question font size) */
.accent-header,
.accent-header > span,
.accent-header > div:not(.no-print) {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}
.accent-header .no-print button {
    font-size: 9px !important;
    font-weight: bold !important;
    line-height: 1 !important;
}

/* Match bullet adjustments */
[id$="-match-container"] .match-bullet {
    font-size: calc(var(--question-font-size) * 1.3) !important;
    line-height: 1 !important;
}

/* Checkbox square adjustments */
[id$="-checkbox-container"] .checkbox-box {
    width: calc(var(--question-font-size) * 1.2) !important;
    height: calc(var(--question-font-size) * 1.2) !important;
}

.scalable-header, .scalable-header * {
    font-size: var(--header-font-size) !important;
}

#les-hdr-title, .scalable-header #les-hdr-title {
    font-size: var(--lesson-title-size, 14px) !important;
}

.format-table {
    table-layout: fixed;
    width: 100%;
}
.format-table tbody td {
    background-color: var(--table-bg-color) !important;
    word-wrap: break-word;
}
.format-table thead th, .format-table thead td {
    background-color: var(--th-bg-color) !important;
}
.format-table tbody td, .format-table tbody th,
.format-table thead th, .format-table thead td {
    color: #000000;
}

.a4-page {
    font-family: var(--exam-font);
    width: 210mm;
    min-height: 297mm;
    padding: var(--page-padding-y) var(--page-padding-x);
    margin: 0 auto 30px auto;
    background: #ffffff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01), 0 0 0 1px rgba(0,0,0,0.02);
    border: 1px solid #e2e8f0;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.a4-landscape {
    font-family: var(--exam-font);
    width: 297mm;
    min-height: 210mm;
    padding: var(--page-padding-x) var(--page-padding-y); 
    margin: 0 auto 30px auto;
    background: #ffffff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01), 0 0 0 1px rgba(0,0,0,0.02);
    border: 1px solid #e2e8f0;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.a4-page::before, .a4-landscape::before {
    content: var(--watermark-text);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: var(--watermark-size); color: #000000;
    opacity: var(--watermark-opacity); white-space: nowrap;
    pointer-events: none; z-index: 0; font-weight: bold; text-align: center;
}

.a4-page > *, .a4-landscape > * { position: relative; z-index: 10; }

.editable-active [contenteditable="true"] { outline: 2px dashed rgba(59, 130, 246, 0.4); outline-offset: 2px; transition: all 0.2s; }
.editable-active [contenteditable="true"]:hover { background-color: rgba(59, 130, 246, 0.03); outline: 2px dashed rgba(59, 130, 246, 0.8); }
.editable-active [contenteditable="true"]:focus { background-color: rgba(59, 130, 246, 0.05); outline: 2px solid #3b82f6; }

.doc-container {
    border-width: var(--doc-border-width) !important; border-style: var(--doc-border-style) !important;
    border-color: var(--doc-border-color) !important; border-radius: var(--doc-border-radius) !important;
    background-color: var(--doc-bg-color) !important; min-height: var(--doc-min-height); width: var(--doc-width-percent);
    margin-left: auto; margin-right: auto; transition: all 0.2s ease-in-out; display: flex; flex-direction: column;
    height: auto !important; flex-shrink: 0; overflow: visible;
    font-family: var(--doc-own-font, var(--exam-font)) !important;
}
.doc-container [id*="-node-text"],
.doc-container [id*="-node-text"] *,
.doc-container [id*="-node-table"],
.doc-container [id*="-node-table"] *,
.doc-container [id*="-src"],
.doc-container [id*="-src"] *,
.doc-container [contenteditable="true"],
.doc-container [contenteditable="true"] * {
    font-family: inherit !important;
    background-color: transparent !important;
    background-image: none !important;
}
.doc-container img { max-width: 100% !important; height: auto !important; }
.doc-container table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 4px 0 !important;
}
.doc-container table th,
.doc-container table td {
    border: 1px solid #475569 !important;
    padding: 3px 6px !important;
    text-align: center !important;
    vertical-align: middle !important;
}
.doc-container table th {
    background-color: #f1f5f9 !important;
    font-weight: 800 !important;
}
.doc-container [id$="-node-image"],
.doc-container [id$="-node-table"],
.doc-container [id$="-node-text"] { width: 100%; min-width: 0; }


.accent-header,
.theme-hdr-label {
    background-color: var(--accent-color, #000000) !important;
    color: var(--accent-text-color, #ffffff) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.accent-header *,
.theme-hdr-label * {
    color: inherit;
}

.accent-text { color: var(--accent-color) !important; }

.theme-hdr-label {
    background-color: var(--accent-color);
    color: var(--accent-label-text, #ffffff);
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
}

.questions-gap-wrapper { display: flex; flex-direction: column; gap: var(--questions-gap); justify-content: flex-start; }
.wrap-questions { display: block; }
.wrap-questions > div { margin-bottom: var(--questions-gap); }
.wrap-questions > div:last-child { margin-bottom: 0; }

.answer-lines { display: block; margin-top: 0.2rem; margin-bottom: 0.2rem; }
.answer-lines > .dotted-line { margin-bottom: var(--local-line-gap, var(--answer-line-gap)); transition: margin-bottom 0.15s ease-in-out; }
.answer-lines > .dotted-line:last-child { margin-bottom: 0; }

.dotted-line { border-bottom: 1.5px dotted #94a3b8; width: auto; overflow: hidden; height: 4px; display: block; }

.graph-box {
    border: 2px solid #1e293b; background-color: #ffffff;
    background-image: 
        linear-gradient(rgba(148, 163, 184, 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.35) 1px, transparent 1px),
        linear-gradient(rgba(148, 163, 184, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.15) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    position: relative; display: flex; align-items: center; justify-content: center;
    color: #475569; font-weight: bold; font-size: 11px; font-family: 'Cairo', sans-serif;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
}

@media print {
    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    @page {
        size: A4 portrait;
        margin: 0 !important;
    }

    html, body {
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 210mm !important;
        max-width: 210mm !important;
        direction: rtl !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    html.print-landscape,
    html.print-landscape body {
        width: 297mm !important;
        max-width: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.editor-open {
        overflow: visible !important;
        height: auto !important;
    }
    body.editor-open #view-editor.hidden,
    #view-editor.hidden,
    .app-view.hidden {
        display: none !important;
    }
    body.editor-open #view-editor {
        height: auto !important;
        display: block !important;
    }
    body.editor-open #editor-canvas-wrap {
        overflow: visible !important;
        height: auto !important;
        background: #fff !important;
        padding: 0 !important;
    }
    /* [إصلاح تلوث الطباعة] قواعد المحرر لا تعمل إلا أثناء الطباعة من داخل المحرر نفسه
       (طباعة الأسماء من Excel / توليد التمارين). بدون هذا الشرط كانت صفحات الجذاذة
       المحمّلة في #view-editor تُطبع مع الشهادات والتقارير في كل window.print() عامة */
    body.editor-open #view-editor,
    body.editor-open #view-editor.editor-workspace {
        display: block !important;
        direction: rtl !important;
        width: 210mm !important;
        max-width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        max-height: none !important;
    }
    html.print-landscape body.editor-open #view-editor,
    html.print-landscape body.editor-open #view-editor.editor-workspace {
        width: 297mm !important;
        max-width: 297mm !important;
    }
    body.editor-open #editor-canvas-wrap {
        display: block !important;
        width: 210mm !important;
        max-width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        direction: rtl !important;
    }
    html.print-landscape body.editor-open #editor-canvas-wrap {
        width: 297mm !important;
        max-width: 297mm !important;
    }
    #editor-sidebar,
    #canvas-header,
    #main-header,
    header, footer,
    #editor-actions {
        display: none !important;
    }

    body.editor-open #pages-container {
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 210mm !important;
        max-width: 210mm !important;
    }
    html.print-landscape body.editor-open #pages-container {
        width: 297mm !important;
        max-width: 297mm !important;
    }

    .a4-page {
        width: 210mm !important;
        height: 297mm !important;
        min-height: 297mm !important;
        max-height: 297mm !important;
        padding: 12mm 14mm !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        border: none !important;
        page-break-after: always !important;
        break-after: page !important;
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        position: relative !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        transform: none !important;
        background: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .a4-page .questions-gap-wrapper {
        gap: 5px !important;
        flex-grow: 0 !important;
    }
    .a4-page .answer-lines > .dotted-line {
        margin-bottom: 15px !important;
    }
    .a4-page .doc-container {
        min-height: 0 !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }
    .a4-page .avoid-break {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    #page-1, #pages-container .a4-page:first-of-type {
        page-break-after: always !important;
    }

    .format-table thead, table thead { display: table-header-group !important; }
    .format-table tbody tr { page-break-inside: avoid; }
    .theme-hdr-label {
        background-color: var(--accent-color) !important;
        color: var(--accent-label-text, #ffffff) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .a4-landscape {
        width: 297mm !important;
        height: 210mm !important;
        min-height: 210mm !important;
        max-height: 209.5mm !important;
        padding: var(--page-padding-x) var(--page-padding-y) !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        page-break-after: always !important;
        break-after: page !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        position: relative !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        transform: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .a4-page:last-of-type, .a4-landscape:last-of-type {
        page-break-after: auto !important;
        break-after: auto !important;
    }
    .a4-landscape table,
    .a4-landscape .format-table {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }
    
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .no-print,
    .no-print * {
        display: none !important;
    }

    .overflow-x-auto {
        overflow: visible !important;
    }

    [contenteditable="true"] {
        outline: none !important;
        background-color: transparent !important;
    }

    .page-footer-num {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #000000 !important;
        font-weight: 800 !important;
        font-size: 11px !important;
        position: absolute !important;
        bottom: 3.5mm !important;
        left: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    .accent-header,
    .theme-hdr-label,
    .doc-container .accent-header,
    .doc-container .accent-header[contenteditable="true"],
    .doc-container .accent-header[contenteditable="true"] * {
        background-color: var(--accent-color, #000000) !important;
        color: var(--accent-text-color, #ffffff) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .accent-header *,
    .theme-hdr-label * {
        color: inherit !important;
    }

    .doc-container {
        background-color: var(--doc-bg-color, #ffffff) !important;
        border-color: var(--doc-border-color, #000000) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .dotted-line {
        border-bottom: 1.5px dotted #64748b !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    table th, table td {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .avoid-break {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
}

.avoid-break { page-break-inside: avoid; }

.editor-sidebar {
    min-width: 0;
}
.editor-sidebar button {
    white-space: normal;
    line-height: 1.35;
    word-break: break-word;
}
.editor-sidebar select,
.editor-sidebar input[type="text"] {
    max-width: 100%;
}
#view-editor {
    direction: rtl;
}
/* إخفاء إلزامي فائق الأولوية يمنع ظهور المحرر أو تسرب شريطه العلوي عند فتح بوابات أخرى */
body.editor-open #view-editor.hidden,
#view-editor.hidden,
.app-view.hidden {
    display: none !important;
}
body.editor-open {
    overflow: hidden;
    height: 100vh;
}
body.editor-open #main-header {
    flex-shrink: 0;
    /* هيدر زجاجي 2026 — شفاف يكشف خلفية الأورورا */
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, .6), 0 4px 16px -8px rgba(20, 28, 36, .18);
}
body.editor-open #view-editor {
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    height: calc(100vh - 58px);
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
}
body.editor-open #editor-sidebar {
    /* العرض يأتي من المتغيّر الموحّد --sb-w (٢٨٨px افتراضياً، ٣٠٠px للورقة الأفقية) */
    width: var(--sb-w);
    flex: 0 0 var(--sb-w);
    height: 100%;
    max-height: none;
    position: relative;
    top: 0;
    overflow-y: auto;
    border-radius: 0;
    border: 0;
    border-left: 1px solid #d8dee6;
    box-shadow: -6px 0 18px rgba(15, 23, 42, 0.05);
    background: #f8fafc;
}
body.editor-open #editor-canvas-wrap {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow: auto;
    align-items: center;
    background:
        linear-gradient(180deg, #dfe3e8 0%, #e8eaed 120px);
    padding: 12px 20px 48px;
    border-radius: 0;
}
body.editor-open #canvas-header {
    width: min(100%, 210mm);
    margin: 0 auto 10px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(232, 234, 237, 0.92);
    backdrop-filter: blur(6px);
    padding: 6px 4px;
    border-radius: 10px;
}
body.editor-open #pages-container {
    width: 100%;
    align-items: center;
}
body.editor-open #pages-container .a4-page,
body.editor-open #pages-container .a4-landscape {
    box-shadow:
        0 1px 1px rgba(0,0,0,.06),
        0 12px 28px rgba(15, 23, 42, .16);
    margin-left: auto;
    margin-right: auto;
}
/* ---- درج أدوات التحرير السفلي (جوال) + زر عائم + ساتر ---- */
/* ⚠️ كان .mtab-nav هنا مخفياً (display:none) ← لا يستطيع المستخدم على سطح
   المكتب تبديل التبويبات، فيبقى محبوساً في تبويب واحد. نتركه ظاهراً دائماً
   ونُبقي .mtools-header (عنوان الدرج + زر الإغلاق) خاصاً بالجوال. */
.mtools-header { display: none; }
.mtab-nav { display: flex; }
.mobile-tools-fab {
    display: none;
    position: fixed; bottom: 88px; left: 16px;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--primary); color: #fff;
    place-items: center; cursor: pointer;
    box-shadow: 0 12px 28px -8px rgba(11, 107, 79, .55), 0 2px 6px rgba(15, 23, 42, .18);
    z-index: 180;
    transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mobile-tools-fab:active { transform: scale(.92); }
.mtools-scrim { display: none; }

@media (max-width: 1023px) {
    body.editor-open {
        overflow: auto;
        height: auto;
    }
    body.editor-open #view-editor {
        flex-direction: column;
        height: auto;
        padding: 8px;
        gap: 10px;
    }
    /* درج سفلي بدل الصندوق العلوي — لا يحجب الورقة */
    body.editor-open #editor-sidebar {
        position: fixed;
        top: auto;
        bottom: 0; left: 0; right: 0;
        width: 100%;
        height: auto;
        flex: none;
        max-height: 74vh;
        margin: 0;
        border: 0;
        border-top: 1px solid var(--border-2);
        border-radius: 24px 24px 0 0;
        background: #f8fafc;
        box-shadow: 0 -16px 48px rgba(15, 23, 42, .3);
        transform: translateY(calc(100% + 12px));
        transition: transform .34s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 170;
        padding: 6px 14px 16px;
        overscroll-behavior: contain;
    }
    body.editor-open #editor-sidebar.mtools-open {
        transform: translateY(0);
    }
    .editor-sidebar {
        width: 100% !important;
    }
    /* رأس الدرج */
    .mtools-header {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; padding: 6px 2px 10px;
        border-bottom: 1px solid var(--border-2);
        margin-bottom: 10px;
    }
    .mtools-grabber {
        position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
        width: 44px; height: 5px; border-radius: 99px;
        background: #cbd5e1; cursor: pointer;
    }
    .mtools-title { font-size: 14px; font-weight: 800; color: var(--ink-1); }
    .mtools-close {
        width: 38px; height: 38px; border-radius: 50%;
        display: grid; place-items: center; cursor: pointer;
        background: var(--surface-2); color: var(--ink-2);
        border: 1px solid var(--border-1);
    }
    /* زر عائم + ساتر */
    body.editor-open .mobile-tools-fab { display: grid; }
    body.editor-open .mtools-scrim {
        display: block;
        position: fixed; inset: 0;
        background: rgba(15, 23, 42, .45);
        z-index: 165;
        opacity: 0; pointer-events: none;
        transition: opacity .3s ease;
    }
    body.editor-open .mtools-scrim.on { opacity: 1; pointer-events: auto; }
    /* أحجام لمس أكبر (المعيار 40px+) */
    #editor-sidebar .fmt-btn { height: 42px; }
    #editor-sidebar select { min-height: 40px; }
    #editor-sidebar button { min-height: 40px; }
    #editor-sidebar input[type="range"] { height: 32px; }
}

/* أنماط أشرطة التمرير الحديثة والمتوافقة مع كافة المتصفحات (Scrollbar) */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.custom-scrollbar::-webkit-scrollbar { width: 7px; height: 7px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 9999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

/* شريط تمرير احترافي لمساحات العمل والمعاينة (الشهادات التقديرية وإعداد التقرير السلوكي) */
.workspace-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 rgba(0, 0, 0, 0.05);
}
.workspace-scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.workspace-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 9999px;
}
.workspace-scrollbar::-webkit-scrollbar-thumb {
    background-color: #94a3b8;
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.workspace-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #64748b;
}

/* شريط تمرير داكن للشريط الجانبي للشهادات */
.dark-sidebar-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #2b4b70 #091829;
}
.dark-sidebar-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.dark-sidebar-scrollbar::-webkit-scrollbar-track {
    background: #091829;
}
.dark-sidebar-scrollbar::-webkit-scrollbar-thumb {
    background-color: #2b4b70;
    border-radius: 9999px;
}
.dark-sidebar-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #38bdf8;
}

.protect-header thead th, .protect-header thead td { background-color: #f1f5f9 !important; }
.protect-header tbody td { background-color: #ffffff !important; }

.hdr-cell:focus { outline: 2px solid #3b82f6 !important; outline-offset: -2px; }
.hdr-cell-active { outline: 2px solid #f59e0b !important; outline-offset: -2px; }

.cell-selected { background-color: rgba(99, 102, 241, 0.1) !important; outline: 2px solid #6366f1 !important; outline-offset: -2px;}

/* ---- شريط الجداول الذكي العائم 2026 — كبسولة داكنة بأسلوب أداة الوثائق ---- */
#table-smart-toolbar { direction: rtl; user-select: none; }
.tbl-smart-toolbar {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px 6px; border-radius: 9999px;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 8px 24px -3px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
    animation: tbl-pop .22s cubic-bezier(0.16, 1, 0.3, 1);
    flex-wrap: wrap; max-width: min(94vw, 620px);
}
@keyframes tbl-pop {
    from { opacity: 0; transform: translateY(6px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
#table-smart-toolbar[data-pos="top"] .tbl-smart-toolbar { animation-name: tbl-pop-up; }
@keyframes tbl-pop-up {
    from { opacity: 0; transform: translateY(-6px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.tbl-smart-btn {
    width: 24px; height: 24px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: #e2e8f0;
    cursor: pointer; position: relative; padding: 0; font-size: 11px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.tbl-smart-btn:hover { background: rgba(255, 255, 255, 0.22); color: #34d399; transform: scale(1.12); }
.tbl-smart-btn:active { transform: scale(0.92); }
.tbl-smart-btn.is-active { background: #0b6b4f !important; color: #fff !important; box-shadow: 0 0 10px rgba(52, 211, 153, .55); }
/* أزرار معطَّلة (تراجع/إعادة لا يوجد لها ما يُتراجع عنه) */
.page-nav-action-btn:disabled { opacity: .3; cursor: default; pointer-events: none; }
.page-nav-action-btn:disabled:hover { background: rgba(255, 255, 255, 0.08); color: #94a3b8; transform: none; }
.tbl-smart-btn-create { background: rgba(16, 185, 129, .2); color: #6ee7b7; }
.tbl-smart-btn-create:hover { background: rgba(16, 185, 129, .4); color: #fff; }
.tbl-smart-btn-danger:hover { background: rgba(239, 68, 68, .92) !important; color: #fff !important; box-shadow: 0 0 10px rgba(239, 68, 68, .5); }
.tbl-smart-num {
    background: rgba(30, 41, 59, 0.85); color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 9999px;
    font-size: 10px; font-weight: 700; padding: 1px 4px;
    outline: none; cursor: pointer; width: 38px; height: 22px;
    transition: all 0.15s ease;
}
.tbl-smart-num:hover, .tbl-smart-num:focus { background: rgba(51, 65, 85, .95); border-color: #34d399; color: #fff; }
.tbl-smart-num option { background: #0f172a; color: #f8fafc; font-size: 11px; }
.tbl-smart-x { color: rgba(226, 232, 240, .55); font-size: 10px; font-weight: 800; }
.tbl-smart-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.2); margin: 0 2px; flex-shrink: 0; }
.tbl-smart-color-lbl { display: inline-flex; align-items: center; cursor: pointer; position: relative; }
.tbl-smart-color {
    width: 20px; height: 20px; padding: 0; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px;
    background: transparent; overflow: hidden;
}
.tbl-smart-color::-webkit-color-swatch-wrapper { padding: 0; }
.tbl-smart-color::-webkit-color-swatch { border: none; border-radius: 9999px; }
.tbl-smart-color::-moz-color-swatch { border: none; border-radius: 9999px; }
.tbl-smart-hint {
    margin-top: 5px; text-align: center; font-size: 9px; font-weight: 700;
    color: rgba(226, 232, 240, .6); letter-spacing: .02em;
}
#table-smart-toolbar.tst-active .tbl-smart-hint { display: none; }

/* التلميحات الفورية — نفس لغة doc-smart-btn[data-tip] */
.tbl-smart-btn[data-tip]::after,
.tbl-smart-color-lbl[data-tip]::after,
.tbl-smart-num[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(15, 23, 42, 0.96); color: #f8fafc;
    font-size: 10px; font-weight: 700; white-space: nowrap;
    padding: 3px 7px; border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100; font-family: 'Cairo', 'Tajawal', sans-serif;
}
.tbl-smart-btn[data-tip]:hover::after,
.tbl-smart-color-lbl[data-tip]:hover::after,
.tbl-smart-num[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
    .tbl-smart-toolbar { gap: 1px; padding: 3px 4px; max-width: 96vw; }
    .tbl-smart-divider { display: none; }
}
@media print { #table-smart-toolbar { display: none !important; } }

/* ---- شريط ترويسة الفرض الذكي — حصري لبوابة الفروض والتمارين ---- */
/* كبسولة داكنة بنفس لغة شريط الجداول (tbl-smart-toolbar) لكن أدواتها
   مخصصة للترويسة فقط: نموذج، شعار، اتجاه، خط الخانة وألوانها */
#exam-header-toolbar { direction: rtl; user-select: none; }
#exam-header-toolbar .tbl-smart-toolbar { animation: tbl-pop .22s cubic-bezier(0.16, 1, 0.3, 1); }
#exam-header-toolbar[data-pos="top"] .tbl-smart-toolbar { animation-name: tbl-pop-up; }
@media print { #exam-header-toolbar { display: none !important; } }

/* ================================================================
   أشكال الجداول العصرية 2026 — 5 أنماط تُطبَّق على الجداول
   ولا تؤثر على الطباعة النهائية
   ================================================================ */

/* 1) عصري (Modern): رأس ملوّن + صفوف بفارق خفيف + حواف مدورة */
.tbl-style-modern thead th {
    background-color: #0b6b4f !important; color: #fff !important;
    border-color: #0b6b4f !important; border-radius: 8px 8px 0 0;
    font-weight: 800 !important;
}
.tbl-style-modern tbody tr:nth-child(even) td { background-color: #f0fdf4 !important; }
.tbl-style-modern tbody tr:hover td { background-color: #dcfce7 !important; }
.tbl-style-modern td, .tbl-style-modern th { border-color: #bbf7d0 !important; }

/* 2) زبرا (Zebra): خطوط أفقية فقط بدون إطارات داخلية */
.tbl-style-zebra thead th {
    background-color: #1e293b !important; color: #fff !important;
    border: none !important; border-bottom: 2px solid #0f172a !important;
    border-radius: 6px 6px 0 0;
}
.tbl-style-zebra td { border: none !important; border-bottom: 1px solid #e2e8f0 !important; }
.tbl-style-zebra tbody tr:nth-child(even) td { background-color: #f8fafc !important; }
.tbl-style-zebra { border-collapse: separate !important; border-spacing: 0 2px !important; }

/* 3) هادئ (Soft): بدون إطارات، ظلال خفيفة وتباعد */
.tbl-style-soft td, .tbl-style-soft th { border: none !important; }
.tbl-style-soft thead th {
    background-color: #f1f5f9 !important; color: #0f172a !important;
    border-radius: 8px; font-weight: 800 !important;
}
.tbl-style-soft tbody tr td { border-bottom: 2px solid #f1f5f9 !important; border-radius: 8px; }
.tbl-style-soft tbody tr:hover td { background-color: #f8fafc !important; }
.tbl-style-soft { border-collapse: separate !important; border-spacing: 0 3px !important; }

/* 4) ملون (Vibrant): رأس متدرج + خلايا بزجاج ناعم */
.tbl-style-vibrant thead th {
    background-image: linear-gradient(135deg, #0b6b4f, #0e7490) !important;
    color: #fff !important; border-color: transparent !important;
    border-radius: 8px 8px 0 0; font-weight: 800 !important;
}
.tbl-style-vibrant td {
    background-color: rgba(255, 255, 255, .72) !important;
    border-color: #cffafe !important;
}
.tbl-style-vibrant tbody tr:nth-child(even) td { background-color: rgba(207, 250, 254, .45) !important; }

/* 5) كلاسيكي حديث (Neo-classic): إطاران أفقيان علوي وسفلي فقط */
.tbl-style-neoclassic td, .tbl-style-neoclassic th { border: none !important; }
.tbl-style-neoclassic thead th {
    border-top: 2px solid #0f172a !important;
    border-bottom: 2px solid #0f172a !important;
    background-color: #f8fafc !important; color: #0f172a !important;
    font-weight: 800 !important;
}
.tbl-style-neoclassic tbody tr:last-child td { border-bottom: 2px solid #0f172a !important; }
.tbl-style-neoclassic tbody tr:hover td { background-color: #f1f5f9 !important; }

/* صف القسم بنطاق كامل (البطاقة التقنية) — يصمد أمام كل أشكال الجداول */
.tc-section-row td {
    background-color: var(--primary-soft) !important;
    color: #000 !important;
    font-weight: 800 !important;
    text-align: center !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--border-1) !important;
}

/* الزر النشط في اللوحة الجانبية للبطاقة التقنية (يحدّثه techcardSwitch) */
#tool-techcard button.is-active {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 10px rgba(11, 107, 79, .35);
}

/* عند الطباعة: جميع الأشكال تعود للأسود النقي لضمان وثائق رسمية */
@media print {
    .tbl-style-modern thead th, .tbl-style-zebra thead th, .tbl-style-vibrant thead th,
    .tbl-style-soft thead th, .tbl-style-neoclassic thead th {
        background-color: #f1f5f9 !important; color: #000 !important;
        background-image: none !important;
    }
    .tbl-style-modern tbody tr td, .tbl-style-zebra tbody tr td, .tbl-style-vibrant tbody tr td,
    .tbl-style-soft tbody tr td, .tbl-style-neoclassic tbody tr td { background-color: #fff !important; }
    .tbl-style-zebra, .tbl-style-soft { border-spacing: 0 !important; }
    /* صف القسم: يعود أبيض نقي بنص أسود في الوثائق الرسمية */
    .tc-section-row td { background-color: #fff !important; color: #000 !important; }
}

.swatch-rainbow {
    background: conic-gradient(from 90deg, #ef4444, #f97316, #eab308, #22c55e, #14b8a6, #3b82f6, #6366f1, #ec4899, #ef4444);
}
#color-swatch-popup .swatch-cell {
    width: 24px; height: 24px; border-radius: 5px; cursor: pointer;
    border: 1px solid rgba(0,0,0,0.18); transition: transform .12s ease, box-shadow .12s ease;
}
#color-swatch-popup .swatch-cell:hover { transform: scale(1.22); box-shadow: 0 3px 8px rgba(0,0,0,0.3); z-index: 10; }

.group\/comp:hover .group-hover\/comp\:flex,
.group-comp:hover .group-hover-comp,
.group:hover > .group-hover\:flex {
    display: flex !important;
}

#accent-swatch-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 5px;
}
#accent-swatch-grid .accent-swatch {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    cursor: pointer;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    position: relative;
}
#accent-swatch-grid .accent-swatch:hover {
    transform: scale(1.22);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    z-index: 15;
}
#accent-swatch-grid .accent-swatch.selected {
    border-color: #ffffff;
    box-shadow: 0 0 0 2.5px #2563eb, 0 3px 8px rgba(0, 0, 0, 0.4);
    transform: scale(1.15);
    z-index: 12;
}
#accent-swatch-grid .accent-swatch.selected::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

#pages-container { display: flex; flex-direction: column; align-items: center; }
.a4-landscape { transform-origin: top center; }

.welcome-tool {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 14px;
    min-height: 110px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.welcome-tool:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(15,23,42,.08); }
.welcome-tool h4 { font-weight: 800; margin: 6px 0 4px; }
.welcome-tool p { font-size: 12px; color: #64748b; }
.welcome-tool span { font-size: 22px; }
.ico-btn {
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.ico-btn svg { width: 18px; height: 18px; pointer-events: none; }
.ico-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15,23,42,.08); }
.ico-btn:active { transform: scale(.94); }
.ico-btn.is-on { background: #0f172a; color: #f8fafc; border-color: #0f172a; }
/* معاينة الهواتف (آيفون/أندرويد) أُزيلت — المنصة للمعاينة والتحرير على الشاشات الكبيرة */
#upv-stage.upv-dev-desktop {
    background:
        linear-gradient(#1e293b, #1e293b) 0 0 / 100% 28px no-repeat,
        #334155;
    padding-top: 40px !important;
}
#upv-stage.upv-dev-board {
    background: #111;
    box-shadow: inset 0 0 0 14px #2a2a2a;
}
#upv-stage.upv-dev-phone {
    align-items: center;
}
.dash-search-wrap { position: relative; min-width: 180px; flex: 0.8; }
.dash-search-wrap input {
    width: 100%; border: 1px solid #cbd5e1; background: #fff; border-radius: 999px;
    padding: 8px 14px; font-size: 12px; font-weight: 700; outline: none;
}
#site-search-results {
    position: absolute; top: 110%; right: 0; left: 0; background: #fff;
    border: 1px solid #e7e0d4; border-radius: 14px; z-index: 40;
    max-height: 240px; overflow: auto; box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
#site-search-results button {
    display: block; width: 100%; text-align: right; border: 0; background: #fff;
    padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
#site-search-results button:hover { background: #f6f1e8; }
#site-search-results button.on { background: #f6f1e8; color: var(--primary); }
.ad-slot {
    border: 1.5px dashed #d97706; background: repeating-linear-gradient(135deg,#fff7ed,#fff7ed 8px,#ffedd5 8px,#ffedd5 16px);
    color: #9a3412; border-radius: 16px; padding: 12px 16px; margin: 12px 0;
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    font-size: 12px; font-weight: 800; min-height: 72px; text-align: center;
}
.ad-leader { min-height: 90px; }
.ad-side { min-height: 250px; width: 300px; max-width: 100%; flex-direction: column; }
.ad-tag { background: #c2410c; color: #fff; font-size: 10px; border-radius: 999px; padding: 2px 8px; }
.ad-slot a { color: #9a3412; font-weight: 900; }
.tools-with-ad { display: flex; gap: 14px; align-items: stretch; margin-top: 8px; }
.tools-with-ad > div { flex: 1; min-width: 0; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sec-title { font-size: 16px; font-weight: 900; margin: 8px 0 12px; }
.tile-ad { background: #fff7ed; border: 1.5px dashed #d97706; min-height: 110px; }
.news-block { margin-top: 18px; }
.news-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.news-grid article { background: #fffdf8; border: 1px solid #e7e0d4; border-radius: 18px; padding: 14px; }
.news-grid button { margin-top: 8px; border: 0; background: #1c1917; color: #fff; border-radius: 10px; padding: 6px 10px; font-weight: 800; font-size: 11px; cursor: pointer; }
.notif-panel { background: #fff; border: 1px solid #e7e0d4; border-radius: 16px; padding: 12px; margin: -8px 0 12px auto; max-width: 280px; font-size: 12px; }
@media print {
    .ad-slot, .notif-panel, .dash-search-wrap { display: none !important; }
}
@media (max-width: 980px) {
    .tools-with-ad { flex-direction: column; }
    .ad-side { width: 100%; min-height: 90px; }
    .tools-grid, .news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .tools-grid, .news-grid { grid-template-columns: 1fr; }
    .dash-search-wrap { min-width: 100%; order: 5; flex: 1 0 100%; }
}

@media (max-width: 640px) {
    #view-dashboard .m3-cards { gap: 10px; margin-bottom: 18px; }
    #view-dashboard .m3-card {
        gap: 10px;
        padding: 13px 14px;
        border-radius: 20px;
    }
    #view-dashboard .m3-card .m3-icon-tile {
        width: 42px;
        height: 42px;
        font-size: 21px;
        border-radius: 13px;
    }
    #view-dashboard .m3-card-title { font-size: 14px; line-height: 1.45; }
    #view-dashboard .m3-card-body { font-size: 11px; line-height: 1.6; }
    #view-dashboard .m3-card-cta { margin-top: 6px; font-size: 11px; }
    #view-dashboard .tools-grid { gap: 8px; }
    #view-dashboard .tools-grid .welcome-tool {
        gap: 9px;
        min-height: 76px;
        padding: 10px 11px;
        border-radius: 16px;
    }
    #view-dashboard .tools-grid .welcome-tool .m3-icon-tile.sm {
        width: 34px;
        height: 34px;
        font-size: 17px;
        border-radius: 10px;
    }
    #view-dashboard .tools-grid .welcome-tool h4 { margin: 2px 0 2px; font-size: 12px; line-height: 1.45; }
    #view-dashboard .tools-grid .welcome-tool p { font-size: 10px; line-height: 1.45; }
}

#pages-container .a4-page,
#pages-container .a4-landscape {
    transform-origin: top center;
}
@media print {
    #pages-container .a4-page,
    #pages-container .a4-landscape {
        transform: none !important;
        margin-bottom: 0 !important;
    }
    #universal-preview-modal { display: none !important; }
}

/* --- Page Borders and Print Rules --- */
.valid-page, .overflow-warning {
    animation: none !important;
    box-shadow: none !important;
    outline: none !important;
}

@media print {
    .valid-page, .overflow-warning {
        animation: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
}


/* Typography Overrides as requested */
[contenteditable="true"] {
    color: #000000 !important;
    font-family: inherit !important;
    font-weight: var(--content-font-weight, 800) !important;
}

/* ألوان شارات الوثائق (accent-header): خلفية سوداء وخط أبيض افتراضياً في جميع النماذج.
   تحديد عالٍ لتتفوق على قواعد [contenteditable] و.doc-container التي تجبر الخلفية الشفافة والنص الأسود. */
.accent-header,
.accent-header[contenteditable="true"],
.doc-container .accent-header,
.doc-container .accent-header[contenteditable="true"],
.doc-container .accent-header[contenteditable="true"] * {
    background-color: var(--accent-color, #000000) !important;
    color: var(--accent-text-color, #ffffff) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.a4-page, .a4-landscape { font-family: var(--exam-font); }

#pages-container .a4-page,
#pages-container .a4-landscape,
#pages-container .a4-page [contenteditable="true"],
#pages-container .a4-landscape [contenteditable="true"],
#pages-container .wrap-questions,
#pages-container .questions-gap-wrapper {
    font-family: var(--exam-font) !important;
}

#pages-container .questions-gap-wrapper,
#pages-container .questions-gap-wrapper .group.relative,
#pages-container .questions-gap-wrapper .group.relative > div:not(.no-print) {
    font-size: var(--question-font-size) !important;
    line-height: var(--exam-line-height) !important;
}

.wrap-questions {
    font-family: var(--exam-font) !important;
}

.source-text, [id*="-src"] {
    color: #333333 !important;
    font-weight: 600 !important;
}

.cal-wrap { max-width: 1180px; }
.cal-desk {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 14px;
    align-items: start;
}
@media (max-width: 900px) {
    .cal-desk { grid-template-columns: 1fr; }
}
.cal-main {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 14px;
}
.cal-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.cal-nav h3 { font-weight: 900; font-size: 18px; }
.cal-nav button {
    width: 36px; height: 36px; border-radius: 10px; border: 1px solid #cbd5e1;
    background: #fff; font-size: 20px; cursor: pointer; font-weight: 900;
}
.cal-week {
    display: grid; grid-template-columns: repeat(7, 1fr);
    text-align: center; font-size: 11px; font-weight: 800; color: #64748b;
    margin-bottom: 6px;
}
.cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-cell {
    min-height: 64px; border: 1px solid #e2e8f0; border-radius: 12px;
    background: #f8fafc; cursor: pointer; padding: 6px 4px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cal-cell.empty { background: transparent; border: 0; cursor: default; }
.cal-cell b { font-size: 14px; color: #0f172a; }
.cal-cell.today { outline: 2px solid #0f766e; }
.cal-cell.on { background: #0f172a; border-color: #0f172a; }
.cal-cell.on b { color: #fff; }
.cal-cell.has { background: #fff; }
.cal-dots { display: flex; gap: 3px; min-height: 6px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 99px; display: block; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: 11px; font-weight: 800; color: #475569; }
.cal-legend i { width: 8px; height: 8px; border-radius: 99px; display: inline-block; margin-left: 5px; }
.cal-side {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    max-height: calc(100vh - 220px);
    overflow: auto;
}
.cal-side-h { padding: 12px 14px 8px; border-bottom: 1px solid #e2e8f0; }
.cal-side-h strong { display: block; font-size: 14px; }
.cal-side-h small { color: #64748b; font-weight: 700; }
.cal-side-list { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cal-side .cal-item { grid-template-columns: 1fr; }
.cal-empty { padding: 20px; font-size: 12px; font-weight: 700; color: #64748b; }
.cal-tracks.gate { grid-template-columns: repeat(3, 1fr); }
.cal-hero.slim { padding: 14px 18px; }
.cal-hero {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    background: linear-gradient(135deg, #0b1f33, #0f766e);
    color: #fff; border-radius: 22px; padding: 20px 22px; margin-bottom: 12px;
}
.cal-hero h2 { font-weight: 900; font-size: 22px; margin: 4px 0; }
.cal-cker { font-size: 12px; opacity: .85; font-weight: 700; }
.cal-slogan { font-size: 13px; opacity: .92; }
.cal-today, .cal-dates {
    display: grid; gap: 8px; min-width: 220px;
}
.cal-today {
    background: rgba(255,255,255,.1); border-radius: 16px; padding: 10px 14px;
}
.cal-today b, .cal-dates b { display: block; font-size: 13px; font-weight: 800; }
.cal-today small, .cal-dates small { display: block; font-size: 11px; opacity: .85; }
.cal-g, .cal-h {
    display: inline-block; font-size: 10px; font-weight: 800; border-radius: 999px;
    padding: 1px 7px; margin-bottom: 3px;
}
.cal-g { background: #dbeafe; color: #1e3a8a; }
.cal-h { background: #fef3c7; color: #92400e; }
.cal-hero .cal-g { background: #93c5fd; color: #0f172a; }
.cal-hero .cal-h { background: #fde68a; color: #0f172a; }
.cal-toolbar { display: flex; gap: 8px; margin-bottom: 14px; }
.cal-print, .cal-back {
    border: 0; border-radius: 12px; padding: 8px 12px; font-weight: 800; font-size: 12px; cursor: pointer;
}
.cal-print { background: #0f172a; color: #fff; }
.cal-back { background: #fff; color: #0f172a; border: 1px solid #cbd5e1; }
.cal-hint { font-weight: 800; color: #334155; margin: 4px 0 12px; }
.cal-tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cal-tracks.slim { grid-template-columns: repeat(6, 1fr); margin-bottom: 12px; }
.cal-track {
    text-align: right; border: 1px solid #e2e8f0; background: #fff; border-radius: 16px;
    padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.cal-track strong { font-size: 14px; }
.cal-track em { font-size: 11px; color: #64748b; font-style: normal; }
.cal-track small { font-size: 11px; font-weight: 800; color: #0f766e; }
.cal-ticon { font-size: 22px; }
.cal-track.on { background: #0f172a; color: #fff; border-color: #0f172a; }
.cal-track.on em, .cal-track.on small { color: #cbd5e1; }
.cal-next {
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
    border-radius: 16px; padding: 12px 14px; margin-bottom: 12px;
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center;
}
.cal-next p { margin: 4px 0 0; font-weight: 800; color: #064e3b; }
.cal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cal-chip {
    border: 1px solid #cbd5e1; background: #fff; border-radius: 999px;
    padding: 6px 12px; font-size: 12px; font-weight: 800; cursor: pointer;
}
.cal-chip span { background: #f1f5f9; border-radius: 999px; padding: 0 6px; margin-right: 4px; font-size: 11px; }
.cal-chip.on { background: #0f172a; color: #fff; border-color: #0f172a; }
.cal-chip.on span { background: #334155; color: #fff; }
.cal-list { display: flex; flex-direction: column; gap: 8px; }
.cal-item {
    display: grid; grid-template-columns: 240px 1fr auto; gap: 12px; align-items: start;
    background: #fff; border: 1px solid #e2e8f0; border-right: 5px solid var(--c, #0f766e);
    border-radius: 16px; padding: 12px 14px;
}
.cal-item .cal-dates { color: #0f172a; }
.cal-tag { font-size: 10px; font-weight: 800; color: var(--c); background: #f8fafc; border-radius: 999px; padding: 2px 8px; }
.cal-body h3 { font-size: 14px; font-weight: 900; margin: 4px 0; color: #0f172a; }
.cal-body p { font-size: 12px; color: #475569; margin: 0; }
.cal-st { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 8px; height: fit-content; }
.cal-item.cal-done { opacity: .7; }
.cal-item.cal-done .cal-st { background: #f1f5f9; color: #64748b; }
.cal-item.cal-now .cal-st { background: #dcfce7; color: #166534; }
.cal-item.cal-soon .cal-st { background: #eff6ff; color: #1d4ed8; }
.cal-note { font-size: 11px; color: #64748b; margin-top: 16px; line-height: 1.7; }@media print {
    .cal-toolbar, .cal-chips, header:not(.mm-sheet-hdr), footer { display: none !important; }
    .cal-item { break-inside: avoid; }
    html, body { width: auto !important; max-width: none !important; }
}
@media (max-width: 900px) {
    .cal-tracks, .cal-tracks.slim { grid-template-columns: 1fr 1fr; }
    .cal-item { grid-template-columns: 1fr; }
}

/* ============================================================
   بطاقة التقويم الكبيرة — Apple Design Language (2026)
   زوايا كبيرة، طبقات شفافة، ظلال ناعمة، تباعدات واسعة
   ============================================================ */
.dash-cal-card {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 24px 60px -20px rgba(20, 28, 36, .28),
                inset 0 1px 0 0 rgba(255, 255, 255, .8);
}
.dash-cal-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.dash-cal-title { font-family: var(--brand-font-display); font-size: 26px; font-weight: 800; color: var(--ink-1); margin: 2px 0 4px; }
.dash-cal-sub { font-size: 13px; color: var(--ink-2); }
.dash-cal-today { background: var(--surface-2); border-radius: 14px; padding: 8px 14px; min-width: 180px; }
.dash-cal-today b { display: block; font-size: 13px; font-weight: 800; color: var(--ink-1); margin-top: 2px; }

/* إطار السلك الصغير — Segmented Control */
.dash-cal-seg {
    display: flex; gap: 6px; overflow-x: auto; padding: 4px;
    margin: 18px 0; background: var(--surface-2); border-radius: 16px;
    border: 1px solid var(--border-1);
}
.dash-seg-btn {
    flex: 1; min-width: fit-content; white-space: nowrap; border: 0; background: transparent;
    border-radius: 12px; padding: 9px 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; color: var(--ink-2);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.dash-seg-btn .dash-seg-ic { font-size: 14px; }
.dash-seg-btn:hover { color: var(--ink-1); background: rgba(255, 255, 255, .7); }
.dash-seg-btn.on {
    background: var(--surface-0); color: var(--primary); font-weight: 800;
    box-shadow: var(--shadow-sm);
}

/* الجسم: شبكة + قائمة
   ⚠️ minmax(0,1fr) وليس 1fr: فـ«1fr» تعني min-width:auto على عنصر الشبكة،
   فيرفض الانكماش ويُتمدّد لعرض محتواه (7 أعمدة تقويم ≈ 614px) فيولّد
   تمريراً أفقياً على الشاشات الضيقة والجوال. */
.dash-cal-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) { .dash-cal-body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

.dash-cal-month { min-width: 0; background: var(--surface-0); border: 1px solid var(--border-1); border-radius: 20px; padding: 16px; }
.dash-cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dash-cal-nav h3 { font-size: 16px; font-weight: 800; color: var(--ink-1); }
.dash-cal-navmid { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.dash-cal-nav button {
    width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border-2);
    background: var(--surface-0); font-size: 18px; font-weight: 900; color: var(--ink-2); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .18s ease, color .18s ease;
}
.dash-cal-nav button:hover { background: var(--primary-soft); color: var(--primary); }
.dash-cal-nav button:disabled { cursor: default; }

/* زر "اليوم" — كبسولة Apple صغيرة */
.dash-cal-today-btn {
    width: auto !important; padding: 0 14px; font-size: 12px; font-weight: 800;
    border-radius: 999px; border: 1px solid var(--border-2);
    color: var(--primary); background: var(--primary-soft);
    transition: opacity .18s ease, background .18s ease;
}
.dash-cal-today-btn:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); }

/* شريط الأشهر — نقاط على طراز Apple (سينمائية) */
.dash-cal-strip {
    display: flex; align-items: center; gap: 5px;
    max-width: 100%; overflow-x: auto; padding: 2px 0;
    scrollbar-width: none; -ms-overflow-style: none;
}
.dash-cal-strip::-webkit-scrollbar { display: none; }
.dstrip-dot {
    width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0;
    border: 0; background: var(--border-2); cursor: pointer; padding: 0;
    transition: width .22s cubic-bezier(0.34, 1.56, 0.64, 1), background .18s ease;
}
.dstrip-dot.has { background: var(--ink-3); }
.dstrip-dot.on {
    width: 20px; background: var(--primary);
}
.dstrip-dot:hover { background: var(--primary); }

/* الشبكة المصغّرة */
.dcal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: 10px; font-weight: 800; color: var(--ink-3); margin-bottom: 6px; }
.dcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dcal-cell {
    min-height: 44px; min-width: 0; border: 0; border-radius: 10px; background: transparent;
    cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    transition: background .15s ease;
}
.dcal-cell.empty { cursor: default; }
.dcal-cell b { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.dcal-cell:hover { background: var(--surface-2); }
.dcal-cell.has b { color: var(--ink-1); font-weight: 800; }
.dcal-cell.has { background: var(--primary-soft); }
.dcal-cell.today { outline: 2px solid var(--primary); outline-offset: -2px; }
.dcal-cell .cal-dots { display: flex; gap: 3px; min-height: 6px; }
.dcal-cell .cal-dots i { width: 6px; height: 6px; border-radius: 99px; display: block; }

/* قائمة الأحداث الجانبية */
.dash-cal-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-cal-side-h strong { display: block; font-size: 14px; font-weight: 800; color: var(--ink-1); }
.dash-cal-side-h small { font-size: 11px; color: var(--ink-3); font-weight: 700; }
.dash-cal-list { display: flex; flex-direction: column; gap: 8px; }
.dcal-item {
    display: flex; gap: 12px; align-items: center;
    background: var(--surface-0); border: 1px solid var(--border-1);
    border-right: 4px solid var(--c, var(--primary));
    border-radius: 14px; padding: 10px 12px;
}
.dcal-date { text-align: center; min-width: 58px; background: var(--surface-2); border-radius: 10px; padding: 6px 4px; flex-shrink: 0; }
.dcal-date b { display: block; font-size: 11px; font-weight: 800; color: var(--ink-1); }
.dcal-item h4 { font-size: 12.5px; font-weight: 700; color: var(--ink-1); margin: 3px 0 0; line-height: 1.4; }
.dcal-item .cal-tag { font-size: 10px; }

/* زر فتح التقويم الكامل — نمط Apple */
.dash-cal-open {
    margin-top: auto; border: 0; cursor: pointer;
    background: var(--primary); color: #fff; font-weight: 800; font-size: 13px;
    border-radius: 14px; padding: 12px 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1), background .18s ease;
}
.dash-cal-open:hover { background: var(--primary-hover); transform: translateY(-2px); }
.dash-cal-open:active { transform: translateY(0) scale(.98); }

/* الشاشات الصغيرة: إطار السلك يصبح أيقونات فقط */
@media (max-width: 640px) {
    .dash-seg-btn span:last-child { display: none; }
    .dash-seg-btn { flex: none; width: 44px; height: 40px; padding: 0; }
    .dash-cal-card { padding: 16px; border-radius: 22px; }
}

/* ============================================================
   التلميح الغني للنقاط — Apple Popover (الإصدار 2)
   زجاج قوي + ظل عميق + انزلاق ناعم من الخلية
   ============================================================ */
.dtip {
    position: fixed; z-index: 80;
    width: 268px; pointer-events: none;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(24px) saturate(1.7);
    -webkit-backdrop-filter: blur(24px) saturate(1.7);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 20px 48px -14px rgba(20, 28, 36, .38),
                inset 0 1px 0 0 rgba(255, 255, 255, .95);
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(.97);
    transition: opacity .18s ease, transform .18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dtip.show { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.dtip.hidden { display: none; }
.dtip-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-bottom: 8px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(20, 28, 36, .08);
}
.dtip-head b { font-size: 12px; font-weight: 800; color: var(--ink-1); }
.dtip-n {
    font-size: 10px; font-weight: 900; color: #fff;
    background: var(--primary); border-radius: 999px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
}
.dtip-list { display: flex; flex-direction: column; gap: 7px; }
.dtip-item { display: flex; gap: 8px; align-items: flex-start; }
.dtip-item > i {
    width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; margin-top: 4px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .6);
}
.dtip-item > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dtip-t { font-size: 11.5px; font-weight: 700; color: var(--ink-1); line-height: 1.4; }
.dtip-c { font-size: 10px; font-weight: 700; color: var(--ink-3); }
.dtip-more {
    font-size: 10.5px; font-weight: 800; color: var(--primary);
    text-align: center; padding-top: 4px;
}
@media (max-width: 640px) { .dtip { width: calc(100vw - 32px); } }



.img-crop-box {
    position: absolute;
    border: 2px solid #34d399;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
    cursor: move;
    box-sizing: border-box;
}
.img-crop-box i {
    position: absolute;
    width: 12px; height: 12px;
    background: #fff;
    border: 2px solid #059669;
    border-radius: 2px;
}
.img-crop-box i[data-h="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }
.img-crop-box i[data-h="ne"] { top: -6px; right: -6px; cursor: nesw-resize; }
.img-crop-box i[data-h="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
.img-crop-box i[data-h="se"] { bottom: -6px; right: -6px; cursor: nwse-resize; }
.img-crop-box i[data-h="n"] { top: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.img-crop-box i[data-h="s"] { bottom: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.img-crop-box i[data-h="w"] { left: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.img-crop-box i[data-h="e"] { right: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }

.hdr-ico {
    width: 40px; height: 40px;
    border-radius: 999px;
    display: grid; place-items: center;
    border: 0; cursor: pointer; padding: 0;
    flex-shrink: 0;
}
.hdr-ico svg { width: 20px; height: 20px; }
.hdr-ico-neutral { background: #fff; color: var(--ink-2); border: 1px solid var(--border-1); }
.hdr-ico-neutral:hover { background: var(--surface-2); color: var(--ink-1); }
.hdr-ico-green { background: #16a34a; color: #fff; }
.hdr-ico-green:hover { background: #15803d; }
.hdr-ico-login {
    width: 40px; height: 40px;
    background: radial-gradient(circle at 32% 28%, #ffffff 0%, #e9ebee 22%, #c4c8cd 55%, #9aa0a7 78%, #6f757c 100%);
    border: 2px solid #b9bec4;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.9), inset 0 -2px 4px rgba(0,0,0,.25), 0 2px 5px rgba(0,0,0,.35);
    color: #1a1d22;
}
.hdr-ico-login::after { display: none; }
.hdr-ico-login:hover { background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f1f3f5 22%, #cdd1d6 55%, #a4aab1 78%, #797f86 100%); }
.hdr-return-home {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-1);
    border-radius: 10px;
    background: #fff;
    color: var(--ink-2);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
    overflow: hidden;
    padding: 0;
    flex-shrink: 0;
}
.hdr-return-home::before { display: none; }
.hdr-return-home:hover {
    background: var(--surface-2);
    color: var(--ink-1);
    border-color: var(--border-2);
}
.hdr-return-home-icon {
    width: 20px;
    height: 20px;
    z-index: 1;
    transition: transform .22s ease;
}
/* العرض الجديد يدخل من اليمين والقديم يخرج لليسار (vt-fade-in / vt-fade-out)،
   فيعكس السهم اتجاه التنقل: دخول عرض أعمق → يشير يميناً، خروج/رجوع → يساراً */
.hdr-return-home.nav-entered .hdr-return-home-icon {
    transform: scaleX(-1);
}
@media (prefers-reduced-motion: reduce) {
    .hdr-return-home-icon { transition: none; }
}
.hdr-return-home-text {
    display: none;
}
.hdr-login-stack { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; gap: 0; }
.hdr-login-user { width: 16px; height: 16px; fill: #1a1d22; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
.hdr-login-text { font-family: 'Cairo', sans-serif; font-weight: 900; font-size: 7.5px; letter-spacing: .3px; color: #11141a; margin-top: 1px; text-shadow: 0 1px 0 rgba(255,255,255,.55); }

/* ===== الترويسة على الجوال: منع الفيض الأفقي والتكدّس =====
   العنقود الأيسر يضم 5 عناصر بعرض ثابت ≈340px، فيفيض على شاشة 360px.
   الحل: تصغير الأهداف، إخفاء النصوص الثانوية، والسماح بتقلص كتلة العنوان. */
@media (max-width: 640px) {
    #main-header > div { padding: 8px 12px; gap: 8px; }
    #main-header .hdr-ico,
    #main-header .hdr-return-home { width: 38px; height: 38px; }
    #main-header .hdr-ico svg,
    #main-header .hdr-return-home-icon { width: 18px; height: 18px; }
    #main-header .brand-logo-wrap { width: 36px; height: 36px; }
    #main-header .pr-1 { min-width: 0; }
    #main-header h1 { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    #main-header #header-subtitle { display: none; }
    #main-header #nav-breadcrumbs { display: none; }
    #main-header #hdr-account-wrap { margin-inline-start: auto; }
    #main-header .hdr-guest-badge,
    #main-header .hdr-user-badge { padding: 4px 8px 4px 5px; gap: 6px; }
    #main-header .hdr-guest-badge > span:last-child,
    #main-header .hdr-user-badge > span:last-child { display: none; }
    #main-header .hdr-guest-avatar,
    #main-header .hdr-user-avatar { width: 30px; height: 30px; }
}
.hdr-gear {
    width: 40px; height: 40px;
    background: transparent; border: 0; color: #fff;
    display: grid; place-items: center; cursor: pointer; padding: 0;
}
.hdr-gear svg { width: 20px; height: 20px; }
.hdr-pill {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border-1); border-radius: 9px;
    padding: 7px 12px;
    font-size: 11px; font-weight: 700;
    cursor: pointer; line-height: 1.2;
    background: #fff; color: var(--ink-1);
    box-shadow: var(--shadow-xs);
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1),
                background .16s ease, border-color .16s ease,
                box-shadow .16s ease;
}
.hdr-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.hdr-pill:active { transform: translateY(0) scale(0.97); }
.hdr-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hdr-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
.hdr-pill-ghost:hover { background: var(--surface-2); border-color: var(--border-2); }
.hdr-pill-primary {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.hdr-pill-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.fmt-btn {
    height: 34px;
    background: var(--surface-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-s);
    display: grid; place-items: center;
    color: var(--ink-1);
    cursor: pointer;
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease;
    box-shadow: var(--shadow-xs);
}
.fmt-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.fmt-btn:active {
    transform: translateY(0) scale(0.96);
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
}
.fmt-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---- الشريط العلوي على الجوال: أيقونات فقط + أحجام لمس أكبر ---- */
@media (max-width: 1023px) {
    #editor-actions { gap: 6px; }
    #editor-actions .hdr-pill {
        padding: 10px 12px;
        min-height: 42px;
        min-width: 42px;
        justify-content: center;
    }
    #editor-actions .hdr-pill svg { width: 18px; height: 18px; }
    /* إخفاء النصوص على الجوال (تظهر كتلميحات title) باستثناء مؤشر السحابة */
    #editor-actions .hdr-pill span { display: none; }
    #editor-actions #cloud-status-indicator { display: none; }
}

.subj-cat {
    font-size: 12px;
    font-weight: 900;
    color: #475569;
    margin: 14px 0 8px;
}
.subj-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (min-width: 768px) {
    .subj-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.subj-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 118px;
    padding: 12px 8px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.subj-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(15,23,42,.1);
}
.subj-ico {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: grid; place-items: center;
    font-size: 22px;
    font-weight: 900;
}
.subj-tile strong {
    font-size: 12px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.3;
}
.subj-tile small {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
}
.subj-em:hover { border-color: #10b981; }
.subj-em .subj-ico { background: #ecfdf5; }
.subj-sky:hover { border-color: #0ea5e9; }
.subj-sky .subj-ico { background: #e0f2fe; }
.subj-or:hover { border-color: #f97316; }
.subj-or .subj-ico { background: #ffedd5; }
.subj-am:hover { border-color: #d97706; }
.subj-am .subj-ico { background: #fef3c7; }
.subj-gn:hover { border-color: #16a34a; }
.subj-gn .subj-ico { background: #dcfce7; }
.subj-pu:hover { border-color: #9333ea; }
.subj-pu .subj-ico { background: #f3e8ff; }
.subj-bl:hover { border-color: #2563eb; }
.subj-bl .subj-ico { background: #dbeafe; }
.subj-rs:hover { border-color: #e11d48; }
.subj-rs .subj-ico { background: #ffe4e6; }
.subj-rd:hover { border-color: #dc2626; }
.subj-rd .subj-ico { background: #fee2e2; }


.level-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}
@media (min-width: 800px) {
    .level-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
.lvl-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-height: 96px; padding: 10px 6px;
    border: 1px solid #e7e0d4; background: #fffdf8; border-radius: 18px;
    cursor: pointer; text-align: center;
}
.lvl-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(15,23,42,.08); }
.lvl-tile.is-on { background: #1b2430; border-color: #1b2430; color: #fff; }
.lvl-tile.is-on small { color: #cbd5e1; }
.lvl-ico { font-size: 22px; }
.lvl-tile strong { font-size: 12px; font-weight: 900; }
.lvl-tile small { font-size: 10px; font-weight: 700; color: #64748b; }


.cal-annexes { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0; }
@media (min-width: 720px) { .cal-annexes { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.cal-annex {
    border: 1px solid #d6cfc2; background: #fffaf3; border-radius: 14px;
    padding: 10px 12px; text-align: right; cursor: pointer;
}
.cal-annex strong { display: block; font-size: 12px; font-weight: 900; }
.cal-annex small { color: #64748b; font-weight: 700; font-size: 11px; }
.cal-annex.on { background: #0f172a; color: #fff; border-color: #0f172a; }
.cal-annex.on small { color: #cbd5e1; }


#pages-container[dir="ltr"] .a4-landscape,
#pages-container[dir="ltr"] .a4-page,
.a4-landscape[dir="ltr"],
.a4-page[dir="ltr"] {
    direction: ltr;
    text-align: left;
}
#pages-container[dir="ltr"] table,
.a4-landscape[dir="ltr"] table {
    direction: ltr;
}
#pages-container[dir="rtl"] .a4-landscape,
#pages-container[dir="rtl"] .a4-page {
    direction: rtl;
}

.doc-font-pick {
    min-width: 88px;
    max-width: 120px;
    height: 22px;
    font-size: 9px;
    font-weight: 800;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: #0f172a;
    padding: 0 2px;
    cursor: pointer;
    z-index: 30;
    flex-shrink: 0;
}
.a4-page .no-print.flex,
.adv-doc-toolbar {
    flex-wrap: wrap;
    align-items: center;
}


.mm-app { background: var(--surface-1); min-height: calc(100vh - 58px); }
.mm-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; background:#fff; color:var(--ink-1); border-bottom:1px solid var(--border-1); }
.mm-cker { font-size:11px; font-weight:800; color:#86efac; margin:0; }
.mm-toolbar h2 { margin:0; font-size:18px; font-weight:900; }
.mm-actions { display:flex; flex-wrap:wrap; gap:6px; }
.mm-actions button { border:0; border-radius:10px; padding:7px 11px; font-weight:800; font-size:11px; cursor:pointer; background:#fff; color:#0f172a; }
.mm-actions .mm-print { background:#16a34a; color:#fff; }
.mm-stage-wrap { position:relative; min-height:920px; margin:10px auto 24px; width:min(1180px,96vw); background:#fff; border:1px solid #e2e8f0; border-radius:18px; overflow:hidden; box-shadow:0 16px 40px rgba(15,23,42,.08); }
.mm-links { position:absolute; inset:0; pointer-events:none; z-index:1; }
.mm-board { position:relative; min-height:920px; z-index:2; }
.mm-date { position:absolute; top:14px; left:50%; transform:translateX(-50%); border:2px solid #1e3a8a; border-radius:12px; padding:6px 22px; font-weight:900; font-size:14px; background:#fff; min-width:280px; text-align:center; text-decoration:underline; }
.mm-banner { position:absolute; top:58px; left:50%; transform:translateX(-50%); background:#1d4ed8; color:#fff; font-weight:900; font-size:16px; padding:8px 36px; border-radius:8px; box-shadow:4px 4px 0 #0f172a22; white-space:nowrap; }
.mm-hub { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); width:168px; height:168px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#4ade80,#16a34a 70%); color:#052e16; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-weight:900; font-size:13px; line-height:1.45; box-shadow:0 0 0 8px #bbf7d6, 0 10px 24px rgba(22,163,74,.35); z-index:4; }
.mm-card { position:absolute; width:min(280px,32%); border:2px solid; border-radius:22px; padding:8px 10px 10px; box-shadow:0 8px 18px rgba(15,23,42,.08); z-index:3; }
.mm-card-head { display:flex; align-items:center; gap:6px; }
.mm-card-title { flex:1; font-size:14px; font-weight:900; text-decoration:underline; margin:0; }
.mm-drag { cursor:grab; font-weight:900; opacity:.5; }
.mm-card ul { margin:6px 4px 0; padding-inline-start:16px; font-size:12px; font-weight:700; line-height:1.55; }
.mm-add-item { margin-top:6px; font-size:10px; font-weight:800; border:0; background:transparent; cursor:pointer; color:inherit; opacity:.7; }
.mm-card button { background:transparent; border:0; cursor:pointer; font-weight:900; }
@media print {
  .mm-toolbar, .mm-add-item, .mm-card-head button { display:none !important; }
  .mm-app, .mm-stage-wrap { background:#fff !important; box-shadow:none !important; border:0 !important; width:100% !important; margin:0 !important; }
  html, body { width:210mm !important; max-width:210mm !important; }
}


/* ============================================================
   🎨 لوحة السمة في شريط المحرّر — ملخّص مضغوط
   ------------------------------------------------------------
   كانت شبكة 40+ مربعاً تبتلع ~40% من الشريط، فتُدفع بقية
   الأدوات (الخطوط والتباعد) خارج الشاشة. الحل: شريط ملخّص
   صفري الارتفاع إضافياً + 6 ألوان سريعة، والشبكة الكاملة
   تظهر عند الضغط على الملخّص فقط.
   ============================================================ */
.accent-quick { display: flex; flex-direction: column; gap: 5px; }
.accent-current {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 5px 7px; background: #fff; border: 1px solid var(--border-2);
    border-radius: 9px; cursor: pointer; font-family: inherit;
    transition: all .15s;
}
.accent-current:hover { border-color: var(--primary); background: var(--surface-2); }
.accent-dot {
    width: 16px; height: 16px; border-radius: 5px; flex: 0 0 auto;
    border: 1.5px solid #0f172a; box-shadow: 0 0 0 1px #fff inset;
}
.accent-label { flex: 1; text-align: right; font-size: 10px; font-weight: 800; color: var(--ink-1); }
.accent-caret { font-size: 8px; color: var(--ink-3); transition: transform .2s; }

.accent-fast { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.accent-fast button {
    aspect-ratio: 1; border-radius: 7px; border: 1.5px solid #cbd5e1;
    cursor: pointer; padding: 0; transition: transform .12s, border-color .12s;
}
.accent-fast button:hover { transform: scale(1.12); border-color: #0f172a; }
.accent-fast button.active { border-color: #0f172a; box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #0f172a; }

/* الشبكة الكاملة: مخفية افتراضياً (display:none)، تظهر بالضغط فقط */
.accent-wrap { display: none; }
.accent-wrap.open { display: block; }
.accent-quick .accent-caret { transition: transform .2s; }
/* دوران السهم عند الفتح عبر :has (مدعوم في كل المتصفحات الحديثة) */
.accent-quick:has(.accent-wrap.open) .accent-caret { transform: rotate(180deg); }

.accent-wrap #accent-swatch-grid { padding-bottom: 2px; margin-top: 6px; }
.accent-wrap #accent-swatch-grid .accent-swatch { aspect-ratio: 1; border-radius: 6px; }

/* ============================================================
   🗂️ تبويبات شريط المحرّر — ظاهرة دائماً على كل المقاسات
   ------------------------------------------------------------
   ⚠️ كانت داخل @media (max-width:1023px) فلا تظهر إلا على الجوال،
   فيبقى المستخدم على سطح المكتب محبوساً في تبويب واحد (تنسيق)
   ولا يصل إلى الخطوط ولا الجداول ولا الشعار إطلاقاً.
   ============================================================ */
.mtab-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    margin-bottom: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    position: sticky; top: 0; z-index: 5;
    backdrop-filter: blur(6px);
}
.mtab-btn {
    padding: 7px 4px; border-radius: 8px;
    font-size: 11px; font-weight: 800; color: var(--ink-2);
    background: #fff; border: 1px solid var(--border-1);
    cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; justify-content: center; gap: 3px;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
    overflow: hidden; text-overflow: ellipsis;
}
.mtab-btn:hover { border-color: var(--primary); color: var(--primary); }
.mtab-btn.active {
    background: var(--primary); color: #fff; border-color: var(--primary);
}

/* ============================================================
   🗂️ عزل تبويبات شريط المحرّر — قاعدة عامة (ليست داخل @media)
   ------------------------------------------------------------
   ⚠️ كانت داخل @media (max-width:1023px) فلا تعمل على الشاشات
   العريضة، فيظهر كل التبويبات مجتمعة (أكثر من 2000px) وتدفع بقية
   الأدوات خارج الشاشة. لذلك صارت عامة خارج أي @media.
   ⚠️ كان #text-formatting-toolbar مستثنىً عمداً (لإبقائه ظاهراً
   دائماً)، لكن ذلك أظهر تبويبَي «تنسيق» و«نماذج» معاً.
   ============================================================ */
#editor-sidebar.mtabs-on > [data-mtab]:not(.mtab-active) { display: none; }
#editor-sidebar.mtabs-on > [data-mtab].mtab-active > [data-mtab]:not(.mtab-active) { display: none; }

/* ============================================================
   📏 نظام عرض الألواح الجانبية الموحّد
   ------------------------------------------------------------
   كل ألواح المنصة تأخذ العرض نفسه من متغيّر واحد، مع مراعاة:
   •Paper طولي  (A4 رأسي  794×1123)  → --sb-w عادي
   • Paper أفقي (A4 عرضي 1123×794)  → شريط أعرض قليلاً
     لأن الورقة العريضة تترك مساحة جانبية أكبر، فعرض 288px
     يستغلّها بدل ترك فراغ ميت.
   • الجوال      → 100% (يأخذه وضع اللlower الجانبي المرتفع)
   ============================================================ */
:root {
    --sb-w: 288px;                       /* العرض الموحّد للوح الجانبي */
    --sb-w-land: 300px;                  /* نسخة الورقة الأفقية */
    --sb-gap: 12px;
}

.editor-sidebar { width: var(--sb-w); flex: 0 0 var(--sb-w); }
.mm-tools       { width: var(--sb-w); flex: 0 0 var(--sb-w); }
.coloring-tools { width: var(--sb-w); flex: 0 0 var(--sb-w); }
.br-side        { width: var(--sb-w-land); flex: 0 0 var(--sb-w-land); }
.dg-panel       { width: var(--sb-w-land); flex: 0 0 var(--sb-w-land); }

/* الورقة الأفقية: شريط أعرض قليلاً + حدود أنعم (لأنها مساحة عمل).
   ⚠️ body.editor-open #editor-sidebar له خصوصية أعلى من html.* ⇒ نحتاج نفس المستوى. */
html.editor-landscape .editor-sidebar,
html.editor-landscape .mm-tools,
html.editor-landscape .coloring-tools,
html.editor-landscape .dg-panel { width: var(--sb-w-land); flex-basis: var(--sb-w-land); }
body.editor-open #editor-sidebar { width: var(--sb-w); }
html.editor-landscape body.editor-open #editor-sidebar { width: var(--sb-w-land); flex: 0 0 var(--sb-w-land); }

/* على الشاشات المتوسطة: نُضيّق قليلاً بدل القفز إلى لوحة منزلقة */
@media (min-width: 768px) and (max-width: 1279px) {
    :root { --sb-w: 264px; --sb-w-land: 276px; }
}

/* الجوال: يبقى السلوك الحالي (لوحة منزلقة بعرض كامل) */
@media (max-width: 767px) {
    :root { --sb-w: 100%; --sb-w-land: 100%; }
}

/* ============================================================
   🪟 تعطيل الزجاج المصنفر (backdrop-filter) على الأجهزة الضعيفة
   ------------------------------------------------------------
   السبب: backdrop-filter يفرض على المتصفح التقاط ما خلف العنصر
   + تمويهه + إعادة رسمه في كل إطار — وهو أغلى تأثير في CSS،
   ويجعل التمرير والقفز داخله ثقيلاً على الجوال (ذاكرة graphics
   محدودة)، خاصة حين يكون تسريع الرسوميات معطّلاً.

   نفكّه على:
     • الشاشات الصغيرة (<768px) — حيث الأداء أهم من الطابع الزجاجي
     • من اختار تقليل الشفافية في النظام (prefers-reduced-transparency)
   النتيجة: القواعد تبقى في مكانها على سطح المكتب بلا أي تغيير.
   ============================================================ */
@media (max-width: 767px), (prefers-reduced-transparency: reduce) {
    /* العناصر الأساسية الزجاجية في الواجهة — نكتفي بخلفية شبه شفافة */
    .glass, .glass-soft, .glass-strong,
    .portal-hub-header, .portal-card, .portal-hub-card,
    .dash-cal-card, .dash-cal-month, .dash-cal-seg, .cal-legend,
    .hero-brand-wrap, .hero-search, .hdr-blur, .app-header,
    .mtab-nav, .modal, .popover, .toast, .sheet, .stats-card,
    .recent-project-card, .dash-quick-btn, .dash-cal-head,
    .upload-badge, .mm-shape-glass,
    /* عناصر الواجهة العلوية والسريعة */
    #site-search, .btn-secondary, .ico-btn, .dash-chip {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    /* بديل بصري مقارب دون تكلفة */
    .glass, .glass-soft, .hero-brand-wrap, .hdr-blur, .app-header {
        background: rgba(255, 255, 255, .92) !important;
    }
    .glass-strong { background: rgba(255, 255, 255, .97) !important; }
    .dash-cal-month, .mm-shape-glass { background: #fff !important; }
}

.mm-workspace { display:flex; gap:10px; align-items:stretch; padding:10px 12px 20px; }
.mm-tools { background:#fff; border:1px solid #dbe3ee; border-radius:16px; padding:12px; overflow:auto; max-height:calc(100vh - 140px); }
.mm-tools h3 { font-size:13px; font-weight:900; margin:0 0 6px; }
.mm-tools h4 { font-size:11px; font-weight:800; margin:12px 0 6px; color:#334155; }
.mm-hint { font-size:11px; font-weight:700; color:#64748b; margin:0 0 8px; }
.mm-tool-group, .mm-tools > button { display:flex; flex-direction:column; gap:6px; }
.mm-tools button, .mm-tools select { width:100%; border:1px solid #e2e8f0; background:#f8fafc; border-radius:10px; padding:7px 8px; font-size:11px; font-weight:800; cursor:pointer; text-align:right; }
.mm-tools .mm-danger { background:#fff1f2; color:#be123c; border-color:#fecdd3; }
.mm-tool-row { display:flex; gap:6px; }
.mm-tool-row button, .mm-tool-row input[type=color] { flex:1; min-height:32px; }
.mm-swatches { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.mm-sw { width:100%; aspect-ratio:1; border-radius:8px; border:2px solid #cbd5e1; padding:0 !important; }
.mm-card.is-on { outline:3px solid #0f172a; }
.mm-workspace .mm-stage-wrap { flex:1; min-width:0; margin:0; }
@media (max-width: 900px) {
  .mm-workspace { flex-direction:column; }
  .mm-tools { width:100%; flex:none; max-height:42vh; }
}

.mm-actions .mm-restore { background:#fef2f2; color:#b91c1c; }
.mm-tools input[type=text] { width:100%; border:1px solid #e2e8f0; border-radius:10px; padding:6px 8px; font-size:11px; font-weight:700; margin:0 0 6px; }
.mm-tools label { font-size:10px; font-weight:800; color:#475569; display:block; margin-top:6px; }

/* ===== شريط أدوات لوحة التلوين: أقسام واضحة معنونة ===== */
.mm-tools-title { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:900; color:#0f172a; background:linear-gradient(90deg,#ecfdf5,#f0f9ff); border:1px solid #a7f3d0; border-radius:12px; padding:8px 10px; margin:0 0 8px; }
.mm-tools-hint { font-size:10px; font-weight:700; color:#64748b; background:#fff; border:1px dashed #cbd5e1; border-radius:10px; padding:6px 8px; margin:0 0 10px; line-height:1.7; }
.mm-tools-section { background:#fff; border:1px solid #dbe3ee; border-radius:14px; margin:0 0 10px; overflow:hidden; }
.mm-tools-section-head { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:900; color:#fff; background:linear-gradient(90deg,#0ea5e9,#22c55e); padding:7px 10px; }
.mm-tools-section:nth-of-type(2) .mm-tools-section-head { background:linear-gradient(90deg,#f59e0b,#f97316); }
.mm-tools-section:nth-of-type(3) .mm-tools-section-head { background:linear-gradient(90deg,#8b5cf6,#ec4899); }
.mm-tools-body { padding:8px; }
.mm-tools-note { font-size:9.5px; font-weight:700; color:#94a3b8; margin:6px 0 0; line-height:1.6; }
.mm-btn-primary { background:#059669 !important; color:#fff !important; border-color:#047857 !important; text-align:center !important; font-weight:900 !important; padding:9px !important; }
.mm-btn-primary:hover { background:#047857 !important; }

/* ===== الترويسة المنظمة: جدول الشعار (الشعار يتوسط) + جدول المحتويات ===== */
#pages-container table.hdr-tbl-logo > tbody > tr > td:nth-child(2) { text-align: center; vertical-align: middle; }
#pages-container table.hdr-tbl-logo > tbody > tr > td:nth-child(2) .flex { justify-content: center; }
#pages-container table.hdr-tbl-logo > tbody > tr > td:nth-child(2) img { max-height: 46px; width: auto; }
/* حدّ الكتابة: سطران كحد أقصى للجهات والمديرية + سطر واحد لحقول المحتويات */
#pages-container .hdr-clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word; max-width: 100%;
  font-size: 11px; line-height: 1.35;
}
#pages-container .hdr-oneline {
  display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
/* الحاويتان متطابقتا الإطار لتكوّنا جدولاً واحداً بصرياً */
#pages-container table.hdr-tbl-logo, #pages-container table.hdr-tbl-info { }
#pages-container .scalable-header .hdr-tbl-logo + .hdr-tbl-info { margin-top: -2px; }
#pages-container table.hdr-tbl-logo td, #pages-container table.hdr-tbl-info td { overflow: hidden; }
/* عند الطباعة تظل الحاويتان متلاصقتين بلا فراغات */
@media print {
  #pages-container table.hdr-tbl-logo, #pages-container table.hdr-tbl-info { page-break-inside: avoid; }
}

/* ===== ترويسة الفروض — شبكة الجدول الموحدة (RTL/LTR) — الشريط الأسود الرسمي ===== */
#pages-container .exam-header-container {
  width: 100%;
  border: 2px solid #000;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}
/* توحيد حجم الخط وتباعد الأسطر في كل عناصر الترويسة — يتحكم فيه منزلق «حجم ترويسة الفرض» */
#pages-container .exam-header-container,
#pages-container .exam-header-container * {
  font-size: var(--header-font-size, 11px) !important;
  line-height: 1.3 !important;
}
#pages-container .exam-header-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
#pages-container .exam-header-table td {
  border-bottom: 2px solid #000;
  padding: 2px 8px;
  vertical-align: middle;
}
#pages-container .exam-header-table tbody tr:last-child > td {
  border-bottom: none !important;
}
#pages-container .exam-header-container[dir="ltr"] .exam-header-table td { border-right: 2px solid #000; }
#pages-container .exam-header-container[dir="ltr"] .exam-header-table td:last-child { border-right: none; }
#pages-container .exam-header-container[dir="rtl"] .exam-header-table td { border-left: 2px solid #000; border-right: none; }
#pages-container .exam-header-container[dir="rtl"] .exam-header-table td:last-child { border-left: none; }
#pages-container .col-side { width: 35%; }
#pages-container .col-center { width: 30%; }
#pages-container .dashed-box {
  border: 1.5px dashed #94a3b8;
  border-radius: 6px;
  padding: 2px 6px;
  display: block;
  background: #fafcff;
}
#pages-container .dashed-input {
  display: inline-block;
  border: 1.5px dashed #94a3b8;
  border-radius: 5px;
  padding: 0 6px;
  font-weight: bold;
  min-width: 44px;
  text-align: center;
  background: #fff;
  outline: none;
}
#pages-container .dashed-input:focus { background: rgba(0,0,0,.04); }
#pages-container .dashed-input.small { min-width: 24px; padding: 0 4px; }
#pages-container .dashed-input.full { width: 60%; min-width: 120px; }
#pages-container .hdr-label-row { display: flex; align-items: center; gap: 4px; justify-content: flex-start; }
#pages-container .hdr-label-row .select-none,
#pages-container .hdr-label-row .hdr-label,
#pages-container .hdr-label-row > span:first-child { font-weight: bold; white-space: nowrap; }
#pages-container .hdr-label-row .dashed-input.full { flex: 1; width: auto; min-width: 110px; text-align: center; }
#pages-container .footer-cell-merged {
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: 3px 12px !important;
}
#pages-container .footer-flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
#pages-container .badge-num-container {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid #000;
  border-radius: 5px;
  overflow: hidden;
  height: 24px;
  background: #fff;
  direction: ltr !important;
}
#pages-container .badge-black {
  background: #000;
  color: #fff;
  padding: 0 8px;
  font-weight: bold;
}
#pages-container .badge-val {
  padding: 0 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  outline: none;
}
#pages-container .exam-header-container img { max-height: 40px; width: auto; }
/* الطباعة الرسمية: بقاء الإطار الأسود فقط — بلا إطارات تحرير متقطعة */
@media print {
  #pages-container .exam-header-container { page-break-inside: avoid; }
  #pages-container .badge-black { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #pages-container .exam-header-container,
  #pages-container .exam-header-table td,
  #pages-container .badge-num-container { border-color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* إخفاء إطارات التحرير: الصناديق والحقول المتقطعة تُطبع كنص رسمي صرف */
  #pages-container .dashed-box,
  #pages-container .dashed-input { border: none !important; background: transparent !important; padding-left: 2px !important; padding-right: 2px !important; }
}

/* ===== نماذج الترويسة المظهرية (Skins) — تُطبَّق على شبكة الترويسة ===== */
/* 🟢 زمردي: إطار أخضر + شريط علوي + شارة زمردية */
#pages-container .exam-header-container.hdr-skin-emerald {
  border-color: #059669;
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 34%);
  box-shadow: inset 0 6px 0 #059669, 0 4px 16px rgba(5,150,105,.15);
}
#pages-container .exam-header-container.hdr-skin-emerald .dashed-box { border-color: #34d399; }
#pages-container .exam-header-container.hdr-skin-emerald .dashed-input { border-color: #34d399; }
#pages-container .exam-header-container.hdr-skin-emerald .badge-num-container { border-color: #059669; }
#pages-container .exam-header-container.hdr-skin-emerald .badge-black { background: #059669; }
#pages-container .exam-header-container.hdr-skin-emerald .exam-header-table td { border-bottom-color: #059669; }

/* 🔵 ملكي: إطار كحلي مزدوج الحافة + شارة كحلية + صف أول مظلل */
#pages-container .exam-header-container.hdr-skin-royal {
  border-color: #1d4ed8;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 30%);
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 4px #1d4ed8, 0 4px 16px rgba(29,78,216,.15);
}
#pages-container .exam-header-container.hdr-skin-royal .exam-header-table > tbody > tr:first-child > td { background: #eff6ff; }
#pages-container .exam-header-container.hdr-skin-royal .dashed-box { border-color: #93c5fd; }
#pages-container .exam-header-container.hdr-skin-royal .dashed-input { border-color: #93c5fd; }
#pages-container .exam-header-container.hdr-skin-royal .badge-num-container { border-color: #1d4ed8; }
#pages-container .exam-header-container.hdr-skin-royal .badge-black { background: #1d4ed8; }
#pages-container .exam-header-container.hdr-skin-royal .exam-header-table td { border-bottom-color: #1d4ed8; }

/* 🟡 رملي: خط علوي ذهبي متدرج + إطار رملي دافئ */
#pages-container .exam-header-container.hdr-skin-sand {
  border-color: #b45309;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 36%);
  box-shadow: inset 0 6px 0 #f59e0b, 0 4px 16px rgba(180,83,9,.15);
}
#pages-container .exam-header-container.hdr-skin-sand .dashed-box { border-color: #fcd34d; }
#pages-container .exam-header-container.hdr-skin-sand .dashed-input { border-color: #fcd34d; }
#pages-container .exam-header-container.hdr-skin-sand .badge-num-container { border-color: #b45309; }
#pages-container .exam-header-container.hdr-skin-sand .badge-black { background: #b45309; }
#pages-container .exam-header-container.hdr-skin-sand .exam-header-table td { border-bottom-color: #b45309; }

/* ⚫ فحمي أنيق: إطار فحمي بظل داخلي + فواصل فحمية رفيعة + شارة فحمية */
#pages-container .exam-header-container.hdr-skin-slate {
  border-color: #0f172a;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 30%);
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 4px #0f172a, 0 4px 16px rgba(15,23,42,.18);
  border-radius: 6px;
}
#pages-container .exam-header-container.hdr-skin-slate .exam-header-table td { border-bottom: 1px solid #cbd5e1 !important; }
#pages-container .exam-header-container.hdr-skin-slate .exam-header-table > tbody > tr:last-child > td { border-bottom: none !important; }
#pages-container .exam-header-container.hdr-skin-slate .dashed-box { border: 1px solid #cbd5e1; }
#pages-container .exam-header-container.hdr-slate .dashed-box { border: 1px solid #cbd5e1; }
#pages-container .exam-header-container.hdr-skin-slate .dashed-input { border: 1px solid #94a3b8; border-radius: 4px; }
#pages-container .exam-header-container.hdr-skin-slate .badge-num-container { border-color: #0f172a; border-radius: 4px; }
#pages-container .exam-header-container.hdr-skin-slate .badge-black { background: #0f172a; }

/* طباعة النماذج: ألوان مضمونة */
@media print {
  #pages-container .exam-header-container.hdr-skin-emerald,
  #pages-container .exam-header-container.hdr-skin-royal,
  #pages-container .exam-header-container.hdr-skin-sand,
  #pages-container .exam-header-container.hdr-skin-slate,
  #pages-container .exam-header-container.hdr-skin-emerald .badge-black,
  #pages-container .exam-header-container.hdr-skin-royal .badge-black,
  #pages-container .exam-header-container.hdr-skin-sand .badge-black,
  #pages-container .exam-header-container.hdr-skin-slate .badge-black { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.mm-shapes { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mm-meta-bar { position:absolute; top:102px; left:50%; transform:translateX(-50%); display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:90%; z-index:5; }
.mm-meta-bar span { background:#0f172a; color:#fff; border-radius:999px; padding:3px 10px; font-size:10px; font-weight:800; }
.mm-meta-bar b { color:#86efac; margin-left:4px; }
.mm-shape-soft { border-radius:22px; }
.mm-shape-pill { border-radius:40px; padding:12px 16px; }
.mm-shape-hex { clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%); border-radius:0; padding:16px 22px; }
.mm-shape-cloud { border-radius:40% 48% 38% 50% / 46% 40% 52% 44%; }
.mm-shape-glass { border-radius:20px; backdrop-filter:blur(8px); box-shadow:0 10px 30px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.6); }
.mm-shape-ticket { border-radius:8px; clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)); }
.mm-hub { box-shadow:0 0 0 10px rgba(187,247,214,.7), 0 16px 40px rgba(22,163,74,.28); }
.mm-card { transition: transform .15s ease, box-shadow .15s ease; }
.mm-card:hover { transform:translateY(-2px); }
[dir=ltr] .mm-card, [dir=ltr] .mm-hub, [dir=ltr] .mm-banner, [dir=ltr] .mm-date { text-align:left; }
[dir=rtl] .mm-card, [dir=rtl] .mm-hub { text-align:right; }

.mm-stage-wrap {
    display:flex; flex-direction:column;
    background:
        radial-gradient(900px 420px at 50% 18%, #ecfdf5 0%, transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 40%);
}
.mm-sheet-hdr {
    flex:0 0 auto;
    background: linear-gradient(135deg, #0b1f33 0%, #115e59 58%, #166534 100%);
    color:#fff;
    padding:12px 16px 14px;
    border-bottom:4px solid #c8a24b;
    z-index:6;
    pointer-events:none;
}
.mm-hdr-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mm-hdr-brand {
    font-size:10px; font-weight:900; letter-spacing:.04em;
    background:#c8a24b; color:#0b1f33; border-radius:999px; padding:3px 10px;
}
.mm-hdr-top h1 { margin:0; font-size:18px; font-weight:900; flex:1; text-align:center; }
.mm-hdr-top time { font-size:11px; font-weight:800; opacity:.92; }
.mm-hdr-grid {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px; margin-top:10px;
}
.mm-hdr-grid div {
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px; padding:6px 8px;
}
.mm-hdr-grid small { display:block; font-size:9px; font-weight:800; color:#bbf7d0; }
.mm-hdr-grid strong { display:block; font-size:12px; font-weight:900; margin-top:2px; }
.mm-canvas { position:relative; flex:1; min-height:780px; }
.mm-canvas .mm-links, .mm-canvas .mm-board { position:absolute; inset:0; }
.mm-hub { top:46%; }
.mm-date, .mm-banner, .mm-meta-bar { display:none !important; }
@media (max-width: 800px) {
  .mm-hdr-grid { grid-template-columns:1fr 1fr; }
  .mm-hdr-top h1 { font-size:15px; flex:1 0 100%; order:3; }
}
@media print {
  .mm-sheet-hdr { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}


/* Mindmap A4 administrative sheet */
.mm-stage-wrap {
    display:flex !important;
    flex-direction:column;
    background:#c5ccd6 !important;
    border-radius:16px;
    overflow:auto;
    min-height:1100px;
}
.mm-desk {
    flex:1;
    overflow:auto;
    padding:18px 12px 28px;
    display:flex;
    justify-content:center;
    background:
        linear-gradient(180deg, #b7bfc9 0%, #cfd5dc 80%);
}
.mm-a4 {
    width:210mm;
    min-height:297mm;
    background:#fff;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    border:1.6px solid #0f172a;
    outline:1px solid #64748b;
    outline-offset:7px;
    box-shadow:
        0 0 0 8px #e2e8f0,
        0 18px 40px rgba(15,23,42,.28);
    position:relative;
}
.mm-a4::after {
    content:'A4';
    position:absolute;
    bottom:-22px;
    left:50%;
    transform:translateX(-50%);
    font-size:10px;
    font-weight:900;
    color:#475569;
    letter-spacing:.12em;
}
.mm-sheet-hdr {
    pointer-events:auto;
    background:#fff !important;
    color:#0f172a !important;
    border-bottom:2px solid #0f172a;
    padding:10px 12px 8px;
}
.mm-admin-top {
    display:grid;
    grid-template-columns:1fr 88px 1fr;
    gap:10px;
    align-items:center;
}
.mm-admin-gov {
    text-align:right;
    font-size:10px;
    line-height:1.45;
    font-weight:800;
    color:#0f172a;
}
.mm-admin-gov b { display:block; font-size:12px; font-weight:900; }
.mm-admin-gov span { display:block; color:#334155; }
.mm-logo-box {
    width:82px; height:82px;
    border:1.5px dashed #64748b;
    background:#f8fafc;
    border-radius:8px;
    display:grid; place-items:center;
    cursor:pointer;
    padding:4px;
    pointer-events:auto;
}
.mm-logo-box img { max-width:100%; max-height:100%; object-fit:contain; }
.mm-logo-ph { font-size:10px; font-weight:900; color:#64748b; text-align:center; line-height:1.3; }
.mm-admin-doc { text-align:left; }
.mm-admin-doc em {
    display:inline-block; font-style:normal;
    background:#0b1f33; color:#f8fafc;
    font-size:9px; font-weight:900;
    padding:2px 8px; border-radius:999px;
}
.mm-admin-doc h1 { margin:4px 0 2px; font-size:15px; font-weight:900; color:#0f172a; }
.mm-admin-doc time { font-size:11px; font-weight:800; color:#334155; }
.mm-hdr-grid div {
    background:#f8fafc !important;
    border:1px solid #cbd5e1 !important;
    border-radius:8px;
    color:#0f172a;
}
.mm-hdr-grid small { color:#64748b !important; }
.mm-hdr-grid strong { color:#0f172a; }
.mm-canvas { min-height:230mm; background:inherit; }
.mm-a4[data-bg="white"], .mm-canvas[data-bg="white"] { background:#ffffff; }
.mm-a4[data-bg="cream"], .mm-canvas[data-bg="cream"] { background:#fbf6ea; }
.mm-a4[data-bg="mint"], .mm-canvas[data-bg="mint"] { background:#ecfdf5; }
.mm-a4[data-bg="sky"], .mm-canvas[data-bg="sky"] { background:#eff6ff; }
.mm-a4[data-bg="lined"], .mm-canvas[data-bg="lined"] {
    background-color:#fffef8;
    background-image:repeating-linear-gradient(180deg, transparent, transparent 27px, #dbe3ee 28px);
}
.mm-a4[data-bg="dots"], .mm-canvas[data-bg="dots"] {
    background-color:#fff;
    background-image:radial-gradient(#94a3b8 1px, transparent 1.2px);
    background-size:16px 16px;
}
.mm-a4[data-bg="grid"], .mm-canvas[data-bg="grid"] {
    background-color:#fff;
    background-image:
        linear-gradient(rgba(148,163,184,.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.35) 1px, transparent 1px);
    background-size:18px 18px;
}
.mm-bg-swatches { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mm-bg-btn { font-size:10px !important; }
.mm-bg-btn.is-on { outline:2px solid #0f172a; }
.mm-bg-preview-white { background:#fff !important; }
.mm-bg-preview-cream { background:#fbf6ea !important; }
.mm-bg-preview-mint { background:#ecfdf5 !important; }
.mm-bg-preview-sky { background:#eff6ff !important; }
.mm-bg-preview-lined { background:repeating-linear-gradient(180deg,#fffef8,#fffef8 8px,#dbe3ee 9px) !important; }
.mm-bg-preview-dots { background:radial-gradient(#94a3b8 1px, #fff 1.4px) !important; background-size:10px 10px !important; }
.mm-bg-preview-grid { background:
    linear-gradient(rgba(148,163,184,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.4) 1px, #fff 1px) !important;
    background-size:8px 8px !important; }
@media print {
  .mm-tools, .mm-toolbar, .mm-desk { background:transparent !important; padding:0 !important; }
  .mm-desk { display:block !important; overflow:visible !important; }
  .mm-a4 {
    width:210mm !important; min-height:297mm !important;
    outline:none !important; box-shadow:none !important; margin:0 auto !important;
  }
  .mm-a4::after { display:none !important; }
  .mm-logo-box { border-style:solid !important; }
}

.mm-sheet-hdr [contenteditable="true"] {
    outline: none;
    min-height: 1.1em;
    cursor: text;
    border-radius: 4px;
}
.mm-sheet-hdr [contenteditable="true"]:hover { background: rgba(15,23,42,.04); }
.mm-sheet-hdr [contenteditable="true"]:focus {
    outline: 1.5px dashed #0f766e;
    background: #fff;
    outline-offset: 2px;
}
.mm-sheet-hdr [contenteditable="true"]:empty::before {
    content: attr(data-ph);
    color: #94a3b8;
    font-weight: 700;
}

.mm-acad-pick {
    display:block; width:100%;
    border:0; background:transparent;
    font: inherit; font-size:10px; font-weight:800;
    color:#334155; text-align:right;
    cursor:pointer; padding:0; margin:2px 0 0;
    appearance:auto;
}
.mm-acad-pick:focus { outline:1.5px dashed #0f766e; background:#fff; }
.mm-tools select#mm-meta-academy { text-align:right; font-size:10px; }

.mm-official { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.mm-logo-wide {
    display:flex; align-items:center; justify-content:center;
    width:100%; min-height:72px; max-height:92px;
    padding:4px 8px; margin:0 auto 2px;
    border:0; background:transparent; cursor:pointer;
}
.mm-logo-wide img {
    height:72px; width:auto; max-width:min(463px, 100%);
    object-fit:contain; object-position:center;
}
.mm-official-row {
    display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start;
    border-top:1.5px solid #0f172a; padding-top:8px;
}
.mm-admin-doc { text-align:left; }
[dir=rtl] .mm-admin-doc { text-align:left; }
[dir=ltr] .mm-admin-gov { text-align:left; }
[dir=rtl] .mm-admin-gov { text-align:right; }
.mm-admin-doc h1 { margin:0; font-size:16px; font-weight:900; }
.mm-admin-doc time { font-size:11px; font-weight:800; color:#334155; }
.mm-sheet-hdr { background:#fff !important; color:#0f172a !important; pointer-events:auto; }


/* Mindmap print: header + map on one A4 sheet */
html.mm-print,
html.mm-print body {
    width: 210mm !important;
    max-width: 210mm !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}
html.mm-print #main-header,
html.mm-print footer,
html.mm-print .mm-toolbar,
html.mm-print .mm-tools,
html.mm-print .no-print,
html.mm-print .app-view:not(#view-mindmap) {
    display: none !important;
}
html.mm-print #view-mindmap {
    display: block !important;
    background: #fff !important;
    min-height: 0 !important;
}
html.mm-print .mm-workspace {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
}
html.mm-print .mm-stage-wrap,
html.mm-print .mm-desk {
    display: block !important;
    overflow: visible !important;
    min-height: 0 !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}
html.mm-print header.mm-sheet-hdr,
html.mm-print #mm-sheet-hdr {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    background: #fff !important;
    color: #0f172a !important;
    border-bottom: 1.5px solid #0f172a !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
html.mm-print .mm-logo-wide,
html.mm-print .mm-logo-wide img {
    display: block !important;
    max-height: 18mm !important;
    height: 16mm !important;
    width: auto !important;
    margin: 0 auto !important;
}
html.mm-print .mm-a4 {
    width: 210mm !important;
    min-height: 297mm !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}
html.mm-print .mm-canvas {
    position: relative !important;
    min-height: 220mm !important;
    height: 220mm !important;
    overflow: visible !important;
    flex: none !important;
}
html.mm-print .mm-canvas .mm-board,
html.mm-print .mm-canvas .mm-links {
    position: absolute !important;
    inset: 0 !important;
    min-height: 220mm !important;
}
html.mm-print .mm-card,
html.mm-print .mm-hub {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    break-inside: avoid;
}
html.mm-print .mm-card-head button,
html.mm-print .mm-add-item { display: none !important; }

@media print {
  header.mm-sheet-hdr,
  #mm-sheet-hdr {
    display: block !important;
    visibility: visible !important;
  }
}

/* ============================================================
   Material Design 3 (design.google) — طبقة التصميم للشاشة الرئيسية
   توكنات اللون مشتقة من البذرة المؤسسية #006233 (M3 baseline)
   ============================================================ */
#view-dashboard {
    /* M3 Color Roles — محايدة حيادية + زمردي واحد */
    --md-primary: #0b6b4f;
    --md-on-primary: #ffffff;
    --md-primary-container: #e9f3ee;
    --md-on-primary-container: #0b3a29;
    --md-secondary-container: #eef1f0;
    --md-on-secondary-container: #2f3a34;
    --md-surface-container-lowest: #ffffff;
    --md-surface-container-low: var(--surface-1);
    --md-surface-container-high: var(--surface-2);
    --md-on-surface: var(--ink-1);
    --md-on-surface-variant: var(--ink-2);
    --md-outline-variant: var(--border-1);
    --md-inverse-surface: var(--ink-1);

    /* M3 Elevation — ظلال خفيفة جداً بدون توهج */
    --md-elev-1: 0 1px 2px rgba(20, 28, 36, .05);
    --md-elev-2: 0 2px 6px rgba(20, 28, 36, .06);
    --md-elev-3: 0 6px 16px -6px rgba(20, 28, 36, .12);

    color: var(--md-on-surface);
}

/* ---------- Hero Banner — زجاج أورورا 2026 ---------- */
.m3-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    /* أورورا غنية بدل التدرج الخطي المسطح */
    background:
        radial-gradient(120% 140% at 92% 6%, rgba(110, 231, 183, .42), transparent 58%),
        radial-gradient(90% 120% at 4% 92%, rgba(45, 212, 191, .30), transparent 56%),
        radial-gradient(70% 100% at 50% 40%, rgba(16, 185, 129, .22), transparent 70%),
        linear-gradient(140deg, var(--aurora-1) 0%, #047857 48%, #065f46 100%);
    color: var(--md-on-primary);
    box-shadow: var(--glass-shadow);
    margin-bottom: 16px;
    isolation: isolate;
}
/* الحرير داخل الهيرو + وهج علوي زجاجي */
.m3-hero::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23h)' opacity='0.22'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}
.m3-hero > * { position: relative; z-index: 1; }
.m3-hero-deco {
    position: absolute; inset: 0; pointer-events: none; opacity: .14;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Crect x='14' y='14' width='28' height='28'/%3E%3Crect x='14' y='14' width='28' height='28' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
}
.m3-hero-inner {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 26px 28px;
}
.m3-overline {
    font-size: 11px; font-weight: 800; letter-spacing: .12em;
    opacity: .85; margin-bottom: 4px;
}
.m3-headline { font-size: clamp(22px, 3.4vw, 32px); font-weight: 900; line-height: 1.25; }
.m3-hero-sub { font-size: 13px; font-weight: 700; opacity: .92; margin-top: 6px; }
.m3-clock-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-highlight);
    border-radius: 999px; padding: 9px 18px;
    font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
    color: #ffffff;
}
.m3-clock-chip svg { width: 18px; height: 18px; }

/* ---------- Toolbar / Search Bar (M3) ---------- */
#view-dashboard .m3-toolbar .ico-btn {
    border-color: var(--md-outline-variant);
    background: var(--md-surface-container-lowest);
    color: var(--md-on-surface-variant);
}
#view-dashboard .m3-toolbar .ico-btn:hover { background: var(--md-surface-container-high); }
#view-dashboard .m3-toolbar .ico-btn.is-on {
    background: var(--md-inverse-surface); color: #fff; border-color: transparent;
}
#view-dashboard .dash-search-wrap input {
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container-high);
    color: var(--md-on-surface);
    transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
#view-dashboard .dash-search-wrap input:focus {
    background: var(--md-surface-container-lowest);
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(0,109,71,.18); /* M3 focus ring */
}


/* ---------- M3 Cards (Elevated + Filled variants) — لمسة زجاجية 2026 ---------- */
#view-dashboard .m3-card {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 20px;
    border-radius: 28px; /* M3 extra-large shape */
    border: 1px solid var(--border-1);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(10px) saturate(1.35);
    -webkit-backdrop-filter: blur(10px) saturate(1.35);
    color: var(--md-on-surface);
    cursor: pointer; text-align: right;
    position: relative; overflow: hidden;
    box-shadow: var(--glass-shadow);
    transition: box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1),
                transform .28s cubic-bezier(0.4, 0, 0.2, 1),
                border-color .28s ease;
    font-family: inherit;
}
/* ضوء زجاجي علوي يتحرك مع التحويم */
#view-dashboard .m3-card::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 50%;
    pointer-events: none; z-index: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.55), transparent);
    opacity: .55;
    transition: opacity .28s ease;
}
#view-dashboard .m3-card:hover {
    box-shadow: 0 18px 40px -14px rgba(20, 28, 36, .26), var(--glass-highlight);
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border-1));
}
#view-dashboard .m3-card:hover::after { opacity: .85; }
#view-dashboard .m3-card:active { transform: translateY(-1px) scale(.995); }
#view-dashboard .m3-card:focus-visible,
#view-dashboard .welcome-tool:focus-visible,
#view-dashboard .dash-search-wrap input:focus-visible,
#view-dashboard .ico-btn:focus-visible {
    outline: 3px solid var(--md-primary); outline-offset: 2px;
}
/* State layer — hover/press tint per M3 spec */
#view-dashboard .m3-card::before {
    content: ''; position: absolute; inset: 0;
    background: currentColor; opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
}
#view-dashboard .m3-card:hover::before { opacity: .05; }
#view-dashboard .m3-card:active::before { opacity: .09; }
#view-dashboard .m3-card > * { position: relative; z-index: 1; }

#view-dashboard .m3-card-accent { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
#view-dashboard .m3-card-filled { background: var(--md-inverse-surface); color: #e6ede8; }

.m3-card-content { min-width: 0; flex: 1; }
.m3-card-title { font-size: 17px; font-weight: 900; line-height: 1.4; color: inherit; }
.m3-card-body { font-size: 12px; line-height: 1.8; opacity: .82; margin-top: 4px; }
.m3-card-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px; font-size: 12px; font-weight: 900;
    color: var(--md-primary);
}
.m3-card-cta span { transition: transform .2s ease; }
#view-dashboard .m3-card:hover .m3-card-cta span { transform: translateX(-4px); } /* RTL */
#view-dashboard .m3-card-filled .m3-card-cta { color: #6ee7b7; }

/* Icon tiles — squircle containers + توهج زمردي 2026 */
.m3-icon-tile {
    flex-shrink: 0;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    font-size: 27px; line-height: 1;
    border-radius: 18px;
    background: var(--md-primary-container); color: var(--md-on-primary-container);
    position: relative;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .6), 0 2px 6px -2px rgba(20, 28, 36, .14);
    transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#view-dashboard .m3-card:hover .m3-icon-tile,
#view-dashboard .welcome-tool:hover .m3-icon-tile {
    transform: scale(1.07) rotate(-1.5deg);
}
.m3-icon-tile.sm { width: 44px; height: 44px; font-size: 21px; border-radius: 14px; }
.t-green   { background: #dcfce7; color: #14532d; }
.t-blue    { background: #dbeafe; color: #1e3a8a; }
.t-indigo  { background: #e0e7ff; color: #3730a3; }
.t-teal    { background: #ccfbf1; color: #134e4a; }
.t-emerald { background: #a7f3d0; color: #064e3b; }
.t-amber   { background: #fef3c7; color: #92400e; }
.t-inverse { background: rgba(255,255,255,.16); color: #fff; }

/* ---------- Tools grid → M3 tonal cards — زجاج 2026 ---------- */
#view-dashboard .tools-grid .welcome-tool {
    display: flex; gap: 12px; align-items: center;
    border-radius: 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    border: 1px solid var(--border-1);
    box-shadow: var(--glass-highlight);
    position: relative; overflow: hidden;
    transition: box-shadow .24s cubic-bezier(0.4, 0, 0.2, 1),
                background .24s ease, transform .24s cubic-bezier(0.4, 0, 0.2, 1),
                border-color .24s ease;
}
#view-dashboard .tools-grid .welcome-tool:hover {
    background: var(--glass-bg-strong);
    box-shadow: 0 10px 26px -10px rgba(20, 28, 36, .2), var(--glass-highlight);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border-1));
}
#view-dashboard .tools-grid .welcome-tool > div { min-width: 0; flex: 1; }
#view-dashboard .tools-grid .tile-ad { background: #fff7ed; border: 1.5px dashed #d97706; }
/* بطاقة الأجرة — لون مميز يتغلب على القاعدة العامة (نفس مستوى التحديد) */
#view-dashboard .tools-grid .salary-tool { background: #f0f8f2; border-color: #9bc9a9; }
#view-dashboard .tools-grid .salary-tool:hover { background: #e5f3e8; box-shadow: var(--md-elev-1); transform: translateY(-1px); }

/* ---------- News cards ---------- */
#view-dashboard .news-grid article {
    background: var(--md-surface-container-lowest);
    border: 1px solid var(--md-outline-variant);
    border-radius: 20px;
}
#view-dashboard .news-grid button {
    border-radius: 999px; background: var(--md-primary); color: var(--md-on-primary);
    padding: 7px 16px; transition: box-shadow .2s ease, opacity .2s ease;
}
#view-dashboard .news-grid button:hover { box-shadow: var(--md-elev-1); }

/* ---------- Ripple (Material motion) ---------- */
.m3-ripple {
    position: absolute;
    border-radius: 999px;
    transform: scale(0);
    pointer-events: none;
    background: currentColor;
    opacity: .18;
    animation: m3-ripple-grow .55s cubic-bezier(.2,0,0,1) forwards;
    z-index: 2;
}
@keyframes m3-ripple-grow {
    to { transform: scale(2.6); opacity: 0; }
}

@media (max-width: 640px) {
    .m3-hero-inner { padding: 20px; }
    .m3-icon-tile { width: 48px; height: 48px; font-size: 23px; }
}

/* ============================================================
   M3 عام — تعميم على كل الواجهات (مع حماية لوحات التحرير)
   ============================================================ */
:root {
    --md-primary: #006d47;
    --md-on-primary: #ffffff;
    --md-primary-container: #89f8c2;
    --md-on-primary-container: #00210f;
    --md-secondary-container: #cce8d6;
    --md-on-secondary-container: #06281a;
    --md-surface-container-lowest: #ffffff;
    --md-surface-container-low: #f0f5ef;
    --md-surface-container-high: #e4eae3;
    --md-on-surface: #171d19;
    --md-on-surface-variant: #404943;
    --md-outline-variant: #c0c9c1;
    --md-inverse-surface: #2b322d;
    --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
    --md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
    --md-elev-3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
}

/* ---------- شريط الواجهة الموحد + زر الرجوع ---------- */
.m3-viewbar {
    display: flex; align-items: center; gap: 14px;
    background: var(--md-surface-container-lowest);
    border: 1px solid var(--md-outline-variant);
    border-radius: 24px;
    padding: 12px 16px;
    box-shadow: var(--md-elev-1);
    margin-bottom: 16px;
}
.m3-viewbar-text { flex: 1; min-width: 0; }
.m3-viewbar-title { font-size: 18px; font-weight: 900; line-height: 1.35; color: var(--md-on-surface); }
.m3-viewbar-sub { font-size: 11px; font-weight: 700; color: var(--md-on-surface-variant); margin-top: 2px; }

.salary-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .75fr); gap: 16px; align-items: start; }
.salary-panel, .salary-result { border: 1px solid var(--md-outline-variant); border-radius: 22px; background: var(--md-surface-container-lowest); box-shadow: var(--md-elev-1); }
.salary-panel { padding: 22px; }
.salary-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.salary-panel-heading h2 { margin: 3px 0 0; font-size: 22px; font-weight: 900; color: var(--md-on-surface); }
.salary-cker { color: var(--md-primary); font-size: 11px; font-weight: 900; }
.salary-step, .salary-source-badge { color: var(--md-primary); background: var(--md-primary-container); border-radius: 999px; padding: 5px 10px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.salary-note { margin: 12px 0 20px; padding: 10px 12px; border-right: 3px solid #d49b32; background: #fff8e8; color: #684c13; border-radius: 8px; font-size: 11px; line-height: 1.8; }
.salary-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.salary-form-grid label { display: grid; gap: 5px; color: var(--md-on-surface-variant); font-size: 11px; font-weight: 800; }
.salary-form-grid :is(select, input) { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid var(--md-outline-variant); border-radius: 10px; background: #fff; color: var(--md-on-surface); font: inherit; font-size: 12px; }
.salary-calculate { width: 100%; margin-top: 20px; padding: 12px 16px; border: 0; border-radius: 12px !important; background: var(--md-primary); color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; }
.salary-calculate span { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 5px; border-radius: 50%; background: rgba(255,255,255,.2); }
.salary-result { padding: 24px; background: #fff; color: var(--ink-1); border: 1px solid var(--border-1); position: sticky; top: 78px; overflow: hidden; }
.salary-result::before { content: ''; position: absolute; width: 180px; height: 180px; left: -80px; top: -90px; border: 1px solid var(--border-1); border-radius: 50%; }
.salary-result-label, .salary-currency { display: block; color: var(--ink-3); font-size: 11px; font-weight: 700; }
.salary-result strong { display: block; margin-top: 12px; color: var(--primary); font-size: clamp(28px, 4vw, 42px); line-height: 1.1; font-weight: 800; direction: rtl; }
.salary-currency { margin-top: 5px; }
.salary-breakdown { margin-top: 25px; border-top: 1px solid var(--border-1); }
.salary-breakdown div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border-1); font-size: 11px; }
.salary-breakdown b { color: var(--ink-1); white-space: nowrap; }
.salary-result p { min-height: 38px; margin: 18px 0; color: var(--ink-2); font-size: 10px; line-height: 1.7; }
.salary-result a { color: var(--primary); font-size: 11px; font-weight: 700; text-decoration: underline; }
.salary-official-link { display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; border: 1px solid var(--border-2); border-radius: 9px; text-decoration: none !important; }
.salary-official-link:hover { background: var(--surface-2); }
/* تنبيه: الأجرة دون التعويض التكميلي */
.salary-warn {
    margin: 14px 0 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(212, 155, 50, .16);
    border: 1px solid rgba(212, 155, 50, .45);
    color: #f0d9a8;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.7;
}
/* زر تبديل اللغة عربية/فرنسية */
.salary-lang-btn {
    flex-shrink: 0;
    border: 1.5px solid var(--md-outline-variant);
    background: var(--md-surface-container-lowest);
    color: var(--md-on-surface);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12px; font-weight: 800;
    cursor: pointer; white-space: nowrap;
    transition: box-shadow .2s ease, background-color .15s ease, transform .15s ease;
}
.salary-lang-btn:hover { box-shadow: var(--md-elev-1); background: var(--md-surface-container-high); }
.salary-lang-btn:active { transform: scale(.96); }
.salary-lang-btn:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }
/* ضبط اتجاه الواجهة عند اختيار الفرنسية */
.sal-root[dir="ltr"] .salary-note { border-right: 0; border-left: 3px solid #d49b32; }
.sal-root[dir="ltr"] .salary-calculate span { margin-left: 0; margin-right: 5px; }
.sal-root[dir="ltr"] .m3-viewbar-title,
.sal-root[dir="ltr"] .salary-panel-heading h2 { text-align: left; }
.salary-tool { background: #f0f8f2; border-color: #9bc9a9; }
.salary-tool:hover { background: #e5f3e8; }
@media (max-width: 760px) {
    .salary-layout { grid-template-columns: 1fr; }
    .salary-result { position: static; }
    .salary-form-grid { grid-template-columns: 1fr; }
    .salary-source-badge { display: none; }
}

.m3-back {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 999px;
    border: 0; cursor: pointer; padding: 0;
    display: grid; place-items: center;
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    position: relative; overflow: hidden;
    transition: box-shadow .2s ease, transform .15s ease, background .15s ease;
}
.m3-back svg { width: 21px; height: 21px; pointer-events: none; }
.m3-back:hover { box-shadow: var(--md-elev-1); background: #bcd9c8; }
.m3-back:active { transform: scale(.93); }
.m3-back:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }
/* نسخة ملونة تتكيف مع لون البانر الذي تجاوره */
.m3-back.on-light { background: #fff; border: 1.5px solid var(--md-outline-variant); color: var(--md-on-surface); }
.m3-back.on-light:hover { background: var(--md-surface-container-high); }

/* ---------- تعميم الشكل الحبلي والحركة على شاشات الأدوات ---------- */
#view-help button,
#view-salary button,
#view-account button,
#view-ocr-timeline button,
#view-timeline button,
#view-ocr button,
#view-chart-studio button,
#view-glossary button:not(.m3-back) {
    border-radius: 999px;
    transition: box-shadow .2s ease, transform .15s ease, background-color .15s ease, border-color .15s ease;
}
#view-help button:hover,
#view-salary button:hover,
#view-account button:hover,
#view-ocr-timeline button:hover,
#view-timeline button:hover,
#view-ocr button:hover,
#view-chart-studio button:hover,
#view-glossary button:not(.m3-back):hover {
    box-shadow: var(--md-elev-1);
    transform: translateY(-1px);
}
#view-help button:focus-visible,
#view-salary button:focus-visible,
#view-account button:focus-visible,
#view-ocr-timeline button:focus-visible,
#view-timeline button:focus-visible,
#view-ocr button:focus-visible,
#view-chart-studio button:focus-visible,
#view-glossary button:focus-visible {
    outline: 3px solid var(--md-primary); outline-offset: 2px;
}

/* حقول الإدخال في شاشات الأدوات فقط (لا يمس المحررات) */
#view-salary :is(input, select, textarea),
#view-account :is(input, select, textarea),
#view-ocr-timeline :is(input, select, textarea),
#view-timeline :is(input, select, textarea),
#view-ocr :is(input, select, textarea),
#view-chart-studio :is(input, select, textarea),
#view-glossary :is(input, select, textarea) {
    transition: border-color .15s ease, box-shadow .15s ease;
}
#view-salary :is(input, select, textarea):focus,
#view-account :is(input, select, textarea):focus,
#view-ocr-timeline :is(input, select, textarea):focus,
#view-timeline :is(input, select, textarea):focus,
#view-ocr :is(input, select, textarea):focus,
#view-chart-studio :is(input, select, textarea):focus,
#view-glossary :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--md-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,109,71,.14) !important;
}

/* ---------- التقويم المدرسي بأزرار M3 ---------- */
.cal-wrap .cal-back, .cal-wrap .cal-print {
    border-radius: 999px !important;
    padding: 9px 18px !important;
    font-weight: 800 !important;
    display: inline-flex; align-items: center; gap: 6px;
    transition: box-shadow .2s ease, transform .15s ease, background-color .15s ease;
}
.cal-wrap .cal-back:hover, .cal-wrap .cal-print:hover {
    box-shadow: var(--md-elev-1);
    transform: translateY(-1px);
}
.cal-wrap .cal-back:focus-visible, .cal-wrap .cal-print:focus-visible {
    outline: 3px solid var(--md-primary); outline-offset: 2px;
}
/* ملاحظة: #view-editor وصفحات A4 (.a4-page) وكانفس الخريطة الذهنية
   ومساحة معاينة المبيان خارج نطاق المحددات أعلاه عمداً — مناطق محمية */

@media (max-width: 640px) {
    #view-dashboard .m3-card .m3-icon-tile {
        width: 42px;
        height: 42px;
        font-size: 21px;
    }
    #view-dashboard .tools-grid .welcome-tool .m3-icon-tile.sm {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }
}

/* ============================================================
   الشعار الرسمي الحديث (Brand Mark) — الهيدر + الهيرو
   ============================================================ */
.brand-logo-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 13px; padding: 2px;
    background: #fff;
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-xs);
    cursor: pointer; position: relative; overflow: hidden;
}
.brand-logo {
    display: block; width: 100%; height: 100%;
    border-radius: 11px;
    transition: transform .28s ease;
}
.brand-logo-wrap:hover .brand-logo { transform: scale(1.05); }
.brand-logo-wrap::after { display: none; }

/* أفاتار بوابة المستخدم — تصميم متطور */
.hdr-user-portal {
    position: relative;
    width: 40px; height: 40px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981 0%, #0d9488 55%, #06b6d4 100%);
    color: #fff;
    font-weight: 900; font-size: 17px;
    letter-spacing: .5px;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    border: none; padding: 0; cursor: pointer;
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.35),
        inset 0 -2px 4px rgba(0,0,0,.25),
        0 6px 16px rgba(6,95,70,.45);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, filter .22s ease;
}
/* هالة متدرجة دوّارة حول الأفاتار */
.hdr-user-portal::before {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 999px;
    background: conic-gradient(from 0deg, #34d399, #22d3ee, #a78bfa, #f59e0b, #34d399);
    filter: blur(5px);
    opacity: .75;
    z-index: -1;
    animation: avatar-halo-spin 6s linear infinite;
}
@keyframes avatar-halo-spin { to { transform: rotate(360deg); } }
/* نقطة حالة الاتصال السحابي */
.hdr-user-portal::after {
    content: '';
    position: absolute;
    bottom: 0; inset-inline-end: 0;
    width: 11px; height: 11px;
    border-radius: 999px;
    background: #22c55e;
    border: 2px solid #1b2430;
    box-shadow: 0 0 8px rgba(34,197,94,.95);
    animation: avatar-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes avatar-dot-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.3); opacity: .65; }
}
.hdr-user-portal:hover {
    transform: translateY(-3px) scale(1.07);
    filter: brightness(1.12) saturate(1.15);
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.35),
        inset 0 -2px 4px rgba(0,0,0,.25),
        0 10px 24px rgba(13,148,136,.60);
}
.hdr-user-portal:hover::before { opacity: 1; animation-duration: 2.5s; }
.hdr-user-portal:active { transform: scale(.92); }
.hdr-user-portal:focus-visible { outline: 3px solid #c8a24b; outline-offset: 4px; }

/* باقة احترافية — هالة ذهبية ونقطة علوية */
.hdr-user-portal.is-pro::before {
    background: conic-gradient(from 0deg, #fbbf24, #fde68a, #f59e0b, #fbbf24);
}
.hdr-user-portal.is-pro::after { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.95); }

/* نسخة الهيرو الكبيرة */
.m3-hero-brand {
    position: relative; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 92px; height: 92px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-md);
}
.m3-hero-logo {
    display: block; width: 66px; height: 66px;
    border-radius: 17px;
}
@keyframes brand-float { 0%, 100% { transform: none; } }
.m3-brand-shine { display: none; }

@media (max-width: 640px) {
    .m3-hero-brand { width: 68px; height: 68px; border-radius: 20px; }
    .m3-hero-logo  { width: 48px; height: 48px; border-radius: 12px; }
}

/* ============================================================
   تطوير شريط الأدوات — لمعة ورفع خفيف عند المرور
   ============================================================ */
.hdr-ico {
    position: relative; overflow: hidden;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.hdr-ico::after {
    content: ''; position: absolute; top: 0; inset-inline-start: -70%;
    width: 45%; height: 100%; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-18deg);
}
.hdr-ico:hover::after { animation: brand-sheen .6s ease forwards; }
.hdr-ico:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.30); }
.hdr-ico:active { transform: scale(.93); }
.hdr-ico:focus-visible { outline: 3px solid #c8a24b; outline-offset: 2px; }

#view-dashboard .m3-toolbar .ico-btn {
    position: relative; overflow: hidden;
    transition: transform .18s ease, background .18s ease,
                box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
#view-dashboard .m3-toolbar .ico-btn::after {
    content: ''; position: absolute; top: 0; inset-inline-start: -70%;
    width: 45%; height: 100%; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(16,185,129,.22), transparent);
    transform: skewX(-18deg);
}
#view-dashboard .m3-toolbar .ico-btn:hover:not(.is-on)::after { animation: brand-sheen .6s ease forwards; }
#view-dashboard .m3-toolbar .ico-btn:hover:not(.is-on) {
    transform: translateY(-2px);
    border-color: #10b981;
    color: #047857;
    box-shadow: 0 8px 20px rgba(16,185,129,.18);
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .brand-logo-wrap::after,
    .hdr-ico::after,
    #view-dashboard .m3-toolbar .ico-btn::after { animation: none !important; content: none; }
    .m3-hero-logo { animation: none !important; }
    .m3-brand-shine { animation: none !important; opacity: 0; }
    .hdr-user-portal::before,
    .hdr-user-portal::after { animation: none !important; }
}

/* ============================================================
   الواجهة الرئيسية (Neutral Landing 2026)
   ============================================================ */

/* ---- خلفية الشاشة الرئيسية: أورورا حية + ديكور هندسي ---- */
#view-dashboard {
    position: relative;
    background:
        radial-gradient(46rem 32rem at 92% -6%, rgba(11, 107, 79, .13), transparent 60%),
        radial-gradient(40rem 30rem at 2% 8%, rgba(14, 116, 144, .11), transparent 58%),
        radial-gradient(38rem 38rem at 50% 112%, rgba(59, 130, 246, .09), transparent 62%);
}
/* ديكور زليج هندسي خفيف يتنفس ببطء */
#view-dashboard::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='none' stroke='%230b6b4f' stroke-width='1.1'%3E%3Cpath d='M42 4 80 42 42 80 4 42Z'/%3E%3Cpath d='M42 18 66 42 42 66 18 42Z'/%3E%3Ccircle cx='42' cy='42' r='6'/%3E%3C/g%3E%3C/svg%3E");
    animation: aurora-breathe 14s ease-in-out infinite;
}
@keyframes aurora-breathe {
    0%, 100% { opacity: .045; transform: scale(1); }
    50%      { opacity: .085; transform: scale(1.04); }
}
#view-dashboard > .dash-shell { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { #view-dashboard::before { animation: none; } }

/* ---- الهيرو ---- */
.hero-brand-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; border-radius: 20px; padding: 3px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    position: relative;
    /* طفو دوري ناعم — GPU فقط عبر transform */
    will-change: transform;
    animation: hero-float 4.5s ease-in-out infinite;
}
/* هالة زمردية ناعمة حول الشعار */
.hero-brand-wrap::before {
    content: '';
    position: absolute; inset: -14px;
    border-radius: 28px;
    background: radial-gradient(circle, rgba(11, 107, 79, .22), transparent 70%);
    z-index: -1;
    animation: aurora-breathe 8s ease-in-out infinite;
}
/* توهج ثانٍ نابض يعزز الإحساس بالطفو فوق المحتوى */
.hero-brand-wrap::after {
    content: '';
    position: absolute; inset: -26px;
    border-radius: 36px;
    background: radial-gradient(circle, rgba(14, 116, 144, .14), transparent 65%);
    z-index: -2;
    pointer-events: none;
    animation: aurora-breathe 6s ease-in-out infinite reverse;
}
@keyframes hero-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -7px, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-brand-wrap, .hero-brand-wrap::before, .hero-brand-wrap::after { animation: none; }
}
.hero-brand-logo { display: block; width: 100%; height: 100%; border-radius: 17px; }
.hero-eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: .12em;
    color: var(--primary); margin: 0;
}
.hero-title {
    font-family: var(--brand-font-display);
    font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.3; font-weight: 800;
    margin: 0; letter-spacing: -.01em;
    /* تدرج زمردي عميق — عنوان 2026 */
    background: linear-gradient(120deg, var(--ink-1) 0%, #0b6b4f 55%, #0e7490 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hero-sub {
    font-size: 15px; line-height: 1.75; font-weight: 500;
    color: var(--ink-2); max-width: 56ch; margin: 0;
}

/* ---- الأزرار ---- */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border-radius: 10px; border: 1px solid var(--primary);
    background: var(--primary); color: var(--primary-ink);
    font-size: 13.5px; font-weight: 700; cursor: pointer;
    box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1),
                background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-primary:hover {
    background: var(--primary-hover); border-color: var(--primary-hover);
    box-shadow: var(--shadow-md), 0 8px 20px -8px rgba(11, 107, 79, .5);
    transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border-radius: 10px; border: 1px solid var(--border-2);
    background: var(--glass-bg); color: var(--ink-1);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-size: 13.5px; font-weight: 700; cursor: pointer;
    transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-secondary:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border-2));
    background: var(--glass-bg-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.btn-primary:focus-visible, .btn-secondary:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}

/* ---- الشرائح (chips) — زجاج 2026 ---- */
.dash-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--glass-bg);
    /* توحيد قيمة الطمس مع بقية مكونات الواجهة (قيمة الخطة blur(10px)) */
    backdrop-filter: blur(10px) saturate(1.5);
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    border: 1px solid var(--glass-border);
    color: var(--ink-2);
    border-radius: 999px; padding: 7px 14px;
    font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums;
    box-shadow: var(--glass-highlight);
    transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color .18s ease, box-shadow .18s ease;
}
.dash-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.dash-chip i { color: var(--primary); font-size: 12px; }
.dash-chip-account:hover { border-color: var(--primary); box-shadow: var(--shadow-xs), 0 6px 16px -8px rgba(11, 107, 79, .4); }

/* ---- رؤوس الأقسام ---- */
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.section-eyebrow {
    font-size: 11px; font-weight: 800; letter-spacing: .14em;
    color: var(--primary); margin: 0 0 4px;
}
.section-title {
    font-size: 20px; font-weight: 800; color: var(--ink-1); margin: 0; line-height: 1.4;
    position: relative; padding-right: 14px;
}
/* شريط زمردي يميز عنوان كل قسم */
.section-title::before {
    content: '';
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 22px; border-radius: 2px;
    background: linear-gradient(180deg, var(--primary), #0e7490);
}
.section-desc {
    font-size: 13px; color: var(--ink-2); margin: 6px 0 0; line-height: 1.7; max-width: 60ch;
}
.section-action {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: var(--primary);
    background: none; border: 0; cursor: pointer; padding: 4px 2px;
    transition: color .18s ease;
}
.section-action:hover { color: var(--primary-hover); }

/* ---- بطاقات البوابات — زجاج 2026 + هالة لونية لكل بوابة ---- */
/* شبكة البوابات: منظور ثلاثي الأبعاد مشترك يهيئ تأثير Hover Tilt */
#view-dashboard .portal-card {
    display: flex; flex-direction: column; gap: 8px;
    text-align: right;
    padding: 20px; border-radius: var(--radius-l);
    /* زجاج مصنفر: backdrop-filter بقيمة الخطة blur(10px) فوق المحتوى */
    background: var(--glass-bg-strong);
    backdrop-filter: blur(10px) saturate(1.5);
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    cursor: pointer;
    position: relative; overflow: hidden;
    /* تسريع GPU: طبقة تركيب مستقلة — الحركة كلها transform/opacity فقط */
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translate3d(0, var(--lift, 0px), 0);
    transition: transform .26s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow .26s ease, border-color .26s ease;
}
/* الهالة اللونية الخاصة بكل بوابة (تتوهج عند التحويم) */
.portal-card::before {
    content: '';
    position: absolute; top: -40%; left: -20%; right: -20%; height: 90%;
    pointer-events: none; z-index: 0;
    opacity: 0;
    background: radial-gradient(circle at 50% 100%, var(--portal-glow, rgba(11,107,79,.35)), transparent 70%);
    transition: opacity .3s ease;
}
.portal-card > * { position: relative; z-index: 1; }
#view-dashboard .portal-card:hover {
    /* الرفع عبر متغير --lift حتى لا يطمس زاوية الميل المحسوبة من JS */
    --lift: -4px;
    border-color: var(--portal-accent, color-mix(in srgb, var(--primary) 30%, var(--border-1)));
    box-shadow: 0 18px 40px -16px rgba(20, 28, 36, .28),
                inset 0 1px 0 0 rgba(255, 255, 255, .7);
}
.portal-card:hover::before { opacity: 1; }
/* لمسة ضوئية مائلة تعبر الزجاج عند التحويم (Shine sweep) — opacity/transform فقط */
#view-dashboard .portal-card::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 2;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .38) 48%, transparent 62%);
    transform: translate3d(130%, 0, 0);
    opacity: 0;
}
#view-dashboard .portal-card:hover::after {
    opacity: 1;
    transform: translate3d(-130%, 0, 0);
    transition: transform .7s cubic-bezier(0.22, 1, 0.36, 1), opacity .12s ease;
}
@media (prefers-reduced-motion: reduce) {
    #view-dashboard .portal-card::after { display: none; }
}
#view-dashboard .portal-card:active { --lift: -1px; }
.portal-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* هوية كل بوابة — ألوان مستلة من طبيعة العمل.
   ⚠️ كانت مثبّتة بـ :nth-child فتتبدّل الألوان عند تغيير ترتيب البطاقات.
   صُنّفت الآن بصنف صريح (pc-*) على كل بطاقة + احتياطي :nth-child. */
.portal-card.pc-exams     { --portal-glow: rgba(11, 107, 79, .38);  --portal-accent: rgba(11, 107, 79, .45);  --portal-icon-bg: #dcfce7; --portal-icon-ink: #14532d; }
.portal-card.pc-planning  { --portal-glow: rgba(14, 116, 144, .36); --portal-accent: rgba(14, 116, 144, .42); --portal-icon-bg: #cffafe; --portal-icon-ink: #155e75; }
.portal-card.pc-repo      { --portal-glow: rgba(124, 58, 237, .36);  --portal-accent: rgba(124, 58, 237, .44); --portal-icon-bg: #ede9fe; --portal-icon-ink: #5b21b6; }
.portal-card.pc-primary   { --portal-glow: rgba(217, 119, 6, .34);   --portal-accent: rgba(217, 119, 6, .40);  --portal-icon-bg: #fef3c7; --portal-icon-ink: #92400e; }
.portal-card.pc-tools     { --portal-glow: rgba(59, 130, 246, .34);  --portal-accent: rgba(59, 130, 246, .40); --portal-icon-bg: #dbeafe; --portal-icon-ink: #1e3a8a; }
.portal-card.pc-admin     { --portal-glow: rgba(180, 83, 9, .34);   --portal-accent: rgba(180, 83, 9, .40);   --portal-icon-bg: #ffedd5; --portal-icon-ink: #9a3412; }
/* احتياطي لو أُضيفت بطاقة بلا صنف */
.portal-card:nth-child(1) { --portal-glow: rgba(11, 107, 79, .38);  --portal-accent: rgba(11, 107, 79, .45);  --portal-icon-bg: #dcfce7; --portal-icon-ink: #14532d; }
.portal-card:nth-child(2) { --portal-glow: rgba(14, 116, 144, .36); --portal-accent: rgba(14, 116, 144, .42); --portal-icon-bg: #cffafe; --portal-icon-ink: #155e75; }
.portal-card:nth-child(3) { --portal-glow: rgba(124, 58, 237, .36);  --portal-accent: rgba(124, 58, 237, .44); --portal-icon-bg: #ede9fe; --portal-icon-ink: #5b21b6; }
.portal-card:nth-child(4) { --portal-glow: rgba(217, 119, 6, .34);   --portal-accent: rgba(217, 119, 6, .40);  --portal-icon-bg: #fef3c7; --portal-icon-ink: #92400e; }
.portal-card:nth-child(5) { --portal-glow: rgba(59, 130, 246, .34);  --portal-accent: rgba(59, 130, 246, .40); --portal-icon-bg: #dbeafe; --portal-icon-ink: #1e3a8a; }
.portal-card:nth-child(6) { --portal-glow: rgba(180, 83, 9, .34);   --portal-accent: rgba(180, 83, 9, .40);   --portal-icon-bg: #ffedd5; --portal-icon-ink: #9a3412; }

/* ⭐ بطاقة المستودع في الواجهة الرئيسية — بصمة بنفسجية مستقلة */
.portal-card--featured { border-color: rgba(139, 92, 246, .34) !important; }
.portal-card--featured .portal-card-title { color: #5b21b6; }
.portal-card--featured .portal-card-link { color: #7c3aed; }

.portal-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--portal-icon-bg, var(--primary-soft));
    color: var(--portal-icon-ink, var(--primary));
    font-size: 17px; margin-bottom: 4px;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .65);
    /* أيقونة مجسمة تطفو على طبقة translateZ أعلى وجه البطاقة */
    transform: translateZ(0);
    will-change: transform;
    transition: transform .24s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .24s ease;
}
#view-dashboard .portal-card:hover .portal-card-icon {
    /* عمق رقمي: الأيقونة تتقدم نحو المستخدم أثناء ميل البطاقة */
    transform: translateZ(26px) scale(1.1) rotate(-3deg);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .75),
                0 8px 18px -8px var(--portal-glow, rgba(11,107,79,.5));
}
/* ألوان أيقونات البطاقات صُنّفت أعلاه (pc-*) على البطاقة نفسها، فتكفي للموروث.
   (كانت هنا بـ :nth-child فكانت تتغلّب على ما سبق وتُفسد التمييز المستقل.) */

.portal-card-title { font-size: 15px; font-weight: 800; color: var(--ink-1); margin: 0; }
.portal-card-desc { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); margin: 0; flex: 1; }
.portal-card-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: var(--primary); margin-top: 6px;
}
.portal-card-link i { font-size: 10px; transition: transform .2s ease; }
.portal-card:hover .portal-card-link i { transform: translateX(-3px); }

/* منظور مشترك على حاويات البطاقات: يمنح عمقاً حقيقياً لطبقات translateZ
   (الأيقونات المجسمة) داخل البطاقات المائلة — يُعالج بالكامل في GPU */
#view-dashboard div:has(> .portal-card),
#portal-hub-cards { perspective: 900px; }

/* بطاقات الإحصائيات — باستيل الصورة: بنفسجي · عنبري · أزرق · أخضر */
#dash-stats-grid .stat-wheel-card:nth-child(1) {
    background: #E6DEF5; border-color: rgba(69, 39, 160, .18);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
#dash-stats-grid .stat-wheel-card:nth-child(1) .stat-num { color: #4527A0; }
#dash-stats-grid .stat-wheel-card:nth-child(1) .stat-label { color: rgba(69, 39, 160, .72); }
#dash-stats-grid .stat-wheel-card:nth-child(2) {
    background: #FFF0D6; border-color: rgba(141, 91, 18, .18);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
#dash-stats-grid .stat-wheel-card:nth-child(2) .stat-num { color: #8D5B12; }
#dash-stats-grid .stat-wheel-card:nth-child(2) .stat-label { color: rgba(141, 91, 18, .74); }
#dash-stats-grid .stat-wheel-card:nth-child(3) {
    background: #DCEEFB; border-color: rgba(13, 71, 161, .16);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
#dash-stats-grid .stat-wheel-card:nth-child(3) .stat-num { color: #0D47A1; }
#dash-stats-grid .stat-wheel-card:nth-child(3) .stat-label { color: rgba(13, 71, 161, .72); }
#dash-stats-grid .stat-wheel-card:nth-child(4) {
    background: #E4F0D5; border-color: rgba(51, 105, 30, .18);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
#dash-stats-grid .stat-wheel-card:nth-child(4) .stat-num { color: #33691E; }
#dash-stats-grid .stat-wheel-card:nth-child(4) .stat-label { color: rgba(51, 105, 30, .74); }



/* ---- بوابة البطاقة التقنية — معرض الأنواع (زجاج 2026) ---- */
.tc-hero {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-l);
    padding: 20px 24px;
    box-shadow: var(--glass-shadow);
}
.tc-eyebrow {
    font-size: 11px; font-weight: 800; letter-spacing: .14em;
    color: var(--primary); display: block; margin-bottom: 4px;
}
.tc-type-card {
    display: flex; flex-direction: column; gap: 8px;
    text-align: right;
    padding: 20px; border-radius: var(--radius-l);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid var(--border-1);
    box-shadow: var(--glass-shadow);
    cursor: pointer;
    position: relative; overflow: hidden;
    transition: transform .26s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow .26s ease, border-color .26s ease;
}
.tc-type-card::before {
    content: '';
    position: absolute; top: -40%; left: -20%; right: -20%; height: 90%;
    pointer-events: none; z-index: 0; opacity: 0;
    background: radial-gradient(circle at 50% 100%, rgba(11,107,79,.3), transparent 70%);
    transition: opacity .3s ease;
}
.tc-type-card > * { position: relative; z-index: 1; }
.tc-type-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-1));
    box-shadow: 0 18px 40px -16px rgba(20, 28, 36, .28),
                inset 0 1px 0 0 rgba(255, 255, 255, .7);
}
.tc-type-card:hover::before { opacity: 1; }
.tc-type-card:active { transform: translateY(-1px) scale(.99); }
.tc-type-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tc-type-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--tc-ic-bg, var(--primary-soft));
    color: var(--tc-ic-ink, var(--primary));
    font-size: 17px; margin-bottom: 4px;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .65);
    transition: transform .24s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .24s ease;
}
.tc-type-card:hover .tc-type-icon {
    transform: scale(1.1) rotate(-3deg);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .75), 0 8px 18px -8px rgba(20,28,36,.35);
}
.tc-type-title { font-size: 15px; font-weight: 800; color: var(--ink-1); margin: 0; }
.tc-type-desc { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); margin: 0; flex: 1; }
.tc-type-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: var(--primary); margin-top: 6px;
}
.tc-type-link i { font-size: 10px; transition: transform .2s ease; }
.tc-type-card:hover .tc-type-link i { transform: translateX(-3px); }

/* ---- البحث والنتائج (فوق خلفية فاتحة) — زجاج 2026 ---- */
#view-dashboard .dash-search-wrap input {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    border: 1px solid var(--border-2); color: var(--ink-1);
    padding: 11px 16px; border-radius: 10px;
    box-shadow: var(--glass-highlight);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#view-dashboard .dash-search-wrap input::placeholder { color: var(--ink-3); font-weight: 600; }
#view-dashboard .dash-search-wrap input:focus {
    border-color: var(--primary); outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent),
                0 8px 20px -10px rgba(11, 107, 79, .4);
    background: #fff;
}
#view-dashboard #site-search-results {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
#view-dashboard #site-search-results button { background: transparent; color: var(--ink-1); }
#view-dashboard #site-search-results button:hover { background: var(--primary-soft); }
#view-dashboard #site-search-results button.on { background: var(--primary-soft); color: var(--primary); }
/* ظهور متدرج (staggered fade) لعناصر نتائج البحث — opacity/transform فقط */
#view-dashboard #site-search-results:not(.hidden) button {
    animation: search-item-in .28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#view-dashboard #site-search-results:not(.hidden) button:nth-child(2) { animation-delay: .04s; }
#view-dashboard #site-search-results:not(.hidden) button:nth-child(3) { animation-delay: .08s; }
#view-dashboard #site-search-results:not(.hidden) button:nth-child(4) { animation-delay: .12s; }
#view-dashboard #site-search-results:not(.hidden) button:nth-child(n+5) { animation-delay: .16s; }
@keyframes search-item-in {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    #view-dashboard #site-search-results:not(.hidden) button { animation: none; }
}

/* ---- أدوات التحكم في الهيرو — زجاجية ---- */
#view-dashboard .hero-tools .ico-btn {
    background: var(--glass-bg);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-color: var(--glass-border); color: var(--ink-2);
    box-shadow: var(--glass-highlight);
}
#view-dashboard .hero-tools .ico-btn:hover:not(.is-on) {
    background: var(--glass-bg-strong); border-color: var(--primary); color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px rgba(11, 107, 79, .5);
}
#view-dashboard .hero-tools .ico-btn.is-on {
    background: var(--primary); border-color: var(--primary); color: #fff;
    box-shadow: 0 6px 16px -8px rgba(11, 107, 79, .6);
}
#view-dashboard .notif-panel { margin-right: auto; margin-left: auto; }

/* ---- بطاقات الإحصائيات (تُحقن من app.js) — زجاج مصنفر 2026 ---- */
.stat-wheel-card {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(10px) saturate(1.5);
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-l); padding: 18px 16px; text-align: center;
    box-shadow: var(--glass-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
.stat-wheel-card:hover { box-shadow: var(--shadow-md), inset 0 1px 0 0 rgba(255,255,255,.7); transform: translate3d(0, -2px, 0); }
.stat-wheel-card .stat-num { font-size: 26px; font-weight: 800; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.stat-wheel-card .stat-label { font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin-top: 4px; }

/* ---- المشاريع الأخيرة (تُحقن من app.js) ---- */
.recent-project-card {
    /* زجاج مصنفر متسق مع بطاقات البوابات بدل الأبيض المصمت */
    background: var(--glass-bg-strong);
    backdrop-filter: blur(10px) saturate(1.5);
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-l) !important; padding: 14px;
    box-shadow: var(--glass-shadow);
    /* ميل ثلاثي الأبعاد خفيف عبر متغيرات محرك initTiltCards — GPU */
    will-change: transform;
    backface-visibility: hidden;
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translate3d(0, var(--lift, 0px), 0);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.recent-project-card:hover { --lift: -2px; box-shadow: var(--shadow-md); border-color: var(--border-2) !important; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
}

/* ============================================================
   مستودع الأساتذة — أزرار التبويب
   ============================================================ */
.repo-btn {
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    background: #fff;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    transition: all .2s ease;
}
.repo-btn:hover { background: #f1f5f9; }
.repo-btn.is-on {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
}

/* ============================================================
   تحسينات البوابة الحديثة - Recent Projects و المشاريع
   ============================================================ */

/* بطاقات المشاريع الأخيرة */
.recent-project-card {
    position: relative;
    overflow: hidden;
}

/* ============================================================
   لوحة التلوين الاحترافية — Phase 1: نواة التحرير
   (شريط الأدوات، الخصائص، الشبكة، التكبير، لوحة الألوان)
   ============================================================ */

/* ---- مساحة العمل + منطقة التمرير ---- */
.clb-workspace {
    flex: 1; min-width: 0; min-height: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 16px 22px; gap: 10px;
    background:
        radial-gradient(900px 380px at 50% 0%, #ecfdf5 0%, transparent 62%),
        #eef2f7;
}
.clb-stage {
    flex: 1; min-width: 0; width: 100%;
    display: flex; align-items: flex-start; justify-content: center;
    overflow: auto; padding: 4px 4px 24px;
}

/* ---- الشريط العلوي ---- */
.clb-toolbar {
    width: 100%; max-width: 860px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 6px; padding: 7px 10px;
    background: #fff; border: 1px solid #dbe3ee; border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15,23,42,.07);
}
.clb-toolbar .btn {
    border: 1px solid #cbd5e1; background: linear-gradient(180deg,#ffffff,#f8fafc);
    color: #334155; border-radius: 10px; padding: 7px 11px;
    font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit;
    transition: all .15s; min-width: 34px; white-space: nowrap;
}
.clb-toolbar .btn:hover:not(:disabled) { background: #ecfdf5; border-color: #22c55e; color: #14532d; }
.clb-toolbar .btn:disabled { opacity: .38; cursor: default; }
.clb-tb-group { display: flex; align-items: center; gap: 5px; padding: 0 5px; border-inline-end: 1px solid #e2e8f0; }
.clb-tb-group:last-child { border-inline-end: 0; }
.clb-toolbar .btn-print { background:#16a34a; border-color:#16a34a; color:#fff; }
.clb-toolbar .btn-print:hover { background:#15803d; color:#fff; border-color:#15803d; }
.clb-toolbar .btn-newline { background:#0ea5e9; border-color:#0ea5e9; color:#fff; }
.clb-toolbar .btn-newline:hover { background:#0284c7; color:#fff; border-color:#0284c7; }
.clb-toolbar .btn-clear { background:#dc2626; border-color:#dc2626; color:#fff; }
.clb-toolbar .btn-clear:hover { background:#b91c1c; color:#fff; border-color:#b91c1c; }
.clb-toolbar .btn-erase { background:#f59e0b; border-color:#f59e0b; color:#fff; }
.clb-toolbar .btn-erase:hover { background:#d97706; color:#fff; border-color:#d97706; }
.clb-toolbar .btn-erase.active { background:#dc2626; border-color:#dc2626; animation: erasePulse 1.2s infinite; }

.clb-kbd-hint {
    width: 100%; max-width: 860px; text-align: center;
    font-size: 10.5px; font-weight: 700; color: #64748b;
    background: #ffffffcc; border: 1px dashed #cbd5e1; border-radius: 12px;
    padding: 6px 10px; line-height: 1.9; margin: 0;
}
.clb-kbd-hint b { color: #0f172a; background: #f1f5f9; border-radius: 4px; padding: 1px 4px; }

/* ---- ورقة A4 داخل منطقة قابلة للتكبير ---- */
.clb-stage .canvas-container-wrapper {
    width: 794px; flex: 0 0 auto;
    transform-origin: top center;
    box-shadow: 0 10px 34px rgba(15,23,42,.16);
}

/* ---- لوحة الأدوات الجانبية (تلوين) ---- */
.coloring-tools { background: #f8fafc; }
.coloring-tools .mm-tools-section-head { background: linear-gradient(90deg,#0f766e,#22c55e); }
.coloring-tools .mm-tools-section:nth-of-type(2) .mm-tools-section-head { background: linear-gradient(90deg,#6366f1,#8b5cf6); }
.coloring-tools .mm-tools-section:nth-of-type(3) .mm-tools-section-head { background: linear-gradient(90deg,#db2777,#f43f5e); }
.coloring-tools .mm-tools-section:nth-of-type(4) .mm-tools-section-head { background: linear-gradient(90deg,#0284c7,#38bdf8); }
.coloring-tools .mm-tools-section:nth-of-type(5) .mm-tools-section-head { background: linear-gradient(90deg,#ea580c,#f59e0b); }
.coloring-tools .mm-tools-section:nth-of-type(6) .mm-tools-section-head { background: linear-gradient(90deg,#0f172a,#475569); }
.coloring-tools .mm-tools-section:nth-of-type(7) .mm-tools-section-head { background: linear-gradient(90deg,#7c3aed,#c026d3); }

.clb-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
.clb-quick-grid .item-btn { min-height: 30px; padding: 5px 4px; font-size: 11px; }
.clb-sub {
    font-size: 9.5px; font-weight: 900; color: #64748b;
    margin: 8px 0 4px; padding-bottom: 3px; border-bottom: 1px dashed #e2e8f0;
}

.clb-zoom-row { display: flex; align-items: center; gap: 5px; }
.clb-zoom-row .item-btn { flex: 1; min-width: 0; }
.clb-zoom-val {
    flex: 0 0 52px; text-align: center; font-size: 11px; font-weight: 900;
    color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 2px;
}
.clb-check {
    display: flex; align-items: center; gap: 6px; margin-top: 6px;
    font-size: 11px; font-weight: 800; color: #334155; cursor: pointer;
}
.clb-check input { width: 14px; height: 14px; accent-color: #16a34a; cursor: pointer; }

/* ---- لوحة الخصائص السياقية ---- */
.clb-props { display: flex; flex-direction: column; gap: 7px; }
.clb-props-empty { font-size: 10.5px; font-weight: 700; color: #94a3b8; line-height: 1.7; margin: 0; text-align: center; padding: 6px 2px; }
.clb-prop-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 6px; }
.clb-prop-row > label { font-size: 10px; font-weight: 800; color: #475569; }
.clb-prop-row input[type=number], .clb-prop-row input[type=text], .clb-prop-row select {
    width: 100%; min-width: 0; border: 1px solid #cbd5e1; border-radius: 8px;
    padding: 5px 6px; font-size: 11px; font-weight: 700; color: #0f172a;
    background: #fff; font-family: inherit;
}
.clb-prop-row input:focus, .clb-prop-row select:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.14); }
.clb-prop-row input[type=range] { width: 100%; accent-color: #16a34a; }
.clb-prop-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.clb-color-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.clb-color-pair label { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; color: #475569; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 3px 5px; }
.clb-color-pair input[type=color] { flex: 1; min-width: 0; width: 100%; height: 20px; border: 0; padding: 0; background: none; cursor: pointer; }
.clb-prop-actions { display: flex; gap: 5px; margin-top: 2px; }
.clb-prop-actions .item-btn { flex: 1; min-height: 28px; font-size: 10.5px; padding: 4px; }
.clb-prop-title {
    font-size: 10.5px; font-weight: 900; color: #0f172a; background: #ecfdf5;
    border: 1px solid #a7f3d0; border-radius: 8px; padding: 4px 7px; margin: 0;
}

/* ---- لوحة الألوان ---- */
.clb-swatches { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 4px; }
.clb-sw {
    aspect-ratio: 1; border-radius: 7px; border: 2px solid #cbd5e1;
    cursor: pointer; padding: 0 !important; width: 100% !important; min-height: 0;
    transition: transform .12s;
}
.clb-sw:hover { transform: scale(1.12); border-color: #0f172a; }
.clb-sw.active { border-color: #0f172a; box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #0f172a; }
.clb-sw-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.clb-sw-custom label { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; color: #475569; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 3px 5px; }
.clb-sw-custom input[type=color] { flex: 1; min-width: 0; width: 100%; height: 22px; border: 0; padding: 0; background: none; cursor: pointer; }

/* ---- لوحة الأرقام والرموز ---- */
.clb-keypad { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; margin-top: 4px; }
.clb-shape-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
.clb-shape-grid .item-btn { min-height: 34px; font-size: 17px; padding: 4px; }
.clb-key {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
    font-size: 15px; font-weight: 900; color: #0f172a; cursor: pointer; padding: 0;
    font-family: inherit; transition: all .12s;
}
.clb-key:hover { background: #ecfdf5; border-color: #16a34a; color: #14532d; }
.clb-key:active { transform: scale(.94); }

@media (max-width: 900px) {
    .clb-tb-group { border-inline-end: 0; }
    .clb-kbd-hint { display: none; }
}

/* ---- مكتبة القوالب: بحث + تصفية ---- */
.clb-library .mm-tools-section-head { justify-content: space-between; }
.clb-lib-count {
    font-size: 10px; font-weight: 900; color: #fff;
    background: rgba(0,0,0,.22); border-radius: 20px; padding: 2px 8px;
}
.clb-lib-search { display: flex; gap: 5px; margin-bottom: 6px; }
.clb-lib-search input {
    flex: 1; min-width: 0; border: 1px solid #cbd5e1; border-radius: 9px;
    padding: 7px 9px; font-size: 11.5px; font-weight: 700; color: #0f172a;
    background: #fff; font-family: inherit;
}
.clb-lib-search input:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.13); }
.clb-lib-search .item-btn { flex: 0 0 32px; padding: 0; }
.clb-lib-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 7px; }
.clb-lib-filters select {
    width: 100%; min-width: 0; border: 1px solid #cbd5e1; border-radius: 8px;
    padding: 5px 6px; font-size: 10.5px; font-weight: 700; color: #0f172a;
    background: #fff; font-family: inherit; text-align: right;
}
.clb-lib-filters select:focus { outline: none; border-color: #16a34a; }
.clb-library .coloring-accordion { margin-bottom: 0; max-height: 460px; overflow-y: auto; padding-inline-end: 2px; }
.clb-library .acc-item.open .acc-content { max-height: none; }
.clb-library .acc-item.clb-empty { display: none; }
/* ⚠️ تجاوز القاعدة العامة .mm-tools button على رؤوس الأكورديون */
.mm-tools .clb-library .acc-header {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    border: 1px solid #dfe7ee; border-radius: 10px; font-weight: 800; text-align: right;
}
.acc-count {
    font-size: 9.5px; font-weight: 900; color: #64748b;
    background: #e2e8f0; border-radius: 20px; padding: 1px 7px; margin-inline-end: 6px;
}
.acc-item.open .acc-count { background: #a7f3d0; color: #065f46; }
/* أثناء البحث: فتح عدّة أقسام معاً */
.clb-library.searching .acc-item.open .acc-content { display: block; }
.clb-library .thumb-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
/* ⚠️ تجاوز القاعدة العامة .mm-tools button (عرض 100% + padding + خلفية) حتى لا تنهار الخلية */
.mm-tools .clb-library .thumb-btn {
    width: 100%; aspect-ratio: 1; padding: 4px; border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #dbe5ee; font-size: 0; text-align: center;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mm-tools .clb-library .thumb-btn img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.mm-tools .clb-library .acc-header { padding: 9px 11px; font-size: 11.5px; text-align: right; }

/* ---- شريط تلوين مناطق القالب ---- */
.clb-region-bar {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 9px;
    padding: 5px 7px; margin: 2px 0;
}
.clb-region-bar span { font-size: 10px; font-weight: 900; color: #065f46; margin-inline-end: auto; }
.clb-region-bar .item-btn { flex: 0 0 auto; min-height: 26px; padding: 3px 7px; font-size: 10px; }
.clb-props-note { font-size: 9.5px; font-weight: 700; color: #64748b; line-height: 1.6; margin: 2px 0 0; }
.clb-cur-color {
    display: inline-block; width: 12px; height: 12px; border-radius: 4px;
    border: 1.5px solid #0f172a; vertical-align: -2px; margin-inline-start: 4px;
}

/* =====لوحة التلوين الاحترافية - أسلوب الأ_accordion والشبكة===== */
.coloring-accordion { margin-bottom: 1rem; }
.acc-item { border: 1px solid #dfe7ee; border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: #f8fafc; box-shadow: 0 1px 0 rgba(15,23,42,.03); }
.acc-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: linear-gradient(180deg, #f8fafc 0%, #edf3f7 100%); border: none; cursor: pointer; font-weight: 800; color: #1e293b; border-radius: 12px; transition: all .18s ease; }
.acc-header:hover { background: linear-gradient(180deg, #eefcf5 0%, #dff7e9 100%); }
.acc-arrow { font-size: 12px; transition: transform 0.3s; color: #0f766e; }
.acc-content { display: none; padding: 12px; background: #fff; border-top: 1px solid #e2e8f0; }
.thumb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.thumb-btn { aspect-ratio: 1; border: 1px solid #dbe5ee; border-radius: 10px; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); cursor: pointer; padding: 6px; transition: all 0.18s ease; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.thumb-btn:hover { transform: translateY(-1px) scale(1.03); border-color: #16a34a; box-shadow: 0 6px 15px rgba(22,163,74,.12); }
.thumb-btn img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* حالة الفتح: إظهار المحتوى + دوران السهم + تمييز القسم */
.acc-item.open .acc-content { display: block; }
.acc-item.open .acc-arrow { transform: rotate(180deg); }
.acc-item.open { border-color: #22c55e; box-shadow: 0 4px 16px rgba(22,163,74,.12); }
.acc-item.open .acc-header { background: linear-gradient(180deg, #ecfdf5 0%, #dffaf0 100%); color: #065f46; }

/* داخل شريط أدوات لوحة التلوين: استعادة تصميم الأكورديون الكامل (تتجاوز .mm-tools button العامة) */
.mm-tools .coloring-accordion { margin-bottom: 0; }
.mm-tools .coloring-accordion .acc-item { margin-bottom: 8px; }
.mm-tools .coloring-accordion .acc-header { padding: 11px 12px; font-size: 12px; font-weight: 800; border: none; background: linear-gradient(180deg, #f8fafc 0%, #edf3f7 100%); }
.mm-tools .coloring-accordion .acc-header:hover { background: linear-gradient(180deg, #eefcf5 0%, #dff7e9 100%); }
.mm-tools .coloring-accordion .acc-item.open .acc-header { background: linear-gradient(180deg, #ecfdf5 0%, #dffaf0 100%); color: #065f46; }
.mm-tools .coloring-accordion .acc-title { font-size: 12px; }
.mm-tools .coloring-accordion .acc-arrow { font-size: 12px; }
.mm-tools .coloring-accordion .acc-content { padding: 10px; }
@media (max-width: 768px) { .thumb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* أزرار لوحة التلوين - الحفظ والمشاركة */
.btn-print { background: #10b981; color: #fff; padding: 10px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s; border: none; }
.btn-print:hover { background: #059669; transform: translateY(-1px); }
.btn-save { background: #059669; color: #fff; padding: 10px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s; border: none; }
.btn-save:hover { background: #047857; transform: translateY(-1px); }
.btn-share { background: #7c3aed; color: #fff; padding: 10px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s; border: none; }
.btn-share:hover { background: #6d28d9; transform: translateY(-1px); }

/* ورقة لوحة التلوين (A4) + ترويستها القابلة للطباعة */
.canvas-container-wrapper { width: 794px; max-width: 100%; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.3); border-radius: 4px; overflow: hidden; }
.coloring-sheet-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 2px dashed #cbd5e1; flex-wrap: wrap; }
.csh-field { font-weight: 800; font-size: 13px; color: #0f172a; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.csh-field input { border: none; border-bottom: 2px dotted #94a3b8; outline: none; background: transparent; font-weight: 700; font-size: 13px; font-family: 'Cairo', sans-serif; color: #0f172a; text-align: center; width: 110px; padding: 2px 4px; }
.csh-field input:focus { border-bottom-color: #006233; background: #f0fdf4; }
.csh-field input::placeholder { color: #cbd5e1; }
/* ✏️ شريط التعليمات داخل ورقة A4 (يُطبع مع اللوحة) */
.coloring-instr-bar { min-height: 38px; margin: 8px 12px 0; padding: 7px 12px; border: 1.5px solid #0f172a; border-radius: 10px; font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 14px; line-height: 1.6; outline: none; white-space: pre-wrap; word-break: break-word; background: #fef3c7; color: #0f172a; }
.coloring-instr-bar:focus { border-color: #006233; box-shadow: 0 0 0 2px rgba(0,98,51,.15); }
.coloring-instr-bar:empty::before { content: attr(data-ph); color: #94a3b8; font-weight: 600; }
.coloring-instr-tools { display: flex; align-items: center; gap: 10px; padding: 5px 14px 8px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 11px; }
.coloring-instr-tools .cit-label { font-weight: 800; color: #334155; }
.coloring-instr-tools label { display: flex; align-items: center; gap: 4px; font-weight: 800; color: #334155; cursor: pointer; }
.coloring-instr-tools input[type="color"] { width: 28px; height: 22px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0; background: #fff; cursor: pointer; }
.coloring-instr-tools .cit-btn { border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; cursor: pointer; color: #334155; }
.coloring-instr-tools .cit-btn:hover { background: #f1f5f9; }
/* ⤵️ أداة سطر جديد */
.btn-newline { background: #0ea5e9; color: #fff; padding: 10px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s; border: none; }
.btn-newline:hover { background: #0284c7; transform: translateY(-1px); }
/* 🧽 أداة الحذف بالنقر */
.btn-erase { background: #f59e0b; color: #fff; padding: 10px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s; border: none; }
.btn-erase:hover { background: #d97706; transform: translateY(-1px); }
.btn-erase.active { background: #dc2626; animation: erasePulse 1.2s infinite; }
@keyframes erasePulse { 0%,100% { opacity: 1; } 50% { opacity: .72; } }
/* 🔘 أزرار أدوات اللوحة الجانبية */
.item-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #cbd5e1; border-radius: 10px; padding: 7px 8px; font-size: 11.5px; font-weight: 800; color: #334155; cursor: pointer; transition: all .15s; font-family: inherit; white-space: nowrap; box-shadow: 0 1px 0 rgba(15,23,42,.03); }
.item-btn:hover { background: linear-gradient(180deg, #ecfdf5 0%, #dff7ea 100%); border-color: #22c55e; color: #14532d; }
.item-btn.active { background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%); border-color: #16a34a; color: #14532d; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }

.preschool-tools { display: flex; flex-direction: column; gap: 8px; }
.preschool-row { display: grid; grid-template-columns: 64px 1fr; gap: 6px; align-items: stretch; }
.preschool-row-secondary { grid-template-columns: 64px 1fr; }
.preschool-input {
    width: 100%; min-height: 40px; border: 1px solid #cbd5e1; border-radius: 10px;
    background: #fff; color: #0f172a; font-size: 20px; font-weight: 900; text-align: center;
    outline: none; box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
}
.preschool-input:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.preschool-field {
    display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px;
    padding: 0 8px; border: 1px solid #dfe7ee; border-radius: 10px; background: #f8fafc;
    color: #334155; font-size: 11px; font-weight: 900; white-space: nowrap;
}
.preschool-select {
    min-width: 36px; min-height: 28px; border: 1px solid #cbd5e1; border-radius: 8px;
    background: #fff; color: #0f172a; font-size: 11px; font-weight: 800; text-align: center;
    padding: 2px 4px;
}
.preschool-tools .item-btn.w-full { padding: 9px; text-align: center; font-weight: 900; }

@media (max-width: 420px) {
  .preschool-row, .preschool-row-secondary { grid-template-columns: 56px 1fr; }
}

.recent-project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.02) 50%, transparent 100%);
    pointer-events: none;
}

.recent-project-card:hover::before {
    animation: shimmer 0.6s ease-in-out;
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.recent-project-card button {
    font-family: 'Cairo', sans-serif;
}

.recent-project-card .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* بطاقات الإحصائيات المحسّنة */
.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%);
    pointer-events: none;
}

.stat-card:hover {
    transform: translate3d(0, -4px, 0);
}

/* محسّنات البطاقات الرئيسية */
.gateway-card {
    position: relative;
    overflow: hidden;
}

/* النصوص الوصفية داخل البطاقات — تباين على الخلفية الفاتحة */
.card-description {
    color: var(--ink-2) !important;
    font-weight: 500;
}

.gateway-card > p {
    color: var(--ink-2) !important;
    font-weight: 500;
}

.gateway-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--primary-soft); color: var(--primary);
    font-size: 17px; margin-bottom: 12px;
    position: relative;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .7);
    transition: transform .24s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow .24s ease, background .24s ease;
}
.gateway-icon i { font-size: 17px; color: var(--primary); }
.gateway-card:hover .gateway-icon,
.welcome-tool:hover .gateway-icon {
    transform: scale(1.08) rotate(-2deg);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .8),
                0 6px 16px -6px color-mix(in srgb, var(--primary) 45%, transparent);
}

/* الأيقونات ثلاثية الأبعاد داخل البوابة — معالجة بصرية 2026 */
.gateway-card svg.icon-3d,
.m3-card svg.icon-3d,
.portal-card svg.icon-3d {
    filter: drop-shadow(0 6px 10px rgba(20, 28, 36, .18));
    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter .3s ease;
}
.gateway-card:hover svg.icon-3d,
.m3-card:hover svg.icon-3d,
.portal-card:hover svg.icon-3d {
    transform: scale(1.06) translateY(-2px) rotate(-1.5deg);
    filter: drop-shadow(0 10px 16px rgba(20, 28, 36, .26));
}

/* أدوات سريعة محسّنة */
.tool-mini {
    position: relative;
    overflow: hidden;
}

.tool-mini::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tool-mini:hover::after {
    opacity: 1;
}

.tool-mini span:first-child {
    transition: transform 0.3s ease;
}

.tool-mini:hover span:first-child {
    transform: scale(1.2) rotate(-5deg);
}

/* تحسينات عامة للبوابة */
#view-dashboard h2 {
    position: relative;
    z-index: 1;
}

/* تأثيرات الخلفية المتدرجة */
.dash-hero {
    background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
    .gateway-icon { animation: none; }
    .tool-mini span:first-child { transition: none; }
    .gateway-card svg.icon-3d, .m3-card svg.icon-3d, .portal-card svg.icon-3d { transition: none; }
    .m3-icon-tile { transition: none; }
    #view-dashboard .m3-card:hover .m3-icon-tile,
    #view-dashboard .welcome-tool:hover .m3-icon-tile { transform: none; }
    .gateway-card:hover svg.icon-3d,
    .m3-card:hover svg.icon-3d,
    .portal-card:hover svg.icon-3d { transform: none; }
    .recent-project-card::before { animation: none; }
    .stat-card { transform: none !important; }
    /* تعطيل الميل ثلاثي الأبعاد وطبقات العمق لمن يفضّل تقليل الحركة */
    #view-dashboard .portal-card, .portal-hub-card, .recent-project-card { transform: none !important; transition: none; }
    #view-dashboard .portal-card:hover .portal-card-icon,
    .portal-hub-card:hover .portal-hub-card-icon { transform: none !important; }
}

/* ===== طباعة لوحة التلوين — النمط المعياري (نفس الصفحة مثل الفروض الشاملة) ===== */
#coloring-print-area { display: none; }
@media print {
  body.printing-coloring > *:not(#coloring-print-area) { display: none !important; }
  body.printing-coloring #coloring-print-area { display: block !important; }
  body.printing-coloring { background: #fff !important; }
  @page { size: A4; margin: 0; }
  #coloring-print-area .sheet { width: 210mm; height: 297mm; box-sizing: border-box; padding: 8mm; display: flex; flex-direction: column; }
  #coloring-print-area .hdr { display: flex; justify-content: space-between; align-items: center; gap: 4mm; font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 12pt; font-weight: 700; color: #0f172a; border: 1.5pt solid #0f172a; border-radius: 3mm; padding: 2.5mm 4mm; margin-bottom: 3mm; flex-shrink: 0; }
  #coloring-print-area .hdr span { white-space: nowrap; }
  #coloring-print-area .instr { font-family: Cairo, Tahoma, sans-serif; font-size: 12pt; font-weight: 800; border: 1.5pt solid #0f172a; border-radius: 3mm; padding: 2.5mm 4mm; margin-bottom: 3mm; flex-shrink: 0; line-height: 1.5; }
  /* منطقة الرسم: نسبة أبعاد الكانفس (794×1029) مطابقة تماماً لمساحة الطباعة المتبقية */
  #coloring-print-area .sheet-art { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  #coloring-print-area img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
}

/* ============================================================
   بوابة تسجيل الدخول وحساب الأستاذ — سِمة المنصة 2026
   Moroccan Royal Navy, Emerald Green & Gold Glassmorphism
   ============================================================ */

.glass-auth-overlay {
    background: rgba(20, 28, 36, .45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.glass-auth-card {
    background: #ffffff !important;
    border: 1px solid var(--border-1) !important;
    box-shadow: var(--shadow-lg) !important;
    position: relative;
}

/* الأقواس الضوئية — معطّلة في الهوية الحيادية */
.glass-auth-card .corner-bracket { display: none; }

.glass-auth-card .auth-input {
    background: #fff;
    border: 1px solid var(--border-2);
    color: var(--ink-1);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.glass-auth-card .auth-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.glass-auth-card .auth-input::placeholder {
    color: var(--ink-3);
}

.btn-auth-action {
    background: var(--primary);
    border: 1px solid var(--primary);
    transition: background .18s ease;
}
.btn-auth-action:hover {
    background: var(--primary-hover);
}
.btn-auth-action:active {
    transform: translateY(1px);
}

/* فضاء حساب الأستاذ 2026 */
.account-hero-card {
    background: #ffffff;
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-sm);
}

.account-smart-card {
    background: #ffffff;
    border: 1px solid var(--border-1);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-xs);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.account-smart-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-2);
}

/* بطاقات بوابة الهبوط (Portal Hub cards) — تُحقن من app.js — زجاج مصنفر 2026 */
.portal-hub-card {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 20px; border-radius: var(--radius-l);
    /* زجاج مصنفر يطفو فوق محتوى البوابة بدل الخلفية البيضاء المصمتة */
    background: var(--glass-bg-strong);
    backdrop-filter: blur(10px) saturate(1.5);
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    cursor: pointer;
    /* تسريع GPU: ميل ثلاثي الأبعاد عبر متغيرات يحقنها محرك initTiltCards */
    will-change: transform;
    backface-visibility: hidden;
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translate3d(0, var(--lift, 0px), 0);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.portal-hub-card:hover {
    --lift: -2px;
    border-color: var(--border-2);
    box-shadow: var(--shadow-md), inset 0 1px 0 0 rgba(255, 255, 255, .7);
}
.portal-hub-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--primary-soft); color: var(--primary);
    font-size: 18px;
    /* الأيقونة المجسمة تتقدم على طبقة Z عند التحويم لإيحاء بالعمق */
    transform: translateZ(0);
    will-change: transform;
    transition: transform .26s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .26s ease;
}
.portal-hub-card:hover .portal-hub-card-icon {
    transform: translateZ(24px) scale(1.08);
    box-shadow: 0 10px 20px -10px rgba(11, 107, 79, .45);
}
.portal-hub-card-badge {
    font-size: 10px; font-weight: 800;
    background: var(--surface-2); color: var(--ink-3);
    border: 1px solid var(--border-1);
    padding: 3px 10px; border-radius: 999px;
}
.portal-hub-card-title { font-size: 15px; font-weight: 800; color: var(--ink-1); margin: 0 0 3px; }
.portal-hub-card-sub { font-size: 11px; font-weight: 700; color: var(--ink-3); margin: 0 0 8px; }
.portal-hub-card-desc { font-size: 12px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.portal-hub-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-1);
    font-size: 12px; font-weight: 700; color: var(--primary);
}

/* ترويسة بوابة الهبوط + قائمة المشاريع — زجاج مصنفر متسق مع الواجهة الرئيسية */
.portal-hub-header, .portal-hub-projects {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(10px) saturate(1.5);
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    border-color: var(--glass-border) !important;
    box-shadow: var(--glass-shadow);
}
/* أيقونة البوابة في الترويسة تطفو على طبقة Z عند التحويم — عمق رقمي */
#portal-hub-icon {
    box-shadow: var(--glass-highlight);
    transition: transform .26s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .26s ease;
    will-change: transform;
}

/* ============================================================
   ⭐ البوابات المميّزة (بوابة مستودع الأساتذة)
   ------------------------------------------------------------
   الهدف: تمييز بصري واضح عن بوابات الإنتاج (الفروض/الجذاذات
   والأدوات والإدارة) اللون الأساسي هو الأخضر --primary، فنمنح
   المستودع هوية مستقلة بلون بنفسجي + شريط علوي + أيقونات أكبر.
   ============================================================ */
.portal-hub--featured .portal-hub-header {
    background:
        linear-gradient(135deg, rgba(124, 58, 237, .10) 0%, rgba(168, 85, 247, .06) 50%, transparent 100%),
        var(--glass-bg-strong);
    border-color: rgba(139, 92, 246, .34) !important;
    position: relative;
    overflow: hidden;
}
/* شريط علوي متدرّج يميّز البوابة بنظرة واحدة */
.portal-hub--featured .portal-hub-header::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, #7c3aed, #a855f7 45%, #6366f1 100%);
    border-radius: var(--radius-l) var(--radius-l) 0 0;
}
.portal-hub--featured #portal-hub-icon {
    background: linear-gradient(135deg, #ede9fe, #f5d0fe);
    border-color: rgba(139, 92, 246, .40);
    box-shadow: 0 6px 18px -8px rgba(124, 58, 237, .55), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.portal-hub--featured #portal-hub-badge {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    border-color: transparent;
}
/* بطاقات البوابة المميّزة */
.portal-hub-cards.is-featured .portal-hub-card {
    border-color: rgba(139, 92, 246, .22);
}
.portal-hub-cards.is-featured .portal-hub-card:hover {
    border-color: rgba(139, 92, 246, .55);
    box-shadow: 0 18px 34px -18px rgba(124, 58, 237, .45), inset 0 1px 0 0 rgba(255, 255, 255, .7);
}
.portal-hub-cards.is-featured .portal-hub-card-icon {
    background: linear-gradient(135deg, #f3e8ff, #fae8ff);
    color: #7c3aed;
}
.portal-hub-cards.is-featured .portal-hub-card-badge {
    background: #f3e8ff;
    color: #6d28d9;
}
.portal-hub-cards.is-featured .portal-hub-card-foot {
    color: #7c3aed;
}
/* بوابة ببطاقة واحدة: توسيط البطاقة بدل تمدّدها على الشبكة */
.portal-hub--single #portal-hub-cards {
    grid-template-columns: minmax(0, 340px);
    justify-content: center;
}
/* قسم المشاريع المخفي */
.portal-hub-projects.hidden { display: none; }
.portal-hub-header:hover #portal-hub-icon {
    transform: translate3d(0, -2px, 0) scale(1.06);
    box-shadow: 0 10px 22px -10px rgba(11, 107, 79, .5);
}
/* صفوف مشاريع البوابة تكتسب حدّاً زجاجياً عند التحويم */
.portal-hub-projects [id$="-projects-list"] > div:hover {
    box-shadow: var(--shadow-sm);
}

/* شارة حساب الأستاذ للضيف (غير المسجلين) في الهيدر */
.hdr-guest-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 6px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.hdr-guest-badge:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.hdr-guest-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid var(--border-1);
    color: var(--primary);
    display: grid;
    place-items: center;
}

/* شارة حساب الأستاذ للمسجلين في الهيدر */
.hdr-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 12px 4px 6px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.hdr-user-badge:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.hdr-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--primary);
    border: 1px solid var(--border-1);
    display: grid;
    place-items: center;
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    position: relative;
}
.hdr-user-badge.is-pro .hdr-user-avatar {
    background: #8a6d1f;
    border-color: var(--border-2);
}

/* ==================== أنماط بطاقة خطة الاستهلاك السحابي 2026 ==================== */
.plan-main-card {
    background: #ffffff;
    border: 1.5px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    box-shadow: 0 10px 30px -5px rgba(11, 31, 51, 0.06), 0 0 0 1px rgba(0, 98, 51, 0.04);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.plan-main-card:hover {
    box-shadow: 0 16px 36px -6px rgba(11, 31, 51, 0.1), 0 0 24px rgba(18, 183, 106, 0.08);
    border-color: rgba(18, 183, 106, 0.35);
}

.plan-kpi-card {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 20px;
    padding: 16px 14px;
    text-align: center;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
.plan-kpi-card:hover {
    transform: translateY(-2px);
    background: #ffffff;
    border-color: rgba(18, 183, 106, 0.4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.plan-kpi-card.highlight {
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.8) 0%, rgba(209, 250, 229, 0.6) 100%);
    border-color: rgba(16, 185, 129, 0.4);
}

.plan-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(241, 245, 249, 0.85);
    border: 1px solid rgba(226, 232, 240, 0.8);
    font-size: 11px;
    font-weight: 700;
    color: #334155;
    transition: all 0.2s ease;
}
.plan-feature-tag:hover {
    background: rgba(236, 253, 245, 0.9);
    border-color: rgba(18, 183, 106, 0.3);
    color: #065f46;
}

.plan-btn-upgrade {
    background: linear-gradient(135deg, #0b1f33 0%, #061524 100%);
    border: 1.5px solid #f3d98b;
    color: #f3d98b;
    box-shadow: 0 4px 15px rgba(200, 162, 75, 0.2);
    transition: all 0.25s ease;
}
.plan-btn-upgrade:hover {
    background: linear-gradient(135deg, #12b76a 0%, #006233 100%);
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 6px 20px rgba(18, 183, 106, 0.35);
    transform: translateY(-1.5px);
}

/* ==================== جزيرة التنقل والتمرير العائمة بين الصفحات (2026 UX) ==================== */
.floating-page-island {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.82);
    /* زجاج مصنفر بقيمة الخطة blur(10px) مع تشبّع لوني يكشف المحتوى خلف الشريط */
    backdrop-filter: blur(10px) saturate(1.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
    /* تسريع GPU: عنصر fixed بطبقة تركيب مستقلة — لا إعادة طلاء أثناء التمرير */
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
}

.floating-page-island:hover {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 14px 36px -5px rgba(0, 0, 0, 0.55), 0 0 20px rgba(16, 185, 129, 0.25);
    transform: translateX(-50%) translate3d(0, -2px, 0);
}

.page-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-nav-btn:hover {
    background: rgba(16, 185, 129, 0.85);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.page-nav-btn:active {
    transform: scale(0.94);
}

.page-nav-pill {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-nav-pill:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    transform: translateY(-1px);
}

.page-nav-pill.is-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.7);
    font-weight: 900;
    transform: scale(1.08);
}

.page-nav-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-nav-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.08);
}

.page-nav-action-btn:active {
    transform: scale(0.92);
}

/* مسار التنقل الهرمي (Breadcrumbs) */
#nav-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.2;
}

#nav-breadcrumbs .breadcrumb-item {
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.18s ease;
    text-decoration: none;
}

#nav-breadcrumbs .breadcrumb-item:hover {
    color: #34d399;
    text-decoration: underline;
}

#nav-breadcrumbs .breadcrumb-current {
    color: var(--primary);
    font-weight: 800;
}

/* ==================== جزيرة أدوات السؤال الذكية 2026 (Smart Question Capsule) ==================== */
.q-smart-toolbar {
    position: absolute;
    top: -24px;
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 18px -2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px) scale(0.96);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

/* مساحة جسر غير مرئية للحفاظ على استقرار الـ hover وتفادي انقطاعه عند صعود الفأرة للشريط */
.q-smart-toolbar::before {
    content: '';
    position: absolute;
    inset: -8px -4px;
    pointer-events: auto;
    z-index: -1;
}

/* 1. الوضع العربي الافتراضي (RTL):
   - الكتابة تبدأ من اليمين (نص السؤال العربي)
   - الشريط العائم يرتكز في أعلى اليسار بعيداً عن بداية النص
   - اتجاه الأدوات عربي
*/
.q-smart-toolbar,
.q-smart-toolbar-rtl,
.q-smart-toolbar[data-dir="rtl"],
.a4-page[dir="rtl"] .q-smart-toolbar,
#pages-container[dir="rtl"] .q-smart-toolbar,
body.sheet-rtl .q-smart-toolbar,
body:not(.sheet-ltr) .q-smart-toolbar,
[data-question-block][dir="rtl"] .q-smart-toolbar,
.q-rtl .q-smart-toolbar {
    direction: rtl !important;
    left: 10px !important;
    right: auto !important;
    inset-inline-start: auto;
    inset-inline-end: 10px;
}

/* 2. الوضع اللاتيني والعلمي (LTR — فرنسي، رياضيات، فيزياء وكيمياء، علوم الحياة والأرض، إنجليزية):
   - الكتابة تبدأ من اليسار (نصوص الأسئلة، الأرقام، الصيغ والمعادلات الرياضية)
   - الشريط العائم يرتكز في أعلى اليمين بعيداً تماماً عن بداية خط السؤال
   - اتجاه الأدوات لاتيني
*/
.q-smart-toolbar-ltr,
.q-smart-toolbar[data-dir="ltr"],
.a4-page[dir="ltr"] .q-smart-toolbar,
#pages-container[dir="ltr"] .q-smart-toolbar,
body.sheet-ltr .q-smart-toolbar,
[data-sheet-dir="ltr"] .q-smart-toolbar,
[data-question-block][dir="ltr"] .q-smart-toolbar,
.q-ltr .q-smart-toolbar {
    direction: ltr !important;
    right: 10px !important;
    left: auto !important;
    inset-inline-start: auto;
    inset-inline-end: 10px;
}

/* قواعد صريحة للاتجاه وتوزيع السؤال وشبكة التنقيط (السؤال يميناً والتنقيط يساراً في العربي) */
[data-question-block][dir="rtl"] {
    direction: rtl !important;
    text-align: right !important;
}
[data-question-block][dir="rtl"] > .flex,
[data-question-block][dir="rtl"] .flex.items-center.justify-between {
    direction: rtl !important;
    flex-direction: row !important;
}
[data-question-block][dir="ltr"] {
    direction: ltr !important;
    text-align: left !important;
}
[data-question-block][dir="ltr"] > .flex,
[data-question-block][dir="ltr"] .flex.items-center.justify-between {
    direction: ltr !important;
    flex-direction: row !important;
}

/* ضمان تموضع كتلة السؤال كمرجع نسبي دقيق للكبسولة العائمة */
[data-question-block],
.custom-added-question,
.avoid-break.group,
.group.relative,
.question-text {
    position: relative !important;
}

/* إظهار كبسولة السؤال فور التحويم أو بدء الكتابة والتركيز داخله */
.avoid-break:hover > .q-smart-toolbar,
.avoid-break:focus-within > .q-smart-toolbar,
.group:hover > .q-smart-toolbar,
.group:focus-within > .q-smart-toolbar,
.question-text:hover > .q-smart-toolbar,
.question-text:focus-within > .q-smart-toolbar,
.custom-added-question:hover > .q-smart-toolbar,
.custom-added-question:focus-within > .q-smart-toolbar,
[data-question-block]:hover > .q-smart-toolbar,
[data-question-block]:focus-within > .q-smart-toolbar,
.q-smart-toolbar:hover,
.q-smart-toolbar:focus-within {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* أزرار كبسولة السؤال */
.q-smart-btn {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 0;
    font-size: 11px;
}

.q-smart-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #34d399;
    transform: scale(1.1);
}

.q-smart-btn:active {
    transform: scale(0.92);
}

.q-smart-btn-danger:hover {
    background: rgba(239, 68, 68, 0.9) !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.q-smart-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 2px;
    flex-shrink: 0;
}

/* التلميحات الفورية المصغرة (Tooltips) */
.q-smart-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(15, 23, 42, 0.96);
    color: #f8fafc;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
    font-family: 'Cairo', sans-serif;
}

.q-smart-btn[data-tip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==================== كبسولة أدوات الوثائق الذكية العائمة 2026 (Smart Document Capsule) ==================== */
.doc-smart-toolbar {
    position: absolute;
    top: -18px;
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 8px 24px -3px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px) scale(0.96);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

/* مساحة جسر غير مرئية للحفاظ على استقرار الـ hover */
.doc-smart-toolbar::before {
    content: '';
    position: absolute;
    inset: -10px -6px;
    pointer-events: auto;
    z-index: -1;
}

/* التموضع: يمين أو يسار حسب الاتجاه */
.doc-smart-toolbar,
.doc-smart-toolbar-rtl,
.doc-smart-toolbar[data-dir="rtl"],
.a4-page[dir="rtl"] .doc-smart-toolbar,
#pages-container[dir="rtl"] .doc-smart-toolbar,
body.sheet-rtl .doc-smart-toolbar,
body:not(.sheet-ltr) .doc-smart-toolbar,
.doc-container[dir="rtl"] .doc-smart-toolbar,
[data-doc-container][dir="rtl"] .doc-smart-toolbar {
    direction: rtl !important;
    left: 12px !important;
    right: auto !important;
}

.doc-smart-toolbar-ltr,
.doc-smart-toolbar[data-dir="ltr"],
.a4-page[dir="ltr"] .doc-smart-toolbar,
#pages-container[dir="ltr"] .doc-smart-toolbar,
body.sheet-ltr .doc-smart-toolbar,
.doc-container[dir="ltr"] .doc-smart-toolbar,
[data-doc-container][dir="ltr"] .doc-smart-toolbar {
    direction: ltr !important;
    right: 12px !important;
    left: auto !important;
}

/* ضمان تموضع كتلة الوثيقة كمرجع نسبي دقيق للكبسولة العائمة ومنع قص الكبسولة */
.doc-container,
.adv-doc,
.doc-box,
[id^="doc-box-"],
[id^="ex-doc-"],
[id$="-d3-container"],
[id$="-doc-container"],
[data-doc-container] {
    position: relative !important;
    overflow: visible !important;
}

/* ظهور كبسولة الوثيقة فور التحويم أو التركيز عليها */
.doc-container:hover > .doc-smart-toolbar,
.doc-container:focus-within > .doc-smart-toolbar,
.adv-doc:hover > .doc-smart-toolbar,
.adv-doc:focus-within > .doc-smart-toolbar,
.doc-box:hover > .doc-smart-toolbar,
.doc-box:focus-within > .doc-smart-toolbar,
[id^="doc-box-"]:hover > .doc-smart-toolbar,
[id^="doc-box-"]:focus-within > .doc-smart-toolbar,
[id^="ex-doc-"]:hover > .doc-smart-toolbar,
[id^="ex-doc-"]:focus-within > .doc-smart-toolbar,
[data-doc-container]:hover > .doc-smart-toolbar,
[data-doc-container]:focus-within > .doc-smart-toolbar,
.doc-smart-toolbar:hover,
.doc-smart-toolbar:focus-within {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* أزرار كبسولة الوثيقة */
.doc-smart-btn {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 0;
    font-size: 11px;
}

.doc-smart-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #38bdf8;
    transform: scale(1.12);
}

.doc-smart-btn:active {
    transform: scale(0.92);
}

.doc-smart-btn.is-active {
    background: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.doc-smart-btn-danger:hover {
    background: rgba(239, 68, 68, 0.92) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.doc-smart-font-select {
    background: rgba(30, 41, 59, 0.85);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    max-width: 82px;
    height: 22px;
}

.doc-smart-font-select:hover,
.doc-smart-font-select:focus {
    background: rgba(51, 65, 85, 0.95);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
}

.doc-smart-font-select option {
    background: #0f172a;
    color: #f8fafc;
    font-size: 11px;
}

.doc-smart-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 2px;
    flex-shrink: 0;
}

/* التلميحات الفورية المصغرة لكبسولة الوثائق (Tooltips) */
.doc-smart-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(15, 23, 42, 0.96);
    color: #f8fafc;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
    font-family: 'Cairo', sans-serif;
}

.doc-smart-btn[data-tip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* إخفاء تام ومطلق لكبسولات الأسئلة والوثائق عند الطباعة لضمان نقاء وثائق PDF */
@media print {
    .doc-smart-toolbar,
    .doc-smart-toolbar *,
    [data-doc-toolbar],
    .q-smart-toolbar,
    .q-smart-toolbar *,
    .floating-page-island,
    #floating-page-navigator,
    .a4-overflow-island,
    .a4-overflow-island *,
    .overflow-guide-popover,
    .overflow-guide-popover *,
    .no-print {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ==========================================================================
   كبسولة التنبيه الذكية لتجاوز حدود A4 لعام 2026 (Smart A4 Overflow Island)
   تعتمد نفس لغة وتدرجات وألوان .floating-page-island و .q-smart-toolbar
   ========================================================================== */

.a4-overflow-island {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 6px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(244, 63, 94, 0.55);
    box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.52), 
                0 0 18px rgba(225, 29, 72, 0.35), 
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    direction: rtl;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
}

.a4-overflow-island:hover {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(244, 63, 94, 0.8);
    box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.62), 
                0 0 24px rgba(225, 29, 72, 0.5);
    transform: translateX(-50%) translateY(-2px);
}

/* حالة التصغير الناعم (Micro-Pill Minimized State) */
.a4-overflow-island.is-minimized {
    padding: 4px 10px;
    gap: 4px;
    background: rgba(225, 29, 72, 0.92);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.5);
    cursor: pointer;
}
.a4-overflow-island.is-minimized .overflow-btn,
.a4-overflow-island.is-minimized .overflow-divider,
.a4-overflow-island.is-minimized .overflow-guide-wrap,
.a4-overflow-island.is-minimized .overflow-btn-close {
    display: none !important;
}

/* الشارة والنقطة النابضة */
.overflow-badge-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-inline-end: 2px;
}
.overflow-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444; /* red-500 */
    box-shadow: 0 0 8px #ef4444;
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.overflow-badge-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 900;
    color: #422006; /* dark brown */
    letter-spacing: -0.2px;
}

/* فواصل الأزرار العائمة */
.overflow-divider {
    width: 1px;
    height: 16px;
    background: rgba(113, 63, 18, 0.2); /* dark brown transparent */
    margin: 0 2px;
}

/* الأزرار العصرية داخل الكبسولة */
.overflow-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
}

/* الزر 1: ضغط الورقة تلقائياً (Auto Compress Gradient) */
.overflow-btn-compress {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #4f46e5 100%);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
.overflow-btn-compress:hover {
    background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 50%, #4338ca 100%);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.55), 0 0 12px rgba(96, 165, 250, 0.4);
    transform: scale(1.04);
}
.overflow-btn-compress:active {
    transform: scale(0.96);
}

/* الزر 2: الانتقال إلى الصفحة التالية (Move to Next Page) */
.overflow-btn-next-page {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.overflow-btn-next-page:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.55), 0 0 12px rgba(52, 211, 153, 0.45);
    transform: scale(1.04);
}
.overflow-btn-next-page:active {
    transform: scale(0.96);
}

/* الزر 3: إرشاد المعالجة (Guidance Pill) */
.overflow-btn-guide {
    background: rgba(255, 255, 255, 0.5);
    color: #854d0e; /* yellow-800 */
    border-color: rgba(202, 138, 4, 0.4);
}
.overflow-btn-guide:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(202, 138, 4, 0.7);
    color: #422006;
    box-shadow: 0 0 10px rgba(202, 138, 4, 0.25);
    transform: scale(1.04);
}
.overflow-btn-guide:active {
    transform: scale(0.96);
}

/* زر الإغلاق والتصغير الناعم */
/* زر الإغلاق الدائري السريع */
.overflow-btn-close {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(113, 63, 18, 0.06);
    border: 1px solid rgba(113, 63, 18, 0.12);
    color: #854d0e;
    cursor: pointer;
    transition: all 0.18s ease;
    padding: 0;
}
.overflow-btn-close:hover {
    background: rgba(113, 63, 18, 0.15);
    color: #422006;
    border-color: rgba(113, 63, 18, 0.3);
    transform: scale(1.1);
}

/* نافذة الإرشادات المنبثقة الذكية (Glass Popover) */
.overflow-guide-wrap {
    position: relative;
    display: inline-block;
}
.overflow-guide-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 50%;
    transform: translateX(50%);
    width: 280px;
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.65), 0 0 20px rgba(245, 158, 11, 0.18);
    border-radius: 16px;
    padding: 12px;
    z-index: 120;
    text-align: right;
    direction: rtl;
    animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popoverFadeIn {
    from { opacity: 0; transform: translateX(50%) translateY(-6px); }
    to { opacity: 1; transform: translateX(50%) translateY(0); }
}
.popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.popover-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
}
.popover-close-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.15); }
.popover-tips-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #cbd5e1;
    margin: 0;
    padding: 0;
    list-style: none;
}
.popover-tips-list li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}
.popover-tips-list .tip-num {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.55);
    color: #fcd34d;
    font-size: 10px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* زر التراجع عن الضغط في الشريط الجانبي أو الكانفاس */
.btn-compress-undo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-compress-undo:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* إشعار تجاوز A4 العائم في الشاشة لعام 2026 (Fixed Viewport Overflow Island)
   يتموضع فوق جزيرة التنقل بين الصفحات مباشرة بأسلوب Glassmorphism فائق الدقة */
#viewport-overflow-island {
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 9999px;
    background: rgba(253, 224, 71, 0.96); /* yellow-300 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(202, 138, 4, 0.8); /* yellow-600 */
    box-shadow: 0 14px 36px -4px rgba(0, 0, 0, 0.3), 
                0 0 25px rgba(234, 179, 8, 0.6); /* yellow glow */
    color: #422006;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    direction: rtl;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
    animation: slideUpIsland 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpIsland {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#viewport-overflow-island:hover {
    background: rgba(250, 204, 21, 0.98); /* yellow-400 */
    border-color: rgba(161, 98, 7, 0.9); /* yellow-700 */
    box-shadow: 0 18px 42px -4px rgba(0, 0, 0, 0.4), 
                0 0 30px rgba(234, 179, 8, 0.8);
    transform: translateX(-50%) translateY(-2px);
}

.page-overflow-active {
    outline: 2px solid #f43f5e !important;
    outline-offset: -2px !important;
}

/* حماية وعزل البوابات المستثناة صراحة من الكبسولة */
#view-docs .a4-overflow-island,
#view-mindmap .a4-overflow-island,
#view-coloring .a4-overflow-island,
#view-board .a4-overflow-island,
#view-docs #viewport-overflow-island,
#view-mindmap #viewport-overflow-island,
#view-coloring #viewport-overflow-island,
#view-board #viewport-overflow-island,
body:not(.editor-open) .a4-overflow-island,
body:not(.editor-open) #viewport-overflow-island {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media print {
    #viewport-overflow-island,
    #viewport-overflow-island * {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* ============================================================
   مستودع الأساتذة — 2026: لوحة الفرز الزجاجية، تخصيص الأسلاك والنوع، والبطاقات الحديثة
   ============================================================ */

/* الحاوية الزجاجية الموحدة للفلاتر (Bento Glassmorphic Deck) */
.repo-modern-deck {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.94) 100%);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    padding: 16px 18px;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.07), 0 2px 8px -2px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all 0.25s ease;
}

.repo-deck-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.repo-deck-subrow {
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px dashed rgba(226, 232, 240, 0.9);
}

.repo-deck-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.repo-deck-group-sort {
    flex: 0 1 auto;
}
.repo-deck-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    white-space: nowrap;
    user-select: none;
}
.repo-deck-label-icon {
    font-size: 13px;
}
.repo-deck-divider {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    margin: 0 4px;
}
@media (max-width: 768px) {
    .repo-deck-divider { display: none; }
}

.repo-pills-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* الكبسولات التفاعلية المشتركة */
.repo-stage-pill,
.repo-type-pill,
.repo-sort-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    user-select: none;
    border: 1px solid transparent;
}
.repo-pill-icon {
    font-size: 12px;
    line-height: 1;
}

/* ------------------------------------------------------------
   تخصيص كبسولات نوع العمل (Resource Types):
   ------------------------------------------------------------ */
/* نوع العمل: كل الأعمال */
.repo-type-pill.repo-pill-type-all {
    background: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}
.repo-type-pill.repo-pill-type-all:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}
.repo-type-pill.repo-pill-type-all.is-active {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

/* نوع العمل: التمارين والأنشطة (Mint / Teal) */
.repo-type-pill.repo-pill-type-exercises {
    background: #f0fdfa;
    color: #0d9488;
    border-color: #ccfbf1;
}
.repo-type-pill.repo-pill-type-exercises:hover {
    background: #ccfbf1;
    color: #0f766e;
    border-color: #99f6e4;
    transform: translateY(-1px);
}
.repo-type-pill.repo-pill-type-exercises.is-active {
    background: linear-gradient(135deg, #0d9488 0%, #059669 100%);
    color: #ffffff;
    border-color: #0f766e;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.32);
}

/* نوع العمل: الفروض والامتحانات (Ocean Blue / Indigo) */
.repo-type-pill.repo-pill-type-exam {
    background: #eff6ff;
    color: #2563eb;
    border-color: #dbeafe;
}
.repo-type-pill.repo-pill-type-exam:hover {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
    transform: translateY(-1px);
}
.repo-type-pill.repo-pill-type-exam.is-active {
    background: linear-gradient(135deg, #2563eb 0%, #4338ca 100%);
    color: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32);
}

/* نوع العمل: الجذاذات والدروس (Amber / Coral) */
.repo-type-pill.repo-pill-type-lesson {
    background: #fffbeb;
    color: #d97706;
    border-color: #fef3c7;
}
.repo-type-pill.repo-pill-type-lesson:hover {
    background: #fef3c7;
    color: #b45309;
    border-color: #fde68a;
    transform: translateY(-1px);
}
.repo-type-pill.repo-pill-type-lesson.is-active {
    background: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
    color: #ffffff;
    border-color: #b45309;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.32);
}

/* ------------------------------------------------------------
   تخصيص كبسولات الأسلاك التعليمية (Educational Stages):
   ------------------------------------------------------------ */
/* سلك: كل الأسلاك */
.repo-stage-pill.repo-pill-stage-all {
    background: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}
.repo-stage-pill.repo-pill-stage-all:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}
.repo-stage-pill.repo-pill-stage-all.is-active {
    background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

/* سلك: الابتدائي (Sky / Cyan) */
.repo-stage-pill.repo-pill-stage-primary {
    background: #f0f9ff;
    color: #0284c7;
    border-color: #e0f2fe;
}
.repo-stage-pill.repo-pill-stage-primary:hover {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #bae6fd;
    transform: translateY(-1px);
}
.repo-stage-pill.repo-pill-stage-primary.is-active {
    background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

/* سلك: الثانوي الإعدادي (Royal Violet / Indigo) */
.repo-stage-pill.repo-pill-stage-middle {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #ede9fe;
}
.repo-stage-pill.repo-pill-stage-middle:hover {
    background: #ede9fe;
    color: #6d28d9;
    border-color: #ddd6fe;
    transform: translateY(-1px);
}
.repo-stage-pill.repo-pill-stage-middle.is-active {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    color: #ffffff;
    border-color: #6d28d9;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

/* سلك: الثانوي التأهيلي (Deep Emerald / Teal) */
.repo-stage-pill.repo-pill-stage-high {
    background: #ecfdf5;
    color: #059669;
    border-color: #d1fae5;
}
.repo-stage-pill.repo-pill-stage-high:hover {
    background: #d1fae5;
    color: #047857;
    border-color: #a7f3d0;
    transform: translateY(-1px);
}
.repo-stage-pill.repo-pill-stage-high.is-active {
    background: linear-gradient(135deg, #059669 0%, #0f766e 100%);
    color: #ffffff;
    border-color: #047857;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

/* ------------------------------------------------------------
   تخصيص كبسولات الترتيب الذكي (Sort Options):
   ------------------------------------------------------------ */
.repo-sort-pill {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}
.repo-sort-pill:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}
.repo-sort-pill.repo-sort-pill-likes.is-active {
    background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
    color: #ffffff;
    border-color: #be123c;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.32);
}
.repo-sort-pill.repo-sort-pill-latest.is-active {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    border-color: #4338ca;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.32);
}
.repo-sort-pill.repo-sort-pill-downloads.is-active {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    color: #ffffff;
    border-color: #115e59;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.32);
}

/* عناصر التحكم: المادة والبحث */
.repo-deck-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    justify-content: flex-end;
}
.repo-select-wrapper,
.repo-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.repo-select-icon,
.repo-search-icon {
    position: absolute;
    right: 10px;
    font-size: 12px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 2;
}
.repo-modern-select {
    padding: 7px 30px 7px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 800;
    color: #334155;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.repo-modern-select:hover,
.repo-modern-select:focus {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}
.repo-modern-input {
    width: 220px;
    padding: 7px 32px 7px 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 800;
    color: #1e293b;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.repo-modern-input:focus {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
    width: 260px;
}
@media (max-width: 640px) {
    .repo-modern-input,
    .repo-modern-input:focus {
        width: 100%;
    }
    .repo-deck-controls {
        width: 100%;
        justify-content: stretch;
    }
    .repo-select-wrapper,
    .repo-search-wrapper {
        width: 100%;
    }
}
.repo-search-clear-btn {
    position: absolute;
    left: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.15s ease;
}
.repo-search-clear-btn:hover {
    background: #cbd5e1;
    color: #0f172a;
}

/* شريط الملخص الحي (Summary Strip) */
.repo-summary-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(241, 245, 249, 0.75);
    border: 1px solid rgba(226, 232, 240, 0.85);
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    transition: all 0.2s ease;
}
.repo-summary-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.repo-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 800;
}
.repo-reset-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    font-size: 10.5px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.repo-reset-filters-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #059669;
    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   بطاقات الأعمال الحديثة (Modern Repository Cards):
   ------------------------------------------------------------ */
.repo-card-modern {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}
.repo-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: #e2e8f0;
    transition: all 0.28s ease;
}
.repo-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -6px rgba(15, 23, 42, 0.09), 0 2px 6px rgba(15, 23, 42, 0.04);
    border-color: #cbd5e1;
}

/* خط التمييز العلوي حسب السلك */
.repo-card-stage-primary::before { background: linear-gradient(90deg, #0284c7, #06b6d4); }
.repo-card-stage-middle::before  { background: linear-gradient(90deg, #7c3aed, #6366f1); }
.repo-card-stage-high::before    { background: linear-gradient(90deg, #059669, #0d9488); }
.repo-card-stage-other::before   { background: linear-gradient(90deg, #64748b, #94a3b8); }

.repo-card-rank-top {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35), 0 8px 22px -4px rgba(245, 158, 11, 0.18) !important;
}

/* زر الفتح في المحرر بتصميم فخم */
.repo-open-editor-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.22);
}
.repo-open-editor-btn:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.32);
}

/* زر الإعجاب في بطاقة العمل */
.repo-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}
.repo-like-btn:hover {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #e11d48;
    transform: scale(1.04);
}
.repo-like-btn.is-liked {
    background: #fff1f2;
    border-color: #fda4af;
    color: #e11d48;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.15);
}
.repo-like-btn.is-liked .repo-like-icon {
    animation: repoHeartPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes repoHeartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* شريط إشعار استيراد العمل من المستودع أعلى لوحة التحرير */
.repo-import-banner {
    width: 100%;
    max-width: 297mm;
    margin: 0 auto 12px auto;
    padding: 12px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(209, 250, 229, 0.9) 100%);
    border: 1.5px solid rgba(16, 185, 129, 0.35);
    box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 40;
    animation: slideDownBanner 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideDownBanner {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.repo-import-banner-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 300px;
    min-width: 0;
}
.repo-import-badge-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #059669;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(5, 150, 105, 0.3);
}
.repo-import-texts {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.repo-import-title {
    font-size: 13px;
    font-weight: 900;
    color: #064e3b;
    line-height: 1.3;
}
.repo-import-meta {
    font-size: 11px;
    font-weight: 700;
    color: #047857;
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.repo-import-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.repo-import-save-btn {
    padding: 7px 14px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 900;
    background: #059669;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
}
.repo-import-save-btn:hover {
    background: #047857;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.3);
}
.repo-import-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #064e3b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    transition: all 0.15s ease;
}
.repo-import-close-btn:hover {
    background: rgba(225, 29, 72, 0.1);
    color: #e11d48;
    border-color: rgba(225, 29, 72, 0.2);
}

@media print {
    .repo-import-banner,
    .repo-import-banner * {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ============================================================
   طبقة 2026 — تحسينات الطباعة العربية وتبديل العرض السلس
   ============================================================ */

/* تفعيل ميزات الخطوط العربية المتقدمة (الرقاق/الرقم الموحّد) */
body, .app-view, button, input, select, textarea {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "kern" 1, "liga" 1;
}

/* أرقام موحّدة العرض للإحصائيات والعدّادات */
.tabular-nums, #nav-page-counter, .kpi-value, .stat-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* توازن أسطر العناوين للعرض المتقدم */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* —— تبديل البوابات: انتقال سلس عبر View Transitions API —— */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.28s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* اتجاه الانتقال يحترم RTL: العرض الجديد يدخل من اليسار (أي من اتجاه القراءة) */
::view-transition-old(root) { animation-name: vt-fade-out; }
::view-transition-new(root) { animation-name: vt-fade-in; }
@keyframes vt-fade-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(-12px); }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
}

/* تحويم البطاقات بمظهر 2026 (ارتفاع ناعم + توهج حدّي خفيف) */
.gateway-card, .tool-mini, .portal-card {
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.22s ease;
}

/* شريط الأدوات: حالات التركيز وصولية 2026 (focus-visible) */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* تمرير ناعم عند تبديل البوابات */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}