/* نطاق البناء: زجاج داكن على خلفية داكنة سادة، والنص أبيض أو أزرق فقط (هوية مجلس). واجهة GrapesJS نفسها تُلوَّن بمتغيراتها. */
:root { --bg: #07090d; --glass: rgba(255, 255, 255, .06); --glass2: rgba(255, 255, 255, .1); --line: rgba(255, 255, 255, .12); --text: #f5f7fb; --blue: #6ea8ff; --r: 16px; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.6 -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif; }
#app { height: 100%; display: flex; flex-direction: column; }
.mb-center { flex: 1; display: grid; place-items: center; padding: 16px; }
.mb-card { width: min(440px, 100%); background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.mb-card h1 { margin: 0 0 4px; font-size: 22px; }
.mb-sub { margin: 0 0 18px; color: var(--blue); font-size: 13px; }
.mb-field { display: block; margin-top: 12px; font-size: 13px; }
.mb-field input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: var(--text); font: inherit; }
.mb-field input:focus-visible, .mb-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mb-btn { appearance: none; border: 1px solid var(--line); background: var(--glass2); color: var(--text); border-radius: 12px; padding: 9px 14px; font: inherit; cursor: pointer; white-space: nowrap; }
.mb-btn:hover { border-color: var(--blue); }
.mb-btn:disabled { opacity: .5; cursor: default; }
.mb-btn.pri { background: var(--blue); border-color: var(--blue); color: #07090d; font-weight: 600; }
.mb-btn.on { border-color: var(--blue); color: var(--blue); }
.mb-btn.wide { width: 100%; margin-top: 18px; padding: 12px; }
.mb-err { min-height: 22px; margin: 10px 0 0; color: var(--text); font-size: 13px; }
.mb-err:not(:empty) { padding: 8px 10px; border: 1px solid var(--blue); border-radius: 10px; }
.mb-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--blue); animation: mbspin .8s linear infinite; }
@keyframes mbspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mb-spin { animation-duration: 3s; } }

.mb-top { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--glass); flex-wrap: wrap; }
.mb-top .mb-title { font-weight: 600; margin-inline-end: auto; display: flex; flex-direction: column; line-height: 1.3; }
.mb-top .mb-title small { color: var(--blue); font-weight: 400; font-size: 12px; }
.mb-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }

.mb-list { flex: 1; overflow: auto; padding: 24px 16px; }
.mb-list-in { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.mb-list h2 { margin: 0 0 4px; font-size: 20px; }
.mb-row { display: flex; align-items: center; gap: 12px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.mb-row .mb-grow { flex: 1; min-width: 0; }
.mb-row b { display: block; }
.mb-row span { color: var(--blue); font-size: 13px; direction: ltr; unicode-bidi: plaintext; }
.mb-pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.mb-pill.ed { border-color: var(--blue); color: var(--blue); }
.mb-note { font-size: 13px; opacity: .85; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; }

/* المحرر: واجهة GrapesJS تبقى من اليسار لليمين (لا تدعم RTL في تخطيطها)، والصفحة داخل اللوحة تحتفظ باتجاهها العربي */
.mb-stage { flex: 1; min-height: 0; direction: ltr; position: relative; }
#gjs { height: 100%; }
.mb-stage .mb-center { position: absolute; inset: 0; background: var(--bg); z-index: 5; }
.gjs-one-bg { background-color: #0d1118; } .gjs-two-color { color: var(--text); } .gjs-three-bg { background-color: var(--blue); color: #07090d; } .gjs-four-color, .gjs-four-color-h:hover { color: var(--blue); }
.gjs-editor { font-family: inherit; }
.gjs-block { min-height: 64px; border-radius: 10px; }
.gjs-block-label, .gjs-sm-label, .gjs-trt-trait, .gjs-layer-name, .gjs-sm-sector-title, .gjs-clm-tags, .gjs-title { direction: rtl; text-align: start; }

#toast { position: fixed; inset-inline: 0; bottom: 20px; display: grid; place-items: center; pointer-events: none; z-index: 99; }
#toast div { background: #0d1118; border: 1px solid var(--blue); color: var(--text); padding: 10px 16px; border-radius: 12px; max-width: min(560px, 92vw); }

dialog.mb-dlg { background: #0d1118; color: var(--text); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; width: min(440px, 92vw); }
dialog.mb-dlg::backdrop { background: rgba(0, 0, 0, .6); }
dialog.mb-dlg p { margin: 0 0 16px; }
dialog.mb-dlg .mb-acts { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 720px) { .mb-top { padding: 8px; gap: 6px; } .mb-btn { padding: 8px 10px; font-size: 13px; } .mb-row { flex-wrap: wrap; } }