/* التخطيط: شريط هوية Phynex ← مقدمة الدرس ← المختبر (شريط علوي بالشعار + حالة ثابتة الارتفاع + مشهد 3D + لوحة القياسات + لوحة التحكم) ← الخطوات ← الاستنتاج */
:root{
  color-scheme:dark;
  --ink:#08092a; --navy:#1b1b6b; --panel:#10123f; --panel-2:#161952; --line:#262a72; --line-2:#363b95;
  --fg:#f2f3ff; --muted:#a3a8da; --soft:#d3d6f4;
  --cyan:#10bcd8; --blue:#2f6bd6; --violet:#7a3bdd; --red:#d6364a;
  --grad:linear-gradient(100deg,#10bcd8 0%,#2f6bd6 34%,#7a3bdd 66%,#d6364a 100%);
  --lab:#060a14; --lab-2:#0c1422; --lab-line:#1b2a40; --lab-fg:#e8f0f8; --lab-muted:#8fa3b8;
  --ok:#3fd6a0; --up:#f2b43c; --down:#4fc3ff;
  --f-head:'Alexandria','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --f-body:'IBM Plex Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--f-body); font-size:clamp(15px,.5vw + 12px,19px); line-height:1.75; color:var(--fg);
  background:radial-gradient(1100px 520px at 100% -160px,rgba(122,59,221,.22),transparent 62%),radial-gradient(900px 480px at -10% 10%,rgba(16,188,216,.12),transparent 60%),var(--ink);
}
.page{max-width:1680px; margin-inline:auto; padding-inline:clamp(16px,2.2vw,40px); padding-block:clamp(12px,1.4vw,24px) 26px; display:flex; flex-direction:column; gap:clamp(16px,1.4vw,24px)}

/* ---------- هوية Phynex ---------- */
.brand{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; padding-block:4px 14px; border-bottom:1px solid var(--line); position:relative}
.brand::after{content:""; position:absolute; inset-inline:0; bottom:-1px; height:2px; background:var(--grad); opacity:.85; clip-path:inset(0 0 0 62%)}
.brand-id{display:flex; align-items:center; gap:16px; min-width:0}
.brand-id img{height:clamp(34px,3vw,52px); width:auto; display:block}
.brand-sub{font-size:.82em; color:var(--muted); border-inline-start:1px solid var(--line-2); padding-inline-start:16px; line-height:1.4}
.brand-sub b{display:block; color:var(--fg); font-weight:600; font-size:1.08em}
.grade{font-family:var(--f-head); font-weight:600; font-size:.86em; padding:4px 16px; border-radius:999px; border:1px solid var(--line-2); background:rgba(27,27,107,.6); color:var(--soft)}

/* ---------- مقدمة الدرس ---------- */
.intro{display:flex; flex-direction:column; gap:8px}
.crumb{margin:0; font-size:.8em; color:var(--muted); letter-spacing:.02em}
.crumb span{color:var(--cyan); margin-inline:.35em}
h1{margin:0; font-family:var(--f-head); font-weight:700; font-size:clamp(26px,2.5vw,46px); line-height:1.35; text-wrap:balance}
h1 em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{margin:0; max-width:80ch; color:var(--soft)}
.tools{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.tools li{padding:2px 14px; border:1px solid var(--line-2); border-radius:8px; background:var(--panel); font-size:.82em; color:var(--soft)}

/* ---------- المختبر ---------- */
.lab{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(280px,23vw,392px);
  grid-template-areas:"bar bar" "status status" "view panel" "dock dock";
  background:var(--lab); border:1px solid var(--line-2); border-radius:18px; overflow:hidden;
  box-shadow:0 30px 80px -40px #000, 0 0 0 1px rgba(0,0,0,.5);
}
.bar{grid-area:bar; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px 12px; background:linear-gradient(180deg,#141660,#0e1048); border-bottom:1px solid var(--line-2); position:relative}
.bar::after{content:""; position:absolute; inset-inline:0; bottom:-1px; height:2px; background:var(--grad)}
.lab-brand{display:flex; align-items:center; gap:10px; padding-inline-end:12px; border-inline-end:1px solid var(--line-2)}
.lab-brand img{height:26px; width:auto; display:block}
.lab-title{font-family:var(--f-head); font-weight:600; font-size:.9em; color:var(--soft); min-width:0}
.modes{display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; min-width:0}
.mode{font:inherit; font-size:.84em; color:var(--soft); background:rgba(8,9,42,.6); border:1px solid var(--line-2); border-radius:10px; padding:.32em .95em; cursor:pointer; display:inline-flex; align-items:center; gap:.5em; transition:background .2s,border-color .2s,color .2s}
.mode b{font-family:var(--f-head); font-weight:600; color:var(--cyan)}
.mode:hover{border-color:var(--cyan)}
.mode[aria-selected="true"]{background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 6px 18px -8px rgba(122,59,221,.9)}
.mode[aria-selected="true"] b{color:#fff}
.bar-acts{display:flex; flex-wrap:wrap; gap:6px; margin-inline-start:auto}

.status{grid-area:status; display:flex; flex-wrap:wrap; align-items:center; gap:2px 12px; padding:8px 16px; background:#0a1220; border-bottom:1px solid var(--lab-line); color:var(--lab-fg); font-size:1.02em}
.status i{flex:none; width:11px; height:11px; border-radius:50%; background:#5d7186; box-shadow:0 0 0 4px rgba(93,113,134,.2); transition:background .2s, box-shadow .2s}
.status[data-s="up"] i{background:var(--up); box-shadow:0 0 0 4px rgba(242,180,60,.22),0 0 14px var(--up)}
.status[data-s="down"] i{background:var(--down); box-shadow:0 0 0 4px rgba(79,195,255,.22),0 0 14px var(--down)}
.status[data-s="ok"] i{background:var(--ok); box-shadow:0 0 0 4px rgba(63,214,160,.22),0 0 14px var(--ok)}
.status #stTxt{flex:1 1 280px; min-width:0}
.status #tip{font-size:.72em; color:var(--lab-muted); margin-inline-start:auto; text-align:end}

.view{grid-area:view; position:relative; min-width:0; height:min(74vh,880px); min-height:420px; background:radial-gradient(60% 55% at 50% 38%,#16263c 0%,#0b1422 55%,#05080e 100%); touch-action:none; overflow:hidden}
.view canvas{position:absolute; inset:0; width:100%; height:100%; display:block; outline:none}
.view .nogl,.veil{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; color:var(--lab-fg); background:rgba(5,8,14,.84)}
.view .nogl p,.veil p{margin:0; max-width:46ch}
#bShow{position:absolute; inset-inline-end:12px; top:12px; z-index:3}
.vmark{position:absolute; inset-inline-start:12px; top:10px; z-index:2; display:none; align-items:center; gap:8px; opacity:.85; pointer-events:none}
.vmark img{height:22px; width:auto}

.panel{grid-area:panel; min-width:0; contain:size; display:flex; flex-direction:column; gap:10px; padding:12px; background:linear-gradient(180deg,#0b1320,#070c15); border-inline-start:1px solid var(--lab-line); overflow:auto}
.ptabs{display:flex; gap:4px; padding:3px; border-radius:10px; background:#0a121e; border:1px solid var(--lab-line)}
.ptabs button{flex:1 1 0; font:inherit; font-size:.8em; color:#a9bccf; background:none; border:0; border-radius:8px; padding:.4em .6em; cursor:pointer}
.ptabs button[aria-selected="true"]{background:var(--grad); color:#fff}
.ptabs button:focus-visible{outline:2px solid var(--cyan)}
.panel[data-tab="1"] .card[data-tab="2"],.panel[data-tab="2"] .card[data-tab="1"]{display:none}
.card{background:#0e1828; border:1px solid var(--lab-line); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; min-width:0}
.card h2{margin:0; font-family:var(--f-head); font-weight:600; font-size:.86em; color:#cfe0f2; display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.card h2::before{content:""; width:4px; height:1em; border-radius:2px; background:var(--grad); align-self:center; flex:none}
.card h2 span{flex:1 1 auto}
.card h2 small{font-family:var(--f-body); font-weight:400; font-size:.82em; color:var(--lab-muted)}
.card canvas{display:block; width:100%; border-radius:8px}
#gauge{aspect-ratio:1.75}
#chart{aspect-ratio:1.6}
.reads{display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:0}
.reads div{display:flex; flex-direction:column; justify-content:space-between; gap:2px; padding:5px 9px; border-radius:8px; background:#0a121e; border:1px solid #15243a; min-width:0}
.reads dt{min-width:0; font-size:.72em; color:#a9bccf; line-height:1.35}
.reads dd{flex:none; margin:0; direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; font-weight:600; font-size:1.04em; color:#fff; white-space:nowrap}
.reads dd{align-self:flex-end; font-size:1em}
.reads dd span{display:inline-block; min-width:3.6em; text-align:right}
.reads dd small{font-weight:400; font-size:.72em; color:var(--lab-muted); margin-inline-start:4px; display:inline-block; min-width:2.2em; text-align:left}
.legend{display:flex; flex-wrap:wrap; gap:3px 14px; font-size:.72em; color:#a9bccf}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend span::before{content:""; width:16px; height:3px; border-radius:2px; background:var(--c)}
.sym{direction:ltr; unicode-bidi:isolate; font-style:italic; font-family:'Times New Roman',Georgia,serif}
.sym sub,.sym sup{font-size:.7em; font-style:normal}
.reads .sym{color:#9fdcff; margin-inline-start:4px}

.dock{grid-area:dock; display:flex; flex-direction:column; gap:8px; padding:10px 12px 12px; background:linear-gradient(180deg,#0f1146,#0b0c34); border-top:1px solid var(--line-2)}
.row{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.btn{font:inherit; font-size:.86em; font-weight:500; color:var(--fg); cursor:pointer; white-space:nowrap; padding:.48em 1em; border-radius:10px; border:1px solid var(--line-2); background:linear-gradient(180deg,#1d2068,#14164f); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #05061c; transition:transform .1s,border-color .2s,background .2s}
.btn:hover{border-color:var(--cyan)}
.btn:active{transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btn.key{background:var(--grad); border-color:transparent; color:#fff; font-weight:600; box-shadow:0 2px 0 #2a0f55,0 10px 22px -12px rgba(122,59,221,.95)}
.btn.tog[aria-pressed="true"]{border-color:var(--cyan); color:#fff; background:linear-gradient(180deg,#123a6a,#0e2650); box-shadow:inset 0 0 0 1px rgba(16,188,216,.35),0 2px 0 #05061c}
.btn.tog::before{content:""; display:inline-block; width:.55em; height:.55em; border-radius:50%; margin-inline-end:.55em; background:#3b3f7a; vertical-align:.08em}
.btn.tog[aria-pressed="true"]::before{background:var(--cyan); box-shadow:0 0 8px var(--cyan)}
.btn:focus-visible,.mode:focus-visible,.seg button:focus-visible,input[type=range]:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.sl{display:flex; align-items:center; gap:10px; padding:.28em .9em; border:1px solid var(--line); border-radius:10px; background:#0d0f3c; font-size:.84em; color:var(--soft); flex:1 1 330px; min-width:min(100%,330px); max-width:520px}
.sl span{flex:none}
.sl input{flex:1 1 60px; min-width:60px; accent-color:#7a3bdd; height:1.6em; cursor:pointer}
.sl output{flex:none; min-width:5.2em; text-align:center; direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; font-weight:600; color:#fff}
.seg{display:inline-flex; align-items:stretch; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; background:#0d0f3c}
.seg-l{display:inline-flex; align-items:center; padding:0 .9em; font-size:.78em; color:var(--muted)}
.seg button{font:inherit; font-size:.82em; color:var(--soft); background:none; border:0; padding:.48em .9em; cursor:pointer; border-inline-start:1px solid var(--line)}
.seg button:hover{color:#fff; background:#181b5e}
.seg button[aria-pressed="true"]{color:#fff; background:linear-gradient(180deg,#24288a,#1a1d6c); box-shadow:inset 0 -2px 0 var(--cyan)}

.lab.bare{grid-template-columns:minmax(0,1fr); grid-template-areas:"bar" "view"}
.lab.bare .status,.lab.bare .panel,.lab.bare .dock,.lab.bare .modes,.lab.bare .bar-acts .hide-bare{display:none}
.lab:fullscreen,.lab.pfull{border-radius:0; border:0; width:100%; height:100%; grid-template-rows:auto auto minmax(0,1fr) auto}
.lab.pfull{position:fixed; inset:0; z-index:50}
.lab:fullscreen .view,.lab.pfull .view{min-height:0; height:100%; max-height:none}
.lab.bare:fullscreen,.lab.bare.pfull{grid-template-rows:auto minmax(0,1fr)}

/* ---------- الخطوات والملاحظات ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:12px; margin:0; padding:0; list-style:none}
.step{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:var(--panel); border:1px solid var(--line); opacity:.6; transition:opacity .3s,border-color .3s,background .3s}
.step .k{flex:none; display:grid; place-items:center; width:2em; height:2em; border-radius:50%; font-family:var(--f-head); font-weight:700; color:var(--cyan); border:1.5px solid var(--line-2)}
.step p{margin:0; font-size:.9em; line-height:1.7}
.step.on{opacity:1; border-color:var(--cyan); background:var(--panel-2)}
.step.done{opacity:1; border-color:rgba(63,214,160,.55)}
.step.done .k{background:var(--ok); border-color:var(--ok); color:#04281b}
.notes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:14px}
.note{padding:18px 22px; border-radius:16px; background:var(--panel); border:1px solid var(--line); min-width:0}
.note h3{margin:0 0 10px; font-family:var(--f-head); font-weight:700; font-size:1.15em; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px}
.note p,.note li{margin:0; color:var(--soft)}
.note p + p{margin-top:8px}
.note ol,.note ul{margin:0; padding-inline-start:1.3em; display:flex; flex-direction:column; gap:8px}
.note .hl{color:#ff9aa7}
.law{direction:ltr; unicode-bidi:isolate; text-align:center; font-family:'Times New Roman',Georgia,serif; font-style:italic; font-size:1.3em; margin:12px 0 8px; padding:8px; border-radius:10px; background:rgba(27,27,107,.5); color:#fff}
.law sub,.law sup{font-size:.62em; font-style:normal}
#concl.locked ol,#concl.locked ul,#concl.locked p:not(.lockmsg){filter:blur(7px); opacity:.35; user-select:none; pointer-events:none}
#concl.locked .lockmsg{display:block}
.lockmsg{display:none; margin:0 0 10px; font-size:.86em; color:var(--muted)}
#concl:not(.locked){border-color:var(--violet); box-shadow:0 20px 50px -34px rgba(122,59,221,.9)}
#concl:not(.locked) #bConcl{display:none}
footer{display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:18px; border-top:1px solid var(--line); text-align:center; font-size:.84em; color:var(--muted)}
footer img{height:26px; width:auto; opacity:.9}
footer .dev{padding-top:8px; margin-top:4px; border-top:1px dashed var(--line); width:min(100%,560px); color:#8a8fc4}
footer bdi{direction:ltr; unicode-bidi:isolate}

@media (max-width:980px){
  .lab{grid-template-columns:minmax(0,1fr); grid-template-areas:"bar" "status" "view" "dock" "panel"}
  .view{height:auto; min-height:0; aspect-ratio:4/3; max-height:72vh}
  @media (orientation:landscape){.view{aspect-ratio:auto; height:78vh; max-height:none}}
  .panel{contain:none; border-inline-start:0; border-top:1px solid var(--lab-line); flex-direction:row; flex-wrap:wrap; overflow:visible}
  .panel .card{flex:1 1 260px}
  .ptabs{display:none}
  .panel[data-tab] .card{display:flex}
  .lab:fullscreen,.lab.pfull{grid-template-rows:auto auto minmax(0,1fr) auto auto; overflow:auto}
  .lab:fullscreen .view,.lab.pfull .view{min-height:46vh; aspect-ratio:auto; max-height:none}
}
@media (max-width:560px){
  .view{aspect-ratio:1/1}
  .lab-title{display:none}
  .sl{flex-basis:100%; max-width:none; min-width:0}
  .btn{padding:.48em .8em}
  .brand-sub{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}