/* ═══ عُدّة الدروس ثلاثيّة الأبعاد — حروف ودروس ═══════════════════════════════
   الواجهة المشتركة لكلّ نموذج في public/3d/<id>/ (الدليل: artifacts/huroof-3d/README.md).
   العقد: الصفحة تستعمل هذه المعرّفات كما هي —
     #stage (لوحة الرسم) · #top/#back/#brand (الرأس) · #inset/#insetView/#insetZoom/#insetName
     (نافذة المنظور الثاني + التكبير) · .lbl (أسماء الأجسام) · #dock/#phaseRow/#phaseIcon/#phaseName/
     #phaseDesc/#lit (لوحة الحالة) · #track/#day/#ticks/.tick (المنزلق الزمنيّ) · #actions/.btn
     (الأزرار) · .card/#challengeCard («التحدّي») · #hint · #loading
   الحالات على <body>: .embed (مضمَّن في صفحة درس) · .big (المنظور الثاني مكبَّر). */
:root{
  --orange:#FF9000; --sky:#00C6FF; --navy:#1A3365; --yellow:#FFBB00; --red:#FF4343; --green:#1FBF75;
  --space:#060B1E;
  --glass:rgba(12,22,52,.72); --glass-strong:rgba(14,26,60,.9);
  --line:rgba(160,190,255,.16); --text:#fff; --muted:#A9B7D6;
  --r:20px;
  --font:"Baloo Bhaijaan 2",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--space);color:var(--text);font-family:var(--font);overflow:hidden;
  overscroll-behavior:none;-webkit-user-select:none;user-select:none}
#stage{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none;outline:none}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
.glass{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);border-radius:var(--r)}

/* ── الرأس ── */
#top{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;left:12px;display:flex;align-items:center;gap:10px;pointer-events:none}
#brand{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;pointer-events:auto}
#brand img{width:34px;height:34px;border-radius:10px}
#brand h1{margin:0;font-size:17px;font-weight:800;line-height:1.15}
#brand p{margin:0;font-size:12px;color:var(--muted);font-weight:500}
#back{pointer-events:auto;width:44px;height:44px;display:grid;place-items:center;flex:none}
body.embed #back{display:none}
/* مضمَّن في صفحة درس: العنوان موجود في الصفحة نفسها، فلا نكرّره */
body.embed #brand{display:none}
body.embed #inset{top:12px}

/* ── «كما يُرى من الأرض» ── */
/* نافذةٌ شفّافة فوق اللوحة: الرسم تحتها مباشرة (لا خلفيّة ولا تغبيش فوقه) */
#inset{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;width:184px;pointer-events:none}
#insetView{width:100%;aspect-ratio:1;border-radius:16px;border:2px solid rgba(0,198,255,.45);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 8px 30px rgba(0,0,0,.45)}
#inset .cap{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 10px;margin-top:6px;border-radius:12px}
#insetName{color:var(--sky);font-weight:800}
/* التكبير: المعلّم يضغط النافذة (أو الزرّ) فتنتقل إلى وسط الشاشة كبيرةً، ثم تعود */
#insetView{position:relative;pointer-events:auto;cursor:zoom-in}
#inset{transition:left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1),width .45s cubic-bezier(.4,0,.2,1)}
#insetZoom{position:absolute;top:6px;left:6px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;pointer-events:auto;
  background:rgba(6,11,30,.72);border:1px solid rgba(0,198,255,.45);color:#fff;transition:transform .12s}
#insetZoom:active{transform:scale(.92)}
#insetZoom svg{width:18px;height:18px}
#insetZoom .min{display:none}
body.big #insetZoom .min{display:block} body.big #insetZoom .max{display:none}
body.big #insetView{cursor:zoom-out;border-color:rgba(0,198,255,.7);border-radius:24px}
body.big #insetZoom{width:46px;height:46px;top:12px;left:12px;border-radius:14px}
body.big #insetZoom svg{width:24px;height:24px}
body.big #inset .cap{justify-content:center;align-items:baseline;flex-wrap:wrap;gap:4px 14px;font-size:clamp(15px,2.2vw,22px);padding:8px 18px;margin-top:10px;flex-direction:row}
#inset .cap span{white-space:nowrap}
/* وضع التكبير: الرأس يختفي واللوحة تنضغط ليأخذ القمر أكبر مساحة */
#top{transition:opacity .3s}
body.big #top{opacity:0;pointer-events:none}
body.big #phaseDesc,body.big .tick span,body.big #lit span{display:none}
body.big #track{padding-bottom:24px;margin-top:6px}
body.big #insetName{font-size:1.25em}
body.big .lbl{display:none!important}
body.big #hint{opacity:0!important}
.cap .hintBig{display:none;color:var(--muted);font-weight:600;font-size:.7em}
body.big .cap .hintBig{display:inline}

/* ── التسميات ثلاثيّة الأبعاد ── */
/* أسماءٌ فقط بلا إطار — ظلٌّ خفيف يكفي لقراءتها فوق الشمس والنجوم */
.lbl{position:fixed;top:0;left:0;transform:translate(-50%,-100%);font-size:15px;font-weight:800;letter-spacing:.2px;
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(6,11,30,.9);white-space:nowrap;pointer-events:none;will-change:transform}

/* ── لوحة التحكّم ── */
#dock{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(760px,calc(100% - 24px));padding:14px 16px 12px}
#phaseRow{display:flex;align-items:center;gap:14px}
#phaseIcon{width:54px;height:54px;flex:none;filter:drop-shadow(0 0 10px rgba(255,255,255,.18))}
#phaseText{flex:1;min-width:0}
#phaseName{margin:0;font-size:26px;font-weight:800;line-height:1.1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#phaseName small{font-size:13px;font-weight:700;color:var(--muted)}
#phaseDesc{margin:2px 0 0;font-size:14px;color:#D6DFF2;line-height:1.5}
.trend{font-size:12px;font-weight:800;padding:1px 9px;border-radius:99px;background:rgba(0,198,255,.16);color:var(--sky)}
.trend.down{background:rgba(255,144,0,.16);color:var(--orange)}
#lit{flex:none;text-align:center;min-width:64px}
#lit b{display:block;font-size:22px;font-weight:800;color:var(--yellow);line-height:1}
#lit span{font-size:11px;color:var(--muted);font-weight:700}

#track{position:relative;margin:14px 6px 0;padding-bottom:44px}
#day{width:100%;margin:0;direction:rtl;-webkit-appearance:none;appearance:none;height:30px;background:transparent;touch-action:pan-y}
#day::-webkit-slider-runnable-track{height:8px;border-radius:9px;background:linear-gradient(to left,#2B3A63,#E9EEF7 50%,#2B3A63)}
#day::-moz-range-track{height:8px;border-radius:9px;background:linear-gradient(to left,#2B3A63,#E9EEF7 50%,#2B3A63)}
#day::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:var(--orange);
  border:4px solid #fff;box-shadow:0 2px 12px rgba(255,144,0,.6)}
#day::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--orange);border:4px solid #fff}
#ticks{position:absolute;top:30px;left:15px;right:15px;height:40px}
.tick{position:absolute;top:0;transform:translateX(50%);display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px;border-radius:10px;
  font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;transition:color .2s,background .2s}
.tick svg{width:20px;height:20px}
.tick.on{color:#fff;background:rgba(255,255,255,.08)}
.tick:focus-visible{outline:2px solid var(--sky)}

#actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{height:44px;padding:0 16px;border-radius:14px;font-size:15px;font-weight:800;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);transition:transform .12s,background .2s}
.btn:active{transform:scale(.96)}
.btn svg{width:20px;height:20px;flex:none}
.btn.primary{background:var(--orange);border-color:transparent;color:#fff;box-shadow:0 6px 20px rgba(255,144,0,.35)}
.btn.primary:hover{background:#FF9D1F}
.btn.ghost{width:44px;padding:0;justify-content:center}
.btn.on{background:rgba(0,198,255,.2);border-color:rgba(0,198,255,.5)}
#actions .grow{flex:1}

/* ── بطاقة الكسوف / التحدّي ── */
.card{position:fixed;left:50%;transform:translate(-50%,16px);width:min(560px,calc(100% - 24px));padding:16px 18px;opacity:0;pointer-events:none;
  transition:opacity .35s,transform .35s;background:var(--glass-strong)}
.card.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.card h2{margin:0 0 6px;font-size:20px;font-weight:800;display:flex;align-items:center;gap:8px}
.card p{margin:0;font-size:15.5px;line-height:1.7;color:#E3EAF7}
.card .warn{margin-top:10px;padding:8px 12px;border-radius:12px;background:rgba(255,67,67,.14);border:1px solid rgba(255,67,67,.35);font-size:13.5px;color:#FFD2D2}
.card .row{display:flex;gap:8px;margin-top:12px}
[hidden]{display:none!important}
#challengeCard h2{color:var(--sky)}
#challengeCard .target{color:var(--orange)}
#challengeCard .ok{color:var(--green);font-weight:800}

#hint{position:fixed;left:50%;transform:translateX(-50%);font-size:12.5px;color:var(--muted);padding:5px 12px;border-radius:99px;
  background:rgba(6,11,30,.55);pointer-events:none;transition:opacity .6s;white-space:nowrap}

#loading{position:fixed;inset:0;display:grid;place-items:center;background:var(--space);z-index:10;transition:opacity .5s}
#loading.done{opacity:0;pointer-events:none}
#loading .hx{width:64px;height:64px;animation:spin 1.4s linear infinite}
#loading p{margin:14px 0 0;color:var(--muted);font-weight:700;text-align:center}
@keyframes spin{to{transform:rotate(360deg)}}
#err{display:none;max-width:320px;text-align:center;line-height:1.7}

@media (max-width:640px){
  #brand{padding:6px 10px 6px 8px} #brand img{width:28px;height:28px} #brand h1{font-size:15px} #brand p{display:none}
  #inset{top:calc(max(12px,env(safe-area-inset-top)) + 58px);width:118px}
  #inset .cap{font-size:11px;flex-direction:column;align-items:flex-start;gap:0;padding:4px 8px}
  #dock{padding:12px 12px 10px}
  #phaseIcon{width:42px;height:42px} #phaseName{font-size:21px} #phaseDesc{font-size:13px}
  #lit b{font-size:18px}
  .tick span{display:none} #track{padding-bottom:26px}
  .btn{height:42px;padding:0 12px;font-size:14px}
  .btn .lg{display:none}
}
/* إطارٌ قصير (تضمين في صفحة، أو جوّال بالعرض): لوحةٌ مضغوطة تُبقي المشهد ظاهراً */
@media (max-height:560px){
  #dock{padding:8px 12px 8px;bottom:8px}
  #phaseIcon{width:36px;height:36px} #phaseName{font-size:19px} #phaseDesc{display:none}
  #lit b{font-size:16px} #lit span{font-size:10px}
  #track{margin-top:4px;padding-bottom:22px} .tick span{display:none} .tick svg{width:16px;height:16px}
  .btn{height:36px;padding:0 12px;font-size:13.5px;border-radius:12px} .btn.ghost{width:36px}
  #inset{width:110px} #inset .cap{font-size:10.5px;padding:3px 8px;margin-top:4px;flex-direction:column;align-items:flex-start;gap:0;line-height:1.4}
  #hint{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ‎?poster=1‎: صورة بطاقة المعرض — المشهد وحده بلا واجهة (يولّدها scripts/lab3d-thumbs.mjs في حزمة الموقع).
   الصفحة تضبط بنفسها «أجمل لقطة» في دالّة poster(). */
body.poster #top,body.poster #inset,body.poster #dock,body.poster #hint,body.poster .card,body.poster .lbl{display:none!important}

/* ── الواجهة البسيطة (طلب إبراهيم، أكتوبر ٢٠٢٦): أقلّ مربّعات، والتركيز على المحتوى والمشهد ──
   لوحة التحكّم والرأس والتلميح بلا صناديق؛ تبقى الكتابة مقروءة بتدرّجٍ ناعم أسفل الشاشة
   (لا إطار)، وظلٍّ خفيف للنصّ. المنزلق يمتدّ بعرضٍ أوسع. البطاقات (التحدّي/الشرح) والنافذة
   الثانية تبقى كما هي لأنّها محتوى مؤقّت فوق المشهد. */
#dock.glass{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  width:min(1120px,calc(100% - 32px))}
#dock::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-100vw;right:-100vw;top:-56px;bottom:-40px;
  background:linear-gradient(to bottom,rgba(6,11,30,0),rgba(6,11,30,.62) 38%,rgba(6,11,30,.86))}
#phaseName,#phaseDesc,#lit,.tick{text-shadow:0 1px 3px rgba(0,0,0,.8)}
#brand.glass{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding-inline:4px}
#brand h1,#brand p{text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 12px rgba(6,11,30,.9)}
#back.glass{background:rgba(255,255,255,.06);border-color:transparent}
#hint{background:none;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.btn{background:rgba(255,255,255,.07);border-color:rgba(160,190,255,.12)}
body.kids #dock.glass{width:min(1120px,calc(100% - 32px))}
body.embed #dock::before{top:-36px}

/* ══ السمة الفاتحة (الأصل في الهويّة؛ دروس الفضاء وحدها غامقة) — انظر _kit/theme-boot.js ══ */
html.light{--space:#EEF5FD;--glass:rgba(255,255,255,.78);--glass-strong:rgba(255,255,255,.94);
  --line:rgba(26,51,101,.14);--text:#1A3365;--muted:#5B6B8C}
html.light,html.light body{background:#EEF5FD;color:#1A3365}
html.light #dock::before{background:linear-gradient(to bottom,rgba(238,245,253,0),rgba(238,245,253,.78) 38%,rgba(238,245,253,.95))}
html.light #phaseName,html.light #phaseDesc,html.light #lit,html.light .tick,
html.light #brand h1,html.light #brand p,html.light #hint{text-shadow:0 0 6px rgba(255,255,255,.95),0 0 2px #fff}
html.light #phaseDesc{color:#2A3B5F}
html.light .tick.on{color:#1A3365;background:rgba(26,51,101,.07)}
html.light #day::-webkit-slider-runnable-track{background:linear-gradient(to left,#C9D6EA,#1A3365 50%,#C9D6EA)}
html.light #day::-moz-range-track{background:linear-gradient(to left,#C9D6EA,#1A3365 50%,#C9D6EA)}
html.light .btn{background:rgba(26,51,101,.06);border-color:rgba(26,51,101,.14);color:#1A3365}
html.light .btn.primary{background:var(--orange);color:#fff;border-color:transparent}
html.light .btn.on{background:rgba(0,198,255,.16);border-color:rgba(0,150,210,.5)}
html.light #back.glass{background:rgba(26,51,101,.06);color:#1A3365}
html.light .lbl{color:#1A3365;text-shadow:0 0 4px #fff,0 0 8px rgba(255,255,255,.95),0 1px 1px rgba(255,255,255,.9)}
html.light #insetView{border-color:rgba(0,150,210,.45);box-shadow:0 0 0 1px rgba(26,51,101,.08),0 8px 26px rgba(26,51,101,.16)}
html.light #insetZoom{background:rgba(255,255,255,.9);border-color:rgba(0,150,210,.45);color:#1A3365}
html.light #inset .cap{color:#1A3365}
html.light #insetName{color:#0096D2}
html.light .card{color:#1A3365;box-shadow:0 14px 40px rgba(26,51,101,.18)}
html.light .card p{color:#2A3B5F}
html.light #challengeCard h2{color:#0096D2}
html.light #loading{background:#EEF5FD}
html.light .trend{background:rgba(0,150,210,.12);color:#0080B5}

/* أوّل نصٍّ يُفقد في السمة الفاتحة: الأسماء الصفراء — تُعمَّق لتُقرأ على الأبيض */
html.light{--yellow:#D99A00}
/* عنوان النافذة الصغيرة لا يخرج من حافّة الشاشة: يلتفّ داخل عرضها (يبقى سطراً واحداً حين تكبر) */
body:not(.big) #inset .cap{flex-wrap:wrap;row-gap:0;max-width:100%;overflow:hidden}
body:not(.big) #inset .cap span{white-space:normal;min-width:0}

/* ── حوافّ النافذة الثانية ناعمة (طلب إبراهيم): الرسم داخلها مستطيلٌ بزوايا حادّة
   (scissor في WebGL) والإطار مستدير، فتبرز زوايا المستطيل خارج الإطار. حلقةٌ بلون
   الخلفيّة حول الإطار تغطّي الزوايا وتنعّم الحافّة — لكلّ النماذج دون لمس كودها. */
:root{--inset-ring:#060B1E}
html.light{--inset-ring:#EEF5FD}
#insetView::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 9px var(--inset-ring),0 0 10px 11px var(--inset-ring)}
#insetView{box-shadow:none}
body.big #insetView::after{box-shadow:0 0 0 12px var(--inset-ring),0 0 14px 14px var(--inset-ring)}

/* إمكانيّة الوصول — مؤشّر تركيز لوحة المفاتيح لكلّ عناصر الدرس (WCAG 2.4.7):
   حلقة سماويّة وهالة كحليّة، فيظهر على الخلفيّات الداكنة والفاتحة معاً */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[role="button"]:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{
  outline:3px solid #00C6FF!important;outline-offset:2px;box-shadow:0 0 0 6px rgba(26,51,101,.85)}
#stage:focus-visible{outline:3px solid #00C6FF!important;outline-offset:-4px;box-shadow:none}

/* ══ واجهةٌ أبسط، والمشهد أوسع (إبراهيم ٢١ أكتوبر ٢٠٢٦) ════════════════════════════════════════
   ١) عنوان النافذة الثانية مكتوبٌ عليها (أسفلها بتدرّجٍ خفيف) بدل بطاقةٍ منفصلة تحتها.
   ٢) زاوية الرأس (#labCorner، يبنيها narration.js/summary.js/sound.js): «استمع للشرح» أعلاها و«الملخّص»
      تحته، زرّان بالشكل والمقاس نفسه تماماً (‎.lab-pill‎)، ثم صفّ أيقونات صغيرة (‎#labAux‎: إيقاف الشرح،
      الترجمة، الأصوات).
   ٣) أزرار اللوحة الثانويّة أيقوناتٌ بلا مربّعات، لونها حسب الخلفيّة (كحليّ على الفاتح، أبيض على الغامق)،
      وتكبر قليلاً بهالةٍ دائريّة عند المرور وتنضغط عند اللمس؛ الزرّ البرتقاليّ (‎.btn.primary‎) يبقى كما هو.
   المعرّفات المكرّرة (‎#inset#inset‎، ‎#actions#actions‎) ترفع الأولويّة فوق <style> الصفحات دون لمسها. */

/* ── ١) عنوان النافذة الثانية ── */
#inset#inset .cap{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body:not(.big) #inset#inset > .cap{position:absolute;left:2px;right:2px;bottom:2px;top:auto;width:auto;max-width:none;margin:0;transform:none;
  padding:26px 10px 7px;border-radius:0 0 14px 14px;line-height:1.35;
  background:linear-gradient(to top,rgba(6,11,30,.9),rgba(6,11,30,.62) 50%,rgba(6,11,30,0));
  text-shadow:0 1px 2px rgba(0,0,0,.9)}
html.light body:not(.big) #inset#inset > .cap{
  background:linear-gradient(to top,rgba(238,245,253,.97),rgba(238,245,253,.78) 50%,rgba(238,245,253,0));
  text-shadow:0 0 4px #fff,0 0 2px #fff}
body.big #inset#inset .cap{text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(6,11,30,.9)}
html.light body.big #inset#inset .cap{text-shadow:0 0 6px #fff,0 0 2px #fff}
@media (max-width:640px),(max-height:560px){
  body:not(.big) #inset#inset > .cap{padding:18px 7px 5px;border-radius:0 0 12px 12px}
}

/* ── ٢) زاوية الرأس: «استمع للشرح» ثم «الملخّص» ── */
#labCorner{position:fixed;right:12px;top:calc(max(12px,env(safe-area-inset-top)) + 58px);z-index:4;
  display:grid;grid-template-columns:max-content;justify-items:stretch;align-content:start;row-gap:8px;
  pointer-events:none;transition:opacity .2s}
body.embed #labCorner{top:12px}
#labCorner button{pointer-events:auto}
#narr{order:1;display:flex}
#narr #narrPlay{flex:1}
#labCorner #sumBtn{order:2}
#labAux{order:3;justify-self:start;display:flex;gap:2px;margin-top:-2px}
#labAux:empty{display:none}
.lab-pill{position:relative;height:46px;min-width:156px;margin:0;padding:0 16px 0 18px;border:0;border-radius:999px;
  display:inline-flex;align-items:center;gap:9px;font:800 16px/1 var(--font);white-space:nowrap;cursor:pointer;
  color:#fff;background:#1A3365;box-shadow:0 4px 14px rgba(26,51,101,.28);
  transition:transform .12s,background .2s,box-shadow .2s}
.lab-pill:hover{background:#24427F}
.lab-pill:active{transform:scale(.95)}
.lab-pill svg{width:22px;height:22px;flex:none}
.lab-pill .t{padding-top:1px}
#narrPlay.lab-pill svg{color:#FF9000}
html.theme-dark .lab-pill{color:#1A3365;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4)}
html.theme-dark .lab-pill:hover{background:#EAF2FF}
.lab-ico{position:relative;width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:none;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85));transition:transform .14s,opacity .2s}
.lab-ico svg{width:21px;height:21px}
html.light .lab-ico{color:#1A3365;filter:drop-shadow(0 0 3px rgba(255,255,255,.95))}
.lab-ico:active{transform:scale(.86)}
#narrCC:not(.on){opacity:.5}
body.big #labCorner{opacity:.5}
body.big #labAux{display:none}
body.big #labCorner:hover,body.big #labCorner:focus-within{opacity:1}
body.poster #labCorner{display:none!important}
html.mini #labCorner{top:12px!important}
html.mini .lab-pill{min-width:0}
@media (min-width:1500px) and (min-height:760px){
  .lab-pill{height:52px;min-width:178px;font-size:18px;gap:10px;padding:0 18px 0 20px} .lab-pill svg{width:25px;height:25px}
  .lab-ico{width:48px;height:48px} .lab-ico svg{width:23px;height:23px}
}
@media (max-width:640px){
  #labCorner{row-gap:6px}
  .lab-pill{height:40px;min-width:0;font-size:14px;gap:7px;padding:0 12px 0 14px} .lab-pill svg{width:19px;height:19px}
  .lab-ico{width:40px;height:40px}
}
@media (max-height:560px){
  #labCorner{row-gap:6px}
  .lab-pill{height:36px;min-width:0;font-size:13.5px;gap:7px;padding:0 12px 0 13px} .lab-pill svg{width:18px;height:18px}
  .lab-ico{width:36px;height:36px} .lab-ico svg{width:19px;height:19px}
}

/* ── ٣) أزرار اللوحة: أيقوناتٌ بلا مربّعات ── */
#actions#actions > .btn:not(.primary):has(svg),#back#back{background:none;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:999px;color:#fff;position:relative;isolation:isolate;
  transition:transform .16s cubic-bezier(.3,1.5,.6,1),color .2s}
#actions#actions > .btn:not(.primary):has(svg){padding:0 10px;text-shadow:0 1px 3px rgba(0,0,0,.85)}
#actions#actions > .btn:not(.primary):has(svg) svg,#back#back svg{width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));transition:transform .16s}
/* هالةٌ دائريّة تظهر عند المرور واللمس فقط — توحي بأنّه زرّ دون أن يصير مربّعاً */
#actions#actions > .btn:not(.primary):has(svg)::before,#back#back::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:currentColor;opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
@media (hover:hover){
  #actions#actions > .btn:not(.primary):has(svg):hover::before,#back#back:hover::before{opacity:.12;transform:scale(1)}
  #actions#actions > .btn:not(.primary):has(svg):hover svg,#back#back:hover svg{transform:scale(1.1)}
}
#actions#actions > .btn:not(.primary):has(svg):active,#back#back:active{transform:scale(.86)}
#actions#actions > .btn:not(.primary):has(svg):active::before,#back#back:active::before{opacity:.22;transform:scale(1)}
/* المفعَّل (تشغيل، طبقة ظاهرة…): لونٌ سماويّ ونقطةٌ تحته */
#actions#actions > .btn.on:not(.primary):has(svg){color:#00C6FF}
#actions#actions > .btn.on:not(.primary):has(svg)::after{content:"";position:absolute;left:50%;bottom:1px;width:6px;height:6px;margin-left:-3px;
  border-radius:50%;background:currentColor}
html.light #actions#actions > .btn:not(.primary):has(svg),html.light #back#back{color:#1A3365}
html.light #actions#actions > .btn:not(.primary):has(svg){text-shadow:0 0 6px #fff,0 0 2px #fff}
html.light #actions#actions > .btn:not(.primary):has(svg) svg,html.light #back#back svg{filter:drop-shadow(0 0 3px rgba(255,255,255,.95))}
html.light #actions#actions > .btn.on:not(.primary):has(svg){color:#0089B8}
body.kids #actions#actions > .btn:not(.primary):has(svg) svg{width:30px;height:30px}
@media (max-height:560px){#actions#actions > .btn:not(.primary):has(svg) svg{width:22px;height:22px}}
/* أيقوناتٌ رُسمت بالأبيض صراحةً (‎fill/stroke="#fff"‎) لتُقرأ فوق المربّع القديم: تتبع الآن لون الزرّ حسب الخلفيّة */
#actions#actions > .btn:not(.primary) svg :is([fill="#fff" i],[fill="#ffffff" i],[fill="white" i]),#back#back svg :is([fill="#fff" i],[fill="#ffffff" i],[fill="white" i]),
#actions#actions > .btn:not(.primary) svg:is([fill="#fff" i],[fill="#ffffff" i],[fill="white" i]),#back#back svg:is([fill="#fff" i],[fill="#ffffff" i],[fill="white" i]){fill:currentColor}
#actions#actions > .btn:not(.primary) svg :is([stroke="#fff" i],[stroke="#ffffff" i],[stroke="white" i]),#back#back svg :is([stroke="#fff" i],[stroke="#ffffff" i],[stroke="white" i]),
#actions#actions > .btn:not(.primary) svg:is([stroke="#fff" i],[stroke="#ffffff" i],[stroke="white" i]),#back#back svg:is([stroke="#fff" i],[stroke="#ffffff" i],[stroke="white" i]){stroke:currentColor}