/* ============================================================
   Matter · Structure — أنماط مشتركة لكلّ دروس السُب-مشروع
   ------------------------------------------------------------
   مرآة بنيويّة لـ astrophysics/lessons/shared.css مع palette
   كهرمانيّ (لون قسم الكيمياء) لتمييز السُب-مشروع بصريّاً.
   ============================================================ */
:root{
  --bg-0:#070409; --bg-1:#0f0b14; --bg-2:#181221; --bg-3:#231831;
  --line:#2a1f3a; --line-2:#3a2c4f;

  /* الـaccent الأساس: كهرمانيّ — نفس لون قسم الكيمياء. */
  --accent:      #f5a623;
  --accent-dim:  rgba(245,166,35,0.6);
  --accent-glow: rgba(245,166,35,0.18);

  /* ألوان ثانويّة — تُستعمل كأدوار وظيفيّة. */
  --cyan:    #4ab8ff;
  --cyan-dim: rgba(74,184,255,0.6);
  --cyan-glow: rgba(74,184,255,0.18);
  --pink:    #ff5e6c;
  --violet:  #a78bfa;
  --gold:    #fbbf24;
  --green:   #4ade80;

  /* ألوان جسيمات الذرّة (PROJECT_BRIEF §7). */
  --proton:  #ff5e6c;
  --neutron: #8a97b0;
  --electron:#4ab8ff;

  /* عائلات الجدول الدوريّ. */
  --fam-alkali:    #ffb05a;
  --fam-alkaline:  #ffd84a;
  --fam-transition:#f0a3c8;
  --fam-metalloid: #b6e388;
  --fam-nonmetal:  #6ec3ff;
  --fam-halogen:   #88e0d0;
  --fam-noble:     #c8a2ff;

  /* أنماط الرابطة. */
  --bond-ionic:    var(--accent);
  --bond-covalent: var(--electron);
  --bond-metallic: var(--neutron);

  /* النصّ. */
  --txt:#e9e3f0; --txt-dim:#9b91a8; --txt-faint:#6b6276;

  /* الخطوط. */
  --font-ar:   'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-en:   'IBM Plex Sans', 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:
    radial-gradient(ellipse at 15% -10%, rgba(245,166,35,0.07), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(74,184,255,0.04), transparent 45%),
    var(--bg-0);
  color: var(--txt);
  font-family: var(--font-ar);
  overflow:hidden;
}
html[dir="ltr"] body{ font-family: var(--font-en); }
button, input, select{ font-family: inherit; color: inherit; }

/* ===== topbar (مطابق لعادة الـlab مع tokens محلّيّة) ===== */
.lesson-topbar{
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.lesson-topbar__nav{
  display: flex;
  align-items: center;
  gap: 12px;
}
.lesson-topbar__title{
  font-weight: 600;
  font-size: 14px;
  color: var(--txt);
}
.lesson-topbar__sub{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-faint);
}
.topbar-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  color: var(--txt-dim);
  font-family: var(--font-ar);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.topbar-btn:hover{
  color: var(--accent);
  border-color: var(--accent-dim);
  background: rgba(245,166,35,0.06);
}
.topbar-btn__icon{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
}
.topbar-btn[hidden]{ display:none; }

/* ===== shell: topbar + (sidebar + main) ===== */
.shell{ height:100%; display:grid; grid-template-columns: 320px 1fr;
        grid-template-rows: 48px 1fr;
        min-height:0; overflow:hidden; }
.shell > .lesson-topbar{ grid-row: 1; grid-column: 1 / -1; }
.shell > aside{
  grid-row: 2; grid-column: 1;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border-inline-end:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.shell > main{ grid-row: 2; grid-column: 2; min-height:0; overflow:hidden; display:flex; flex-direction:column; }

/* ===== sidebar: brand ===== */
.sb-brand{
  padding: 18px 18px 14px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
}
.sb-brand-mark{
  width:42px; height:42px; border-radius:10px;
  background: rgba(245,166,35,0.06);
  border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 30px var(--accent-glow) inset;
  flex-shrink:0;
}
.sb-brand-title{ font-size:15px; font-weight:700; line-height:1.2; }
.sb-brand-sub{ font-size:10.5px; color:var(--txt-dim);
               font-family: var(--font-mono); margin-top:3px;
               letter-spacing:0.04em; }

/* ===== sidebar: back arrow (lesson pages only) ===== */
.sb-back{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  margin: 12px 14px 0;
  background: var(--bg-2); border:1px solid var(--line-2);
  border-radius:8px; color: var(--txt-dim);
  font-size:18px; text-decoration:none;
  transition: all .15s;
}
.sb-back:hover{
  color: var(--accent); border-color: var(--accent-dim);
  background: rgba(245,166,35,0.06);
}

/* ===== sidebar: meta row (lang only — mirror of astrophysics) ===== */
.sb-meta{ padding: 10px 18px; border-bottom:1px solid var(--line);
          display:flex; align-items:center; justify-content:space-between;
          gap:10px; }
.sb-meta-label{ font-size:10px; color:var(--txt-faint);
                font-family: var(--font-mono);
                text-transform:uppercase; letter-spacing:0.18em; }

/* ===== sidebar: controls row (legacy — kept for any pages still using it) ===== */
.sb-ctl{ padding: 10px 14px; border-bottom:1px solid var(--line);
         display:flex; align-items:center; justify-content:space-between;
         gap:10px; flex-wrap:wrap; }
.sb-ctl-label{ font-size:10px; color:var(--txt-faint);
               font-family: var(--font-mono);
               text-transform:uppercase; letter-spacing:0.18em; }
.seg{ display:flex; background:var(--bg-2); border:1px solid var(--line-2);
      border-radius:6px; overflow:hidden; }
.seg button{ background:transparent; border:none; color:var(--txt-dim);
             padding:5px 12px; cursor:pointer; font-size:11px;
             font-family: var(--font-mono); letter-spacing:0.03em; }
.seg button.on{ background:var(--accent); color:#1a0f00; font-weight:600; }
.seg button:hover:not(.on){ color:var(--txt); }

.sb-fs{
  background: var(--bg-2); border:1px solid var(--line-2);
  color: var(--txt-dim); font-family: var(--font-mono);
  font-size: 11px; letter-spacing:0.05em;
  padding: 6px 12px; border-radius:6px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition: all .15s;
}
.sb-fs:hover{ color: var(--accent); border-color: var(--accent-dim);
              background: rgba(245,166,35,0.06); }
.sb-fs[hidden]{ display:none; }
.sb-fs-icon{ font-size:14px; line-height:1; }

/* ===== sidebar: lesson list (groups + rows) ===== */
.sb-list{ flex:1; overflow-y:auto; padding: 6px 10px 20px; }

/* flat group label (mirror of astrophysics) */
.sb-group-label{
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color: var(--accent); font-family: var(--font-mono);
  padding: 14px 10px 6px;
}

/* legacy collapsible group (kept to not break any older usage) */
.sb-group{ border:none; margin: 6px 0; }
.sb-group > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  padding: 10px 10px 8px;
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--accent); font-family: var(--font-mono);
  user-select:none;
}
.sb-group > summary::-webkit-details-marker{ display:none; }
.sb-group-caret{
  display:inline-block; width:10px; text-align:center;
  font-family: var(--font-mono); transition: transform .15s;
  color: var(--txt-faint);
}
.sb-group[open] > summary .sb-group-caret{ transform: rotate(90deg); color: var(--accent); }
html[dir="rtl"] .sb-group-caret{ transform: rotate(180deg); }
html[dir="rtl"] .sb-group[open] > summary .sb-group-caret{ transform: rotate(90deg); }
.sb-group-count{
  margin-inline-start:auto; font-size:10px; color:var(--txt-faint);
  font-family: var(--font-mono); letter-spacing:0.04em;
}

.sb-item{
  display:flex; align-items:flex-start; gap:10px;
  padding: 9px 10px; margin: 2px 0;
  border-radius:7px; cursor:pointer; text-decoration:none;
  color:var(--txt-dim);
  transition: background .12s, color .12s, border-color .12s;
  border: 1px solid transparent;
}
.sb-item:hover{ background: rgba(245,166,35,0.04); color:var(--txt); }
.sb-item.active{
  background: rgba(245,166,35,0.08);
  border-color: var(--accent-dim);
  color:var(--txt);
}
.sb-item.active .sb-num{ background:var(--accent); color:#1a0f00; }
.sb-item.is-planned{ opacity: 0.72; cursor: not-allowed; pointer-events: none; }
.sb-item.is-planned .sb-num{ background: rgba(148,163,184,0.08);
                             color: var(--txt-faint);
                             border: 1px dashed var(--line-2); }

.sb-num{
  width:28px; height:28px; border-radius:7px;
  background: var(--bg-2); color: var(--txt-dim);
  font-family: var(--font-mono);
  font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; letter-spacing:0; transition: background .12s;
}
.sb-text{ min-width:0; flex:1; }
.sb-title{ font-size:13px; line-height:1.35; display:flex;
           gap:6px; align-items:center; flex-wrap:wrap; }
.sb-sub{ font-size:10.5px; color:var(--txt-faint);
         font-family: var(--font-mono);
         margin-top:3px; line-height:1.5;
         display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
         overflow:hidden; }

.sb-pill{
  display:inline-block; font-size:9px;
  font-family: var(--font-mono); letter-spacing:0.08em;
  padding: 1px 7px; border-radius:20px;
  border: 1px solid transparent;
  text-transform: uppercase;
}
.sb-pill.planned{
  background: rgba(148,163,184,0.08);
  color: var(--txt-faint);
  border-color: var(--line-2);
}
.sb-pill.ready{
  background: rgba(74,222,128,0.1);
  color: var(--green);
  border-color: rgba(74,222,128,0.35);
}
.sb-pill.coming{
  background: rgba(167,139,250,0.1);
  color: var(--violet);
  border-color: rgba(167,139,250,0.35);
}

/* ===== main: index-mode ===== */
.index-main{ overflow-y:auto; padding: 0; }

.hero{
  padding: 40px 48px 28px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(245,166,35,0.09), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(74,184,255,0.05), transparent 55%);
}
.hero-eyebrow{
  font-size:11px; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--accent); font-family: var(--font-mono);
  margin-bottom:12px;
}
.hero-title{ font-size:34px; line-height:1.18; font-weight:700;
             margin:0 0 10px; letter-spacing:0.005em; max-width:22ch; }
.hero-lede{ font-size:14.5px; color:var(--txt-dim); line-height:1.85;
            max-width:72ch; }
.hero-hook{
  margin-top:20px; padding: 14px 18px;
  background: linear-gradient(135deg, rgba(245,166,35,0.06), rgba(74,184,255,0.03));
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font-size: 15px; color: var(--txt);
  line-height: 1.7;
}
.hero-hook-label{
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color: var(--accent); font-family: var(--font-mono);
  display:block; margin-bottom: 6px;
}

.hero-arc{
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--txt-dim);
  letter-spacing: 0.06em;
  direction: ltr; text-align: start;
}
.hero-arc strong{ color: var(--txt); font-weight: 600; }
html[dir="rtl"] .hero-arc{ direction: rtl; }

.hero-ledger{ display:flex; gap:28px; margin-top:22px; flex-wrap:wrap; }
.hero-stat{ min-width:0; }
.hs-k{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
       color:var(--txt-faint); font-family: var(--font-mono); }
.hs-v{ font-size:22px; color:var(--txt); margin-top:4px;
       font-family: var(--font-mono); }
.hs-v.accent{ color:var(--accent); }
.hs-v.cyan{ color:var(--cyan); }
.hs-v.green{ color: var(--green); }

/* ===== main: curriculum grid ===== */
.curriculum{ padding: 32px 48px 64px; }
.cgroup{ margin-bottom: 40px; }
.cgroup-head{
  display:flex; align-items:baseline; gap:16px;
  padding-bottom:12px; margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.cgroup-no{ font-family: var(--font-mono); font-size:12px;
            color:var(--accent); letter-spacing:0.15em; }
.cgroup-t{ font-size:18px; font-weight:600; }
.cgroup-s{ font-size:12px; color:var(--txt-faint);
           font-family: var(--font-mono); margin-inline-start:auto; }

.lgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr));
        gap:14px; }
.lcard{
  display:flex; gap:14px;
  padding: 18px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none; color: inherit;
  transition: all .18s;
  position:relative; overflow:hidden;
}
.lcard::before{
  content:""; position:absolute; top:0; inset-inline-start:0;
  width:3px; height:100%;
  background: var(--accent); opacity:0.35;
  transition: opacity .18s;
}
.lcard:hover{ border-color:var(--accent-dim);
              background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); }
.lcard:hover::before{ opacity:1; }
.lcard.is-planned{ opacity:0.62; cursor:not-allowed; pointer-events:none; }
.lcard.is-planned::before{ background: var(--txt-faint); }

.lcard-no{
  width:44px; height:44px; border-radius:10px;
  background: rgba(245,166,35,0.08);
  border:1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.lcard.is-planned .lcard-no{
  background: rgba(148,163,184,0.06);
  border-color: var(--line-2); color: var(--txt-faint);
}
.lcard-body{ min-width:0; }
.lcard-t{ font-size:14.5px; font-weight:600; line-height:1.35;
          display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.lcard-s{ font-size:11.5px; color:var(--txt-faint);
          margin-top:5px; font-family: var(--font-mono); line-height:1.55; }
.lcard-goal{ font-size:12.5px; color:var(--txt-dim); margin-top:8px; line-height:1.7; }

/* ===== lesson page: header ===== */
.lesson-head{
  flex-shrink:0; padding: 20px 28px 16px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(to bottom, rgba(35,24,49,0.55), transparent);
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
}
.lh-left{ min-width:0; flex:1; }
.lh-tag{
  display:inline-flex; gap:8px; align-items:center;
  font-size:10.5px; color:var(--accent);
  font-family: var(--font-mono);
  letter-spacing:0.2em; text-transform:uppercase;
  background: rgba(245,166,35,0.06);
  border:1px solid var(--line-2);
  padding:4px 10px; border-radius:20px; margin-bottom:10px;
}
.lh-title{ font-size:26px; font-weight:700; letter-spacing:0;
           line-height:1.22; margin:0; }
.lh-goal{ font-size:13px; color:var(--txt-dim); line-height:1.7;
          margin-top:8px; max-width:80ch; }
.lh-goal strong{ color:var(--accent); }

.lh-nav{ display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; }
.lh-nav a{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 14px; border-radius:7px;
  background: var(--bg-2); border:1px solid var(--line-2);
  color: var(--txt-dim); font-family: var(--font-mono);
  font-size:11px; text-decoration:none;
  transition: all .15s;
}
.lh-nav a:hover{ color: var(--accent); border-color: var(--accent-dim);
                 background: rgba(245,166,35,0.06); }

/* ===== lesson page: body (2-col stage|side) ===== */
.lesson-body{ flex:1; min-height:0; display:grid;
              grid-template-columns: 1fr 380px; overflow:hidden; }
.stage-col{ min-height:0; overflow:hidden; position:relative;
            background:
              radial-gradient(ellipse at center, #0a0510 0%, #030106 100%); }
.stage-col::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(245,166,35,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 82%);
  pointer-events:none;
}
.side-col{
  min-height:0; overflow-y:auto;
  border-inline-start:1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  padding: 20px;
}

/* ===== reusable cards (for future lessons) ===== */
.card{
  background: var(--bg-2); border:1px solid var(--line);
  border-radius:10px; padding: 14px 16px; margin-bottom: 14px;
}
.card-title{
  font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase;
  font-family: var(--font-mono);
  color:var(--accent); margin-bottom:10px; font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.card.electron .card-title{ color:var(--electron); }
.card.proton   .card-title{ color:var(--proton); }
.card.neutron  .card-title{ color:var(--neutron); }
.card.covalent .card-title{ color:var(--bond-covalent); }
.card.ionic    .card-title{ color:var(--bond-ionic); }
.card.metallic .card-title{ color:var(--bond-metallic); }
.card.electron  { border-inline-start:3px solid var(--electron); }
.card.proton    { border-inline-start:3px solid var(--proton); }
.card.neutron   { border-inline-start:3px solid var(--neutron); }
.card.accent    { border-inline-start:3px solid var(--accent); }

.kv{ display:flex; justify-content:space-between; gap:12px;
     padding: 6px 0; font-size:12.5px;
     border-bottom:1px dashed rgba(148,163,184,0.08); }
.kv:last-child{ border:none; }
.kv .k{ color:var(--txt-dim); }
.kv .v{ color:var(--txt); font-family: var(--font-mono);
        direction:ltr; text-align:end; }
.kv.hi{ background:rgba(245,166,35,0.06); margin: 4px -16px;
        padding: 7px 16px; border-radius:5px; border:none; }
.kv.hi .v{ color:var(--accent); font-weight:600; }

/* ===== formula boxes ===== */
.fx{
  background: linear-gradient(135deg, rgba(245,166,35,0.04), rgba(74,184,255,0.02));
  border:1px solid var(--line);
  border-radius:10px; padding: 14px; margin-bottom: 14px;
}
.fx-label{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
           color:var(--accent); font-family: var(--font-mono);
           margin-bottom:8px; }
.fx-line{ font-family: var(--font-mono); font-size:13px;
          color:var(--txt); padding:5px 0;
          direction:ltr; text-align:start; line-height:1.55; }
.fx-hint{ font-size:11px; color:var(--txt-faint);
          font-family: var(--font-mono); margin-top:6px;
          direction:ltr; line-height:1.6; }

/* ===== sliders ===== */
.ctl-row{ margin-bottom:12px; }
.ctl-row label{
  display:flex; justify-content:space-between; gap:8px;
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--txt-faint); margin-bottom:6px;
  font-family: var(--font-mono);
}
.ctl-row label .val{ color:var(--accent); direction:ltr; letter-spacing:0; }
.ctl-row input[type="range"]{ width:100%; -webkit-appearance:none; appearance:none;
  background:transparent; height:22px; margin:0; }
.ctl-row input[type="range"]::-webkit-slider-runnable-track{
  height:4px; background: linear-gradient(90deg, var(--accent-glow), var(--line-2));
  border-radius:2px; }
.ctl-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent); margin-top:-5px;
  box-shadow: 0 0 0 3px rgba(245,166,35,0.2); cursor:grab; }
.ctl-row input[type="range"]::-moz-range-track{
  height:4px; background:var(--line-2); border-radius:2px; }
.ctl-row input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--accent); border:none;
  box-shadow: 0 0 0 3px rgba(245,166,35,0.2); cursor:grab; }

/* ===== bottom nav (prev/next) ===== */
.lesson-nav-bottom{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:18px;
}
.lesson-nav-bottom a, .lesson-nav-bottom .disabled{
  display:flex; flex-direction:column; gap:3px;
  padding:12px 14px; border-radius:8px;
  background: var(--bg-2); border:1px solid var(--line);
  color: var(--txt-dim); text-decoration:none;
  transition: all .15s;
}
.lesson-nav-bottom a:hover{ border-color: var(--accent-dim);
                            background: rgba(245,166,35,0.04);
                            color: var(--txt); }
.lesson-nav-bottom .disabled{ opacity: 0.4; pointer-events: none; }
.lesson-nav-bottom .nav-dir{ font-size:10px; color:var(--txt-faint);
                             font-family: var(--font-mono);
                             letter-spacing:0.2em; text-transform:uppercase; }
.lesson-nav-bottom .nav-t{ font-size:13px; color:var(--txt); line-height:1.35; }

/* ===== ref row (external links on index) ===== */
.ref-row{
  display:flex; gap:12px; flex-wrap:wrap; margin-top: 22px;
}
.ref-row a{
  font-family: var(--font-mono); font-size:11.5px;
  color:var(--txt-dim); text-decoration:none;
  padding: 7px 14px; border-radius:20px;
  background: var(--bg-2); border:1px solid var(--line-2);
  transition: all .15s;
}
.ref-row a:hover{ color:var(--accent); border-color:var(--accent-dim);
                  background: rgba(245,166,35,0.06); }

/* ===== fullscreen rules ===== */
:root:fullscreen{ background: var(--bg-0); }
:root:fullscreen body{ overflow:hidden; }
:root:fullscreen .shell{ height: 100vh; }

/* ===== scrollbars ===== */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-dim); }

/* ===== utility: numbers / code always LTR ===== */
.num, .formula, code{ direction:ltr; unicode-bidi: isolate; }

/* ===== shell variants ===== */
.shell.lesson-mode{ grid-template-rows: 1fr; }

/* ===== lesson: stage (atom / generic) ===== */
.atom-wrap{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.atom-svg{
  width: min(92%, 620px);
  aspect-ratio: 1 / 1;
  touch-action: none;
  user-select: none;
}
.stage-legend{
  position:absolute; top:16px; inset-inline-start:18px;
  display:flex; gap:10px; flex-wrap:wrap; z-index:2;
  font-family: var(--font-mono); font-size:10.5px;
  color: var(--txt-dim);
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 9px; border-radius: 20px;
  background: rgba(15,10,20,0.7);
  border: 1px solid var(--line-2);
  letter-spacing: 0.04em;
}
.chip .dot{
  width:8px; height:8px; border-radius:50%;
  display:inline-block;
}
.stage-tag{
  position:absolute; bottom:14px; inset-inline-start:18px;
  font-family: var(--font-mono); font-size:10.5px;
  color: var(--txt-faint);
  background: rgba(15,10,20,0.7);
  border: 1px solid var(--line-2);
  border-radius: 6px; padding: 5px 10px;
  letter-spacing: 0.04em;
  z-index: 2;
}

/* ===== lesson: element identity row ===== */
.elem-row{
  display:flex; align-items:baseline; gap:10px;
  margin-bottom: 6px;
}
.elem-sym{
  font-family: var(--font-mono);
  font-size: 28px; font-weight: 700;
  color: var(--accent);
  letter-spacing: 0;
}
.elem-name{
  font-size: 16px; font-weight: 600;
  color: var(--txt);
}
.elem-fam{
  font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-faint);
  font-family: var(--font-mono);
  margin-inline-start: auto;
}

/* ===== lesson: configuration line ===== */
.config-line{
  font-family: var(--font-mono); font-size: 13.5px;
  color: var(--electron); direction: ltr;
  padding: 8px 10px; background: rgba(74,184,255,0.06);
  border: 1px solid rgba(74,184,255,0.18);
  border-radius: 6px;
  margin: 4px 0 10px;
  letter-spacing: 0.02em;
}

/* ===== lesson: hint list ===== */
.hint-list{
  font-size: 12px; color: var(--txt-dim);
  line-height: 1.75; margin: 0; padding-inline-start: 18px;
}
.hint-list li{ margin: 3px 0; }
.hint-list b{ color: var(--accent); font-family: var(--font-mono); }

/* ===== index-only: override grid to single-column ===== */
.shell.index-mode{ grid-template-columns: 320px 1fr; }
/* hide sidebar fullscreen button when topbar one exists (index page) */
.shell.index-mode .sb-fs{ display:none; }