// Neurify — screens: Home · Atlas · SectionPage · Search · Fragen · Profile
const { useState: useS, useEffect: useE, useRef: useR } = React;

// ─────── shared helpers ───────
function greetingDe() { const h = new Date().getHours(); return h < 5 ? 'Gute Nacht' : h < 11 ? 'Guten Morgen' : h < 17 ? 'Guten Tag' : h < 22 ? 'Guten Abend' : 'Gute Nacht'; }
function dateLabelDe() {
  const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
  const mon = ['Jan', 'Feb', 'März', 'Apr', 'Mai', 'Juni', 'Juli', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];
  const d = new Date();
  return `${days[d.getDay()]} · ${d.getDate()}. ${mon[d.getMonth()]}`;
}
function allChapters() { const out = []; (window.CORTEX || []).forEach(s => s.chapters.forEach(c => out.push({ s, c }))); return out; }
function masteryCounts() {
  const m = window.cxReadMastery ? window.cxReadMastery() : {};
  let b = 0, t = 0, w = 0;
  Object.values(m).forEach(v => { if (v === 'beherrscht') b++; else if (v === 'teilweise') t++; else if (v === 'wiederholen') w++; });
  return { b, t, w, total: Object.keys(m).length };
}
function readiness() { const { b, t } = masteryCounts(); return Math.max(0, Math.min(99, Math.round(64 + b * 1.4 + t * 0.6))); }
function sectionProgress(s) {
  const pr = window.cxReadProgress ? window.cxReadProgress() : {};
  if (!s.chapters || !s.chapters.length) return 0;
  let sum = 0;
  s.chapters.forEach(c => { sum += Math.max(0, Math.min(1, pr[`${s.id}-${c.n}`] || 0)); });
  return Math.round((sum / s.chapters.length) * 100);
}
// Themen grouped into clinical domains (by section letter)
const THEMEN_GROUPS = [
  { label: 'Grundlagen & Akut', letters: ['A', 'B', 'O'] },
  { label: 'Vaskulär & Schmerz', letters: ['C', 'D'] },
  { label: 'Funktionelle Syndrome', letters: ['E', 'F', 'G', 'H'] },
  { label: 'Organische Erkrankungen', letters: ['I', 'J', 'K', 'L', 'M', 'N'] },
];
function streak() { return 12; }

// Daily clinical pearls — sourced from the authored Atlas chapters (rotates every 10 min).
// `find` matches text inside the source chapter so the reader can highlight it.
window.CORTEX_PEARLS = [
  { cat: 'Notfälle · Schlaganfall', sec: 'b', chap: 1, find: 'Hypoglykämie',
    text: 'Ein normaler Blutzucker schließt einen Schlaganfall nicht aus — aber die Hypoglykämie ist der wichtigste sofort behandelbare Mimic.' },
  { cat: 'Notfälle · Schlaganfall', sec: 'b', chap: 1, find: '185/110',
    text: 'Blutdruck > 185/110 mmHg vor einer Lyse kontrolliert senken — sonst steigt das Einblutungsrisiko deutlich.' },
  { cat: 'Notfälle · Schlaganfall', sec: 'b', chap: 1, find: 'Basilaristhrombose',
    text: 'Bei Basilaristhrombose (Hirnstammzeichen, Vigilanzminderung) großzügig an Thrombektomie denken — das Zeitfenster ist hier oft länger.' },
  { cat: 'Schlaganfall · Stroke Unit', sec: 'c', chap: 3, find: 'HINTS',
    text: 'Plötzlicher Schwindel mit HINTS-Zeichen (zentral) ist bis zum Beweis des Gegenteils ein Kleinhirn-/Hirnstamminfarkt.' },
  { cat: 'Schlaganfall · Stroke Unit', sec: 'c', chap: 3, find: 'Schlucktest',
    text: 'Frühe Dysphagie übersehen = Aspirationspneumonie. Schlucktest vor jeder oralen Medikation oder Nahrung.' },
  { cat: 'Kopfschmerz · Migräne', sec: 'd', chap: 3, find: 'Triptane sind bei',
    text: 'Triptane sind bei KHK, pAVK und unkontrollierter Hypertonie kontraindiziert (Vasokonstriktion).' },
  { cat: 'Kopfschmerz · Migräne', sec: 'd', chap: 3, find: 'Thunderclap',
    text: 'Thunderclap, neues Defizit, Fieber, Beginn > 50 J., Papillenödem → sekundäre Ursache ausschließen (SNNOOP).' },
  { cat: 'Notfälle · Status epilepticus', sec: 'e', chap: 10, find: 'unterdosiert',
    text: 'Benzodiazepine werden häufig unterdosiert — die häufigste vermeidbare Ursache eines refraktären Status.' },
  { cat: 'Notfälle · Status epilepticus', sec: 'e', chap: 10, find: 'nonkonvulsiven Status',
    text: 'Bei Bewusstlosigkeit ohne motorische Zeichen an einen nonkonvulsiven Status denken — EEG anfordern.' },
];
function focusPick() {
  const m = window.cxReadMastery ? window.cxReadMastery() : {};
  const all = allChapters();
  const wiederholen = all.find(({ s, c }) => m[`${s.id}-${c.n}`] === 'wiederholen');
  if (wiederholen) return wiederholen;
  const last = localStorage.getItem('cx_lastread');
  if (last) { const [id, n] = last.split('-'); const s = window.cxGetSection(id); const c = s && s.chapters.find(x => x.n === +n); const idx = s ? s.chapters.indexOf(c) : -1; if (s && s.chapters[idx + 1]) return { s, c: s.chapters[idx + 1] }; }
  const authored = ['b-1', 'c-3', 'd-3', 'e-10'].map(k => { const [id, n] = k.split('-'); return { s: window.cxGetSection(id), c: window.cxGetChapter(id, +n) }; }).find(x => x.s && x.c);
  return authored || { s: window.CORTEX[0], c: window.CORTEX[0].chapters[0] };
}
function lastReadCard() {
  const last = localStorage.getItem('cx_lastread');
  if (last) { const [id, n] = last.split('-'); const s = window.cxGetSection(id); const c = s && s.chapters.find(x => x.n === +n); if (s && c) return { s, c }; }
  const s = window.cxGetSection('b'); return { s, c: s.chapters[0] };
}

// ─────── Gradient ring dial (signature soft-UI element) ───────
let _ringSeq = 0;
function RingDial({ value, label, size = 128, stroke = 13 }) {
  const idRef = useR(null);
  if (!idRef.current) idRef.current = 'rg' + (++_ringSeq);
  const id = idRef.current;
  const rad = (size - stroke) / 2;
  const C = 2 * Math.PI * rad;
  const pct = Math.max(0, Math.min(1, value / 100));
  const c = size / 2;
  return (
    <div className="ring-dial" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <defs>
          <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="var(--grad-a)" />
            <stop offset="0.5" stopColor="var(--grad-b)" />
            <stop offset="1" stopColor="var(--grad-c)" />
          </linearGradient>
        </defs>
        <circle cx={c} cy={c} r={rad} fill="none" stroke="var(--ring-track)" strokeWidth={stroke} />
        <circle cx={c} cy={c} r={rad} fill="none" stroke={`url(#${id})`} strokeWidth={stroke} strokeLinecap="round"
          strokeDasharray={C} strokeDashoffset={C * (1 - pct)} transform={`rotate(-90 ${c} ${c})`} />
      </svg>
      <div className="ring-center"><div className="rv">{value}<small>%</small></div><div className="rl">{label}</div></div>
    </div>
  );
}

// ─────── Toast ───────
function ToastHost() {
  const [t, setT] = useS(null); const ref = useR(null);
  useE(() => {
    const h = (e) => { setT({ ...(e.detail || {}), k: Date.now() }); clearTimeout(ref.current); ref.current = setTimeout(() => setT(null), 2400); };
    window.addEventListener('cx-toast', h); return () => { window.removeEventListener('cx-toast', h); clearTimeout(ref.current); };
  }, []);
  if (!t) return null;
  return <div className="toast" key={t.k}><Ic n="check_circle" size={17} />{t.msg}{t.delta && <span className="tdelta">{t.delta}</span>}</div>;
}

// ═══════════ HOME ═══════════
function Home({ onOpenChapter, onOpenSection, onTab, onSearch, onProfile, onOpenTools }) {
  const [, force] = useS(0);
  const [pearlBump, setPearlBump] = useS(0);
  useE(() => { const h = () => force(x => x + 1); ['cx-mastery', 'cx-progress'].forEach(ev => window.addEventListener(ev, h)); return () => ['cx-mastery', 'cx-progress'].forEach(ev => window.removeEventListener(ev, h)); }, []);
  useE(() => { const id = setInterval(() => force(x => x + 1), 60000); return () => clearInterval(id); }, []);
  const r = readiness(); const focus = focusPick(); const last = lastReadCard();
  const { b, w } = masteryCounts();
  const lp = window.cxReadProgress ? (window.cxReadProgress()[`${last.s.id}-${last.c.n}`] || 0.2) : 0.2;
  const fmin = focus.c.minutes || 12;
  const offen = w || 3;
  const nextSub = (last.c.subs && last.c.subs[1] && last.c.subs[1].title) || (last.c.subs && last.c.subs[0] && last.c.subs[0].title) || 'Red Flags';
  const caseToast = () => window.dispatchEvent(new CustomEvent('cx-toast', { detail: { msg: 'Klinische Fälle — bald verfügbar' } }));
  return (
    <div className="screen anim-in">
      <div className="scroll pb-nav">
        <div className="hm-top">
          <div className="hm-brand"><span className="spark"><BrainGlyph size={19} /></span> Neurify</div>
          <button className="hm-av" onClick={onProfile}>MS</button>
        </div>
        <div className="hm-greet"><div className="d">{dateLabelDe()}</div><h1>{greetingDe()}, <em>Dr. S.</em></h1><div className="hm-sub2">Bereit für {fmin} Minuten Neurologie?</div></div>

        <button className="focus-card" onClick={() => onOpenChapter(focus.s.id, focus.c.n)}>
          <div className="fk"><span className="spark"><Ic n="auto_awesome" size={11} /></span> Dein Fokus heute</div>
          <h2>{focus.c.title}</h2>
          <p>{focus.s.title} · {focus.s.sub}. Schließe heute die größte Lücke mit diesem Kapitel.</p>
          <div className="focus-chips"><span className="focus-chip">Notfall</span><span className="focus-chip">Prüfungsrelevant</span><span className="focus-chip">{fmin} min</span></div>
          <span className="focus-cta"><Ic n="play_arrow" size={18} /> {fmin} Min. · Kapitel starten</span>
        </button>

        <div className="ov-card">
          <RingDial value={r} label="Prüfungsreife" size={130} />
          <div className="ov-side">
            <button className="ov-metric" onClick={() => onTab('fragen')}><div className="ovk">Diese Woche</div><div className="ovv">+5<small>%</small></div></button>
            <button className="ov-metric" onClick={onProfile}><div className="ovk">Schwache Themen</div><div className="ovv">{offen}<small>offen</small></div></button>
          </div>
        </div>
        <div className="ov-cap">Prüfungsreife — basierend auf Kapiteln, Fragen und Fällen.</div>

        <button className={`cont-card c-${last.s.color}`} onClick={() => onOpenChapter(last.s.id, last.c.n)}>
          <span className="cont-ic"><Ic n="menu_book" size={22} /></span>
          <div className="cont-t">
            <div className="cont-k">Weiterlernen · {last.s.title}</div>
            <div className="cont-h">{last.c.title}</div>
            <div className="cont-bar"><i style={{ width: `${Math.round(lp * 100)}%` }} /></div>
            <div className="cont-m">{Math.round(lp * 100)}% gelesen · nächster Abschnitt: {nextSub}</div>
          </div>
          <Ic n="chevron_right" size={22} style={{ color: 'var(--grey-400)' }} />
        </button>

        <div className="sec-head"><b>Schnellzugriff</b></div>
        <div className="qa-row">
          <button className="qa" onClick={() => onTab('atlas')}><span className="qic" style={{ background: 'var(--g-blue-tint)', color: 'var(--g-blue-deep)' }}><Ic n="menu_book" size={22} /></span><span className="ql">Atlas</span></button>
          <button className="qa" onClick={() => onTab('fragen')}><span className="qic" style={{ background: 'var(--g-red-tint)', color: 'var(--g-red-deep)' }}><Ic n="school" size={22} /></span><span className="ql">Fragen</span></button>
          <button className="qa" onClick={onSearch}><span className="qic" style={{ background: 'var(--g-green-tint)', color: 'var(--g-green-deep)' }}><Ic n="search" size={22} /></span><span className="ql">Suche</span></button>
        </div>

        <div className="sec-head"><b>Heute empfohlen</b><span className="plan-tot">Dein Plan · ~25 Min</span></div>
        <div className="plan-list">
          <button className="plan-row" onClick={() => onOpenChapter(focus.s.id, focus.c.n)}>
            <span className="plan-ic" style={{ background: 'var(--g-blue-tint)', color: 'var(--g-blue-deep)' }}><Ic n="menu_book" size={20} /></span>
            <span className="plan-main"><span className="plan-k">1 Kapitel · {fmin} min</span><span className="plan-t">{focus.c.title}</span></span>
            <Ic n="chevron_right" size={20} style={{ color: 'var(--grey-300)' }} />
          </button>
          <button className="plan-row" onClick={() => onTab('fragen')}>
            <span className="plan-ic" style={{ background: 'var(--g-red-tint)', color: 'var(--g-red-deep)' }}><Ic n="school" size={20} /></span>
            <span className="plan-main"><span className="plan-k">3 Fragen · 5 min</span><span className="plan-t">Sekundäre Kopfschmerzen</span></span>
            <Ic n="chevron_right" size={20} style={{ color: 'var(--grey-300)' }} />
          </button>
          <button className="plan-row" onClick={caseToast}>
            <span className="plan-ic" style={{ background: 'var(--g-green-tint)', color: 'var(--g-green-deep)' }}><Ic n="monitor_heart" size={20} /></span>
            <span className="plan-main"><span className="plan-k">1 Fall · 8 min</span><span className="plan-t">SAB vs. Migräne</span></span>
            <Ic n="chevron_right" size={20} style={{ color: 'var(--grey-300)' }} />
          </button>
        </div>

        <div className="sec-head"><b>Fall des Tages</b></div>
        <button className="case-card" onClick={caseToast}>
          <span className="case-badge">Bald</span>
          <span className="case-k">Klinischer Fall · Schlaganfall</span>
          <span className="case-h" style={{ color: '#fff' }}>Akute Hemiparese + Blickdeviation</span>
          <span className="case-p">Trainiere Lokalisation, NIHSS, Bildgebung und die Entscheidung für Lyse oder Thrombektomie.</span>
          <span className="case-cta"><Ic n="play_arrow" size={17} /> Fall starten</span>
        </button>

        <div className="pearl-head"><span className="pl-ic"><Ic n="lightbulb" size={24} /></span><b>Daily Pearl</b></div>
        {(() => {
          const slot = Math.floor(Date.now() / 6e5); // new pearl every 10 min
          const p = window.CORTEX_PEARLS[(slot + pearlBump) % window.CORTEX_PEARLS.length];
          const d = new Date(slot * 6e5);
          const hh = String(d.getHours()).padStart(2, '0');
          const mm = String(d.getMinutes()).padStart(2, '0');
          return (
            <div className="pearl-card">
              <button className="pearl-refresh" onClick={() => setPearlBump(b => b + 1)} aria-label="Neue Pearl"><Ic n="refresh" size={18} /></button>
              <div className="pearl-cat">{p.cat}</div>
              <p className="pearl-quote">„{p.text}"</p>
              <div className="pearl-foot">
                <span className="pf-time"><Ic n="history" size={15} className="ic" /> {hh}:{mm} aktualisiert</span>
                <button className="pearl-src" onClick={() => onOpenChapter(p.sec, p.chap, p.find)}>Im Atlas <Ic n="open_in_new" size={14} /></button>
              </div>
            </div>
          );
        })()}
        <button className="calc-card" onClick={onOpenTools}>
          <span className="cc-mark">ƒx</span>
          <span className="cc-title" style={{ color: '#fff' }}>Neuro-Rechner</span>
          <span className="cc-sub">NIHSS · GCS · ABCD2 · mRS · Hunt &amp; Hess</span>
          <span className="cc-btn"><Ic n="grid_view" size={17} /> Score berechnen</span>
        </button>
        <div style={{ height: 16 }} />
      </div>
    </div>
  );
}

// ═══════════ ATLAS ═══════════
const SECTION_ICON = { a: 'person', b: 'bolt', c: 'science', d: 'psychology', e: 'flag', f: 'hearing', g: 'fitness', h: 'history', i: 'healing', j: 'monitor_heart', k: 'accessibility', l: 'vibration', m: 'layers', n: 'eye', o: 'category' };
// short clinical tag shown top-right of each Kapitel row
const KAP_CAT = { a: 'Klinisch', b: 'Akut', c: 'Vaskulär', d: 'Kephalgie', e: 'Epilepsie', f: 'Vestibulär', g: 'Motorik', h: 'Kognition', i: 'Immun', j: 'Muskel', k: 'Spinal', l: 'Infekt', m: 'Onko', n: 'Ophthalmo', o: 'Diagnostik' };
// multicolour gradient accent bars (cycled across the topic rows)
const KAP_BARS = [
  'linear-gradient(180deg,#f6a13d 0%,#e8557d 50%,#a24bd6 100%)',
  'linear-gradient(180deg,#f4445f 0%,#d6379a 55%,#9b3fd4 100%)',
  'linear-gradient(180deg,#f7912e 0%,#c2557e 55%,#7a52c6 100%)',
  'linear-gradient(180deg,#19b6a4 0%,#2f8fce 55%,#3f6fd4 100%)',
  'linear-gradient(180deg,#f6c33d 0%,#ef6f4a 100%)',
  'linear-gradient(180deg,#8a64d6 0%,#496fd4 100%)',
];
function Atlas({ layout, onOpenSection }) {
  const T = window.CORTEX_TOTALS || { sections: 15, chapters: 163, cards: 964 };
  const lr = lastReadCard();
  const activeId = lr && lr.s ? lr.s.id : null;
  if (layout === 'cards') {
    return (
      <div className="screen anim-in">
        <div className="scroll pb-nav">
          <div className="page-head"><div className="pk">Atlas</div><h1>Kapitel</h1><div className="psub">{T.sections} Themen · {T.chapters} Kapitel · {T.cards} Lernkarten</div></div>
          <div className="atlas-grid">
            {(window.CORTEX || []).map(s => (
              <button className={`atlas-card2 c-${s.color}`} key={s.id} onClick={() => onOpenSection(s.id)}>
                <span className="adot" />
                <div><div className="ah">{s.title}</div><div className="as">{s.chapterCount} Kapitel · {s.cardCount} Karten</div></div>
              </button>
            ))}
          </div>
          <div style={{ height: 16 }} />
        </div>
      </div>
    );
  }
  return (
    <div className="screen kapitel anim-in">
      <div className="scroll pb-nav">
        <div className="kap-wrap">
          <div className="kap-eyebrow">
            <span>Atlas · Neurologie</span>
            <span className="kap-ver">v2.4</span>
          </div>
          <h1 className="kap-title">Kapitel<span className="kap-dot">.</span></h1>
          <p className="kap-lead">Vom Symptom zur Differenzialdiagnose — strukturiert nach klinischem Vorgehen, nicht nach Lehrbuchkapitel.</p>

          <div className="kap-stats">
            <div className="kap-stat"><div className="ksv">{T.sections}</div><div className="ksl">Themen</div></div>
            <div className="kap-stat"><div className="ksv">{T.chapters}</div><div className="ksl">Kapitel</div></div>
            <div className="kap-stat"><div className="ksv">{T.cards}</div><div className="ksl">Lernkarten</div></div>
          </div>

          <div className="kap-sechead">
            <span className="kap-sl"><span className="kap-dash">——</span>Alle Themen</span>
            <button className="kap-sort">Sortieren</button>
          </div>

          <div className="kap-list">
            {(window.CORTEX || []).map((s, i) => (
              <button className="kap-row" key={s.id} onClick={() => onOpenSection(s.id)}>
                <span className="kap-bar" />
                <span className="kap-num"><i>{String(i + 1).padStart(2, '0')}</i></span>
                <span className="kap-mid">
                  <span className="kap-rt">{s.title}</span>
                  <span className="kap-rs">{s.sub}</span>
                </span>
                <span className="kap-meta">
                  <span className="kap-cat">{KAP_CAT[s.id] || ''}</span>
                  <span className="kap-kapline"><b>{s.chapterCount}</b> Kap. <Ic n="chevron_right" size={17} /></span>
                </span>
              </button>
            ))}
          </div>
        </div>
        <div style={{ height: 16 }} />
      </div>
    </div>
  );
}

// ═══════════ SECTION PAGE ═══════════
function SectionPage({ sectionId, onBack, onOpenChapter }) {
  const s = window.cxGetSection(sectionId);
  const mastery = window.cxReadMastery ? window.cxReadMastery() : {};
  if (!s) return null;
  return (
    <div className={`screen c-${s.color} anim-slide`}>
      <div className="scroll pb-nav">
        <div className="sec-hero">
          <button className="crumb" onClick={onBack}><Ic n="chevron_left" size={18} /> Atlas</button>
          <h1>{s.title}</h1>
          <div className="shsub">{s.sub}</div>
          <div className="shmeta">
            <span className="shtag">{s.chapterCount} Kapitel</span>
            <span className="shtag ghost">{s.cardCount} Lernkarten</span>
          </div>
        </div>
        <div className="chap-list">
          {s.chapters.map(c => {
            const authored = !!(window.CORTEX_CONTENT || {})[`${s.id}-${c.n}`];
            const mv = mastery[`${s.id}-${c.n}`];
            const sub = c.subs.slice(0, 3).map(x => x.title).join(' · ');
            return (
              <button className="chap-row" key={c.n} onClick={() => onOpenChapter(s.id, c.n)}>
                <span className="chap-num">{c.n}</span>
                <div className="chap-main">
                  <div className="chap-h">{c.title}</div>
                  <div className="chap-sub">{sub}</div>
                  <div className="chap-meta">
                    <span>{c.subs.length} Karten</span><span className="dot" />
                    <span>{authored ? 'Volltext' : 'Struktur'}</span>
                    {mv && <><span className="dot" /><span style={{ color: mv === 'beherrscht' ? 'var(--g-green-deep)' : mv === 'teilweise' ? 'var(--g-yellow-deep)' : 'var(--g-red-deep)' }}>{mv === 'beherrscht' ? 'Beherrscht' : mv === 'teilweise' ? 'Teilweise' : 'Wiederholen'}</span></>}
                  </div>
                </div>
                <span className="achev"><Ic n="chevron_right" size={22} /></span>
              </button>
            );
          })}
        </div>
        <div style={{ height: 16 }} />
      </div>
    </div>
  );
}

// ═══════════ SEARCH ═══════════
function Search({ onClose, onOpenChapter, onOpenSection }) {
  const [q, setQ] = useS('');
  const inputRef = useR(null);
  useE(() => { const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 120); return () => clearTimeout(t); }, []);
  const query = q.trim().toLowerCase();
  let results = [];
  if (query.length >= 2) {
    const norm = (x) => x.toLowerCase();
    (window.CORTEX || []).forEach(s => {
      if (norm(s.title).includes(query) || norm(s.sub).includes(query)) results.push({ type: 'section', s });
      s.chapters.forEach(c => {
        if (norm(c.title).includes(query)) results.push({ type: 'chapter', s, c });
        else if (c.subs.some(su => norm(su.title).includes(query))) results.push({ type: 'chapter', s, c, hit: c.subs.find(su => norm(su.title).includes(query)).title });
      });
    });
    results = results.slice(0, 40);
  }
  return (
    <div className="screen anim-in">
      <div className="search-top">
        <div className="search-field">
          <Ic n="search" size={21} style={{ color: 'var(--grey-500)' }} />
          <input ref={inputRef} value={q} onChange={e => setQ(e.target.value)} placeholder="Symptom, Kapitel, Diagnose…" />
          {q && <button onClick={() => setQ('')} style={{ border: 'none', background: 'none', cursor: 'pointer', color: 'var(--grey-500)' }}><Ic n="close" size={20} /></button>}
        </div>
        <button className="search-cancel" onClick={onClose}>Abbrechen</button>
      </div>
      <div className="scroll pb-nav">
        {query.length < 2 ? (
          <>
            <div className="search-lbl">Themen durchsuchen</div>
            <div className="chip-wrap">
              {(window.CORTEX || []).map(s => <button className="tagchip" key={s.id} onClick={() => onOpenSection(s.id)}>{s.title}</button>)}
            </div>
            <div className="search-lbl">Beliebt</div>
            <div className="chip-wrap">
              {['Schlaganfall', 'Status epilepticus', 'Migräne', 'HINTS', 'Anisokorie', 'Meningitis'].map(t => <button className="tagchip" key={t} onClick={() => setQ(t)}>{t}</button>)}
            </div>
          </>
        ) : (
          <>
            <div className="search-lbl">{results.length} Treffer</div>
            <div className="sr-list">
              {results.map((r, i) => (
                <button className="sr-row" key={i} onClick={() => r.type === 'section' ? onOpenSection(r.s.id) : onOpenChapter(r.s.id, r.c.n)}>
                  <div className="sr-main">
                    <div className="sr-meta">
                      <span className="sr-badge" style={{ background: `var(--g-${r.s.color})` }}>{r.s.title}</span>
                      {r.type === 'chapter' && <><span>Kap. {r.c.n}</span></>}
                    </div>
                    <div className="sr-h">{r.type === 'section' ? r.s.title : r.c.title}</div>
                    <div className="sr-s">{r.type === 'section' ? r.s.sub : (r.hit || r.c.subs.slice(0, 2).map(x => x.title).join(' · '))}</div>
                  </div>
                  <Ic n="chevron_right" size={22} style={{ color: 'var(--grey-300)' }} />
                </button>
              ))}
              {results.length === 0 && <div style={{ textAlign: 'center', color: 'var(--grey-500)', padding: '40px 20px', fontSize: 14 }}>Keine Treffer für „{q}"</div>}
            </div>
          </>
        )}
        <div style={{ height: 16 }} />
      </div>
    </div>
  );
}

// ═══════════ FRAGEN (Kreuzen) ═══════════
// ─────── Spaced-repetition store (Anki-lite with learning steps, saved on-device) ───────
const CX_DAY = 86400000;
const LEARN_STEPS = [1, 10];   // minutes in the learning phase before graduating
const GRAD_DAYS = 1, EASY_DAYS = 4;
function srsRead() { try { return JSON.parse(localStorage.getItem('cx_srs') || '{}'); } catch { return {}; } }
function srsWrite(m) { localStorage.setItem('cx_srs', JSON.stringify(m)); window.dispatchEvent(new Event('cx-srs')); }
// Pure scheduler: returns { rec: next record, days: next interval in days } for a grade.
function srsSchedule(rec, grade) {
  const now = Date.now();
  rec = rec ? { ...rec } : { ease: 2.5, interval: 0, due: 0, reps: 0, lapses: 0, step: 0, learning: true };
  if (rec.learning == null) rec.learning = rec.reps === 0; // migrate older records
  let days;
  if (rec.learning) {
    if (grade === 'again') { rec.step = 0; days = LEARN_STEPS[0] / 1440; }
    else if (grade === 'hard') { days = 6 / 1440; }
    else if (grade === 'good') {
      const ns = (rec.step || 0) + 1;
      if (ns >= LEARN_STEPS.length) { rec.learning = false; rec.step = 0; rec.reps = Math.max(1, rec.reps); rec.interval = GRAD_DAYS; days = GRAD_DAYS; }
      else { rec.step = ns; days = LEARN_STEPS[ns] / 1440; }
    } else { rec.learning = false; rec.step = 0; rec.reps = Math.max(1, rec.reps); rec.interval = EASY_DAYS; days = EASY_DAYS; }
  } else {
    const e = rec.ease, iv = rec.interval || GRAD_DAYS;
    if (grade === 'again') { rec.lapses = (rec.lapses || 0) + 1; rec.ease = Math.max(1.3, e - 0.2); rec.learning = true; rec.step = 0; rec.interval = 0; days = LEARN_STEPS[0] / 1440; }
    else if (grade === 'hard') { rec.ease = Math.max(1.3, e - 0.15); rec.interval = iv * 1.2; rec.reps++; days = rec.interval; }
    else if (grade === 'good') { rec.interval = iv * e; rec.reps++; days = rec.interval; }
    else { rec.ease = e + 0.15; rec.interval = iv * e * 1.3; rec.reps++; days = rec.interval; }
  }
  rec.due = now + days * CX_DAY;
  rec.lastGrade = grade; rec.seen = now;
  return { rec, days };
}
function srsStats(cards) {
  const m = srsRead(), now = Date.now();
  let due = 0, learned = 0;
  cards.forEach(c => { const r = m[c.id]; if (!r) { due++; } else { if (r.due <= now) due++; if (!r.learning && r.reps >= 1 && r.interval >= 1) learned++; } });
  return { due, learned, total: cards.length };
}
function fmtInterval(d) {
  const mins = d * 1440;
  if (mins < 1) return '<1 Min';
  if (mins < 45) return Math.round(mins) + ' Min';
  if (mins < 1440) return Math.round(mins / 60) + ' Std';
  const days = mins / 1440;
  if (days < 30) return Math.round(days) + ' T';
  if (days < 365) return Math.round(days / 30) + ' Mon';
  return (days / 365).toFixed(1) + ' J';
}
const FC_THEME_ICON = {
  'Akut & Kritisch': 'bolt',
  'Vaskuläre Neurologie': 'favorite',
  'Kopf & Anfall': 'psychology',
  'Steuerung & Kognition': 'directions_walk',
  'Immun, Infekt & Peripherie': 'shield',
  'Struktur & Signal': 'insights',
};
function fcCategoryOrder(ALL) {
  const order = []; const seen = {};
  ALL.forEach(c => { if (!seen[c.category]) { seen[c.category] = 1; order.push(c.category); } });
  return order;
}

// ═══════════ FRAGEN — theme picker → flashcard study ═══════════
function Fragen({ onOpenChapter }) {
  const [theme, setTheme] = useS(null); // null = picker; else category string or '__all'
  if (theme == null) return <FragenThemes onPick={setTheme} />;
  return <FragenStudy category={theme} onBack={() => setTheme(null)} onOpenChapter={onOpenChapter} />;
}

// ─────── Theme picker: icon tiles, one per category ───────
function FragenThemes({ onPick }) {
  const ALL = window.CORTEX_FLASHCARDS || [];
  useE(() => { const h = () => onPick && null; window.addEventListener('cx-srs', h); return () => window.removeEventListener('cx-srs', h); }, []);
  if (!ALL.length) {
    return <div className="screen anim-in"><div className="scroll pb-nav">
      <div className="page-head"><div className="pk">Fragen</div><h1>Karteikarten</h1></div>
      <div style={{ padding: '20px 18px', color: 'var(--grey-500)' }}>Kein Kartenstapel geladen.</div>
    </div></div>;
  }
  const order = fcCategoryOrder(ALL);
  const allStats = srsStats(ALL);
  const tile = (key, name, icon, cards) => {
    const s = srsStats(cards);
    return (
      <button key={key} className={`th-tile ${key === '__all' ? 'th-all' : ''}`} onClick={() => onPick(key)}>
        <span className="th-ic"><Ic n={icon} size={22} /></span>
        <span className="th-body">
          <span className="th-name">{name}</span>
          <span className="th-sub">{s.due} fällig · {s.total} Karten</span>
          <span className="th-bar"><i style={{ width: (s.total ? Math.round(s.learned / s.total * 100) : 0) + '%' }} /></span>
        </span>
      </button>
    );
  };
  return (
    <div className="screen anim-in"><div className="scroll pb-nav">
      <div className="page-head"><div className="pk">Fragen · Karteikarten</div><h1>Thema wählen</h1></div>
      <div className="th-grid">
        {tile('__all', 'Alle Themen', 'auto_awesome', ALL)}
        {order.map(cat => tile(cat, cat, FC_THEME_ICON[cat] || 'school', ALL.filter(c => c.category === cat)))}
      </div>
      <div style={{ padding: '4px 20px 0', fontSize: 12.5, color: 'var(--grey-500)' }}>
        {allStats.learned} von {ALL.length} Karten gelernt · Fortschritt wird auf diesem Gerät gespeichert.
      </div>
    </div></div>
  );
}

// ─────── Study session: flip cards + prev/next + Anki-style grading ───────
function FragenStudy({ category, onBack, onOpenChapter }) {
  const ALL = window.CORTEX_FLASHCARDS || [];
  const deck = category === '__all' ? ALL : ALL.filter(c => c.category === category);
  // build a session queue once: earliest-due (and new) cards first
  const q = useR(null);
  if (!q.current) {
    const m = srsRead();
    const rows = deck.map(c => ({ c, due: m[c.id] ? m[c.id].due : 0 }));
    rows.sort((a, b) => a.due - b.due);
    q.current = { queue: rows.map(r => r.c) };
  }
  const [pos, setPos] = useS(0);
  const [flipped, setFlipped] = useS(false);
  const [sess, setSess] = useS({ again: 0, hard: 0, good: 0, easy: 0 });
  const [, force] = useS(0);

  const queue = q.current.queue;
  const total = queue.length;
  const title = category === '__all' ? 'Alle Themen' : category;
  const done = pos >= total;

  const grade = (g) => {
    const card = queue[pos]; if (!card) return;
    const m = srsRead(); m[card.id] = srsSchedule(m[card.id], g).rec; srsWrite(m);
    setSess(s => ({ ...s, [g]: s[g] + 1 }));
    setFlipped(false);
    if (g === 'again') {
      const nq = queue.slice(); const [cur] = nq.splice(pos, 1);
      nq.splice(Math.min(nq.length, pos + 3), 0, cur);
      q.current.queue = nq; force(x => x + 1); // stay at pos → next card slides in
    } else {
      setPos(p => p + 1);
    }
  };
  const go = (d) => { setFlipped(false); setPos(p => Math.max(0, Math.min(total, p + d))); };
  const restart = () => { q.current = null; setPos(0); setFlipped(false); setSess({ again: 0, hard: 0, good: 0, easy: 0 }); };

  const Head = (
    <div className="page-head">
      <button className="crumb" onClick={onBack}><Ic n="chevron_left" size={18} /> Themen</button>
      <h1>{title}</h1>
    </div>
  );

  if (done) {
    const reviewed = sess.again + sess.hard + sess.good + sess.easy;
    return (
      <div className="screen anim-in"><div className="scroll pb-nav">
        {Head}
        <div style={{ padding: '16px 18px' }}>
          <div style={{ background: 'var(--surface)', borderRadius: 24, boxShadow: 'var(--shadow-1)', padding: 28, textAlign: 'center' }}>
            <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'var(--grad)', display: 'grid', placeItems: 'center', margin: '0 auto 14px', color: '#fff' }}><Ic n="check" size={30} /></div>
            <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--grey-900)' }}>Runde fertig</div>
            <div style={{ fontSize: 14, color: 'var(--grey-600)', marginTop: 6 }}>{sess.good + sess.easy} gewusst · {sess.again} zum Wiederholen · {reviewed} Karten bewertet.</div>
          </div>
          <button className="quiz-cta" style={{ marginTop: 18 }} onClick={restart}>Neue Runde</button>
          <button className="quiz-cta ghost" style={{ marginTop: 10 }} onClick={onBack}>Zu den Themen</button>
        </div>
      </div></div>
    );
  }

  const card = queue[pos];
  if (!card) return <div className="screen anim-in"><div className="scroll pb-nav">{Head}</div></div>;

  // optional deep-link to source chapter, parsed from ids like "C03-1" / "A1-1"
  let link = null;
  const mm = /^([A-Za-z])0*(\d+)-/.exec(card.id || '');
  if (mm) {
    const sid = mm[1].toLowerCase(); const n = parseInt(mm[2], 10);
    const sec = (window.CORTEX || []).find(s => s.id === sid);
    if (sec && sec.chapters.some(ch => ch.n === n)) link = [sid, n];
  }
  const srs = srsRead()[card.id];
  const GRADES = [['again', 'Nochmal'], ['hard', 'Schwer'], ['good', 'Gut'], ['easy', 'Einfach']];

  return (
    <div className="screen anim-in"><div className="scroll pb-nav">
      {Head}
      <div className="fc-wrap">
        <div className="fc-sess">
          <span><b style={{ color: 'var(--g-green-deep)' }}>{sess.good + sess.easy}</b> gewusst</span>
          <span><b style={{ color: 'var(--g-red-deep)' }}>{sess.again}</b> nochmal</span>
          <span style={{ marginLeft: 'auto' }}>{pos + 1} / {total}</span>
        </div>

        <div className={`fc-card ${flipped ? 'flipped' : ''}`} onClick={() => setFlipped(f => !f)}>
          <div className="fc-meta">{card.section} · {card.chapter}</div>
          <div className="fc-side" key={flipped ? 'a' : 'q'}>
            <div className="fc-role">{flipped ? 'Antwort' : 'Frage'}</div>
            <div className="fc-text">{flipped ? card.answer : card.question}</div>
          </div>
          <div className="fc-hint"><Ic n="touch_app" size={15} /> {flipped ? 'Bewerte unten' : 'Tippen zum Umdrehen'}</div>
        </div>

        <div className="fc-ctrl">
          <button className="fc-btn" onClick={() => go(-1)} disabled={pos === 0} aria-label="Zurück"><Ic n="chevron_left" size={22} /></button>
          <span className="fc-count">{pos + 1} / {total}</span>
          <button className="fc-btn" onClick={() => go(1)} aria-label="Überspringen"><Ic n="chevron_right" size={22} /></button>
        </div>

        {flipped ? (
          <div className="fc-grades">
            {GRADES.map(([g, l]) => (
              <div className="fc-gcol" key={g}>
                <span className="fg-i">{fmtInterval(srsSchedule(srs, g).days)}</span>
                <button className={`fc-grade g-${g}`} onClick={() => grade(g)}>{l}</button>
              </div>
            ))}
          </div>
        ) : (
          <button className="quiz-cta" style={{ marginTop: 14 }} onClick={() => setFlipped(true)}>Antwort zeigen</button>
        )}

        {flipped && link && (
          <button className="quiz-cta ghost" style={{ marginTop: 10 }} onClick={(e) => { e.stopPropagation(); onOpenChapter(link[0], link[1]); }}>Zum Kapitel →</button>
        )}
      </div>
    </div></div>
  );
}

// ═══════════ PROFILE ═══════════
function Profile({ onToggleTweaks, theme, setTheme, grad, setGrad, onOpenHighlights }) {
  const r = readiness(); const { b } = masteryCounts(); const T = window.CORTEX_TOTALS || { chapters: 163 };
  const pct = Math.round((b / T.chapters) * 100);
  const cur = grad || 'aurora';
  return (
    <div className="screen anim-in"><div className="scroll pb-nav">
      <div className="page-head"><div className="pk">Profil</div><h1>Du</h1></div>
      <div className="pf-head">
        <div className="pf-av">MS</div>
        <div><div className="pf-name">Dr. Medriana S.</div><div className="pf-role">Fachärztin für Neurologie</div></div>
      </div>
      <div className="ring-card">
        <RingDial value={r} label="Bereitschaft" size={104} stroke={11} />
        <div className="rc-side">
          <div className="rc-h">Deine Bereitschaft</div>
          <div className="rc-p">{b} Kapitel gemeistert · {streak()} Tage Streak. Schließe heute die nächste Lücke.</div>
        </div>
      </div>
      <div className="grad-picker">
        <div className="gh">Farbverlauf</div>
        <div className="grad-row">
          {[['sundown', 'Sundown'], ['reef', 'Reef'], ['sage', 'Sage'], ['ember', 'Ember']].map(([v, l]) => (
            <button key={v} className={`grad-pick ${cur === v ? 'on' : ''}`} onClick={() => setGrad && setGrad(v)} aria-label={l}>
              <span className={`grad-swatch gs-${v}`} />
              <span className="gl">{l}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="pf-stats">
        <div className="pf-stat"><div className="v accent">{r}%</div><div className="l">Bereitschaft</div></div>
        <div className="pf-stat"><div className="v">{streak()}</div><div className="l">Tage Streak</div></div>
        <div className="pf-stat"><div className="v">{b}</div><div className="l">Gemeistert</div></div>
      </div>
      <div className="pf-prog-card">
        <div className="ph"><div className="pt">Dein Lernfortschritt</div><div className="pf-frac">{b} / {T.chapters}</div></div>
        <div className="pf-track"><i style={{ width: `${Math.max(3, pct)}%` }} /></div>
        <div style={{ fontSize: 13, color: 'var(--grey-600)' }}>{pct}% des Atlas als „beherrscht" markiert.</div>
      </div>
      <div className="pf-list">
        <div className="pf-row" onClick={() => setTheme && setTheme(theme === 'dark' ? 'light' : 'dark')}>
          <span className="pic" style={{ background: 'color-mix(in srgb, var(--g-blue) 18%, var(--surface))', color: 'var(--g-blue-deep)' }}><Ic n="dark_mode" size={20} /></span>
          <div className="ptext"><div className="ptitle">Dunkelmodus</div><div className="psub">{theme === 'dark' ? 'An' : 'Aus'}</div></div>
          <span className={`switch ${theme === 'dark' ? 'on' : ''}`}><span className="knob" /></span>
        </div>
        <div className="pf-row" onClick={onOpenHighlights}>
          <span className="pic" style={{ background: 'color-mix(in srgb, var(--accent) 18%, var(--surface))', color: 'var(--accent-deep)' }}><Ic n="bookmark" size={20} /></span>
          <div className="ptext"><div className="ptitle">Meine Markierungen</div><div className="psub">{(() => { const a = window.cxReadHighlights ? window.cxReadHighlights() : {}; const n = Object.values(a).reduce((s, v) => s + v.length, 0); return n ? `${n} Markierung${n === 1 ? '' : 'en'}` : 'Text in Artikeln hervorheben'; })()}</div></div>
          <span className="pchev"><Ic n="chevron_right" size={20} /></span>
        </div>
        {[['flag', 'var(--g-red)', 'Zum Wiederholen', `${masteryCounts().w} Kapitel markiert`],
          ['history', 'var(--g-blue)', 'Verlauf', 'Zuletzt gelesen'],
          ['notifications', 'var(--g-yellow-deep)', 'Erinnerungen', 'Täglich 19:00'],
          ['tune', 'var(--g-green)', 'Darstellung & Tweaks', 'Akzent, Layout, Lesedichte']].map(([ic, col, t, sub], i) => (
          <div className="pf-row" key={i} onClick={ic === 'tune' ? onToggleTweaks : undefined}>
            <span className="pic" style={{ background: 'color-mix(in srgb,' + col + ' 18%, var(--surface))', color: col }}><Ic n={ic} size={20} /></span>
            <div className="ptext"><div className="ptitle">{t}</div><div className="psub">{sub}</div></div>
            <span className="pchev"><Ic n="chevron_right" size={20} /></span>
          </div>
        ))}
      </div>
      <div style={{ textAlign: 'center', color: 'var(--grey-400)', fontSize: 12, padding: '22px 0 10px' }}>Neurify · Neurologie-Atlas · v1.0</div>
    </div></div>
  );
}

// ═══════════ TOOLS (Diagnose-Rechner) ═══════════
const TOOL_PILLS = { akut: ['Akut', 'accent'], ms: ['MS', 'accent'], park: ['Bewegung', 'grey'], dem: ['Kognition', 'grey'], kopf: ['Kopfschmerz', 'accent'], epi: ['Epilepsie', 'red'], nm: ['Neuromuskulär', 'grey'], schw: ['Schwindel', 'accent'], schmerz: ['Schmerz', 'grey'] };
const FAV_KEY = 'cx_calc_favs';
const DEFAULT_FAVS = ['nihss', 'gcs'];
function loadFavs() { try { const r = JSON.parse(localStorage.getItem(FAV_KEY)); return Array.isArray(r) ? r : DEFAULT_FAVS; } catch (e) { return DEFAULT_FAVS; } }

function Tools({ onBack }) {
  const [active, setActive] = useS(null);
  const [query, setQuery] = useS('');
  const [menu, setMenu] = useS(false);
  const [favs, setFavs] = useS(loadFavs);
  const scRef = useR(null);
  const catRefs = useR({});
  const CATS = window.CORTEX_CALC_CATS || [];
  const CALCS = window.CORTEX_CALCS || {};
  const open = (id) => setActive(id);

  const isFav = (id) => favs.includes(id);
  const toggleFav = (id) => {
    setFavs(prev => {
      const next = prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id];
      try { localStorage.setItem(FAV_KEY, JSON.stringify(next)); } catch (e) {}
      window.dispatchEvent(new CustomEvent('cx-toast', { detail: { msg: prev.includes(id) ? 'Favorit entfernt' : 'Zu Favoriten hinzugefügt' } }));
      return next;
    });
  };

  const q = query.trim().toLowerCase();
  const match = (id) => { const c = CALCS[id]; return !q || (c.name + ' ' + c.sub).toLowerCase().includes(q); };

  const jumpTo = (cid) => {
    setMenu(false);
    const el = catRefs.current[cid], sc = scRef.current;
    if (el && sc) sc.scrollTo({ top: el.offsetTop - 12, behavior: 'smooth' });
  };

  const Card = ({ id }) => {
    const c = CALCS[id]; if (!c) return null;
    const cat = CATS.find(k => k.ids.includes(id));
    const [plabel, pc] = TOOL_PILLS[cat ? cat.id : 'akut'] || ['', 'grey'];
    const fav = isFav(id);
    return (
      <div className="tool-card" key={id}>
        <div className="tc-titlerow">
          <span className="tc-ic sm"><Ic n={cat ? cat.ic : 'bolt'} size={18} /></span>
          <span className="tc-title2">{c.name}</span>
          <span className={`tc-pill ${pc}`}>{plabel}</span>
        </div>
        <p className="tc-desc">{c.sub}{c.train ? ' · geschulte Anwendung' : ''}.</p>
        <div className="tc-foot2">
          <button className={`tc-star2${fav ? ' on' : ''}`} aria-label={fav ? 'Favorit entfernen' : 'Zu Favoriten'} onClick={() => toggleFav(id)}><Ic n={fav ? 'star' : 'star_border'} size={20} /></button>
          <button className="tc-calc ghost" onClick={() => open(id)}>Berechnen</button>
        </div>
      </div>
    );
  };

  const total = Object.keys(CALCS).length;
  const favList = favs.filter(id => CALCS[id]);

  return (
    <div className="screen anim-slide">
      <div className="scroll pb-nav" ref={scRef}>
        <div className="tools-head">
          <button className="crumb" onClick={onBack}><Ic n="chevron_left" size={18} /> Start</button>
          <h1>Diagnose-Rechner</h1>
          <p className="th-sub">{total} validierte Scores und Skalen — von Akutneurologie bis Neuropathie, mit kopierbarer Dokumentation.</p>
        </div>

        <div className="tool-search"><Ic n="search" size={20} /><input value={query} onChange={e => setQuery(e.target.value)} placeholder="Rechner suchen (z. B. NIHSS)…" />{q && <button className="ts-clear" onClick={() => setQuery('')}><Ic n="close" size={18} /></button>}</div>

        {!q && (
          <>
            <div className="sec-head"><b>Favoriten</b><span className="ch-n">{favList.length}</span></div>
            {favList.length === 0
              ? <div className="fav-empty"><Ic n="star_border" size={22} /><span>Noch keine Favoriten. Tippe auf den Stern eines Rechners, um ihn hier oben anzuheften.</span></div>
              : (
                <div className="fav-list">
                  {favList.map(id => {
                    const c = CALCS[id]; const cat = CATS.find(k => k.ids.includes(id));
                    return (
                      <div className="tool-card" key={id}>
                        <div className="tc-top">
                          <span className="tc-ic"><Ic n={cat ? cat.ic : 'bolt'} size={22} /></span>
                          <span className="tc-name">{c.name}</span>
                          <button className="tc-star on" aria-label="Favorit entfernen" onClick={() => toggleFav(id)}><Ic n="star" size={20} /></button>
                        </div>
                        <p className="tc-desc">{c.sub}.</p>
                        <div className="tc-foot">
                          <span className="tc-flag accent">{cat ? cat.label.split(' ')[0] : 'Tool'}</span>
                          <button className="tc-calc" onClick={() => open(id)}>Berechnen</button>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
          </>
        )}

        {CATS.map(cat => {
          const ids = cat.ids.filter(match);
          if (!ids.length) return null;
          return (
            <div className="tool-cat" key={cat.id} ref={el => { catRefs.current[cat.id] = el; }}>
              <div className="sec-head cat"><span className="ch-ic"><Ic n={cat.ic} size={17} /></span><b>{cat.label}</b><span className="ch-n">{cat.ids.length}</span></div>
              <div className="all-list">{ids.map(id => <Card key={id} id={id} />)}</div>
            </div>
          );
        })}

        {q && !CATS.some(c => c.ids.some(match)) && <div className="tool-empty">Kein Rechner gefunden für „{query}".</div>}

        <div className="tool-guide">
          <div className="tg-k">Hinweis</div>
          <div className="tg-t">Alle Tools sind Entscheidungshilfen und ersetzen keine ärztliche Beurteilung oder lokale SOP.</div>
        </div>
        <div style={{ height: 90 }} />
      </div>

      {/* floating category menu */}
      {!active && (
        <div className={`fab-wrap${menu ? ' open' : ''}`}>
          {menu && (
            <div className="fab-menu">
              {CATS.map(cat => (
                <button className="fab-item" key={cat.id} onClick={() => jumpTo(cat.id)}>
                  <span className="fab-item-ic"><Ic n={cat.ic} size={17} /></span>
                  <span className="fab-item-l">{cat.label}</span>
                </button>
              ))}
            </div>
          )}
          <button className="fab" onClick={() => setMenu(m => !m)} aria-label="Kategorien">
            <Ic n={menu ? 'close' : 'category'} size={24} />
          </button>
        </div>
      )}
      {menu && <div className="fab-scrim" onClick={() => setMenu(false)} />}

      {active && window.CalcModal && React.createElement(window.CalcModal, { calc: window.CORTEX_CALCS[active], fav: isFav(active), onToggleFav: () => toggleFav(active), onClose: () => setActive(null) })}
    </div>
  );
}

// ═══════════ MEINE MARKIERUNGEN (Highlights) ═══════════
const HL_DOT = { yellow: '#f5c518', green: '#34a853', blue: '#1a73e8', pink: '#e8559b' };
function Highlights({ onBack, onOpenChapter }) {
  const [, force] = useS(0);
  const [openKey, setOpenKey] = useS(null);
  useE(() => { const h = () => force(x => x + 1); window.addEventListener('cx-highlights', h); return () => window.removeEventListener('cx-highlights', h); }, []);
  const all = window.cxReadHighlights ? window.cxReadHighlights() : {};
  const groups = Object.keys(all).map(key => {
    const [sid, n] = key.split('-');
    const sec = window.cxGetSection(sid); const chap = window.cxGetChapter(sid, parseInt(n, 10));
    if (!sec || !chap) return null;
    return { key, sid, n: parseInt(n, 10), sec, chap, items: all[key] };
  }).filter(Boolean).sort((a, b) => a.sec.title.localeCompare(b.sec.title) || a.n - b.n);
  const totalCount = groups.reduce((s, g) => s + g.items.length, 0);
  const current = openKey && groups.find(g => g.key === openKey);

  // ─── detail view: one chapter's highlights ───
  if (current) {
    return (
      <div className="screen anim-slide">
        <div className="scroll pb-nav">
          <div className="tools-head">
            <button className="crumb" onClick={() => setOpenKey(null)}><Ic n="chevron_left" size={18} /> Markierungen</button>
            <span className="hlc-k" style={{ marginTop: 4 }}>{current.sec.title} · Kap. {current.n}</span>
            <h1>{current.chap.title}</h1>
            <p className="th-sub">{current.items.length} Markierung{current.items.length === 1 ? '' : 'en'} in diesem Kapitel.</p>
          </div>
          <div className="hlg" style={{ marginTop: 4 }}>
            <div className="hlg-list">
              {current.items.map(it => (
                <button className="hlg-item" key={it.id} onClick={() => onOpenChapter(current.sid, current.n, it.text)}>
                  <span className="hlg-bar" style={{ background: HL_DOT[it.color] || HL_DOT.yellow }} />
                  <span className="hlg-text">{it.text}</span>
                  <Ic n="chevron_right" size={18} className="hlg-chev" />
                </button>
              ))}
            </div>
          </div>
          <button className="hlg-open" onClick={() => onOpenChapter(current.sid, current.n)}>Kapitel öffnen <Ic n="arrow_forward" size={17} /></button>
          <div style={{ height: 24 }} />
        </div>
      </div>
    );
  }

  // ─── list view: one row per chapter ───
  return (
    <div className="screen anim-slide">
      <div className="scroll pb-nav">
        <div className="tools-head">
          <button className="crumb" onClick={onBack}><Ic n="chevron_left" size={18} /> Profil</button>
          <h1>Meine Markierungen</h1>
          <p className="th-sub">{totalCount > 0 ? `${totalCount} Markierung${totalCount === 1 ? '' : 'en'} in ${groups.length} Kapitel${groups.length === 1 ? '' : 'n'}.` : 'Noch keine Markierungen.'}</p>
        </div>

        {groups.length === 0 && (
          <div className="fav-empty" style={{ margin: '4px 16px' }}><Ic n="bookmark_border" size={22} /><span>Markiere Text in einem Kapitel — wähle eine Farbe aus der kleinen Leiste, die beim Auswählen erscheint. Deine Markierungen sammeln sich hier.</span></div>
        )}

        <div className="hlc-list">
          {groups.map(g => {
            const colors = [...new Set(g.items.map(it => it.color))];
            return (
              <button className="hlc-row" key={g.key} onClick={() => setOpenKey(g.key)}>
                <span className="hlc-main">
                  <span className="hlc-k">{g.sec.title} · Kap. {g.n}</span>
                  <span className="hlc-t">{g.chap.title}</span>
                </span>
                <span className="hlc-dots">{colors.map(c => <i key={c} style={{ background: HL_DOT[c] }} />)}</span>
                <span className="hlc-n">{g.items.length}</span>
                <Ic n="chevron_right" size={20} className="hlg-chev" />
              </button>
            );
          })}
        </div>
        <div style={{ height: 24 }} />
      </div>
    </div>
  );
}

Object.assign(window, { Home, Atlas, SectionPage, Search, Fragen, Profile, ToastHost, Tools, Highlights });