/* ─────────────────────────────────────────────────────────────
   RafidMED — طبقة تصميم فوق Filament (CSS عادي، بدون Vite)
   تعتمد على متغيرات ألوان Filament: --primary-*, --gray-*, --success-* ...
   ───────────────────────────────────────────────────────────── */

[x-cloak] { display: none !important; }

/* ── Brand ── */
.mr-brand { display: flex; align-items: center; gap: .65rem; }
.mr-brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; color: #fff; background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); box-shadow: 0 4px 12px -2px color-mix(in oklab, var(--primary-600) 45%, transparent); }
.mr-brand-icon svg { width: 1.25rem; height: 1.25rem; }
.mr-brand-mark { width: 2.25rem; height: 2.25rem; border-radius: .7rem; box-shadow: 0 4px 12px -3px rgb(31 58 140 / .45); flex-shrink: 0; }
.mr-brand-name b { font-weight: 800; color: var(--primary-600); }
.dark .mr-brand-name b { color: var(--primary-400); }
.mr-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.mr-brand-name { font-weight: 700; font-size: 1rem; color: var(--gray-950); letter-spacing: -.01em; }
.mr-brand-sub { font-size: .7rem; color: var(--gray-500); }
.dark .mr-brand-name { color: #fff; }

/* ── Layout helpers ── */
.mr-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.mr-stack-sm { display: flex; flex-direction: column; gap: .75rem; }
.mr-stack-xs { display: flex; flex-direction: column; gap: .4rem; }
.mr-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mr-row-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.mr-nowrap { flex-wrap: nowrap; }
.mr-between { justify-content: space-between; }
.mr-center { justify-content: center; text-align: center; }
.mr-end { margin-inline-start: auto; }
.mr-items-start { align-items: flex-start; }
.mr-items-end { align-items: flex-end; }
.mr-grow { flex: 1 1 0%; min-width: 0; }
.mr-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.mr-grid-sm { gap: .75rem; }
.mr-grid-lg { gap: 1.5rem; }
@media (min-width: 640px) {
    .mr-cols-2, .mr-cols-3, .mr-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mr-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mr-sm-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 768px) {
    .mr-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mr-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .mr-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mr-lg-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .mr-lg-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .mr-lg-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mr-full { grid-column: 1 / -1; }
.mr-narrow { max-width: 48rem; width: 100%; margin-inline: auto; }
.mr-mid { max-width: 64rem; width: 100%; margin-inline: auto; }
.mr-mt-1 { margin-top: .25rem; } .mr-mt-2 { margin-top: .5rem; } .mr-mt-3 { margin-top: .75rem; } .mr-mt-4 { margin-top: 1rem; } .mr-mt-6 { margin-top: 1.5rem; }
.mr-mb-2 { margin-bottom: .5rem; } .mr-mb-3 { margin-bottom: .75rem; } .mr-mb-4 { margin-bottom: 1rem; }
.mr-w-full { width: 100%; }
.mr-inline { display: inline-flex; align-items: center; gap: .4rem; }
.mr-i4 { width: 1rem; height: 1rem; } .mr-i5 { width: 1.25rem; height: 1.25rem; } .mr-i6 { width: 1.5rem; height: 1.5rem; } .mr-i8 { width: 2rem; height: 2rem; }
.mr-hidden { display: none; }

/* ── Typography ── */
.mr-h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; color: var(--gray-950); line-height: 1.3; }
.mr-h2 { font-size: 1.15rem; font-weight: 700; color: var(--gray-950); }
.mr-h3 { font-size: 1rem; font-weight: 600; color: var(--gray-950); }
.dark .mr-h1, .dark .mr-h2, .dark .mr-h3 { color: #fff; }
.mr-muted { color: var(--gray-500); }
.dark .mr-muted { color: var(--gray-400); }
.mr-xs { font-size: .75rem; } .mr-sm { font-size: .875rem; } .mr-lg { font-size: 1.05rem; }
.mr-bold { font-weight: 600; } .mr-strong { font-weight: 700; }
.mr-num { font-variant-numeric: tabular-nums; }
.mr-start { text-align: start; }
.mr-ltr { direction: ltr; text-align: left; }
.mr-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-leading { line-height: 1.9; }
.mr-text-danger { color: var(--danger-600); } .dark .mr-text-danger { color: var(--danger-400); }
.mr-text-success { color: var(--success-600); } .dark .mr-text-success { color: var(--success-400); }
.mr-text-warning { color: var(--warning-600); } .dark .mr-text-warning { color: var(--warning-400); }
.mr-text-primary { color: var(--primary-600); } .dark .mr-text-primary { color: var(--primary-400); }
.mr-link { color: var(--primary-600); font-weight: 500; text-decoration: none; }
.mr-link:hover { text-decoration: underline; }
.dark .mr-link { color: var(--primary-400); }
.mr-kbd { display: inline-block; min-width: 1.4rem; padding: 0 .35rem; border: 1px solid var(--gray-300); border-bottom-width: 2px; border-radius: .35rem; font-size: .7rem; text-align: center; background: #fff; color: var(--gray-700); }
.dark .mr-kbd { background: var(--gray-800); border-color: var(--gray-600); color: var(--gray-200); }

/* ── Cards ── */
.mr-card { position: relative; background: #fff; border: 1px solid var(--gray-200); border-radius: 1rem; padding: 1.25rem; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.dark .mr-card { background: var(--gray-900); border-color: rgb(255 255 255 / .08); box-shadow: none; }
.mr-card-lg { padding: 1.5rem; }
.mr-card-sm { padding: 1rem; }
.mr-card-flush { padding: 0; overflow: hidden; }
a.mr-card, .mr-card-hover { display: block; color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.mr-card:hover, .mr-card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgb(0 0 0 / .18); border-color: var(--primary-300); }
.dark a.mr-card:hover, .dark .mr-card-hover:hover { border-color: var(--primary-700); box-shadow: 0 12px 28px -12px rgb(0 0 0 / .6); }
.mr-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.mr-card-title { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1rem; color: var(--gray-950); }
.dark .mr-card-title { color: #fff; }
.mr-card-title .mr-emoji { font-size: 1.1rem; }
.mr-divider { border-top: 1px solid var(--gray-100); }
.dark .mr-divider { border-color: rgb(255 255 255 / .07); }
.mr-list > * + * { border-top: 1px solid var(--gray-100); }
.dark .mr-list > * + * { border-color: rgb(255 255 255 / .06); }
.mr-list-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 0; color: inherit; text-decoration: none; }
a.mr-list-item:hover .mr-list-title { color: var(--primary-600); }
.mr-list-title { font-weight: 600; font-size: .9rem; }

/* ── Hero ── */
.mr-hero { position: relative; overflow: hidden; border-radius: 1.25rem; padding: 1.75rem; color: #fff; background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 100%); box-shadow: 0 18px 40px -20px color-mix(in oklab, var(--primary-700) 70%, transparent); }
.mr-hero::before { content: ''; position: absolute; inset-inline-start: -4rem; top: -5rem; width: 16rem; height: 16rem; border-radius: 999px; background: radial-gradient(circle, rgb(255 255 255 / .18), transparent 70%); }
.mr-hero::after { content: ''; position: absolute; inset-inline-end: -3rem; bottom: -6rem; width: 18rem; height: 18rem; border-radius: 999px; background: radial-gradient(circle, rgb(255 255 255 / .12), transparent 70%); }
.mr-hero > * { position: relative; z-index: 1; }
.mr-hero-title { font-size: 1.65rem; font-weight: 700; line-height: 1.35; }
.mr-hero-sub { margin-top: .35rem; opacity: .88; font-size: .95rem; max-width: 42rem; }
.mr-hero-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.15rem; border-radius: .8rem; font-weight: 600; font-size: .9rem; background: #fff; color: var(--primary-700); text-decoration: none; box-shadow: 0 6px 16px -6px rgb(0 0 0 / .3); transition: transform .15s; }
.mr-hero-btn:hover { transform: translateY(-1px); }
.mr-hero-btn-ghost { background: rgb(255 255 255 / .14); color: #fff; box-shadow: none; border: 1px solid rgb(255 255 255 / .25); }
.mr-hero-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.mr-hero-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; font-size: .78rem; background: rgb(255 255 255 / .15); border: 1px solid rgb(255 255 255 / .2); }

/* ── Tone (ألوان الأقسام) ── */
.tone-rose { --t-50: #fff1f2; --t-100: #ffe4e6; --t-200: #fecdd3; --t-300: #fda4af; --t-500: #f43f5e; --t-600: #e11d48; --t-700: #be123c; --t-900: #881337; }
.tone-sky { --t-50: #f0f9ff; --t-100: #e0f2fe; --t-200: #bae6fd; --t-300: #7dd3fc; --t-500: #0ea5e9; --t-600: #0284c7; --t-700: #0369a1; --t-900: #0c4a6e; }
.tone-emerald { --t-50: #ecfdf5; --t-100: #d1fae5; --t-200: #a7f3d0; --t-300: #6ee7b7; --t-500: #10b981; --t-600: #059669; --t-700: #047857; --t-900: #064e3b; }
.tone-violet { --t-50: #f5f3ff; --t-100: #ede9fe; --t-200: #ddd6fe; --t-300: #c4b5fd; --t-500: #8b5cf6; --t-600: #7c3aed; --t-700: #6d28d9; --t-900: #4c1d95; }
.tone-amber { --t-50: #fffbeb; --t-100: #fef3c7; --t-200: #fde68a; --t-300: #fcd34d; --t-500: #f59e0b; --t-600: #d97706; --t-700: #b45309; --t-900: #78350f; }
.tone-pink { --t-50: #fdf2f8; --t-100: #fce7f3; --t-200: #fbcfe8; --t-300: #f9a8d4; --t-500: #ec4899; --t-600: #db2777; --t-700: #be185d; --t-900: #831843; }
.tone-blue { --t-50: #eff6ff; --t-100: #dbeafe; --t-200: #bfdbfe; --t-300: #93c5fd; --t-500: #3b82f6; --t-600: #2563eb; --t-700: #1d4ed8; --t-900: #1e3a8a; }
.tone-indigo { --t-50: #eef2ff; --t-100: #e0e7ff; --t-200: #c7d2fe; --t-300: #a5b4fc; --t-500: #6366f1; --t-600: #4f46e5; --t-700: #4338ca; --t-900: #312e81; }
.tone-teal { --t-50: #f0fdfa; --t-100: #ccfbf1; --t-200: #99f6e4; --t-300: #5eead4; --t-500: #14b8a6; --t-600: #0d9488; --t-700: #0f766e; --t-900: #134e4a; }
.tone-orange { --t-50: #fff7ed; --t-100: #ffedd5; --t-200: #fed7aa; --t-300: #fdba74; --t-500: #f97316; --t-600: #ea580c; --t-700: #c2410c; --t-900: #7c2d12; }
.tone-zinc { --t-50: #fafafa; --t-100: #f4f4f5; --t-200: #e4e4e7; --t-300: #d4d4d8; --t-500: #71717a; --t-600: #52525b; --t-700: #3f3f46; --t-900: #18181b; }

.mr-spec { display: flex; flex-direction: column; gap: .9rem; border-radius: 1.1rem; padding: 1.25rem; text-decoration: none; color: inherit; border: 1px solid var(--t-200); background: linear-gradient(160deg, var(--t-50) 0%, #fff 75%); transition: transform .18s ease, box-shadow .18s ease; }
.mr-spec:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px color-mix(in oklab, var(--t-600) 45%, transparent); }
.dark .mr-spec { border-color: color-mix(in oklab, var(--t-500) 30%, transparent); background: linear-gradient(160deg, color-mix(in oklab, var(--t-900) 45%, var(--gray-900)) 0%, var(--gray-900) 80%); }
.mr-spec-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: .9rem; color: #fff; background: linear-gradient(135deg, var(--t-500), var(--t-700)); box-shadow: 0 8px 18px -8px var(--t-600); }
.mr-spec-icon-lg { width: 3.75rem; height: 3.75rem; border-radius: 1.1rem; }
.mr-spec-name { font-size: 1.15rem; font-weight: 700; color: var(--t-700); }
.dark .mr-spec-name { color: var(--t-300); }
.mr-spec-en { font-size: .75rem; color: var(--gray-500); direction: ltr; }
.mr-spec-desc { font-size: .85rem; color: var(--gray-600); line-height: 1.7; }
.dark .mr-spec-desc { color: var(--gray-400); }
.mr-spec-foot { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.mr-spec-foot .mr-chip { background: rgb(255 255 255 / .75); border: 1px solid var(--t-100); }
.dark .mr-spec-foot .mr-chip { background: rgb(0 0 0 / .25); border-color: transparent; }
.mr-spec-progress { height: .35rem; border-radius: 999px; background: color-mix(in oklab, var(--t-200) 60%, transparent); overflow: hidden; }
.mr-spec-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--t-500); }

.mr-tone-hero { border-radius: 1.25rem; padding: 1.5rem; border: 1px solid var(--t-200); background: radial-gradient(120% 140% at 100% 0%, var(--t-100) 0%, var(--t-50) 40%, #fff 100%); }
.dark .mr-tone-hero { border-color: color-mix(in oklab, var(--t-500) 30%, transparent); background: radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--t-900) 60%, var(--gray-900)) 0%, var(--gray-900) 70%); }
.mr-tone-title { font-size: 1.6rem; font-weight: 700; color: var(--t-700); }
.dark .mr-tone-title { color: var(--t-300); }

/* ── Stats ── */
.mr-stat { display: flex; align-items: center; gap: .9rem; }
.mr-stat-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.9rem; height: 2.9rem; border-radius: .85rem; background: var(--c-50, var(--primary-50)); color: var(--c-600, var(--primary-600)); }
.dark .mr-stat-icon { background: color-mix(in oklab, var(--c-500, var(--primary-500)) 16%, transparent); color: var(--c-400, var(--primary-400)); }
.mr-stat-icon svg { width: 1.4rem; height: 1.4rem; }
.mr-stat-value { font-size: 1.65rem; font-weight: 700; line-height: 1.2; color: var(--gray-950); font-variant-numeric: tabular-nums; }
.dark .mr-stat-value { color: #fff; }
.mr-stat-label { font-size: .8rem; color: var(--gray-500); }
.mr-stat-hint { font-size: .72rem; color: var(--gray-400); }
.c-primary { --c-50: var(--primary-50); --c-400: var(--primary-400); --c-500: var(--primary-500); --c-600: var(--primary-600); }
.c-danger { --c-50: var(--danger-50); --c-400: var(--danger-400); --c-500: var(--danger-500); --c-600: var(--danger-600); }
.c-success { --c-50: var(--success-50); --c-400: var(--success-400); --c-500: var(--success-500); --c-600: var(--success-600); }
.c-warning { --c-50: var(--warning-50); --c-400: var(--warning-400); --c-500: var(--warning-500); --c-600: var(--warning-600); }
.c-info { --c-50: var(--info-50); --c-400: var(--info-400); --c-500: var(--info-500); --c-600: var(--info-600); }
.c-violet { --c-50: #f5f3ff; --c-400: #a78bfa; --c-500: #8b5cf6; --c-600: #7c3aed; }

/* ── Action tiles (روابط سريعة) ── */
.mr-tile { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 1rem; border: 1px solid var(--gray-200); background: #fff; color: inherit; text-decoration: none; transition: all .18s ease; }
.mr-tile:hover { border-color: var(--c-500, var(--primary-400)); box-shadow: 0 10px 24px -14px rgb(0 0 0 / .25); transform: translateY(-2px); }
.dark .mr-tile { background: var(--gray-900); border-color: rgb(255 255 255 / .08); }
.mr-tile-body { flex: 1; min-width: 0; }
.mr-tile-title { font-weight: 700; font-size: .95rem; color: var(--gray-950); }
.dark .mr-tile-title { color: #fff; }
.mr-tile-sub { font-size: .8rem; color: var(--gray-500); margin-top: .15rem; }
.mr-tile-arrow { color: var(--gray-400); transition: transform .18s; width: 1.1rem; height: 1.1rem; }
.mr-tile:hover .mr-tile-arrow { transform: translateX(-4px); color: var(--c-600, var(--primary-600)); }

/* ── Chips / pills ── */
.mr-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 500; background: var(--gray-100); color: var(--gray-700); white-space: nowrap; }
.dark .mr-chip { background: rgb(255 255 255 / .07); color: var(--gray-300); }
.mr-chip-primary { background: var(--primary-50); color: var(--primary-700); }
.dark .mr-chip-primary { background: color-mix(in oklab, var(--primary-500) 18%, transparent); color: var(--primary-300); }
.mr-chip-danger { background: var(--danger-50); color: var(--danger-700); }
.dark .mr-chip-danger { background: color-mix(in oklab, var(--danger-500) 18%, transparent); color: var(--danger-300); }
.mr-chip-warning { background: var(--warning-50); color: var(--warning-700); }
.dark .mr-chip-warning { background: color-mix(in oklab, var(--warning-500) 18%, transparent); color: var(--warning-300); }
.mr-chip-success { background: var(--success-50); color: var(--success-700); }
.dark .mr-chip-success { background: color-mix(in oklab, var(--success-500) 18%, transparent); color: var(--success-300); }
.mr-chip-info { background: var(--info-50); color: var(--info-700); }
.dark .mr-chip-info { background: color-mix(in oklab, var(--info-500) 18%, transparent); color: var(--info-300); }
.mr-chip-count { display: inline-flex; min-width: 1.35rem; justify-content: center; padding: 0 .35rem; border-radius: 999px; background: rgb(0 0 0 / .06); font-size: .7rem; font-variant-numeric: tabular-nums; }
.dark .mr-chip-count { background: rgb(255 255 255 / .1); }

/* ── Progress bars ── */
.mr-progress { height: .55rem; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.dark .mr-progress { background: rgb(255 255 255 / .08); }
.mr-progress-lg { height: .8rem; }
.mr-progress-xs { height: .3rem; }
.mr-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary-500); transition: width .4s ease; }
.mr-progress > span.bar-danger { background: var(--danger-500); }
.mr-progress > span.bar-warning { background: var(--warning-500); }
.mr-progress > span.bar-success { background: var(--success-500); }
.mr-progress > span.bar-info { background: var(--info-500); }
.mr-progress > span.bar-gray { background: var(--gray-400); }
.mr-progress > span.bar-tone { background: var(--t-500); }
.mr-barrow { display: flex; align-items: center; gap: .75rem; padding: .35rem 0; color: inherit; text-decoration: none; }
.mr-barrow .mr-progress { flex: 1; }
.mr-barrow-label { width: 9.5rem; flex-shrink: 0; font-size: .85rem; }
.mr-barrow-value { width: 5.5rem; flex-shrink: 0; text-align: end; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--gray-600); }
.dark .mr-barrow-value { color: var(--gray-400); }
a.mr-barrow:hover .mr-barrow-label { color: var(--primary-600); }

/* ── Ring (نسبة دائرية) ── */
.mr-ring { --p: 0; --ring-color: var(--primary-500); width: 5.5rem; height: 5.5rem; border-radius: 999px; display: grid; place-items: center; background: conic-gradient(var(--ring-color) calc(var(--p) * 1%), var(--gray-100) 0); }
.dark .mr-ring { background: conic-gradient(var(--ring-color) calc(var(--p) * 1%), rgb(255 255 255 / .08) 0); }
.mr-ring > span { width: 4.3rem; height: 4.3rem; border-radius: 999px; display: grid; place-items: center; background: #fff; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dark .mr-ring > span { background: var(--gray-900); }
.mr-ring-lg { width: 8rem; height: 8rem; }
.mr-ring-lg > span { width: 6.4rem; height: 6.4rem; font-size: 1.6rem; }

/* ── Segmented control ── */
.mr-seg { display: inline-flex; gap: .25rem; padding: .3rem; border-radius: .9rem; background: var(--gray-100); }
.dark .mr-seg { background: rgb(255 255 255 / .06); }
.mr-seg > button, .mr-seg > a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: .65rem; font-size: .875rem; font-weight: 500; color: var(--gray-500); text-decoration: none; transition: all .15s; }
.mr-seg > button:hover, .mr-seg > a:hover { color: var(--gray-900); }
.dark .mr-seg > button:hover, .dark .mr-seg > a:hover { color: #fff; }
.mr-seg > .is-active { background: #fff; color: var(--gray-950); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
.dark .mr-seg > .is-active { background: var(--gray-700); color: #fff; }

/* ── Selectable tiles ── */
.mr-pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .85rem .6rem; border-radius: .9rem; border: 1.5px solid var(--gray-200); background: #fff; font-weight: 600; font-size: .88rem; color: var(--gray-800); cursor: pointer; transition: all .15s; text-align: center; }
.mr-pick:hover { border-color: var(--primary-300); }
.mr-pick.is-active { border-color: var(--primary-500); background: var(--primary-50); color: var(--primary-800); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 15%, transparent); }
.dark .mr-pick { background: var(--gray-900); border-color: rgb(255 255 255 / .1); color: var(--gray-200); }
.dark .mr-pick.is-active { background: color-mix(in oklab, var(--primary-500) 15%, transparent); color: var(--primary-200); border-color: var(--primary-500); }
.mr-pick small { font-weight: 400; font-size: .72rem; color: var(--gray-500); }

/* ── Step headings ── */
.mr-step { display: flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1rem; }
.mr-step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--primary-600); color: #fff; font-size: .82rem; }

/* ── MCQ options ── */
.mr-options { display: grid; gap: .6rem; }
.mr-option { display: flex; align-items: flex-start; gap: .8rem; width: 100%; padding: .8rem 1rem; border: 2px solid var(--gray-200); border-radius: .95rem; background: #fff; text-align: start; font-size: .95rem; line-height: 1.7; color: var(--gray-800); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.mr-option:not(:disabled):hover { border-color: var(--primary-400); background: var(--primary-50); }
.mr-option:not(:disabled):active { transform: scale(.995); }
.mr-option:disabled { cursor: default; }
.dark .mr-option { background: var(--gray-900); border-color: rgb(255 255 255 / .1); color: var(--gray-100); }
.dark .mr-option:not(:disabled):hover { background: color-mix(in oklab, var(--primary-500) 10%, transparent); }
.mr-letter { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: var(--gray-100); font-weight: 700; font-size: .82rem; color: var(--gray-700); }
.dark .mr-letter { background: rgb(255 255 255 / .08); color: var(--gray-200); }
.mr-option.is-correct { border-color: var(--success-500); background: var(--success-50); }
.mr-option.is-correct .mr-letter { background: var(--success-500); color: #fff; }
.mr-option.is-wrong { border-color: var(--danger-500); background: var(--danger-50); }
.mr-option.is-wrong .mr-letter { background: var(--danger-500); color: #fff; }
.dark .mr-option.is-correct { background: color-mix(in oklab, var(--success-500) 14%, transparent); }
.dark .mr-option.is-wrong { background: color-mix(in oklab, var(--danger-500) 14%, transparent); }
.mr-option.is-dim { opacity: .55; }
.mr-option-sm { padding: .45rem .75rem; font-size: .88rem; border-width: 1px; border-radius: .7rem; }
.mr-stem { font-size: 1.05rem; line-height: 2; color: var(--gray-900); }
.dark .mr-stem { color: var(--gray-50); }

.mr-explain { border-radius: .95rem; padding: 1rem 1.1rem; background: var(--gray-50); font-size: .92rem; line-height: 1.85; }
.dark .mr-explain { background: rgb(255 255 255 / .04); }
.mr-explain.is-ok { background: var(--success-50); }
.mr-explain.is-bad { background: var(--danger-50); }
.dark .mr-explain.is-ok { background: color-mix(in oklab, var(--success-500) 12%, transparent); }
.dark .mr-explain.is-bad { background: color-mix(in oklab, var(--danger-500) 12%, transparent); }
.mr-explain-title { font-weight: 700; margin-bottom: .25rem; }

.mr-answer-list { display: grid; gap: .3rem; font-size: .88rem; }
.mr-answer-list li { padding: .35rem .7rem; border-radius: .55rem; background: var(--gray-50); list-style: none; }
.dark .mr-answer-list li { background: rgb(255 255 255 / .04); }
.mr-answer-list li.is-correct { background: var(--success-50); color: var(--success-800); font-weight: 600; }
.dark .mr-answer-list li.is-correct { background: color-mix(in oklab, var(--success-500) 14%, transparent); color: var(--success-300); }

/* ── Question map ── */
.mr-qmap { display: flex; flex-wrap: wrap; gap: .4rem; direction: ltr; }
.mr-qmap button { width: 2.1rem; height: 2.1rem; border-radius: .55rem; font-size: .75rem; font-weight: 600; background: var(--gray-100); color: var(--gray-600); transition: transform .1s; }
.mr-qmap button:hover { transform: scale(1.08); }
.dark .mr-qmap button { background: rgb(255 255 255 / .07); color: var(--gray-300); }
.mr-qmap button.is-ok { background: var(--success-500); color: #fff; }
.mr-qmap button.is-bad { background: var(--danger-500); color: #fff; }
.mr-qmap button.is-current { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary-500); }
.dark .mr-qmap button.is-current { box-shadow: 0 0 0 2px var(--gray-900), 0 0 0 4px var(--primary-500); }

/* ── Grades (التكرار المتباعد) ── */
.mr-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.mr-grade { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .7rem .4rem; border-radius: .9rem; border: 1.5px solid; font-weight: 700; font-size: .9rem; background: #fff; transition: transform .12s, box-shadow .12s; }
.dark .mr-grade { background: var(--gray-900); }
.mr-grade:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgb(0 0 0 / .3); }
.mr-grade small { font-weight: 400; font-size: .72rem; color: var(--gray-500); }
.mr-grade-again { border-color: var(--danger-300); color: var(--danger-600); }
.mr-grade-hard { border-color: var(--warning-300); color: var(--warning-600); }
.mr-grade-good { border-color: var(--success-300); color: var(--success-600); }
.mr-grade-easy { border-color: var(--info-300); color: var(--info-600); }

.mr-counter { display: flex; flex-direction: column; align-items: center; padding: .55rem 1rem; border-radius: .9rem; min-width: 5rem; background: var(--c-50, var(--gray-50)); }
.dark .mr-counter { background: color-mix(in oklab, var(--c-500, var(--gray-500)) 14%, transparent); }
.mr-counter b { font-size: 1.35rem; color: var(--c-600, var(--gray-800)); font-variant-numeric: tabular-nums; }
.dark .mr-counter b { color: var(--c-400, var(--gray-200)); }
.mr-counter span { font-size: .72rem; color: var(--gray-500); }

/* ── Dropzone ── */
.mr-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; padding: 2rem 1rem; border: 2px dashed var(--gray-300); border-radius: 1rem; text-align: center; cursor: pointer; transition: all .15s; background: var(--gray-50); }
.mr-drop:hover, .mr-drop.is-drag { border-color: var(--primary-500); background: var(--primary-50); }
.dark .mr-drop { background: rgb(255 255 255 / .02); border-color: rgb(255 255 255 / .15); }
.dark .mr-drop:hover { background: color-mix(in oklab, var(--primary-500) 8%, transparent); }
.mr-drop-icon { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--primary-100); color: var(--primary-700); }
.dark .mr-drop-icon { background: color-mix(in oklab, var(--primary-500) 18%, transparent); color: var(--primary-300); }
.mr-files { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
.mr-files > div { display: flex; align-items: center; gap: .5rem; padding: .4rem .65rem; border-radius: .55rem; background: var(--gray-50); direction: ltr; }
.dark .mr-files > div { background: rgb(255 255 255 / .04); }

/* ── Forms (native inputs styled like Filament) ── */
.mr-field { display: flex; flex-direction: column; gap: .4rem; }
.mr-label { font-size: .85rem; font-weight: 500; color: var(--gray-950); }
.dark .mr-label { color: #fff; }
.mr-hint { font-size: .75rem; color: var(--gray-500); }
.mr-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; cursor: pointer; line-height: 1.6; }
.mr-check input { margin-top: .3rem; }
.mr-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.mr-error { font-size: .8rem; color: var(--danger-600); }

/* ── Code / preformatted ── */
.mr-code { direction: ltr; text-align: left; white-space: pre; overflow-x: auto; padding: .9rem 1rem; border-radius: .8rem; background: var(--gray-50); border: 1px solid var(--gray-100); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; line-height: 1.65; color: var(--gray-700); }
.mr-code-wrap { white-space: pre-wrap; max-height: 24rem; }
.dark .mr-code { background: rgb(0 0 0 / .25); border-color: rgb(255 255 255 / .06); color: var(--gray-300); }
code.mr-inline-code { direction: ltr; unicode-bidi: embed; padding: .05rem .35rem; border-radius: .3rem; background: var(--gray-100); font-size: .82em; }
.dark code.mr-inline-code { background: rgb(255 255 255 / .08); }
.mr-details { border: 1px solid var(--gray-200); border-radius: .9rem; padding: .85rem 1rem; }
.dark .mr-details { border-color: rgb(255 255 255 / .08); }
.mr-details > summary { cursor: pointer; font-weight: 600; font-size: .88rem; }
.mr-ul { list-style: disc; padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }

/* ── Empty state ── */
.mr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; }
.mr-empty-emoji { font-size: 2.75rem; line-height: 1; }
.mr-empty-title { font-weight: 700; font-size: 1.05rem; }

/* ── Topic page ── */
.mr-subnav { position: sticky; top: 4.25rem; z-index: 10; display: flex; gap: .25rem; overflow-x: auto; padding: .4rem; border-radius: .95rem; border: 1px solid var(--gray-200); background: rgb(255 255 255 / .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); scrollbar-width: none; }
.dark .mr-subnav { background: rgb(24 24 27 / .85); border-color: rgb(255 255 255 / .08); }
.mr-subnav a { display: inline-flex; flex-shrink: 0; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: .65rem; font-size: .83rem; color: var(--gray-600); text-decoration: none; white-space: nowrap; }
.mr-subnav a:hover { background: var(--gray-100); color: var(--gray-900); }
.dark .mr-subnav a { color: var(--gray-300); }
.dark .mr-subnav a:hover { background: rgb(255 255 255 / .06); color: #fff; }
.mr-subnav a.is-gold { color: var(--warning-700); }
.dark .mr-subnav a.is-gold { color: var(--warning-400); }
.mr-section { scroll-margin-top: 8rem; }
.mr-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .85rem; margin-bottom: .85rem; border-bottom: 1px solid var(--gray-100); }
.dark .mr-section-head { border-color: rgb(255 255 255 / .06); }
.mr-section-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: .65rem; background: var(--primary-50); color: var(--primary-600); }
.dark .mr-section-icon { background: color-mix(in oklab, var(--primary-500) 15%, transparent); color: var(--primary-400); }
.mr-section-en { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); direction: ltr; }
.mr-pearls { border: 2px solid var(--warning-300); background: linear-gradient(160deg, var(--warning-50), #fff 70%); }
.dark .mr-pearls { border-color: color-mix(in oklab, var(--warning-500) 45%, transparent); background: linear-gradient(160deg, color-mix(in oklab, var(--warning-500) 10%, var(--gray-900)), var(--gray-900) 70%); }
.mr-topic-card { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; border-radius: .95rem; border: 1px solid var(--gray-200); background: #fff; text-decoration: none; color: inherit; transition: all .16s ease; }
.mr-topic-card:hover { border-color: var(--t-300, var(--primary-300)); box-shadow: 0 10px 22px -14px rgb(0 0 0 / .25); transform: translateY(-2px); }
.dark .mr-topic-card { background: var(--gray-900); border-color: rgb(255 255 255 / .08); }
.mr-topic-title { font-weight: 700; direction: ltr; text-align: right; color: var(--gray-900); }
.dark .mr-topic-title { color: #fff; }
.mr-topic-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; font-size: .75rem; color: var(--gray-500); }
.mr-topic-done { color: var(--success-600); }
.mr-group-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; padding-bottom: .5rem; margin-bottom: .85rem; border-bottom: 1px solid var(--gray-100); }
.dark .mr-group-head { border-color: rgb(255 255 255 / .06); }

/* ── Question cards (بنك الأسئلة داخل الموضوع) ── */
.mr-qcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .85rem; }

/* ── Flashcards ── */
.mr-flash { display: flex; flex-direction: column; min-height: 11rem; padding: 1rem; border-radius: 1rem; border: 1px solid var(--gray-200); background: #fff; transition: box-shadow .15s, border-color .15s; }
.mr-flash:hover { border-color: var(--primary-300); box-shadow: 0 10px 22px -14px rgb(0 0 0 / .25); }
.dark .mr-flash { background: var(--gray-900); border-color: rgb(255 255 255 / .08); }
.mr-flash-body { flex: 1; direction: ltr; text-align: left; font-size: .9rem; line-height: 1.7; cursor: pointer; padding: .25rem 0; }
.mr-flash-back { color: var(--success-700); }
.dark .mr-flash-back { color: var(--success-400); }
.mr-flash-foot { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; color: var(--gray-400); }

/* ── Rapid review (للهاتف) ── */
.mr-rapid { max-width: 28rem; margin-inline: auto; min-height: 78vh; display: flex; flex-direction: column; gap: .8rem; }
.mr-rapid-card { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2rem 1.5rem; border-radius: 1.75rem; border: 1px solid var(--gray-200); background: radial-gradient(28rem 14rem at 50% -10%, color-mix(in oklab, var(--primary-500) 8%, transparent), transparent 70%), #fff; box-shadow: 0 24px 48px -28px rgb(15 23 42 / .35); transition: transform .08s; text-align: center; }
.dark .mr-rapid-card { background: var(--gray-900); border-color: rgb(255 255 255 / .08); }
.mr-rapid-front { font-size: 1.35rem; line-height: 1.9; font-weight: 600; color: var(--gray-950); }
.dark .mr-rapid-front { color: #fff; }
.mr-rapid-back { font-size: 1.05rem; color: var(--gray-700); text-align: start; }
.dark .mr-rapid-back { color: var(--gray-200); }
.mr-big-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem; border-radius: 1.1rem; font-size: 1.05rem; font-weight: 700; color: #fff; transition: transform .1s; }
.mr-big-btn:active { transform: scale(.98); }
.mr-big-btn.is-danger { background: var(--danger-500); }
.mr-big-btn.is-success { background: var(--success-600); }
.mr-big-btn.is-primary { background: var(--primary-600); }

/* ── Chat ── */
.mr-chat { height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: .8rem; padding: 1rem; border-radius: 1rem; border: 1px solid var(--gray-200); background: var(--gray-50); scroll-behavior: smooth; }
.dark .mr-chat { background: rgb(0 0 0 / .2); border-color: rgb(255 255 255 / .06); }
.mr-bubble { max-width: 85%; padding: .75rem 1rem; border-radius: 1.1rem; font-size: .9rem; line-height: 1.85; }
.mr-bubble-user { align-self: flex-start; background: var(--primary-600); color: #fff; border-end-start-radius: .35rem; }
.mr-bubble-ai { align-self: flex-end; background: #fff; border: 1px solid var(--gray-200); border-end-end-radius: .35rem; }
.dark .mr-bubble-ai { background: var(--gray-800); border-color: rgb(255 255 255 / .06); }
.mr-bubble-src { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--gray-100); font-size: .75rem; color: var(--gray-500); }
.dark .mr-bubble-src { border-color: rgb(255 255 255 / .08); }
.mr-chat-empty { margin: auto; text-align: center; font-size: .88rem; color: var(--gray-500); line-height: 2; }
.mr-typing { display: inline-flex; gap: .25rem; }
.mr-typing i { width: .4rem; height: .4rem; border-radius: 999px; background: var(--gray-400); animation: mr-blink 1.2s infinite; }
.mr-typing i:nth-child(2) { animation-delay: .2s; } .mr-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes mr-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ── Activity chart ── */
.mr-activity { display: flex; align-items: flex-end; gap: .3rem; height: 9rem; direction: ltr; }
.mr-activity > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; }
.mr-activity-bar { width: 100%; border-radius: .35rem .35rem .15rem .15rem; background: linear-gradient(180deg, var(--primary-400), var(--primary-600)); min-height: 3px; }
.mr-activity small { font-size: .62rem; color: var(--gray-400); }

/* ── Plan / checklist ── */
.mr-check-row { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; }
.mr-check-row.is-done .mr-check-title { text-decoration: line-through; color: var(--gray-400); }
.mr-tick { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: .45rem; border: 1.5px solid var(--gray-300); color: #fff; transition: all .15s; }
.mr-tick.is-on { background: var(--success-500); border-color: var(--success-500); }
.dark .mr-tick { border-color: var(--gray-600); }
.mr-day { padding: .6rem 0; }
.mr-day-date { font-size: .75rem; font-weight: 600; color: var(--primary-600); }
.dark .mr-day-date { color: var(--primary-400); }

/* ── Prose (محتوى المواضيع) ── */
.mr-prose { line-height: 1.85; font-size: .95rem; color: var(--gray-700); }
.dark .mr-prose { color: var(--gray-300); }
.mr-prose h1, .mr-prose h2, .mr-prose h3 { font-weight: 700; margin: 1rem 0 .5rem; color: var(--gray-900); }
.dark .mr-prose h1, .dark .mr-prose h2, .dark .mr-prose h3, .dark .mr-prose h4 { color: #fff; }
.mr-prose h3 { font-size: 1.05rem; }
.mr-prose h4 { font-size: .95rem; font-weight: 700; margin: .9rem 0 .3rem; color: var(--gray-900); }
.mr-prose p { margin: .5rem 0; }
.mr-prose ul { list-style: disc; padding-inline-start: 1.5rem; margin: .5rem 0; }
.mr-prose ol { list-style: decimal; padding-inline-start: 1.5rem; margin: .5rem 0; }
.mr-prose li { margin: .2rem 0; }
.mr-prose li > ul, .mr-prose li > ol { margin: .2rem 0; }
.mr-prose strong, .mr-prose b { font-weight: 700; color: var(--gray-900); }
.dark .mr-prose strong, .dark .mr-prose b { color: #fff; }
.mr-prose em, .mr-prose i { font-style: italic; }
.mr-prose u { text-decoration: underline; }
.mr-prose a { color: var(--primary-600); text-decoration: underline; }
.mr-prose table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .88rem; }
.mr-prose th, .mr-prose td { border: 1px solid var(--gray-200); padding: .45rem .65rem; text-align: start; vertical-align: top; }
.dark .mr-prose th, .dark .mr-prose td { border-color: rgb(255 255 255 / .1); }
.mr-prose th { background: var(--gray-50); font-weight: 700; }
.dark .mr-prose th { background: rgb(255 255 255 / .05); }
.mr-prose code { font-size: .85em; background: var(--gray-100); padding: .1rem .3rem; border-radius: .25rem; }
.dark .mr-prose code { background: rgb(255 255 255 / .08); }
.mr-prose mark { background: #fde047; color: #18181b; padding: 0 .15em; border-radius: .15rem; }
.mr-prose blockquote { border-inline-start: 3px solid var(--gray-300); padding-inline-start: .75rem; color: var(--gray-500); }
.mr-prose [style*="background-color"] { color: #18181b; }
.mr-scroll-x { overflow-x: auto; }

/* ── Rich editor (المحرر المدمج) ── */
.med-editor { position: relative; border: 1px solid var(--gray-200); border-radius: .75rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.med-editor:focus-within { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-500); }
.dark .med-editor { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .1); }
.med-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; padding: .3rem; border-bottom: 1px solid var(--gray-200); }
.dark .med-toolbar { border-color: rgb(255 255 255 / .08); }
.med-tb { display: inline-flex; align-items: center; justify-content: center; gap: .15rem; min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; border-radius: .4rem; font-size: .85rem; color: var(--gray-700); cursor: pointer; background: transparent; }
.med-tb:hover { background: var(--gray-100); }
.dark .med-tb { color: var(--gray-200); }
.dark .med-tb:hover { background: rgb(255 255 255 / .08); }
.med-important { background: #fef08a; color: #18181b; font-weight: 700; }
.med-important:hover { background: #fde047; }
.med-keybox { border: 2px solid #f59e0b !important; background: rgba(245, 158, 11, .1); font-weight: 700; }
.med-keybox:hover { background: rgba(245, 158, 11, .22); }
.med-danger { color: var(--danger-600); grid-column: span 2 / span 2; }
.med-sep { width: 1px; height: 1.25rem; margin: 0 .25rem; background: var(--gray-200); }
.dark .med-sep { background: rgb(255 255 255 / .1); }
.med-rel { position: relative; }
.med-pop { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: .25rem; display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem; width: 11rem; border-radius: .6rem; border: 1px solid var(--gray-200); background: #fff; box-shadow: 0 10px 28px rgb(0 0 0 / .14); }
.dark .med-pop { background: var(--gray-900); border-color: rgb(255 255 255 / .1); }
.med-pop-table { width: 14rem; flex-direction: column; align-items: stretch; gap: .45rem; font-size: .82rem; }
.med-pop-row { display: flex; align-items: center; gap: .5rem; }
.med-pop-row span { width: 3.2rem; }
.med-pop-row input { flex: 1; min-width: 0; padding: .2rem .45rem; border: 1px solid var(--gray-300); border-radius: .35rem; background: transparent; }
.med-insert { padding: .35rem; border-radius: .4rem; background: var(--primary-600); color: #fff; font-weight: 600; }
.med-pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; padding-top: .45rem; border-top: 1px solid var(--gray-200); }
.med-swatch { width: 1.6rem; height: 1.6rem; border-radius: .35rem; border: 1px solid rgb(0 0 0 / .15); cursor: pointer; font-size: .7rem; }
.med-content { max-height: 70vh; overflow-y: auto; padding: .8rem 1rem; outline: none; }
.med-content:empty::before { content: 'اكتب هنا…'; color: var(--gray-400); }
.med-content table td, .med-content table th { min-width: 3rem; }


/* ── Sidebar polish ── */
.fi-sidebar-group-label { font-size: .72rem; letter-spacing: .02em; }
.fi-sidebar-item-btn { border-radius: .7rem; }

/* ── Misc ── */
.mr-emoji-lg { font-size: 3rem; line-height: 1; }
.mr-badge-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 999px; background: var(--danger-500); }
.mr-loading { opacity: .6; pointer-events: none; }
.mr-sticky-bar { position: sticky; bottom: 1rem; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-radius: 1rem; border: 1px solid var(--gray-200); background: rgb(255 255 255 / .92); backdrop-filter: blur(10px); box-shadow: 0 16px 32px -20px rgb(0 0 0 / .35); }
.dark .mr-sticky-bar { background: rgb(24 24 27 / .9); border-color: rgb(255 255 255 / .08); }
.mr-pagination { margin-top: .5rem; }
@media (max-width: 639px) {
    .mr-hero { padding: 1.25rem; }
    .mr-hero-title { font-size: 1.3rem; }
    .mr-barrow-label { width: 6.5rem; }
    .mr-grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mr-hide-sm { display: none; }
}

/* ── UWorld-style additions ── */
.mr-option.is-selected { border-color: var(--primary-500); background: var(--primary-50); }
.mr-option.is-selected .mr-letter { background: var(--primary-600); color: #fff; }
.dark .mr-option.is-selected { background: color-mix(in oklab, var(--primary-500) 14%, transparent); }
.mr-qmap button { position: relative; }
.mr-qmap button.is-answered { background: var(--primary-500); color: #fff; }
.mr-qmap button.is-marked::after { content: ''; position: absolute; top: -3px; left: -3px; width: .6rem; height: .6rem; border-radius: 999px; background: var(--warning-500); box-shadow: 0 0 0 2px #fff; }
.mr-mode { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem; border-radius: .95rem; border: 1.5px solid var(--gray-200); cursor: pointer; transition: all .15s; }
.mr-mode.is-on { border-color: var(--primary-400); background: var(--primary-50); }
.dark .mr-mode { border-color: rgb(255 255 255 / .1); }
.dark .mr-mode.is-on { background: color-mix(in oklab, var(--primary-500) 10%, transparent); border-color: var(--primary-600); }

.mr-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mr-table th { text-align: start; font-weight: 600; font-size: .78rem; color: var(--gray-500); padding: .7rem 1rem; border-bottom: 1px solid var(--gray-200); white-space: nowrap; background: var(--gray-50); }
.mr-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.mr-table tbody tr { transition: background .12s; }
.mr-table tbody tr[wire\:click], .mr-table tbody tr.is-link { cursor: pointer; }
.mr-table tbody tr:hover { background: var(--gray-50); }
.mr-table td.mr-truncate { max-width: 16rem; }
.dark .mr-table th { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .08); color: var(--gray-400); }
.dark .mr-table td { border-color: rgb(255 255 255 / .05); }
.dark .mr-table tbody tr:hover { background: rgb(255 255 255 / .03); }
.mr-score { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: conic-gradient(var(--sc, var(--gray-300)) calc(var(--p) * 1%), var(--gray-100) 0); }
.mr-score > span { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 999px; background: #fff; }
.dark .mr-score { background: conic-gradient(var(--sc, var(--gray-500)) calc(var(--p) * 1%), rgb(255 255 255 / .08) 0); }
.dark .mr-score > span { background: var(--gray-900); }
.mr-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .78rem; color: var(--gray-600); }
.mr-legend i { display: inline-block; width: .6rem; height: .6rem; border-radius: 999px; margin-inline-end: .3rem; }
.dark .mr-legend { color: var(--gray-400); }
.mr-donut { width: 9rem; height: 9rem; border-radius: 999px; display: grid; place-items: center; }
.mr-donut > span { width: 7rem; height: 7rem; border-radius: 999px; background: #fff; display: grid; place-items: center; text-align: center; line-height: 1.3; }
.dark .mr-donut > span { background: var(--gray-900); }
.mr-donut b { display: block; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.mr-tabs-line { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--gray-200); }
.mr-tabs-line button { padding: .6rem .1rem; font-weight: 600; font-size: .9rem; color: var(--gray-500); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mr-tabs-line button.is-active { color: var(--primary-600); border-color: var(--primary-600); }
.dark .mr-tabs-line { border-color: rgb(255 255 255 / .08); }
.mr-week { display: flex; flex-direction: column; }
.mr-week-day { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--gray-100); }
.mr-week-day:last-child { border-bottom: 0; }
.mr-week-day.is-today { background: color-mix(in oklab, var(--primary-500) 6%, transparent); }
.dark .mr-week-day { border-color: rgb(255 255 255 / .05); }
.mr-week-date { display: flex; align-items: center; gap: .45rem; }
.mr-week-date b { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.mr-week-day.is-today .mr-week-date b { background: var(--primary-600); color: #fff; }
.mr-week-date span { font-size: .8rem; color: var(--gray-500); }
.mr-note-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .mr-note-layout { grid-template-columns: 20rem minmax(0, 1fr); } }
.mr-tree { display: flex; flex-direction: column; gap: .15rem; font-size: .86rem; }
.mr-tree details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .35rem; padding: .35rem .5rem; border-radius: .5rem; font-weight: 600; }
.mr-tree details > summary::-webkit-details-marker { display: none; }
.mr-tree details > summary::before { content: '▾'; font-size: .7rem; color: var(--gray-400); transition: transform .15s; }
.mr-tree details:not([open]) > summary::before { transform: rotate(90deg); }
.mr-tree details > summary:hover { background: var(--gray-100); }
.dark .mr-tree details > summary:hover { background: rgb(255 255 255 / .05); }
.mr-tree .mr-tree-children { padding-inline-start: 1rem; display: flex; flex-direction: column; gap: .1rem; }
.mr-tree-note { display: block; width: 100%; text-align: start; padding: .4rem .6rem; border-radius: .5rem; color: var(--gray-700); }
.mr-tree-note:hover { background: var(--gray-100); }
.mr-tree-note.is-active { background: var(--primary-50); color: var(--primary-800); font-weight: 600; }
.dark .mr-tree-note { color: var(--gray-300); }
.dark .mr-tree-note:hover { background: rgb(255 255 255 / .05); }
.dark .mr-tree-note.is-active { background: color-mix(in oklab, var(--primary-500) 15%, transparent); color: var(--primary-200); }
.mr-svg-chart { width: 100%; height: 16rem; }
.mr-svg-chart .grid { stroke: var(--gray-200); stroke-width: 1; }
.dark .mr-svg-chart .grid { stroke: rgb(255 255 255 / .08); }
.mr-svg-chart text { fill: var(--gray-500); font-size: 11px; }

/* ── Word-like editor additions ── */
.med-tb.is-on { background: var(--primary-100); color: var(--primary-800); }
.dark .med-tb.is-on { background: color-mix(in oklab, var(--primary-500) 25%, transparent); color: var(--primary-200); }
.med-wide { padding: 0 .5rem; }
.med-ic { width: 1rem; height: 1rem; }
.med-toolbar { position: sticky; top: 4rem; z-index: 5; background: inherit; border-radius: .75rem .75rem 0 0; }
.med-editor { background: #fff; }
.dark .med-editor { background: var(--gray-900); }
.med-menu { flex-direction: column; align-items: stretch; width: 12rem; gap: .1rem; }
.med-menu > button { text-align: start; padding: .4rem .6rem; border-radius: .4rem; font-size: .85rem; }
.med-menu > button:hover { background: var(--gray-100); }
.dark .med-menu > button:hover { background: rgb(255 255 255 / .06); }
.med-pop-link { width: 17rem; flex-direction: column; align-items: stretch; gap: .5rem; font-size: .82rem; }
.med-pop-link input { width: 100%; padding: .35rem .5rem; border: 1px solid var(--gray-300); border-radius: .4rem; background: transparent; }
.med-grid-pick { display: grid; grid-template-columns: repeat(8, 1.15rem); gap: 3px; justify-content: center; direction: ltr; }
.med-grid-pick span { width: 1.15rem; height: 1.15rem; border: 1px solid var(--gray-300); border-radius: 3px; cursor: pointer; }
.med-grid-pick span.is-on { background: var(--primary-200); border-color: var(--primary-500); }
.med-table-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .35rem .5rem; background: var(--primary-50); border-bottom: 1px solid var(--primary-200); font-size: .78rem; }
.dark .med-table-bar { background: color-mix(in oklab, var(--primary-500) 10%, transparent); border-color: color-mix(in oklab, var(--primary-500) 30%, transparent); }
.med-table-bar button { padding: .25rem .5rem; border-radius: .4rem; background: #fff; border: 1px solid var(--gray-200); }
.med-table-bar button:hover { border-color: var(--primary-400); }
.med-table-bar button.is-danger { color: var(--danger-600); }
.dark .med-table-bar button { background: var(--gray-800); border-color: rgb(255 255 255 / .1); }
.med-table-label { font-weight: 700; color: var(--primary-700); margin-inline-end: .25rem; }
.med-content td:focus-within, .med-content th:focus-within { outline: 2px solid var(--primary-300); }
.mr-prose hr { border: 0; border-top: 1px solid var(--gray-300); margin: 1rem 0; }
.mr-prose h2 { font-size: 1.2rem; }
.mr-prose pre { font-family: ui-monospace, monospace; background: var(--gray-50); padding: .6rem .8rem; border-radius: .5rem; white-space: pre-wrap; }
.dark .mr-prose pre { background: rgb(255 255 255 / .05); }
.mr-prose sub, .mr-prose sup { font-size: .75em; }
.mr-prose blockquote { margin: .5rem 0; }
.mr-prose [style*="margin-left"], .mr-prose [style*="margin-right"] { }
.mr-section-actions { opacity: 0; transition: opacity .15s; }
.mr-section:hover .mr-section-actions, .mr-section:focus-within .mr-section-actions, .mr-section-actions.is-visible { opacity: 1; }

/* ───── تذييل اللوحة: المصادر + سياسة الخصوصية ───── */
.mr-app-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; max-width: 80rem; margin: 2.5rem auto 0; padding: 1rem 2rem 1.5rem; font-size: .78rem; color: var(--gray-500); border-top: 1px solid var(--gray-200); }
.mr-app-footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.mr-app-footer a { color: var(--gray-500); }
.mr-app-footer a:hover { color: var(--primary-600); }
.dark .mr-app-footer { border-color: rgb(255 255 255 / .08); color: var(--gray-400); }
.dark .mr-app-footer a { color: var(--gray-400); }

/* ───── مكتبة المصادر ───── */
.mr-sources { display: grid; gap: .75rem; }
.mr-source { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--gray-200); border-radius: 1rem; transition: .15s; }
.mr-source:hover { border-color: color-mix(in oklab, var(--primary-500) 40%, transparent); box-shadow: 0 8px 24px -18px rgb(15 23 42 / .35); }
.dark .mr-source { background: var(--gray-900); border-color: rgb(255 255 255 / .08); }
.mr-source-icon { flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; width: 3rem; height: 3.6rem; border-radius: .35rem .9rem .35rem .35rem; background: linear-gradient(160deg, #fb7185, #e11d48); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .05em; padding-bottom: .45rem; box-shadow: 0 6px 14px -6px rgb(225 29 72 / .55); }
.mr-source-body { flex: 1; min-width: 0; }
.mr-source-title { display: block; font-weight: 700; color: var(--gray-950); font-size: 1rem; line-height: 1.5; }
.mr-source-title:hover { color: var(--primary-600); }
.dark .mr-source-title { color: #fff; }
.mr-source-desc { margin: .15rem 0 0; font-size: .85rem; color: var(--gray-500); }
.mr-source-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .76rem; color: var(--gray-500); }
.mr-source-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
@media (max-width: 640px) {
    .mr-source { flex-wrap: wrap; }
    .mr-source-actions { width: 100%; }
    .mr-source-actions > a { flex: 1; }
}

.mr-note-published { border-inline-start: 3px solid var(--primary-500); }

/* ───── البطاقات التعليمية: تصميم مركّز بقلب ثلاثي الأبعاد ───── */
.mr-fc-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 46rem; margin-inline: auto; }
.mr-fc { display: flex; flex-direction: column; gap: .4rem; perspective: 1400px; }
.mr-fc-inner { position: relative; display: grid; flex: 1; min-height: 13.5rem; cursor: pointer; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2, .8, .2, 1); border-radius: 1.25rem; outline: none; }
.mr-fc-inner:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 40%, transparent); }
.mr-fc.is-flipped .mr-fc-inner { transform: rotateY(180deg); }
.mr-fc-face { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 1.1rem 1.2rem .9rem; border-radius: 1.25rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--gray-200); background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 14px 30px -24px rgb(15 23 42 / .35); transition: border-color .15s, box-shadow .15s; }
.mr-fc:hover .mr-fc-face { border-color: color-mix(in oklab, var(--primary-500) 35%, var(--gray-200)); box-shadow: 0 18px 36px -24px rgb(31 58 140 / .45); }
.mr-fc-back { transform: rotateY(180deg); background: linear-gradient(180deg, color-mix(in oklab, var(--primary-500) 6%, #fff), #fff 45%); }
.dark .mr-fc-face { background: var(--gray-900); border-color: rgb(255 255 255 / .08); }
.dark .mr-fc-back { background: linear-gradient(180deg, color-mix(in oklab, var(--primary-500) 12%, var(--gray-900)), var(--gray-900) 45%); }
.mr-fc-top { display: flex; align-items: center; gap: .45rem; min-height: 1.2rem; }
.mr-fc-imp { width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; background: var(--gray-300); }
.mr-fc-imp.imp-very_high { background: var(--danger-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger-500) 18%, transparent); }
.mr-fc-imp.imp-high { background: var(--warning-500); }
.mr-fc-imp.imp-medium { background: var(--info-500); }
.mr-fc-topic { font-size: .72rem; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-fc-label { font-size: .72rem; font-weight: 700; color: var(--primary-600); letter-spacing: .02em; }
.mr-fc-text { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: .9rem .25rem; font-size: 1.05rem; line-height: 1.75; font-weight: 600; color: var(--gray-950); }
.dark .mr-fc-text { color: #fff; }
.mr-fc-answer { flex: 1; overflow-y: auto; max-height: 15rem; padding: .6rem .1rem; font-size: .92rem; }
.mr-fc-hint { text-align: center; font-size: .7rem; color: var(--gray-400); }
.mr-fc-foot { display: flex; align-items: center; justify-content: space-between; min-height: 1.9rem; padding: 0 .35rem; }
.mr-fc-tag { font-size: .68rem; padding: .1rem .5rem; border-radius: 99px; background: var(--gray-100); color: var(--gray-600); }
.mr-fc-tag.is-anki { background: color-mix(in oklab, var(--success-500) 14%, transparent); color: var(--success-700); }
.dark .mr-fc-tag { background: rgb(255 255 255 / .06); color: var(--gray-300); }
.mr-fc-foot .fi-icon-btn { opacity: .55; transition: opacity .15s; }
.mr-fc:hover .mr-fc-foot .fi-icon-btn { opacity: 1; }
@media (hover: none) { .mr-fc-foot .fi-icon-btn { opacity: 1; } }

/* مراجعة البطاقة (المراجعة اليومية والسريعة) */
.mr-study-card { background: radial-gradient(36rem 16rem at 50% -8%, color-mix(in oklab, var(--primary-500) 8%, transparent), transparent 70%), #fff; }
.dark .mr-study-card { background: radial-gradient(36rem 16rem at 50% -8%, color-mix(in oklab, var(--primary-500) 14%, transparent), transparent 70%), var(--gray-900); }
.mr-study { display: flex; flex-direction: column; }
.mr-study-front { min-height: 7rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem .5rem; font-size: 1.4rem; line-height: 1.8; font-weight: 600; color: var(--gray-950); }
.dark .mr-study-front { color: #fff; }
.mr-study-sep { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .75rem; color: var(--primary-600); font-size: .75rem; font-weight: 700; }
.mr-study-sep::before, .mr-study-sep::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--primary-500) 40%, transparent), transparent); }
.mr-study-back { font-size: 1.02rem; animation: mr-rise .25s ease-out; }
@keyframes mr-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* لوحة Anki */
.mr-anki-help { font-size: .82rem; color: var(--gray-600); background: var(--gray-50); border-radius: .75rem; padding: .5rem .75rem; }
.mr-anki-help summary { cursor: pointer; font-weight: 600; color: var(--gray-700); }
.mr-anki-help ol { margin: .5rem 0 .25rem; padding-inline-start: 1.1rem; display: grid; gap: .35rem; }
.dark .mr-anki-help { background: rgb(255 255 255 / .04); color: var(--gray-300); }
.dark .mr-anki-help summary { color: var(--gray-200); }

/* ───── القائمة الجانبية بكامل الارتفاع، والشريط العلوي فوق المحتوى فقط (الشاشات الكبيرة) ───── */
@media (min-width: 1024px) {
    body .fi-main-sidebar { position: fixed !important; top: 0 !important; bottom: 0; height: 100dvh !important; z-index: 31; background: #fff; border-inline-end: 1px solid var(--gray-200); }
    .dark body .fi-main-sidebar, body.dark .fi-main-sidebar { background: var(--gray-900); border-color: rgb(255 255 255 / .08); }
    body .fi-main-sidebar .fi-sidebar-header { display: flex !important; background: transparent; box-shadow: none; --tw-ring-shadow: 0 0 #0000; padding-inline: 1.25rem; border-bottom: 1px solid var(--gray-100); }
    .dark body .fi-main-sidebar .fi-sidebar-header { border-color: rgb(255 255 255 / .06); }
    /* الشعار ينتقل للقائمة، فنخفيه من الشريط العلوي */
    body .fi-topbar-start > a { display: none; }
    /* إزاحة الشريط العلوي والمحتوى بعرض القائمة (مفتوحة أو مطوية) */
    body:has(.fi-main-sidebar.fi-sidebar-open) .fi-topbar-ctn,
    body:has(.fi-main-sidebar.fi-sidebar-open) .fi-main-ctn { margin-inline-start: var(--sidebar-width); }
    body:has(.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar-ctn,
    body:has(.fi-main-sidebar:not(.fi-sidebar-open)) .fi-main-ctn { margin-inline-start: var(--collapsed-sidebar-width); }
    /* عند الطيّ: الشعار الصغير فقط */
    body .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-header { padding-inline: 0; justify-content: center; }
    body .fi-main-sidebar:not(.fi-sidebar-open) .mr-brand-text { display: none; }
    body .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-header-logo-ctn { flex: none; }
}

/* ───── توافق الهاتف ───── */
@media (max-width: 639px) {
    .fi-main { padding-inline: .85rem; }
    .fi-header-heading { font-size: 1.45rem; }
    .fi-header-subheading { font-size: .92rem; }
    .fi-header { gap: .75rem; }
    /* بطاقات الأرقام: اثنتان في كل صف */
    .mr-grid:has(> .mr-stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .mr-stat { padding: .8rem; }
    .mr-stat .mr-stat-icon { display: none; }
    .mr-card, .mr-card-lg { padding: 1rem; }
    .mr-study-front { font-size: 1.2rem; min-height: 5.5rem; }
    .mr-fc-grid { grid-template-columns: 1fr; }
    .mr-app-footer { padding: 1rem .5rem 5rem; justify-content: center; text-align: center; }
    .mr-app-footer nav { justify-content: center; }
    .mr-scroll-x, .mr-prose table { max-width: 100%; }
    .mr-prose { overflow-wrap: anywhere; }
}
/* التطبيق المثبّت على الهاتف (PWA): احترام حواف الشاشة */
@media (display-mode: standalone) {
    .fi-topbar { padding-top: env(safe-area-inset-top); }
}

/* ───── طيّ تصنيفات المواضيع داخل القسم ───── */
.mr-cat-toggle { display: flex; align-items: center; gap: .65rem; text-align: start; padding: .25rem .35rem .25rem .6rem; margin-inline-start: -.35rem; border-radius: .75rem; transition: background .15s; }
.mr-cat-toggle:hover { background: var(--gray-100); }
.dark .mr-cat-toggle:hover { background: rgb(255 255 255 / .05); }
.mr-cat-chevron { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: .6rem; background: var(--gray-100); color: var(--gray-500); transition: transform .2s, background .15s; flex-shrink: 0; }
.dark .mr-cat-chevron { background: rgb(255 255 255 / .06); color: var(--gray-400); }
.mr-cat-group.is-collapsed .mr-cat-chevron { transform: rotate(90deg); }
.mr-cat-group.is-collapsed .mr-group-head { margin-bottom: 0; }

/* ───── الشريط العلوي: الوضع الداكن + الإشعارات + الحساب ───── */
.fi-topbar-end { gap: .35rem; }
.mr-topbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .8rem; color: var(--gray-500); transition: background .15s, color .15s; }
.mr-topbar-btn:hover { background: var(--gray-100); color: var(--primary-600); }
.dark .mr-topbar-btn { color: var(--gray-400); }
.dark .mr-topbar-btn:hover { background: rgb(255 255 255 / .06); color: var(--primary-400); }
.fi-topbar-end > .fi-no-database { display: inline-flex; align-items: center; }
.fi-topbar-database-notifications-btn.fi-icon-btn { width: 2.4rem; height: 2.4rem; margin: 0; border-radius: .8rem; color: var(--gray-500); }
.fi-topbar-database-notifications-btn.fi-icon-btn:hover { background: var(--gray-100); color: var(--primary-600); }
.dark .fi-topbar-database-notifications-btn.fi-icon-btn { color: var(--gray-400); }
.dark .fi-topbar-database-notifications-btn.fi-icon-btn:hover { background: rgb(255 255 255 / .06); color: var(--primary-400); }
.fi-topbar-end > .fi-user-menu { margin-inline-start: .25rem; }
.fi-user-menu-trigger { border-radius: 999px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in oklab, var(--primary-500) 35%, transparent); transition: box-shadow .15s; }
.fi-user-menu-trigger:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary-500); }
.dark .fi-user-menu-trigger { box-shadow: 0 0 0 2px var(--gray-900), 0 0 0 4px color-mix(in oklab, var(--primary-500) 45%, transparent); }

/* ───── الأسئلة المقالية (Essay) ───── */
.mr-essay { background: #fff; border: 1px solid var(--gray-200); border-radius: 1.1rem; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .65rem; border-inline-start: 4px solid var(--gray-200); transition: border-color .15s, box-shadow .15s; }
.mr-essay:hover { box-shadow: 0 12px 28px -22px rgb(15 23 42 / .4); }
.mr-essay.is-mastered { border-inline-start-color: var(--success-500); }
.mr-essay.is-review { border-inline-start-color: var(--warning-500); }
.dark .mr-essay { background: var(--gray-900); border-color: rgb(255 255 255 / .08); }
.mr-essay-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.mr-essay-q { font-size: 1.05rem; font-weight: 600; line-height: 1.8; color: var(--gray-950); }
.dark .mr-essay-q { color: #fff; }
.mr-essay-answer .mr-prose { font-size: .95rem; }
.mr-essay-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.mr-essay-mark { font-size: .78rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--gray-200); color: var(--gray-600); transition: .15s; }
.mr-essay-mark:hover { border-color: var(--gray-300); }
.mr-essay-mark.is-on-review { background: var(--warning-50); border-color: var(--warning-300); color: var(--warning-700); }
.mr-essay-mark.is-on-mastered { background: var(--success-50); border-color: var(--success-300); color: var(--success-700); }
.dark .mr-essay-mark { border-color: rgb(255 255 255 / .1); color: var(--gray-300); }

/* الموضوع المهم جداً */
.mr-hy-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #92400e; background: linear-gradient(135deg, #fef3c7, #fde68a); border: 1px solid #fcd34d; }
.dark .mr-hy-badge { color: #fde68a; background: rgb(245 158 11 / .15); border-color: rgb(245 158 11 / .35); }
.mr-topic-card.is-hy { border-color: #fcd34d; box-shadow: 0 0 0 1px #fde68a inset; }

/* فيديو تعليمي (YouTube) */
.mr-video-grid { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .mr-video-grid.is-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mr-video { margin: 0; }
.mr-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; background: #000; box-shadow: 0 6px 20px rgb(0 0 0 / .12); }
.mr-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mr-video figcaption { margin-top: .5rem; font-size: .9rem; font-weight: 600; color: var(--gray-700); }
.dark .mr-video figcaption { color: var(--gray-300); }
.mr-video-icon { background: rgb(239 68 68 / .1) !important; color: #ef4444 !important; }
.mr-subnav a.is-video { color: #ef4444; }

/* الإشعارات: قائمة منسدلة بنفس شكل قائمة المستخدم */
.mr-notif-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; }
.mr-notif-title { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; color: var(--gray-950); }
.dark .mr-notif-title { color: #fff; }
.mr-notif-actions { display: inline-flex; gap: .5rem; font-size: .75rem; }
.mr-notif-list { padding: .25rem !important; }
.mr-notif-item { border-radius: .6rem; }
.mr-notif-item + .mr-notif-item { margin-top: .15rem; }
.mr-notif-item.is-unread { background: color-mix(in srgb, var(--primary-500) 7%, transparent); }
.mr-notif-item .fi-no-notification { box-shadow: none !important; background: transparent !important; padding: .6rem .7rem; }
.mr-notif-empty { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; color: var(--gray-500); }
.mr-notif-empty > div { display: flex; flex-direction: column; }
.mr-notif-empty strong { color: var(--gray-800); font-size: .88rem; }
.dark .mr-notif-empty strong { color: var(--gray-200); }
.mr-notif-empty span { font-size: .78rem; }
.mr-notif-foot { padding: .5rem; border-top: 1px solid var(--gray-100); }

/* ═══ المجتمع ═══ */
.mr-cm-group { display: flex; flex-direction: column; gap: .8rem; transition: border-color .15s, box-shadow .15s; }
.mr-cm-group:hover { border-color: var(--primary-300); box-shadow: 0 6px 18px rgb(0 0 0 / .06); }
.mr-cm-group.is-joined { border-color: color-mix(in srgb, var(--primary-500) 35%, transparent); }
.mr-cm-group.is-off { opacity: .6; }
.mr-cm-group-head { display: flex; align-items: flex-start; gap: .8rem; }
.mr-cm-group-info { flex: 1; min-width: 0; }
.mr-cm-emoji { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; flex: none; border-radius: .9rem; background: var(--primary-50); font-size: 1.4rem; }
.dark .mr-cm-emoji { background: rgb(255 255 255 / .06); }
.mr-cm-name { font-weight: 700; font-size: 1rem; color: var(--gray-950); }
.dark .mr-cm-name { color: #fff; }
.mr-cm-desc { font-size: .85rem; margin-top: .2rem; }
.mr-cm-unread { min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--danger-600); color: #fff; font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mr-cm-last { font-size: .82rem; color: var(--gray-600); padding: .5rem .7rem; border-radius: .7rem; background: var(--gray-50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .mr-cm-last { background: rgb(255 255 255 / .04); color: var(--gray-300); }
.mr-cm-group-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }

.mr-cm-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .mr-cm-layout { grid-template-columns: minmax(0, 1fr) 17rem; } }
.mr-cm-chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: calc(100dvh - 15rem); min-height: 26rem; }
.mr-cm-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .35rem; background: var(--gray-50); }
.dark .mr-cm-messages { background: rgb(0 0 0 / .15); }
.mr-cm-older { text-align: center; margin-bottom: .5rem; }
.mr-cm-older .mr-chip { cursor: pointer; }
.mr-cm-day { text-align: center; margin: .6rem 0 .3rem; }
.mr-cm-day span { font-size: .72rem; padding: .2rem .7rem; border-radius: 999px; background: var(--gray-200); color: var(--gray-600); }
.dark .mr-cm-day span { background: rgb(255 255 255 / .08); color: var(--gray-300); }
.mr-cm-msg { display: flex; justify-content: flex-start; }
.mr-cm-msg.is-mine { justify-content: flex-end; }
.mr-cm-bubble { max-width: min(78%, 34rem); padding: .5rem .75rem .35rem; border-radius: 1rem; border-start-start-radius: .3rem; background: #fff; border: 1px solid var(--gray-200); box-shadow: 0 1px 1px rgb(0 0 0 / .03); }
.dark .mr-cm-bubble { background: var(--gray-800); border-color: var(--gray-700); }
.mr-cm-msg.is-mine .mr-cm-bubble { background: var(--primary-600); border-color: var(--primary-600); color: #fff; border-start-start-radius: 1rem; border-start-end-radius: .3rem; }
.mr-cm-author { font-size: .75rem; font-weight: 700; color: var(--primary-700); margin-bottom: .15rem; display: flex; align-items: center; gap: .35rem; }
.dark .mr-cm-author { color: var(--primary-400); }
.mr-cm-admin { font-size: .62rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px; background: var(--warning-100); color: var(--warning-700); }
.mr-cm-text { font-size: .92rem; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.mr-cm-text a { text-decoration: underline; }
.mr-cm-meta { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; font-size: .66rem; opacity: .65; margin-top: .15rem; }
.mr-cm-del { opacity: 0; transition: opacity .15s; color: inherit; }
.mr-cm-bubble:hover .mr-cm-del { opacity: 1; }
.mr-cm-image { display: block; margin: .15rem 0 .3rem; }
.mr-cm-image img { display: block; max-width: 100%; max-height: 18rem; border-radius: .7rem; object-fit: cover; }
.mr-cm-file { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; margin: .15rem 0 .3rem; border-radius: .7rem; background: rgb(0 0 0 / .05); color: inherit; }
.mr-cm-msg.is-mine .mr-cm-file { background: rgb(255 255 255 / .16); }
.mr-cm-file-info { display: flex; flex-direction: column; min-width: 0; }
.mr-cm-file-name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.mr-cm-file-size { font-size: .7rem; opacity: .7; }
.mr-cm-empty, .mr-cm-locked { margin: auto; text-align: center; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.mr-cm-locked { height: 100%; justify-content: center; }
.mr-cm-composer { border-top: 1px solid var(--gray-200); padding: .6rem .75rem; background: #fff; }
.dark .mr-cm-composer { background: var(--gray-900); border-color: var(--gray-800); }
.mr-cm-inputrow { display: flex; align-items: flex-end; gap: .5rem; }
.mr-cm-input { flex: 1; resize: none; border: 1px solid var(--gray-200); border-radius: 1.2rem; padding: .55rem .9rem; font-size: .92rem; line-height: 1.5; max-height: 10rem; background: var(--gray-50); color: inherit; outline: none; }
.mr-cm-input:focus { border-color: var(--primary-500); background: #fff; }
.dark .mr-cm-input { background: rgb(255 255 255 / .04); border-color: var(--gray-700); }
.dark .mr-cm-input:focus { background: rgb(255 255 255 / .06); }
.mr-cm-iconbtn, .mr-cm-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; cursor: pointer; }
.mr-cm-iconbtn { color: var(--gray-500); }
.mr-cm-iconbtn:hover { background: var(--gray-100); color: var(--primary-600); }
.dark .mr-cm-iconbtn:hover { background: rgb(255 255 255 / .06); }
.mr-cm-send { background: var(--primary-600); color: #fff; }
.mr-cm-send:hover { background: var(--primary-700); }
.mr-cm-send:disabled { opacity: .5; cursor: not-allowed; }
[dir=rtl] .mr-cm-send-icon { transform: scaleX(-1); }
.mr-cm-attach-preview { display: flex; align-items: center; gap: .4rem; font-size: .8rem; padding: .35rem .6rem; margin-bottom: .45rem; border-radius: .6rem; background: var(--primary-50); color: var(--primary-700); }
.dark .mr-cm-attach-preview { background: rgb(255 255 255 / .06); color: var(--primary-300); }
.mr-cm-x { margin-inline-start: auto; opacity: .7; }
.mr-cm-progress { height: 3px; border-radius: 3px; background: var(--gray-200); margin-bottom: .45rem; overflow: hidden; }
.mr-cm-progress span { display: block; height: 100%; background: var(--primary-500); transition: width .2s; }
.mr-cm-error { color: var(--danger-600); font-size: .78rem; margin-bottom: .35rem; }
.mr-cm-readonly { border-top: 1px solid var(--gray-200); padding: .8rem; text-align: center; font-size: .85rem; color: var(--gray-500); }
.dark .mr-cm-readonly { border-color: var(--gray-800); }
.mr-cm-side-title { font-weight: 700; font-size: .9rem; margin-bottom: .6rem; }
.mr-cm-members { display: flex; flex-direction: column; gap: .35rem; max-height: 22rem; overflow-y: auto; }
.mr-cm-member { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.mr-cm-avatar { width: 1.8rem; height: 1.8rem; flex: none; border-radius: 999px; background: var(--primary-100); color: var(--primary-700); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; }
.mr-cm-kick { margin-inline-start: auto; color: var(--gray-400); font-size: .75rem; }
.mr-cm-kick:hover { color: var(--danger-600); }
@media (max-width: 1023px) { .mr-cm-side { order: -1; } .mr-cm-side .mr-card:last-child, .mr-cm-side .mr-card p { display: none; } .mr-cm-side .mr-card { padding: .8rem 1rem; } .mr-cm-chat { height: calc(100dvh - 17rem); } }

/* ملاحظة المستخدم الخاصة على السؤال المقالي */
.mr-essay-note { margin-top: .75rem; }
.mr-essay-note-view { cursor: pointer; border: 1px dashed rgba(245, 158, 11, .6); background: rgba(245, 158, 11, .08); border-radius: .75rem; padding: .6rem .85rem; }
.mr-essay-note-view p { margin: .25rem 0 0; white-space: pre-wrap; font-size: .9rem; }
.mr-essay-note-tag { font-size: .75rem; font-weight: 700; color: rgb(180, 83, 9); }
.mr-essay-note-input { width: 100%; border-radius: .75rem; border: 1px solid rgba(120, 120, 120, .35); background: transparent; padding: .6rem .8rem; font: inherit; color: inherit; }

/* جدول الأسئلة: السؤال في صف كامل، والتفاصيل (الأهمية/القسم/المصدر/التكرار) في صف ثانٍ يلتف بلا تمرير أفقي،
   وأزرار العين وقائمة ⋮ في نهاية نفس صف التفاصيل */
.fi-ta-record.mr-q-rec { padding: .7rem .85rem; align-items: flex-start; gap: .6rem; }
.mr-q-rec .fi-ta-record-checkbox { flex: none; margin-top: .3rem; }
.mr-q-rec .fi-ta-record-content-ctn { flex: 1 1 0; min-width: 0; position: relative; gap: .35rem; padding: 0 !important; }
.mr-q-rec .fi-ta-record-content-ctn > div { padding: 0 !important; }
.mr-q-rec .fi-ta-record-content { width: 100%; padding: 0 !important; text-align: start; }
.mr-q-rec .fi-ta-stack { gap: .3rem !important; }
.mr-q-rec .fi-ta-text-item { line-height: 1.6; }
.mr-q-rec .fi-ta-text-description { line-height: 1.4; }
.mr-q-rec .fi-ta-text-item, .mr-q-rec .fi-ta-text-description { overflow-wrap: anywhere; }
.mr-q-rec .fi-ta-text-description { margin-top: .15rem; }
.mr-q-rec .mr-q-meta { flex-wrap: wrap; align-items: center; gap: .3rem .4rem; padding-inline-end: 5.4rem; min-height: 2.1rem; }
.mr-q-rec .mr-q-meta > *, .mr-q-rec .mr-q-meta .fi-ta-col { flex: 0 0 auto; width: auto; }
.mr-q-rec .mr-q-meta .fi-ta-icon svg { width: 1.15rem; height: 1.15rem; }
.mr-q-rec .fi-ta-actions { position: absolute; inset-inline-end: 0; bottom: 0; flex-wrap: nowrap; gap: .1rem; padding: 0 !important; }
}
/* عدد الأسئلة («عرض 1 إلى 20 من N») يبقى ظاهراً على الموبايل في جدول الأسئلة */
@media (max-width: 639px) {
        .fi-ta:has(.mr-q-rec) .fi-pagination-overview { display: block !important; grid-column: 1 / -1; order: -1; text-align: center; font-size: .8rem; }
}

/* صفحة القسم: على الموبايل تُرتَّب التبويبات ثم التصنيفات ثم البحث بعرض كامل دون تداخل */
@media (max-width: 639px) {
    .mr-spec-bar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: .75rem; }
    .mr-spec-bar .mr-seg { width: 100%; }
    .mr-spec-bar .mr-seg > * { flex: 1 1 0; min-width: 0; justify-content: center; }
    .mr-spec-filters { flex-direction: column; align-items: stretch; flex-wrap: nowrap; max-width: none !important; width: 100%; gap: .5rem; }
    .mr-spec-filters > * { min-width: 0 !important; width: 100%; flex: none; }
}

/* نظام الاشتراكات: بطاقة موضوع مقفلة (مظلَّلة) أو مجانية */
.mr-topic-card { position: relative; }
.mr-topic-card.is-locked { opacity: .62; filter: grayscale(.55); background: repeating-linear-gradient(135deg, #f8fafc 0 10px, #f1f5f9 10px 20px); border-style: dashed; }
.mr-topic-card.is-locked:hover { opacity: .85; transform: none; box-shadow: none; }
.dark .mr-topic-card.is-locked { background: repeating-linear-gradient(135deg, rgb(255 255 255 / .03) 0 10px, rgb(255 255 255 / .06) 10px 20px); }
.mr-topic-card.is-free { border-color: #86efac; box-shadow: 0 0 0 1px #bbf7d0 inset; }
.mr-lock-badge, .mr-free-badge { align-self: flex-start; font-size: .72rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; margin-bottom: .3rem; }
.mr-lock-badge { background: #e2e8f0; color: #475569; }
.mr-free-badge { background: #dcfce7; color: #166534; }

/* بطاقات Anki: صور وجداول */
.mr-fc-text img, .mr-study-front img, .mr-rapid-front img, .mr-prose img { max-width: 100%; max-height: 16rem; height: auto; border-radius: .5rem; }
.mr-fc-text { overflow: auto; }
.mr-fc .mr-fc-back { pointer-events: none; }
.mr-fc.is-flipped .mr-fc-back { pointer-events: auto; }
.mr-fc.is-flipped .mr-fc-front { pointer-events: none; }
.mr-fc-html { width: 100%; min-width: 0; text-align: start; }
.mr-fc-text .mr-fc-html, .mr-study-front .mr-fc-html, .mr-rapid-front .mr-fc-html { text-align: center; }
.mr-fc-html > div { margin: 0; }
.mr-fc-grid > *, .mr-fc, .mr-fc-inner, .mr-fc-face { min-width: 0; }
.mr-fc-html { overflow-wrap: anywhere; }

/* الهوية: الثانوي الذهبي #F1B33D */
.mr-hero-btn:not(.mr-hero-btn-ghost) { background: var(--secondary-500, #f1b33d); color: #0b1530; }
.mr-hero-btn:not(.mr-hero-btn-ghost):hover { background: var(--secondary-400, #f4bd4c); }

/* ───── صور الموضوع (معرض خفيف وأنيق) ───── */
.mr-gallery { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mr-gallery.is-single { grid-template-columns: minmax(0, 560px); }
.mr-shot { margin: 0; }
.mr-shot-btn { display: block; width: 100%; padding: 0; border: 1px solid var(--gray-200); border-radius: 1rem; overflow: hidden; background: var(--gray-50); cursor: zoom-in; transition: box-shadow .2s, transform .2s; }
.mr-shot-btn:hover, .mr-shot-btn:focus-visible { box-shadow: 0 8px 24px rgb(0 0 0 / .1); transform: translateY(-2px); outline: none; }
.mr-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mr-gallery.is-single .mr-shot img { aspect-ratio: auto; max-height: 460px; object-fit: contain; background: #fff; }
.mr-shot figcaption { margin-top: .45rem; font-size: .85rem; line-height: 1.5; color: var(--gray-600); }
.dark .mr-shot-btn { border-color: var(--gray-700); background: var(--gray-800); }
.dark .mr-shot figcaption { color: var(--gray-400); }
.mr-lightbox { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 1.5rem; background: rgb(15 23 42 / .86); backdrop-filter: blur(4px); }
.mr-lightbox figure { margin: 0; max-width: min(96vw, 1100px); text-align: center; }
.mr-lightbox img { max-width: 100%; max-height: 78vh; border-radius: .75rem; background: #fff; }
.mr-lightbox figcaption { margin-top: .6rem; color: #e2e8f0; font-size: .95rem; }
.mr-lightbox-close { position: absolute; top: 1rem; inset-inline-end: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 0; background: rgb(255 255 255 / .15); color: #fff; font-size: 1.1rem; cursor: pointer; }
.mr-lightbox-nav { display: flex; align-items: center; gap: 1rem; color: #e2e8f0; font-size: .9rem; }
.mr-lightbox-nav button { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 0; background: rgb(255 255 255 / .15); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
[x-cloak] { display: none !important; }

/* ───── ملفات مرفقة (امتحان المعادلة) ───── */
.mr-files { margin-top: 1.2rem; display: grid; gap: .5rem; }
.mr-files-title { font-weight: 700; font-size: .92rem; color: var(--gray-700); }
.mr-file { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border: 1px solid var(--gray-200); border-radius: .9rem; background: var(--gray-50); flex-wrap: wrap; }
.mr-file-ext { min-width: 2.8rem; text-align: center; font-size: .7rem; font-weight: 800; padding: .3rem .4rem; border-radius: .5rem; background: rgb(var(--primary-500, 59 130 246) / .12); color: rgb(var(--primary-700, 29 78 216)); }
.mr-file-name { flex: 1; min-width: 10rem; font-weight: 600; font-size: .92rem; }
.mr-file-name small { color: var(--gray-500); font-weight: 400; margin-inline-start: .4rem; }
.dark .mr-file { background: var(--gray-800); border-color: var(--gray-700); }
.dark .mr-files-title { color: var(--gray-300); }

/* كارتات تصفية بنك الأسئلة */
.mr-q-stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.mr-stat-btn { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.mr-stat-btn:hover { transform: translateY(-1px); }
.mr-stat-btn.is-active { box-shadow: 0 0 0 2px var(--primary-500, #0d9488); }

/* ───── تحديد متعدد للبطاقات ───── */
.mr-fc { position: relative; }
.mr-fc-bulk { position: sticky; top: .5rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .9rem; border-radius: 1rem; background: #fff; border: 1px solid color-mix(in oklab, var(--primary-500) 40%, var(--gray-200)); box-shadow: 0 10px 28px -16px rgb(31 58 140 / .45); }
.dark .mr-fc-bulk { background: var(--gray-900); }
.mr-fc-check { position: absolute; top: .7rem; inset-inline-end: .8rem; z-index: 5; width: 1.5rem; height: 1.5rem; border-radius: .45rem; border: 2px solid var(--gray-300); background: #fff; color: #fff; font-size: .9rem; line-height: 1.25rem; text-align: center; font-weight: 800; pointer-events: none; }
.mr-fc.is-selected .mr-fc-check { background: var(--primary-600); border-color: var(--primary-600); }
.mr-fc.is-selected .mr-fc-face { border-color: var(--primary-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 25%, transparent); }
.mr-fc.is-selecting .mr-fc-inner { cursor: copy; }

/* ───── معاينة الصور داخل البطاقات ───── */
.mr-fc img, .mr-rapid-card img, [class*="mr-study"] img { cursor: zoom-in; }
.mr-fc.is-selecting img { cursor: inherit; }
.mr-img-viewer { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(15 23 42 / .9); overflow: auto; cursor: zoom-out; }
.mr-img-viewer img { max-width: 96vw; max-height: 92vh; border-radius: .6rem; background: #fff; cursor: zoom-in; }
.mr-img-viewer.is-zoomed { align-items: flex-start; justify-content: flex-start; }
.mr-img-viewer.is-zoomed img { max-width: none; max-height: none; width: auto; cursor: zoom-out; }
.mr-img-viewer button { position: fixed; top: 1rem; inset-inline-end: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 999px; border: 0; background: rgb(255 255 255 / .2); color: #fff; font-size: 1.1rem; cursor: pointer; z-index: 1; }

/* ───── الشعار الكامل في الداشبورد (الحرف R فقط عند طي الشريط الجانبي) ───── */
.mr-brand { flex-direction: column; align-items: flex-start; gap: .15rem; }
.mr-brand-logo { height: 2.1rem; width: auto; display: block; }
.mr-brand-logo-dark, .mr-brand-r { display: none; }
.dark .mr-brand-logo-light { display: none; }
.dark .mr-brand-logo-dark { display: block; }
.mr-brand-sub { font-size: .68rem; color: var(--gray-500); padding-inline-start: .15rem; }
body .fi-main-sidebar:not(.fi-sidebar-open) .mr-brand-logo { display: none; }
body .fi-main-sidebar:not(.fi-sidebar-open) .mr-brand-r { display: block; width: 2.1rem; height: 2.1rem; object-fit: contain; }
body .fi-main-sidebar:not(.fi-sidebar-open) .mr-brand-sub { display: none; }

/* صور نص السؤال */
.mr-stem-images { display: flex; flex-wrap: wrap; gap: .6rem; margin: .25rem 0 1rem; }
.mr-stem-images img { max-width: 100%; max-height: 22rem; border-radius: .6rem; border: 1px solid var(--gray-200); background: #fff; cursor: zoom-in; }

/* المحرر: صورة مختارة + شريط التحكم بالصورة */
.med-content img { cursor: pointer; }
.med-content img.med-img-sel { outline: 3px solid var(--primary-500); outline-offset: 2px; }
.med-img-range { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .35rem; }
.med-img-range input { width: 7rem; accent-color: var(--primary-600); }
.med-img-hint { color: var(--gray-500); font-size: .72rem; margin-inline-start: .25rem; }
/* صور المحتوى: لا تشويه عند تحديد عرض الصورة */
.mr-prose img[style*="width"] { max-height: none; }
.mr-prose::after { content: ""; display: table; clear: both; }