/* «مظهر لوحتك»: مظاهر يختارها كل مستخدم لمنصة مشروعي. تغيّر المتغيرات وطابع البطاقات والأزرار فقط،
   ويبقى ترتيب العناصر واحداً في كل المظاهر. الخط ثابت: خط صياح */

/* ================= شريط الاختيار ================= */
.mqs-open{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;box-sizing:border-box;padding:6px 13px 6px 12px;border-radius:var(--r-ctl,12px);border:1px solid var(--line);background:transparent;color:var(--ink-2,var(--ink));font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.mqs-open:hover,.mqs-open:focus-visible{border-color:var(--terra);color:var(--terra);background:color-mix(in srgb,var(--terra) 5%,transparent)}
.mqs-open svg{flex:none;display:block}
.mqs-open svg circle{fill:currentColor;stroke:none}
.mqs-open .d1{fill:var(--terra)}
.mqs-dock{position:fixed;bottom:18px;left:50%;transform:translate(-50%,24px);opacity:0;pointer-events:none;z-index:95;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 14px;border-radius:22px;background:rgba(24,20,18,.86);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08);color:#F4EEE6;max-width:calc(100vw - 20px);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s;font-family:inherit}
.mqs-dock.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.mqs-info{display:flex;flex-direction:column;min-width:150px;padding-inline:6px}
.mqs-info b{font-size:15px}.mqs-info span{font-size:12px;color:rgba(244,238,230,.65);line-height:1.5}
.mqs-btns{display:flex;gap:4px}
.mqs-btns button{font:inherit;display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:transparent;color:rgba(244,238,230,.72);cursor:pointer;padding:6px 8px;border-radius:14px;font-size:12px;transition:background .2s,color .2s,transform .2s;white-space:nowrap}
.mqs-btns button:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.mqs-btns button[aria-pressed="true"]{background:rgba(255,255,255,.15);color:#fff}
.mqs-btns i{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.mqs-btns button[aria-pressed="true"] i{box-shadow:0 0 0 2px #fff}
.mqs-x{flex:none;width:30px;height:30px;border-radius:10px;border:0;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#F4EEE6;font-size:17px;cursor:pointer}
.mqs-done{font:inherit;flex:none;border:0;border-radius:12px;background:#F4EEE6;color:#181412;font-weight:700;font-size:14px;padding:9px 14px;cursor:pointer}
@media (max-width:959px){.mqs-dock{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}
@media (max-width:700px){.mqs-dock{left:8px;right:8px;transform:translateY(24px);max-width:none;gap:6px;padding:8px;border-radius:18px}.mqs-dock.on{transform:none}.mqs-info{display:none}.mqs-btns{flex:1;overflow-x:auto;scrollbar-width:none}.mqs-btns::-webkit-scrollbar{display:none}.mqs-btns button{flex:0 0 auto;padding:5px 6px}.mqs-btns i{width:30px;height:30px;border-radius:10px}.mqs-btns button span{font-size:12px}.mqs-done{padding:8px 10px;font-size:13px}.mqs-open b{display:none}.mqs-open{width:40px;padding:0;justify-content:center}}
html.mqs-anim body.mq,html.mqs-anim .mq-card,html.mqs-anim .mq-side,html.mqs-anim .mq-top,html.mqs-anim .mq-btn,html.mqs-anim .mq-bottom{transition:background-color .5s,color .5s,border-color .5s,box-shadow .5s,border-radius .5s}

/* ================= الجريدة ================= */
:root[data-skin="paper"]{--paper:#F3EFE6;--sheet:#FBF8F2;--grid:transparent;--ink:#17130F;--ink-2:#6B645B;--line:#D2C9BB;--line-2:#17130F;--terra:#C1532E;--on-terra:#FBF8F2;--logo-filter:none;color-scheme:light;
  --mq-r:0px;--mq-r2:0px;--r-card:0px;--r-ctl:0px;--mq-soft:rgba(193,83,46,.07);--mq-soft2:rgba(193,83,46,.13);--mq-sh:none;--lift:none}
[data-skin="paper"] body.mq{background:radial-gradient(rgba(23,19,15,.06) 1px,transparent 1px) 0 0/5px 5px,var(--paper)}
[data-skin="paper"] .mq-top{border-bottom:1.5px solid var(--ink)}
[data-skin="paper"] .mq-side{border-inline-end:1.5px solid var(--ink)}
[data-skin="paper"] .mq-card{border:1.5px solid var(--ink)}
[data-skin="paper"] .mq-nav-a,[data-skin="paper"] .mq-tabs,[data-skin="paper"] .mq-tabs a,[data-skin="paper"] .mq-chip,[data-skin="paper"] .mq-side-foot,[data-skin="paper"] .mq-bizsw,[data-skin="paper"] .mqs-open{border-radius:0}
[data-skin="paper"] .mq-nav-a.on{background:var(--ink);color:var(--paper)}[data-skin="paper"] .mq-nav-a.on svg{color:var(--paper)}
[data-skin="paper"] .mq-btn{border-radius:0;transition:transform .2s,box-shadow .2s}
[data-skin="paper"] .mq-btn:not(.line):not(.ghost){background:var(--ink);border-color:var(--ink);color:var(--paper)}
[data-skin="paper"] .mq-btn:hover{transform:translate(3px,-3px);box-shadow:-3px 3px 0 var(--terra)}
[data-skin="paper"] .mq-hello{background:var(--sheet);color:var(--ink);border:1.5px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
[data-skin="paper"] .mq-hello p,[data-skin="paper"] .mq-hello .mq-date{color:var(--ink-2)}
[data-skin="paper"] .mq-hello h1{font-size:clamp(26px,3.2vw,36px)}
[data-skin="paper"] .mq-hello .mq-chip{background:transparent;color:var(--ink);border:1px solid var(--ink)}
[data-skin="paper"] .mq-bar{border-radius:0}

/* ================= جريء ================= */
:root[data-skin="souq"]{--paper:#FFF6E0;--sheet:#FFFFFF;--grid:transparent;--ink:#111111;--ink-2:#4A4A4A;--line:#111111;--line-2:#111111;--terra:#E8456F;--on-terra:#FFFFFF;--ok:#14996F;--logo-filter:none;color-scheme:light;
  --mq-r:16px;--mq-r2:12px;--mq-soft:#FFF0B8;--mq-soft2:#FFE27A;--mq-sh:5px 5px 0 #111;--lift:4px 4px 0 #111}
[data-skin="souq"] .mq-top{border-bottom:3px solid #111}
[data-skin="souq"] .mq-side{border-inline-end:3px solid #111}
[data-skin="souq"] .mq-card{border:2.5px solid #111;transition:transform .15s,box-shadow .15s}
[data-skin="souq"] .mq-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #111}
[data-skin="souq"] .mq-btn{border:2.5px solid #111;box-shadow:3px 3px 0 #111;transition:transform .1s,box-shadow .1s}
[data-skin="souq"] .mq-btn:not(.line):not(.ghost){background:#FFD23F;color:#111}
[data-skin="souq"] .mq-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 #111}
[data-skin="souq"] .mq-nav-a.on{background:#FFD23F;color:#111;border:2px solid #111;box-shadow:3px 3px 0 #111}[data-skin="souq"] .mq-nav-a.on svg{color:#111}
[data-skin="souq"] .mq-hello{background:#5B8CFF;color:#fff;border:2.5px solid #111;box-shadow:6px 6px 0 #111}
[data-skin="souq"] .mq-hello p,[data-skin="souq"] .mq-hello .mq-date{color:rgba(255,255,255,.88)}
[data-skin="souq"] .mq-hello .mq-chip{background:#fff;color:#111;border:2px solid #111}
[data-skin="souq"] .mq-tabs{border:2.5px solid #111;box-shadow:3px 3px 0 #111}[data-skin="souq"] .mq-tabs a.on{background:#FF8FAB;color:#111}
[data-skin="souq"] .mq-chip{border:1.5px solid #111;color:#111}
[data-skin="souq"] .mq-bar{border:1.5px solid #111;height:10px}

/* ================= المستقبلي ================= */
:root[data-skin="future"]{--paper:#05060A;--sheet:#0C1018;--grid:transparent;--ink:#E9F1FF;--ink-2:#8C97AD;--line:#1A2232;--line-2:#2A3650;--terra:#4DF3FF;--on-terra:#05060A;--brown:#B6FF4D;--stop:#FF5C7A;--major:#FFC14D;--minor:#B6FF4D;--ok:#B6FF4D;--logo-filter:invert(1);color-scheme:dark;
  --mq-r:16px;--mq-r2:12px;--mq-soft:rgba(77,243,255,.07);--mq-soft2:rgba(77,243,255,.13);--mq-sh:0 0 0 1px rgba(77,243,255,.14),0 20px 50px -30px rgba(77,243,255,.35);--lift:0 0 0 1px rgba(77,243,255,.2)}
[data-skin="future"] body.mq{background:linear-gradient(rgba(77,243,255,.035) 1px,transparent 1px) 0 0/48px 48px fixed,linear-gradient(90deg,rgba(77,243,255,.035) 1px,transparent 1px) 0 0/48px 48px fixed,radial-gradient(900px 500px at 80% 0,rgba(255,77,216,.1),transparent 60%) fixed,var(--paper)}
[data-skin="future"] .mq-top,[data-skin="future"] .mq-side{background:rgba(5,6,10,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(77,243,255,.15)}
[data-skin="future"] .mq-card{border-color:transparent;background:linear-gradient(160deg,rgba(20,26,44,.92),rgba(8,10,18,.92))}
[data-skin="future"] .mq-btn:not(.line):not(.ghost){background:linear-gradient(90deg,#4DF3FF,#FF4DD8);border:0;color:#05060A;box-shadow:0 0 24px rgba(77,243,255,.35)}
[data-skin="future"] .mq-nav-a.on{background:rgba(77,243,255,.09);color:#4DF3FF;box-shadow:inset 0 0 0 1px rgba(77,243,255,.3)}
[data-skin="future"] .mq-hello{background:linear-gradient(120deg,#0E1A2B,#1A0E26);color:var(--ink);border:0;box-shadow:0 0 0 1px rgba(77,243,255,.3),0 0 50px -10px rgba(255,77,216,.35)}
[data-skin="future"] .mq-hello h1{background:linear-gradient(90deg,#4DF3FF,#FF4DD8,#B6FF4D);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-skin="future"] .mq-hello p,[data-skin="future"] .mq-hello .mq-date{color:rgba(233,241,255,.7)}
[data-skin="future"] .mq-hello .mq-chip{background:rgba(77,243,255,.1);color:var(--ink)}
[data-skin="future"] .mq-tabs a.on{background:linear-gradient(90deg,#4DF3FF,#FF4DD8);color:#05060A}
[data-skin="future"] .mq-bar>*{box-shadow:0 0 10px currentColor}

/* ================= المنظم ================= */
:root[data-skin="organized"]{--paper:#F5F6F8;--sheet:#FFFFFF;--grid:transparent;--ink:#0F172A;--ink-2:#5B6475;--line:#E3E6EC;--line-2:#C9CED8;--terra:#3B5BDB;--on-terra:#FFFFFF;--stop:#DC2626;--major:#D97706;--minor:#4D7C0F;--ok:#0E9F6E;--logo-filter:none;color-scheme:light;
  --mq-r:12px;--mq-r2:8px;--mq-soft:#EEF2FF;--mq-soft2:#E0E7FF;--mq-sh:0 1px 2px rgba(15,23,42,.06);--lift:0 1px 2px rgba(15,23,42,.06)}
[data-skin="organized"] body.mq{background:var(--paper)}
[data-skin="organized"] .mq-top,[data-skin="organized"] .mq-side{background:#fff}
[data-skin="organized"] .mq-btn{border-radius:9px}
[data-skin="organized"] .mq-btn:not(.line):not(.ghost){background:var(--ink);border-color:var(--ink)}
[data-skin="organized"] .mq-btn:not(.line):not(.ghost):hover{background:var(--terra);border-color:var(--terra)}
[data-skin="organized"] .mq-nav-a{border-radius:8px;min-height:40px;font-size:15px}
[data-skin="organized"] .mq-nav-a.on{background:var(--mq-soft)}
[data-skin="organized"] .mq-hello{background:#fff;color:var(--ink);border:1px solid var(--line)}
[data-skin="organized"] .mq-hello::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--terra)}
[data-skin="organized"] .mq-hello p,[data-skin="organized"] .mq-hello .mq-date{color:var(--ink-2)}
[data-skin="organized"] .mq-hello .mq-chip{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
[data-skin="organized"] .mq-tabs{border-radius:10px;background:var(--paper)}[data-skin="organized"] .mq-tabs a{border-radius:7px}[data-skin="organized"] .mq-tabs a.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,23,42,.12)}

/* أزرار بطاقة الترحيب الثانوية: لونها مكتوب في العنصر على افتراض خلفية داكنة */
[data-skin="future"] .mq-hello .mq-btn.line,[data-skin="paper"] .mq-hello .mq-btn.line,[data-skin="organized"] .mq-hello .mq-btn.line{color:var(--ink)!important;border-color:var(--line-2)!important;background:transparent}
[data-skin="future"] .mq-hello svg.mq-hello-art{color:var(--terra);opacity:.22}

/* ================= الأصلي محسّن: ألوان الأصلي نفسها، ويتبع الوضع الداكن للجهاز، بعمق وحركة أكثر ================= */
/* المظهر الافتراضي «plus» على دستور التصميم ١ (28 أكتوبر 2026): ورق صافٍ بلا تدرجات، والزوايا والظلال من /design/albait-tokens.css،
   والتيراكوتا للفعل والمختار وحده. لا حركة ترفع البطاقات ولا لمعة على الأزرار */
:root[data-skin="plus"]{--mq-r:var(--radius-card);--mq-r2:var(--radius-ctl);--mq-sh:var(--shadow-card);--r-ctl:var(--radius-ctl);--r-card:var(--radius-card);--major:var(--warn)}
[data-skin="plus"] body.mq{background:var(--paper)}
[data-skin="plus"] .mq-top{background:var(--sheet);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-skin="plus"] .mq-side{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-skin="plus"] .mq-card{border-color:var(--line)}
[data-skin="plus"] .mq-hello{background:var(--sheet);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-card)}
[data-skin="plus"] .mq-hello p,[data-skin="plus"] .mq-hello .mq-date{color:var(--ink-2)}
[data-skin="plus"] .mq-hello svg.mq-hello-art{opacity:.12;color:var(--ink)}
[data-skin="plus"] .mq-btn{border-radius:var(--radius-ctl)}
[data-skin="plus"] .mq-btn.line{background:var(--sheet);color:var(--ink)!important;border:1.5px solid var(--line-ctl)!important}
[data-skin="plus"] .mq-btn.line:hover{border-color:var(--ink)!important}
[data-skin="plus"] .mq-hello .mq-chip{background:var(--paper);color:var(--ink-2);border-color:var(--line)}
[data-skin="plus"] .mq-bizsw{height:var(--ctl-sm);padding-block:0}
[data-skin="plus"] .mq-nav-a.on{background:var(--terra-wash);box-shadow:inset -3px 0 0 var(--terra)}
[data-skin="plus"] .mq-bar>*{background:var(--terra)}

/* ================= محاكي هويتك: المتغيرات تأتي من ألوان هوية المشروع ================= */
:root[data-skin="brand"]{--mq-r:18px;--mq-r2:13px;--mq-sh:0 1px 2px rgba(0,0,0,.04),0 16px 36px -26px rgba(0,0,0,.35)}
[data-skin="brand"] body.mq{background:radial-gradient(900px 480px at 92% -6%,color-mix(in srgb,var(--terra) 12%,transparent),transparent 62%) fixed,radial-gradient(800px 460px at -4% 40%,color-mix(in srgb,var(--br-accent) 12%,transparent),transparent 60%) fixed,var(--paper)}
[data-skin="brand"] .mq-top,[data-skin="brand"] .mq-side{background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-skin="brand"] .mq-hello{background:linear-gradient(125deg,var(--terra),var(--br-second));color:var(--on-terra);border:0}
[data-skin="brand"] .mq-hello p,[data-skin="brand"] .mq-hello .mq-date{color:color-mix(in srgb,var(--on-terra) 80%,transparent)}
[data-skin="brand"] .mq-hello .mq-chip{background:color-mix(in srgb,var(--on-terra) 16%,transparent);color:var(--on-terra)}
[data-skin="brand"] .mq-hello .mq-btn:not(.line){background:var(--br-accent);border-color:var(--br-accent);color:#1A1411}
[data-skin="brand"] .mq-hello .mq-btn.line{color:var(--on-terra)!important;border-color:color-mix(in srgb,var(--on-terra) 40%,transparent)!important}
[data-skin="brand"] .mq-nav-a.on{box-shadow:inset -3px 0 0 var(--br-accent)}
[data-skin="brand"] .mq-bar>*{background-color:var(--br-accent)}
[data-skin="brand"] .mq-tabs{border-radius:999px}[data-skin="brand"] .mq-tabs a{border-radius:999px}
[data-skin="brand"] .mq-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
[data-skin="brand"] .mq-card:hover{transform:translateY(-3px)}

/* بلاطة الشعار في المظاهر ذات بطاقة الترحيب الفاتحة */
[data-skin="paper"] .mq-logo{border:1.5px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 var(--ink)}
[data-skin="organized"] .mq-logo{border:1px solid var(--line);box-shadow:0 1px 3px rgba(15,23,42,.1);border-radius:12px}
[data-skin="souq"] .mq-logo{border:2.5px solid #111;box-shadow:4px 4px 0 #111}
[data-skin="future"] .mq-logo{box-shadow:0 0 0 1px rgba(77,243,255,.5),0 0 24px rgba(77,243,255,.3)}

/* لا يغطي الشريط آخر المحتوى ولا شريط التنقل السفلي */
body.mqs-on .mq-main{padding-bottom:calc(var(--mqs-h,96px) + 24px)}
@media (max-width:959px){body.mqs-on .mq-main{padding-bottom:calc(190px + env(safe-area-inset-bottom,0px))}}

/* ===== أوبوس المصمم، 29 أكتوبر 2026 (بأمر صياح بعد فحص المنصة): تهدئة المظهر الافتراضي =====
   المختار يُعرف بغسلة التيراكوتا لا بكتلة الحبر الداكنة، والتيراكوتا الممتلئ لفعل الشاشة الأول وحده،
   والرسوم والأشرطة بحبر خفيف. ألوان ومقاسات فقط، لا منطق ولا نصوص. */
[data-skin="plus"] .mq-tabs a.on,[data-skin="plus"] .mq-chips button.on,[data-skin="plus"] .mq-sw button.on,[data-skin="plus"] .mq-seg button.on,[data-skin="plus"] .mq-steps span.on,[data-skin="plus"] .mq-lens button[aria-pressed="true"]{background:var(--terra-wash);color:var(--terra);border-color:transparent;font-weight:700}
[data-skin="plus"] .mq-demo .mq-chips button.on{border-color:color-mix(in srgb,var(--terra) 35%,transparent)}
[data-skin="plus"] .mq-tip{background:var(--sheet);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-card)}
/* الرسوم: الأيام بحبر خفيف، واليوم الأخير وحده بالتيراكوتا */
[data-skin="plus"] .mq-chart path[data-i]{fill:color-mix(in srgb,var(--ink) 20%,transparent);transition:fill .15s}
[data-skin="plus"] .mq-chart path[data-i]:hover{fill:color-mix(in srgb,var(--ink) 40%,transparent)}
[data-skin="plus"] .mq-chart path[data-i="29"]{fill:var(--terra)}
.mq-chart text{font-size:12px}
[data-skin="plus"] .mq-pg-bars i{background:color-mix(in srgb,var(--ink) 20%,transparent);opacity:1}
[data-skin="plus"] .mq-pg-bars i:last-child{background:var(--terra)}
/* أشرطة التقدم: حبر هادئ، والمكتمل أخضر */
[data-skin="plus"] .mq-bar>*,[data-skin="plus"] .mq-bar i{background:color-mix(in srgb,var(--ink) 55%,transparent)}
[data-skin="plus"] .mq-bar.ok i{background:var(--ok)}
[data-skin="plus"] .mq-bar{background:color-mix(in srgb,var(--ink) 9%,transparent)}
[data-skin="plus"] .as-bar em{background:color-mix(in srgb,var(--ink) 45%,transparent)}
/* أزرار بطاقات القواعد: خطية، فالشاشة فيها قواعد كثيرة ولا يصح أن تمتلئ كلها */
[data-skin="plus"] .mr-act .mq-btn:not(.line){background:var(--sheet);color:var(--terra)!important;border:1.5px solid color-mix(in srgb,var(--terra) 45%,transparent)}
[data-skin="plus"] .mr-act .mq-btn:not(.line):hover{border-color:var(--terra)}
/* الجوال: رسم المحل خلف التحية يزاحم أزرارها، وحقل التاريخ يُقص */
@media (max-width:700px){[data-skin="plus"] .mq-hello svg.mq-hello-art{display:none}}
.mq-form .two>*{min-width:0}
.mq-in[type="date"]{min-width:0;width:100%;padding-inline:10px}
@media (max-width:720px){.g4>.span2{grid-column:1/-1}}
/* إطار الجوال في محرر الصفحة: إطار فاتح بدل الإطار الأسود */
[data-skin="plus"] .mq-pg-dev{border-color:color-mix(in srgb,var(--ink) 14%,var(--sheet));background:color-mix(in srgb,var(--ink) 14%,var(--sheet));box-shadow:var(--shadow-sheet)}
[data-skin="plus"] .mq-pg-dev.full{box-shadow:none}