@font-face { font-family: 'Plex Arabic'; src: url('fonts/plex-arabic-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC; }
@font-face { font-family: 'Plex Arabic'; src: url('fonts/plex-arabic-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC; }
@font-face { font-family: 'Plex Arabic'; src: url('fonts/plex-arabic-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC; }
@font-face { font-family: 'Plex Arabic'; src: url('fonts/plex-latin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plex Arabic'; src: url('fonts/plex-latin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plex Arabic'; src: url('fonts/plex-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #05070d; --glass: rgba(12, 16, 28, 0.78); --glass2: rgba(20, 26, 44, 0.72);
  --line: rgba(148, 163, 220, 0.16); --line2: rgba(148, 163, 220, 0.28);
  --text: #eef2fb; --muted: #97a3bd; --dim: #6b7690;
  --violet: #9d8cff; --violet2: #c3b8ff; --blue: #3b82f6; --green: #10b981; --amber: #f59e0b; --red: #ef4444;
  --panelW: 340px; --topH: 74px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: 'Plex Arabic', 'Segoe UI', Tahoma, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
.en { font-size: 0.78em; color: var(--muted); font-weight: 400; letter-spacing: 0.01em; direction: ltr; unicode-bidi: isolate; }
a { color: var(--violet2); }

#app { position: fixed; inset: 0; display: grid; grid-template-columns: var(--panelW) 1fr; grid-template-rows: var(--topH) 1fr; grid-template-areas: "top top" "panel stage"; }

/* ---------- top bar ---------- */
.topbar { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 18px; background: linear-gradient(180deg, rgba(10,13,24,.96), rgba(8,10,18,.92)); border-bottom: 1px solid var(--line); z-index: 5; }
.title h1 { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.35; }
.brand { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.brand a { text-decoration: none; }
.readouts { display: flex; gap: 10px; }
.readout { min-width: 150px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass2); }
.readout .rl { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.readout .rv { font-size: 1.2rem; line-height: 1.25; white-space: nowrap; }
.readout .rv b { font-weight: 700; font-variant-numeric: tabular-nums; }
.readout .rv small { color: var(--muted); font-size: 0.75rem; }
.readout .rs { font-size: 0.68rem; color: var(--dim); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.readout.state { min-width: 210px; }
.readout.state .rv b { font-size: 1rem; }
.ibar { display: inline-block; width: 54px; height: 5px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.ibar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6f5cff, #c9bfff); transition: width .35s; }
.state.s0 { border-color: var(--line); } .state.s0 .rv b { color: #b8c2d8; }
.state.s1 { border-color: rgba(59,130,246,.45); } .state.s1 .rv b { color: #8fb7ff; }
.state.s2 { border-color: rgba(157,140,255,.55); } .state.s2 .rv b { color: var(--violet2); }
.state.s3 { border-color: rgba(157,140,255,.8); box-shadow: 0 0 18px rgba(130,110,255,.25); } .state.s3 .rv b { color: #d8d0ff; }
.state.s4 { border-color: #b9a8ff; box-shadow: 0 0 24px rgba(150,120,255,.45); } .state.s4 .rv b { color: #fff; }

/* ---------- panel ---------- */
#panel { grid-area: panel; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #070a12; border-inline-start: 1px solid var(--line); z-index: 4; scrollbar-width: thin; scrollbar-color: #2a3350 transparent; }
.panelToggle { display: none; }
.card { background: var(--glass2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.card h2 { margin: 0; font-size: 0.92rem; }
.ch { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.linkbtn { background: none; border: none; color: var(--violet2); cursor: pointer; font-size: 0.75rem; padding: 2px 4px; }
#steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#steps li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8rem; color: var(--dim); padding: 6px; border-radius: 10px; }
#steps li .n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; border: 1px solid var(--line2); color: var(--muted); }
#steps li.cur { background: rgba(130,110,255,.10); color: var(--text); }
#steps li.cur .n { border-color: var(--violet); color: var(--violet2); }
#steps li.done { color: var(--muted); }
#steps li.done .n { background: rgba(16,185,129,.18); border-color: rgba(16,185,129,.6); color: #6ee7b7; }
#steps li.fin .n { border-color: var(--amber); color: var(--amber); }
#steps .sh { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
#steps .sr { font-size: 0.72rem; color: #a7f3d0; margin-top: 3px; line-height: 1.5; }

.ctrl { margin-bottom: 12px; }
.ctrl:last-child { margin-bottom: 0; }
.ctrl > label { display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 5px; }
.rowin { display: flex; align-items: center; gap: 8px; }
.rowin input[type=number] { width: 66px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line2); background: #0b0f1c; text-align: center; font-variant-numeric: tabular-nums; direction: ltr; }
.u { font-size: 0.75rem; color: var(--muted); width: 22px; }
.hint { font-size: 0.68rem; color: var(--dim); margin-top: 4px; line-height: 1.5; }
input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 22px; background: transparent; direction: ltr; --p: 50%; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 4px; background: linear-gradient(90deg, #7a66ff var(--p), #232b45 var(--p)); }
input[type=range]::-moz-range-track { height: 5px; border-radius: 4px; background: #232b45; }
input[type=range]::-moz-range-progress { height: 5px; border-radius: 4px; background: #7a66ff; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6.5px; border-radius: 50%; background: #eae6ff; border: 3px solid #7a66ff; box-shadow: 0 0 10px rgba(122,102,255,.6); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #eae6ff; border: 3px solid #7a66ff; }
input[type=range]:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; }
.seg { display: flex; background: #0b0f1c; border: 1px solid var(--line2); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { flex: 1; padding: 6px 4px; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.8rem; transition: background .2s, color .2s; }
.seg button.on { background: linear-gradient(135deg, #6c5cf0, #4f46e5); color: #fff; }
.seg button .en { color: inherit; opacity: .7; }

.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tbtn, .wide { padding: 8px 6px; border-radius: 10px; border: 1px solid var(--line2); background: #0e1324; cursor: pointer; font-size: 0.78rem; transition: border-color .2s, background .2s; }
.tbtn:hover, .wide:hover { border-color: var(--violet); }
.tbtn.on { background: rgba(122,102,255,.22); border-color: var(--violet); color: #fff; }
.wide { width: 100%; margin-top: 8px; }
.snapInfo { margin-top: 8px; font-size: 0.72rem; color: var(--muted); line-height: 1.6; }
.assumeT { font-size: 0.76rem; font-weight: 600; margin-bottom: 4px; }
.assume { font-size: 0.7rem; color: var(--muted); line-height: 1.7; }
.qrow { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 0.75rem; color: var(--muted); }
.qrow select { background: #0b0f1c; border: 1px solid var(--line2); border-radius: 8px; padding: 4px 6px; font-size: 0.75rem; }
.foot { text-align: center; font-size: 0.72rem; color: var(--dim); padding: 4px 0 8px; }

/* ---------- stage ---------- */
#stage { grid-area: stage; position: relative; overflow: hidden; background: #03050a; }
#scene { position: absolute; inset: 0; display: block; touch-action: none; outline: none; }
.zoomBox { position: absolute; left: 14px; bottom: 58px; width: clamp(230px, 31%, 440px); border-radius: 14px; overflow: hidden; border: 1px solid rgba(180,170,255,.35); background: rgba(5,7,13,.25); box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.zoomBox .zview { aspect-ratio: 4 / 3; width: 100%; }
.zhead { position: absolute; top: 0; inset-inline: 0; padding: 6px 10px; font-size: 0.72rem; background: linear-gradient(180deg, rgba(5,7,13,.75), transparent); z-index: 2; }
.zfoot { position: absolute; bottom: 0; inset-inline: 0; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-size: 0.7rem; background: linear-gradient(0deg, rgba(5,7,13,.75), transparent); }
.scalebar { display: inline-flex; align-items: center; gap: 6px; direction: ltr; }
.scalebar i { display: inline-block; height: 3px; background: #fff; border-radius: 2px; box-shadow: 0 0 4px rgba(0,0,0,.8); }
.zoomExag { color: var(--amber); font-weight: 600; }
.zoomLegend { position: absolute; top: 28px; inset-inline: 0; padding: 4px 10px; font-size: 0.64rem; color: #dcd6ff; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.zoomLegend[hidden] { display: none; }
.lg { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.lg.ion { background: #f07bff; } .lg.fl { background: #35b6e6; }
#zoomB { display: none; }
body.compare #zoomA, body.compare #zoomB { width: clamp(170px, 21%, 330px); }
body.compare #zoomB { display: block; left: calc(50% + 14px); }
body.compare #stage::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(200,190,255,.35); pointer-events: none; }
#cmpLabels { position: absolute; top: 10px; inset-inline: 0; display: flex; justify-content: space-between; padding: 0 12px; pointer-events: none; flex-direction: row-reverse; }
#cmpLabels[hidden] { display: none; }
.cmp { width: calc(50% - 20px); padding: 6px 10px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line); font-size: 0.72rem; line-height: 1.6; }
.cmp b { color: var(--violet2); }
.tag { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 0.7rem; }
.tag.s2, .tag.s3, .tag.s4 { background: rgba(122,102,255,.25); color: #e3ddff; }
.warn { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); max-width: 86%; padding: 7px 14px; border-radius: 10px; background: rgba(60,40,0,.82); border: 1px solid rgba(245,158,11,.7); color: #fde68a; font-size: 0.76rem; text-align: center; z-index: 3; pointer-events: none; }
body.compare .warn { top: 76px; }
body.compare .toast { top: 84px; }
.toast { position: absolute; top: 54px; left: 50%; transform: translate(-50%, -8px); opacity: 0; max-width: min(560px, 90%); padding: 10px 16px; border-radius: 12px; background: rgba(14,12,34,.9); border: 1px solid rgba(157,140,255,.6); box-shadow: 0 0 30px rgba(120,100,255,.3); text-align: center; transition: opacity .4s, transform .4s; pointer-events: none; z-index: 3; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.off { border-color: rgba(96,165,250,.5); box-shadow: none; }
.toast b { display: block; font-size: 0.88rem; font-weight: 600; }
.toast span { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 3px; direction: rtl; }
.ehint { position: absolute; bottom: 14px; right: 14px; font-size: 0.68rem; color: var(--dim); direction: ltr; pointer-events: none; }
body.compare .ehint { display: none; }
.toolbar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); z-index: 3; }
.toolbar button { padding: 6px 10px; border: none; border-radius: 8px; background: transparent; cursor: pointer; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.toolbar button:hover { background: rgba(255,255,255,.06); color: var(--text); }
.toolbar button.on { color: var(--amber); }
.navhint { position: absolute; top: 12px; right: 14px; font-size: 0.66rem; color: var(--dim); pointer-events: none; }
body.compare .navhint { display: none; }
.zMarker { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; }
.zMarker i { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(220,214,255,.75); box-shadow: 0 0 8px rgba(160,140,255,.6); }
.zMarker span { position: absolute; left: 14px; top: -24px; font-size: 0.62rem; color: rgba(220,214,255,.85); white-space: nowrap; text-shadow: 0 1px 3px #000; }

/* ---------- dialog ---------- */
dialog#details { width: min(860px, 94vw); max-height: 88vh; padding: 0; border: 1px solid var(--line2); border-radius: 16px; background: #0a0d18; color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.dhead { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: #0d1120; border-bottom: 1px solid var(--line); }
.dhead h2 { margin: 0; font-size: 1rem; }
.dhead button { background: none; border: 1px solid var(--line2); border-radius: 8px; padding: 2px 10px; cursor: pointer; }
.dbody { padding: 6px 18px 18px; overflow-y: auto; max-height: calc(88vh - 54px); font-size: 0.85rem; line-height: 1.8; }
.dbody h3 { font-size: 0.92rem; color: var(--violet2); margin: 16px 0 6px; }
.dbody code { direction: ltr; unicode-bidi: isolate; display: inline-block; background: #131a30; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; font-family: 'Consolas', 'SFMono-Regular', monospace; font-size: 0.82rem; color: #e6e1ff; }
.dtab { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.dtab th, .dtab td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: start; }
.dtab th { color: var(--muted); font-weight: 400; }
.dtab td { font-variant-numeric: tabular-nums; }
.refs li { margin-bottom: 4px; }
.fallback { position: fixed; inset: 0; display: grid; place-items: center; background: #05070d; color: #fff; font-size: 1rem; padding: 24px; text-align: center; z-index: 50; }
.fallback[hidden] { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .readout { min-width: 118px; } .readout.state { min-width: 170px; } .title h1 .en { display: none; } }
@media (max-width: 900px) {
  html, body { overflow: visible; height: auto; }
  .toast b { font-size: 0.78rem; } .toast { padding: 7px 10px; top: 8px; }
  :root { --topH: auto; }
  #app { position: static; display: flex; flex-direction: column; min-height: 100%; }
  .topbar { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px; position: sticky; top: 0; }
  .title h1 { font-size: 0.95rem; }
  .readouts { gap: 6px; }
  .readout { flex: 1; min-width: 0; padding: 5px 8px; }
  .readout.state { min-width: 0; flex: 1.35; }
  .readout .rv { font-size: 1rem; } .readout.state .rv b { font-size: 0.82rem; }
  .readout .rs { white-space: normal; font-size: 0.62rem; }
  #stage { height: 50vh; min-height: 300px; order: 1; flex: none; position: sticky; top: var(--tbH, 120px); z-index: 4; }
  .brand { display: none; }
  .readout .rl .en { display: none; }
  #panel { order: 2; border: none; overflow: visible; }
  .zoomBox { width: 46%; bottom: 52px; left: 8px; }
  body.compare #zoomA, body.compare #zoomB { width: 42%; }
  body.compare #zoomB { left: calc(50% + 6px); }
  .navhint, .ehint { display: none; }
  .toolbar button span { display: none; }
  .toolbar button { font-size: 1rem; padding: 6px 12px; }
  .panelToggle { display: block; padding: 8px; border-radius: 10px; border: 1px solid var(--line2); background: #0e1324; cursor: pointer; font-size: 0.8rem; }
  body.panel-collapsed #panel > :not(.panelToggle) { display: none; }
  .cmp { font-size: 0.62rem; }
  .zoomLegend { font-size: 0.56rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- link back to the Electrical Phenomena home (added; does not alter the layout) ---------- */
.brand .ep-home { color: var(--muted); text-decoration: none; }
.brand .ep-home:hover { color: var(--violet2); }
@media (max-width: 900px) { .topbar .brand { display: block; font-size: 0.7rem; margin-top: 0; } .topbar .brand .ep-brandtext { display: none; } }