feat: add Josephine personalized study dashboard

Deliver the German-first interactive StudyFlow frontend with daily briefing, materials, study canvas, calendar, learning plan, knowledge gaps, flashcards, quiz, reminders, and local-first privacy cues.

Co-authored-by: Codex <codex@openai.com>

app.js

@@ -0,0 +1,456 @@
+const assets = {
+  calendar: "assets/materials/mq3zhq9n-clipboard.png",
+  slide: "assets/materials/mq3zhqat-clipboard.png",
+  notes: "assets/materials/mq3zhqbu-clipboard.png",
+  evidence: "assets/materials/mq3zhqdk-clipboard.png",
+  recent: [
+    "assets/materials/mq3zhqe0-clipboard.png",
+    "assets/materials/mq3zhqe3-clipboard.png",
+    "assets/materials/mq3zhqea-clipboard.png",
+    "assets/materials/mq3zhqeg-clipboard.png"
+  ]
+};
+
+const routes = ["overview", "uploads", "canvas", "calendar", "learning-plan", "gaps", "flashcards", "quiz", "reminders"];
+const app = document.querySelector("#app");
+const navList = document.querySelector("#navList");
+const toast = document.querySelector("#toast");
+
+const pageHead = (title, subtitle, actions = "") => `
+  <header class="page-head">
+    <div><h1>${title}</h1><p>${subtitle}</p></div>
+    <div class="head-actions">${actions}</div>
+  </header>`;
+
+const panel = (title, body, extra = "", className = "") => `
+  <section class="panel ${className}">
+    <div class="panel-head"><h2>${title}</h2>${extra || '<span class="more">...</span>'}</div>
+    ${body}
+  </section>`;
+
+function overviewPage() {
+  const agenda = [
+    ["09:00", "Mehrsprachigkeitsdidaktik", "Seminar im Hörsaal 3 · Sprachbewusstsein & Transferstrategien", "book-open", "green"],
+    ["11:30", "Englischdidaktik", "Übung · Classroom Interaction & Feedback", "globe", "blue"],
+    ["13:00", "Mittagspause", "Zeit für gutes Essen und einen kurzen Spaziergang am Rhein", "fork-knife", "rose"],
+    ["15:00", "Lernblock Bildungspsychologie", "Kapitel 4: Motivation & Selbstregulation · Karteikarten erstellen", "brain", "aubergine"],
+    ["17:30", "Familie & Freunde", "Abendessen bei Mama & Papa", "users-three", "gold"]
+  ].map(([time, title, sub, icon, tone]) => `
+    <button class="day-entry ${tone}" data-route="${time === "15:00" ? "canvas" : "calendar"}">
+      <time>${time}</time>
+      <span class="day-icon"><i class="ph ph-${icon}"></i></span>
+      <span><strong>${title}</strong><small>${sub}</small></span>
+      <i class="ph ph-caret-right entry-arrow"></i>
+    </button>`).join("");
+
+  return `
+    <div class="josephine-home">
+      <section class="josephine-hero">
+        <img src="assets/hero/josephine-mainz-morning.png" alt="Josephine lernt an einem sonnigen Morgen in Mainz, umgeben von Erinnerungen an Familie, Freunde und ihr Lieblingspferd.">
+        <div class="weather-line">Dienstag, 7. Juni <span>·</span> Mainz <span>·</span> 18° <i class="ph ph-sun"></i></div>
+        <div class="hero-copy">
+          <h1>Josephine<br>Wendland</h1>
+          <p class="hero-motto">Lehren. Verstehen. Verbinden.</p>
+          <h2>Guten Morgen, Josephine</h2>
+          <p>Heute ist ein guter Tag, etwas zu lernen,<br>zu wachsen und Menschen zu inspirieren.</p>
+        </div>
+      </section>
+
+      <section class="daily-journal">
+        <div class="journal-agenda">
+          <header><i class="ph ph-calendar-blank"></i><h2>Mein Tag</h2><span>7. Juni</span></header>
+          <div class="day-list">${agenda}</div>
+        </div>
+        <aside class="today-important">
+          <header><i class="ph ph-star"></i><h2>Heute wichtig</h2></header>
+          <button class="important-row deadline" data-route="calendar">
+            <span class="important-icon"><i class="ph ph-calendar-dots"></i></span>
+            <span><small>Deadline</small><strong>Reflexionsbericht Mehrsprachigkeit</strong><em>Abgabe: Freitag, 10. Juni</em></span>
+            <i class="ph ph-caret-right"></i>
+          </button>
+          <button class="important-row gap" data-route="gaps">
+            <span class="important-icon"><i class="ph ph-target"></i></span>
+            <span><small>Wissenslücke</small><strong>Selbstwirksamkeit verstehen</strong><em>Wiederholen · Karte 24–27</em></span>
+            <i class="ph ph-caret-right"></i>
+          </button>
+          <button class="important-row next" data-route="canvas">
+            <span class="important-icon"><i class="ph ph-book-open"></i></span>
+            <span><small>Nächster Schritt</small><strong>Lernen fortsetzen</strong><em>Bildungspsychologie · Kapitel 4</em></span>
+            <i class="ph ph-caret-right"></i>
+          </button>
+          <p class="journal-note">Kleine Schritte jeden Tag<br>führen zu großen Veränderungen.</p>
+        </aside>
+      </section>
+    </div>`;
+}
+
+function uploadsPage() {
+  const extracted = `Sprachbewusstheit fördern (VL 07)
+
+Begriff: Fähigkeit, Sprache(n) als System(e) wahrzunehmen und über Sprache(n) nachzudenken.
+
+Ziele:
+- Sensibilisierung für sprachliche Strukturen und Variation
+- Vergleich von Sprachen als Ressourcen nutzen
+- Transferstrategien entwickeln
+
+Vergleich DE - FR
+DE: Ich gehe in die Schule.
+FR: Je vais à l'école.
+
+Gemeinsamkeiten: Subjekt - Verb - Objekt
+Unterschiede: Artikel, Präpositionen, Akkordanz
+
+Didaktische Prinzipien:
+1) Sprachenvergleich
+2) Bewusstmachung
+3) Funktionaler Einsatz im Fachunterricht`;
+
+  return pageHead("Materialien", "Notizen, Folien und Kalender an einem ruhigen Ort.", `
+    <button class="button secondary" id="addFiles">Dateien hinzufügen</button>
+    <button class="button primary" data-route="canvas">In Arbeitsfläche öffnen</button>
+  `) + `
+  <div class="uploads-grid">
+    ${panel("Upload-Queue (3)", `<div class="queue-list">
+      <div class="queue-item selected"><div class="queue-title"><strong>Mehrsprachigkeitsdidaktik_VL07.pdf</strong><span class="badge green">100%</span></div><div class="progress"><span style="width:100%"></span></div><small>OCR abgeschlossen · 32 Seiten</small></div>
+      <div class="queue-item"><div class="queue-title"><strong>Englischdidaktik_Orthografie.pdf</strong><span class="badge blue">76%</span></div><div class="progress"><span style="width:76%;background:var(--blue)"></span></div><small>OCR läuft · Seite 3 von 11</small></div>
+      <div class="queue-item"><div class="queue-title"><strong>Bildungspsychologie_Notizen.jpg</strong><span class="badge">0%</span></div><div class="progress"><span style="width:0%"></span></div><small>Wartet in der Queue</small></div>
+      <div class="dropzone" id="dropzone"><strong>Dateien hier ablegen</strong><br><small>PDF, JPG oder PNG · Verarbeitung bleibt lokal</small></div>
+    </div>`, '<span class="badge green">Lokal</span>', "upload-queue")}
+    ${panel("Mehrsprachigkeitsdidaktik_VL07.pdf", `<div class="doc-review">
+      <div class="doc-pane"><div class="doc-toolbar"><button class="icon-button">‹</button><span>4 / 32</span><button class="icon-button">›</button><span>100%</span><button class="icon-button">↗</button></div><div class="document-page"><img src="${assets.slide}" alt="Vorlesungsfolie zu Scaffolding im mehrsprachigen Unterricht"></div></div>
+      <div class="note-pane"><img src="${assets.notes}" alt="Handschriftliche Notizen zu Scaffolding im mehrsprachigen Unterricht"></div>
+    </div>`, '<span class="badge blue">Seite 4 verknüpft</span>')}
+    ${panel("OCR-Extraktion", `<div class="panel-body ocr-panel">
+      <div class="language-tabs"><button class="badge green">Deutsch 99%</button><button class="badge blue">Französisch 82%</button><button class="badge">Englisch 12%</button></div>
+      <div class="confidence">Konfidenz der Seite: <strong>93%</strong> · 7 Markierungen prüfen</div>
+      <label class="field"><span class="label">Extrahierter Text</span><textarea id="ocrText">${extracted}</textarea></label>
+      <div class="row" style="justify-content:space-between"><span class="badge amber">Niedrige Konfidenz: Akkordanz</span><button class="button secondary" id="reviewAll">Alle prüfen</button></div>
+      <div class="ocr-actions"><button class="button secondary">Verwerfen</button><button class="button primary" id="saveOcr">Übernehmen &amp; speichern</button></div>
+      <div class="trust-inline">Speichern in: Mehrsprachigkeitsdidaktik · nur lokal</div>
+    </div>`, '<span class="badge green">Abgeschlossen</span>')}
+  </div>`;
+}
+
+function canvasPage() {
+  const thumbs = [assets.recent[0], assets.recent[1], assets.slide, assets.recent[2], assets.recent[3]]
+    .map((src, i) => `<button class="slide-thumb ${i === 2 ? "active" : ""}" data-slide="${i}"><img src="${src}" alt="Materialvorschau ${i + 1}"></button>`).join("");
+  return `<div class="canvas-page">
+    <header class="canvas-head">
+      <h1>Smart Study Canvas <span>Mehrsprachigkeitsdidaktik / Woche 7</span></h1>
+      <div class="head-actions"><button class="button secondary">Verknüpfungen</button><button class="button secondary">Notiz hinzufügen</button><button class="button secondary">Exportieren</button></div>
+    </header>
+    <div class="canvas-grid">
+      ${panel("Vorlesungsfolien", `<div class="slide-workspace"><div class="slide-thumbs">${thumbs}</div><div class="slide-main"><img id="mainSlide" src="${assets.slide}" alt="Vorlesungsfolie Scaffolding"></div></div>`)}
+      ${panel("Handschriftliche Notizen", `<div class="notes-main"><img src="${assets.notes}" alt="Maya Hoffmanns handschriftliche Scaffolding-Notizen"></div>`, '<span class="badge blue">4 semantische Links</span>')}
+      ${panel("AI-Copilot", `<div class="chat"><div class="messages" id="messages">
+        <div class="message user">Wie hängen Translanguaging und Scaffolding zusammen?</div>
+        <div class="message ai"><strong>Maya</strong><br>Scaffolding schafft temporäre sprachliche und kognitive Stützen. Translanguaging erlaubt Lernenden, ihr gesamtes sprachliches Repertoire für Bedeutungsbildung zu nutzen. Zusammen fördern sie fachliche Teilhabe, ohne die Zielsprache auszublenden.<div class="language-tabs"><span class="badge green">Folie 14</span><span class="badge blue">Notiz S. 1</span></div></div>
+        <div class="alert-card"><strong>Fehlendes Konzept erkannt: Interlanguage</strong>Die Unterscheidung zur Interlanguage fehlt in deinen verknüpften Notizen.<div class="language-tabs"><button class="badge">Konzept erklären</button><button class="badge">Quelle suchen</button><button class="badge">Karte erstellen</button></div></div>
+      </div><form class="chat-compose" id="chatForm"><input id="chatInput" placeholder="Stelle eine Frage zu deinen Materialien..." required><button class="button primary" aria-label="Senden">➤</button></form></div>`, '<span class="badge green">Lokal · Quellengebunden</span>')}
+    </div>
+  </div>`;
+}
+
+function calendarPage() {
+  const cells = Array.from({length: 35}, () => "<div></div>").join("");
+  const roadmapRows = [
+    ["Mehrsprachigkeitsdidaktik","on,on,on,,blue,blue,,"],
+    ["Englischdidaktik","blue,blue,,on,on,,,"],
+    ["Französischdidaktik",",amber,amber,,on,on,,"],
+    ["Bildungspsychologie","on,,blue,blue,,on,on,on"]
+  ].map(([name, states]) => `<b>${name}</b>${states.split(",").map(s => `<span class="${s}"></span>`).join("")}`).join("");
+  return pageHead("Kalender & Lernplan", "Geprüfte Termine, realistische Lernblöcke und dein 8-Tage-Fokus.", `
+    <button class="button secondary" id="reviewExtractions">Extraktionen prüfen · 3</button>
+    <button class="button primary" id="planBlock">Lernblock planen</button>
+  `) + `
+  <div class="calendar-grid">
+    ${panel("Wochenplan · 7.-11. Juni", `<div class="week-grid">
+      <div></div>${["Di 7.","Mi 8.","Do 9.","Fr 10.","Sa 11."].map(d=>`<div class="day">${d}</div>`).join("")}
+      ${["09:00","10:00","11:00","12:00","13:00","14:00","15:00"].map(t=>`<div class="time">${t}</div>`).join("")}${cells}
+      <div class="event" style="grid-column:2;grid-row:2/4"><strong>09:00</strong><br>Mehrsprachigkeitsdidaktik<br>Seminar</div>
+      <div class="event amber" style="grid-column:3;grid-row:3/5"><strong>10:00</strong><br>Hausarbeit<br>Quellenarbeit</div>
+      <div class="event blue" style="grid-column:4;grid-row:4/6"><strong>11:00</strong><br>Französischdidaktik<br>Séance 5</div>
+      <div class="event" style="grid-column:5;grid-row:2/5"><strong>09:00</strong><br>Fachdidaktik Deutsch<br>Portfolio</div>
+      <div class="event blue" style="grid-column:6;grid-row:3/5"><strong>10:00</strong><br>Lerngruppe<br>Bibliothek</div>
+    </div><div class="roadmap"><h3>8-Tage-Prüfungsroadmap</h3><div class="roadmap-grid"><b></b>${["Di 7","Mi 8","Do 9","Fr 10","Sa 11","So 12","Mo 13","Di 14"].map(d=>`<b>${d}</b>`).join("")}${roadmapRows}</div><p class="muted" style="font-size:10px">Fokus: Hausarbeit abschließen → Französischdidaktik wiederholen → Prüfungssimulation</p></div>`, '<span class="badge green">72% geplant</span>', "week-calendar")}
+    <div class="stack">
+      ${panel("Heute · 5 Std. 30 Min.", `<div class="panel-body"><div class="today-block"><strong>09:00-10:30 · Seminarfolien</strong><small>Translanguaging und Scaffolding verknüpfen</small></div><div class="today-block"><strong>11:30-13:00 · Reading response</strong><small>Englischdidaktik · Kapitel 4</small></div><div class="today-block"><strong>15:00-16:30 · Retrieval Practice</strong><small>Bildungspsychologie · Lernkarten 31-54</small></div></div>`, '<span class="badge green">Im Plan</span>')}
+      ${panel("Geprüfte Extraktionen", `<div class="panel-body"><div class="extraction-row"><span>10. Juni</span><strong>Hausarbeit abgeben</strong><span class="badge amber">Bestätigt</span></div><div class="extraction-row"><span>14. Juni</span><strong>Französischdidaktik Prüfung</strong><span class="badge blue">Kalender</span></div><div class="extraction-row"><span>19. Juni</span><strong>Portfolio Deutsch</strong><span class="badge green">Bestätigt</span></div><img class="calendar-asset" src="${assets.calendar}" alt="Handschriftlicher Kalender Juni 2025"></div>`, '<span class="badge">3 aus PDF</span>')}
+    </div>
+  </div>`;
+}
+
+function flashcardsPage() {
+  const decks = [
+    ["Mehrsprachigkeitsdidaktik",48,"18 fällig · zuletzt heute",72],
+    ["Englischdidaktik",36,"Nächste Wiederholung morgen",58],
+    ["Französischdidaktik",42,"Nächste Wiederholung morgen",44],
+    ["Bildungspsychologie",61,"Nächste Wiederholung morgen",81],
+    ["Fachdidaktik Deutsch",27,"Nächste Wiederholung morgen",36]
+  ].map(([name,count,sub,pct],i)=>`<div class="deck-row ${i===0?"selected":""}" data-deck="${name}"><strong>${name} · ${count} Karten</strong><small>${sub}</small><div class="progress"><span style="width:${pct}%"></span></div></div>`).join("");
+  return pageHead("Karteikarten", "Quellengebundene Karten bearbeiten, lernen und exportieren.", `
+    <button class="button secondary" id="generateCards">Aus Quellen generieren</button>
+    <button class="button primary" id="learnCards">12 Karten lernen</button>
+  `) + `
+  <div class="cards-grid">
+    ${panel("Meine Decks", `<div>${decks}</div>`)}
+    ${panel("Karte bearbeiten · 12 von 48", `<div class="panel-body">
+      <div class="field question"><label for="cardQuestion">Frage</label><textarea id="cardQuestion">Wie unterscheidet sich Translanguaging vom klassischen Code-Switching?</textarea></div>
+      <div class="field answer"><label for="cardAnswer">Antwort</label><textarea id="cardAnswer">Translanguaging beschreibt die flexible Nutzung des gesamten sprachlichen Repertoires zur Bedeutungsbildung. Code-Switching bezeichnet dagegen meist den situativen Wechsel zwischen getrennt gedachten Sprachen.</textarea></div>
+      <div class="field"><label>Quellen</label><div class="source-box">▣ Mehrsprachigkeitsdidaktik_Woche_7.pdf · Folie 14<br>▤ Notizen_Scaffolding_03-06.jpg · Seite 1</div><div class="evidence-strip"><img src="${assets.evidence}" alt="Quellenausschnitt aus einer Notiz"><img src="${assets.notes}" alt="Handschriftliche Evidenz zu Scaffolding"></div></div>
+      <div class="language-tabs"><span class="badge green">Translanguaging</span><span class="badge blue">Code-Switching</span><span class="badge">Woche 7</span></div>
+      <div class="row" style="justify-content:space-between"><button class="button danger" id="deleteCard">Karte löschen</button><button class="button primary" id="saveCard">Änderungen speichern</button></div>
+    </div>`)}
+    ${panel("Vorschau & Export", `<div class="panel-body stack"><div class="card-preview" id="cardPreview"><div class="front"><small>Vorderseite</small><strong>Wie unterscheidet sich Translanguaging vom klassischen Code-Switching?</strong><span class="muted">Klicken zum Umdrehen</span></div><div class="back"><small>Rückseite</small><p>Translanguaging nutzt das gesamte sprachliche Repertoire flexibel. Code-Switching beschreibt den situativen Wechsel zwischen getrennt gedachten Sprachen.</p></div></div><div class="divider"></div><h3 style="font-family:var(--serif);margin:2px 0">Deck exportieren</h3><span class="muted" style="font-size:11px">48 Karten · Quellen enthalten · DE</span><div class="export-list"><button class="button" data-export="Anki">Anki (.apkg)</button><button class="button" data-export="CSV">CSV</button><button class="button" data-export="PDF">PDF zum Drucken</button></div><small class="muted">Letzte Generierung: heute, 10:42 · vollständig lokal</small></div>`)}
+  </div>`;
+}
+
+function quizPage() {
+  return pageHead("Quizmodus", "Prüfungssimulation · Mehrsprachigkeitsdidaktik", `<button class="button secondary" id="endQuiz">Simulation beenden</button>`) + `
+  <div class="quiz-grid">
+    ${panel("Frage 7 von 12", `<div class="quiz-content">
+      <div class="quiz-meta"><span class="muted">Fortschritt · <span id="quizProgressText">58%</span></span><span class="badge amber">Schwierigkeit: Anspruchsvoll</span></div>
+      <div class="progress"><span id="quizProgress" style="width:58%"></span></div>
+      <h2 class="quiz-question">Welche Aussage beschreibt den didaktischen Nutzen von Translanguaging am präzisesten?</h2>
+      <div class="answers" id="answers">
+        <button class="answer-option" data-answer="A"><span class="answer-letter">A</span><span>Es verhindert den Wechsel zwischen Unterrichtssprachen vollständig.</span></button>
+        <button class="answer-option" data-answer="B"><span class="answer-letter">B</span><span><strong>Es aktiviert das gesamte sprachliche Repertoire zur Bedeutungsbildung und fachlichen Teilhabe.</strong></span></button>
+        <button class="answer-option" data-answer="C"><span class="answer-letter">C</span><span>Es ersetzt fachsprachliche Lernziele durch alltagssprachliche Kommunikation.</span></button>
+        <button class="answer-option" data-answer="D"><span class="answer-letter">D</span><span>Es ist ausschließlich für den Fremdsprachenunterricht geeignet.</span></button>
+      </div>
+      <div class="explanation" id="quizExplanation" hidden><h3 id="answerState">Richtig beantwortet</h3><p>Translanguaging nutzt vorhandene sprachliche Ressourcen gezielt als Brücke zum fachlichen Verstehen. Die Zielsprache bleibt wichtig, wird aber nicht als isoliertes System behandelt.</p><div class="source-citation">Quelle: Mehrsprachigkeitsdidaktik_Woche_7.pdf · Folie 14<br>„Dynamische Nutzung des gesamten sprachlichen Repertoires zur Bedeutungskonstruktion.“</div><div class="row" style="justify-content:space-between;margin-top:14px"><small class="muted" id="chosenAnswer"></small><button class="button primary" id="nextQuestion">Nächste Frage →</button></div></div>
+    </div>`, '<span class="more">...</span>', "quiz-card")}
+    <div class="stack">
+      ${panel("Simulationsstatus", `<div class="panel-body"><div class="stats-grid"><div class="stat"><strong id="correctCount">5</strong><small>richtig</small></div><div class="stat"><strong id="wrongCount">1</strong><small>falsch</small></div><div class="stat"><strong id="hitRate">82%</strong><small>Trefferquote</small></div><div class="stat"><strong id="timer">06:42</strong><small>verbleibend</small></div></div></div>`)}
+      ${panel("Schwierigkeit", `<div class="panel-body"><div class="difficulty"><button data-level="Adaptiv">Adaptiv</button><button data-level="Mittel">Mittel</button><button class="active" data-level="Anspruchsvoll">Anspruchsvoll</button></div><p class="muted" style="font-size:11px">Die nächsten Fragen gewichten deine Wissenslücken stärker.</p></div>`)}
+      ${panel("Prüfungsfokus", `<div class="panel-body"><div class="focus-list"><div><span class="badge red">Lücke</span> Interlanguage</div><div><span class="badge amber">Prüfen</span> Scaffolding</div><div><span class="badge green">Sicher</span> Translanguaging</div></div><div class="divider" style="margin:14px 0"></div><small class="muted">12 Fragen · 15 Minuten<br>Nur aus 3 ausgewählten lokalen Quellen</small></div>`)}
+    </div>
+  </div>`;
+}
+
+function learningPlanPage() {
+  return pageHead("Mein Lernplan", "Ein realistischer Plan, der zu Josephines Woche passt.", `
+    <button class="button secondary" data-route="calendar">Kalender ansehen</button>
+    <button class="button primary" data-route="canvas">Lernblock starten</button>
+  `) + `
+  <div class="quiet-page">
+    <section class="plan-intro">
+      <span class="eyebrow">Prüfung in 8 Tagen</span>
+      <h2>Diese Woche zählt Beständigkeit,<br>nicht Perfektion.</h2>
+      <p>StudyFlow verbindet deine Termine, Materialien und offenen Themen zu kleinen, machbaren Schritten.</p>
+    </section>
+    <div class="plan-days">
+      <button data-route="canvas"><time>Heute</time><strong>Grundlagen wiederholen</strong><span>Mehrsprachigkeitsdidaktik · 75 Min.</span></button>
+      <button data-route="flashcards"><time>Morgen</time><strong>Scaffolding vertiefen</strong><span>Folien, Notizen und 12 Karten · 60 Min.</span></button>
+      <button data-route="quiz"><time>Donnerstag</time><strong>Formative Bewertung üben</strong><span>Quiz und Reflexion · 45 Min.</span></button>
+      <button data-route="gaps"><time>Freitag</time><strong>Wissenslücken schließen</strong><span>Selbstwirksamkeit und Interlanguage · 60 Min.</span></button>
+    </div>
+  </div>`;
+}
+
+function gapsPage() {
+  return pageHead("Wissenslücken", "Was noch unsicher ist, wird hier verständlich und machbar.", `
+    <button class="button primary" data-route="quiz">Kurzes Quiz starten</button>
+  `) + `
+  <div class="quiet-page two-column">
+    <section class="focus-story">
+      <span class="eyebrow">Heute empfohlen</span>
+      <h2>Selbstwirksamkeit verstehen</h2>
+      <p>In deinen Notizen fehlt noch die Verbindung zwischen Selbstwirksamkeit, Motivation und Lernerfolg.</p>
+      <button class="button primary" data-route="canvas">Mit Quellen erklären</button>
+    </section>
+    <section class="calm-list">
+      <button data-route="canvas"><span class="signal red"></span><span><strong>Interlanguage</strong><small>Nur indirekt in drei Quellen erklärt</small></span><em>Hoch</em></button>
+      <button data-route="flashcards"><span class="signal amber"></span><span><strong>Scaffolding</strong><small>Zwei unsichere Karten</small></span><em>Mittel</em></button>
+      <button data-route="canvas"><span class="signal green"></span><span><strong>Translanguaging</strong><small>Quellenlage vollständig</small></span><em>Sicher</em></button>
+    </section>
+  </div>`;
+}
+
+function remindersPage() {
+  return pageHead("Erinnerungen", "Freundliche Hinweise, damit Wichtiges nicht im Alltag untergeht.", `
+    <button class="button primary" id="newReminder">Erinnerung hinzufügen</button>
+  `) + `
+  <div class="quiet-page reminders-page">
+    <section class="reminder-date"><span>Heute</span><strong>7. Juni</strong><p>Du hast einen ruhigen Abend ohne Studienfrist.</p></section>
+    <section class="calm-list">
+      <button data-route="calendar"><span class="important-icon"><i class="ph ph-file-text"></i></span><span><strong>Reflexionsbericht Mehrsprachigkeit</strong><small>Freitag, 10. Juni · 23:59</small></span><em>In 3 Tagen</em></button>
+      <button data-route="calendar"><span class="important-icon"><i class="ph ph-presentation-chart"></i></span><span><strong>Französische Präsentation</strong><small>Montag, 13. Juni · 10:00</small></span><em>In 6 Tagen</em></button>
+      <button data-route="learning-plan"><span class="important-icon"><i class="ph ph-book-open"></i></span><span><strong>Bildungspsychologie wiederholen</strong><small>Morgen · 15:00</small></span><em>Geplant</em></button>
+    </section>
+  </div>`;
+}
+
+const renderers = {
+  overview: overviewPage,
+  uploads: uploadsPage,
+  canvas: canvasPage,
+  calendar: calendarPage,
+  "learning-plan": learningPlanPage,
+  gaps: gapsPage,
+  flashcards: flashcardsPage,
+  quiz: quizPage,
+  reminders: remindersPage
+};
+
+function normalizeRoute() {
+  const route = location.hash.replace("#/", "").replace("#", "");
+  return routes.includes(route) ? route : "overview";
+}
+
+function navigate(route) {
+  if (!routes.includes(route)) return;
+  if (location.hash !== `#/${route}`) location.hash = `#/${route}`;
+  else render();
+}
+
+function render() {
+  const route = normalizeRoute();
+  app.innerHTML = renderers[route]();
+  navList.querySelectorAll("[data-route]").forEach(btn => btn.classList.toggle("active", btn.dataset.route === route));
+  document.title = `${route === "overview" ? "Heute" : app.querySelector("h1")?.textContent || "StudyFlow"} · StudyFlow AI`;
+  closeMenu();
+  app.focus({ preventScroll: true });
+  bindPage(route);
+}
+
+function bindPage(route) {
+  app.querySelectorAll("[data-route]").forEach(el => el.addEventListener("click", () => navigate(el.dataset.route)));
+  if (route === "uploads") bindUploads();
+  if (route === "canvas") bindCanvas();
+  if (route === "calendar") bindCalendar();
+  if (route === "flashcards") bindFlashcards();
+  if (route === "quiz") bindQuiz();
+  if (route === "reminders") {
+    document.querySelector("#newReminder")?.addEventListener("click", () => showToast("Neue Erinnerung wird lokal angelegt."));
+  }
+  app.querySelector("[data-action='open-plan']")?.addEventListener("click", () => navigate("calendar"));
+}
+
+function bindUploads() {
+  const dropzone = document.querySelector("#dropzone");
+  ["dragenter", "dragover"].forEach(type => dropzone.addEventListener(type, event => { event.preventDefault(); dropzone.classList.add("drag"); }));
+  ["dragleave", "drop"].forEach(type => dropzone.addEventListener(type, event => { event.preventDefault(); dropzone.classList.remove("drag"); }));
+  dropzone.addEventListener("drop", () => showToast("Datei zur lokalen Queue hinzugefügt."));
+  document.querySelector("#addFiles").addEventListener("click", () => showToast("Dateiauswahl geöffnet. Demo bleibt lokal."));
+  document.querySelector("#reviewAll").addEventListener("click", () => {
+    document.querySelector("#ocrText").focus();
+    showToast("7 unsichere Stellen sind zur Prüfung markiert.");
+  });
+  document.querySelector("#saveOcr").addEventListener("click", () => showToast("OCR-Text lokal gespeichert und verknüpft."));
+}
+
+function bindCanvas() {
+  const mainSlide = document.querySelector("#mainSlide");
+  const slideAssets = [assets.recent[0], assets.recent[1], assets.slide, assets.recent[2], assets.recent[3]];
+  document.querySelectorAll(".slide-thumb").forEach(button => button.addEventListener("click", () => {
+    document.querySelectorAll(".slide-thumb").forEach(item => item.classList.remove("active"));
+    button.classList.add("active");
+    mainSlide.src = slideAssets[Number(button.dataset.slide)];
+  }));
+  document.querySelector("#chatForm").addEventListener("submit", event => {
+    event.preventDefault();
+    const input = document.querySelector("#chatInput");
+    const text = input.value.trim();
+    if (!text) return;
+    const messages = document.querySelector("#messages");
+    messages.insertAdjacentHTML("beforeend", `<div class="message user">${escapeHtml(text)}</div><div class="message ai"><strong>Maya</strong><br>Ich prüfe diese Frage gegen die lokal verknüpften Folien und Notizen. Die relevanten Stellen liegen auf Folie 14 und in deiner Scaffolding-Notiz.</div>`);
+    input.value = "";
+    messages.scrollTop = messages.scrollHeight;
+  });
+}
+
+function bindCalendar() {
+  document.querySelector("#planBlock").addEventListener("click", () => showToast("Neuer Lernblock für 17:15 vorgeschlagen."));
+  document.querySelector("#reviewExtractions").addEventListener("click", () => showToast("Drei bestätigte Termine aus lokalen Quellen."));
+}
+
+function bindFlashcards() {
+  const preview = document.querySelector("#cardPreview");
+  preview.addEventListener("click", () => preview.classList.toggle("flipped"));
+  document.querySelector("#saveCard").addEventListener("click", () => showToast("Karte lokal gespeichert."));
+  document.querySelector("#deleteCard").addEventListener("click", () => showToast("Karte zur Löschung vorgemerkt."));
+  document.querySelector("#generateCards").addEventListener("click", () => showToast("6 Kartenvorschläge aus zwei Quellen erzeugt."));
+  document.querySelector("#learnCards").addEventListener("click", () => showToast("Lernsession mit 12 fälligen Karten gestartet."));
+  document.querySelectorAll("[data-export]").forEach(button => button.addEventListener("click", () => showToast(`${button.dataset.export}-Export lokal vorbereitet.`)));
+  document.querySelectorAll(".deck-row").forEach(row => row.addEventListener("click", () => {
+    document.querySelectorAll(".deck-row").forEach(item => item.classList.remove("selected"));
+    row.classList.add("selected");
+    showToast(`${row.dataset.deck} ausgewählt.`);
+  }));
+}
+
+function bindQuiz() {
+  const options = [...document.querySelectorAll(".answer-option")];
+  const explanation = document.querySelector("#quizExplanation");
+  options.forEach(option => option.addEventListener("click", () => {
+    options.forEach(item => item.classList.remove("selected", "wrong"));
+    const correct = option.dataset.answer === "B";
+    option.classList.add(correct ? "selected" : "wrong");
+    explanation.hidden = false;
+    document.querySelector("#answerState").textContent = correct ? "Richtig beantwortet" : "Noch nicht richtig";
+    document.querySelector("#answerState").style.color = correct ? "var(--emerald-dark)" : "var(--red)";
+    document.querySelector("#chosenAnswer").textContent = `Antwort gewählt · ${option.dataset.answer}`;
+  }));
+  document.querySelectorAll("[data-level]").forEach(button => button.addEventListener("click", () => {
+    document.querySelectorAll("[data-level]").forEach(item => item.classList.remove("active"));
+    button.classList.add("active");
+    showToast(`Schwierigkeit auf ${button.dataset.level} gesetzt.`);
+  }));
+  document.querySelector("#nextQuestion")?.addEventListener("click", () => {
+    document.querySelector(".panel-head h2").textContent = "Frage 8 von 12";
+    document.querySelector("#quizProgress").style.width = "67%";
+    document.querySelector("#quizProgressText").textContent = "67%";
+    showToast("Nächste Frage geladen.");
+  });
+  document.querySelector("#endQuiz").addEventListener("click", () => showToast("Simulation pausiert. Dein Stand bleibt lokal gespeichert."));
+}
+
+function showToast(message) {
+  toast.textContent = message;
+  toast.classList.add("show");
+  clearTimeout(showToast.timer);
+  showToast.timer = setTimeout(() => toast.classList.remove("show"), 2600);
+}
+
+function escapeHtml(value) {
+  return value.replace(/[&<>"']/g, char => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" }[char]));
+}
+
+const sidebar = document.querySelector("#sidebar");
+const scrim = document.querySelector("#scrim");
+const menuButton = document.querySelector("#menuButton");
+function closeMenu() {
+  sidebar.classList.remove("open");
+  scrim.classList.remove("show");
+  menuButton.setAttribute("aria-expanded", "false");
+}
+menuButton.addEventListener("click", () => {
+  const open = sidebar.classList.toggle("open");
+  scrim.classList.toggle("show", open);
+  menuButton.setAttribute("aria-expanded", String(open));
+});
+scrim.addEventListener("click", closeMenu);
+navList.addEventListener("click", event => {
+  const button = event.target.closest("[data-route]");
+  if (button) navigate(button.dataset.route);
+});
+
+document.querySelector("#askButton").addEventListener("click", () => document.querySelector("#aiDialog").showModal());
+document.querySelector("#aiSubmit").addEventListener("click", () => {
+  const prompt = document.querySelector("#aiPrompt").value.trim();
+  showToast(prompt ? "Lokale Antwort wird aus 12 Materialien erzeugt." : "Bitte gib zuerst eine Frage ein.");
+});
+document.querySelector("#globalSearch").addEventListener("keydown", event => {
+  if (event.key === "Enter" && event.currentTarget.value.trim()) showToast(`Lokale Suche nach „${event.currentTarget.value.trim()}“`);
+});
+document.addEventListener("keydown", event => {
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+    event.preventDefault();
+    document.querySelector("#globalSearch").focus();
+  }
+  if (event.key === "Escape") closeMenu();
+});
+window.addEventListener("hashchange", render);
+render();

index.html

@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light">
+  <title>StudyFlow AI</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="app-shell">
+    <aside class="sidebar" id="sidebar" aria-label="Hauptnavigation">
+      <div class="brand">
+        <span class="brand-mark" aria-hidden="true"><i class="ph ph-feather"></i></span>
+        <span class="brand-name">StudyFlow AI</span>
+      </div>
+
+      <div class="profile">
+        <span class="avatar">JW</span>
+        <span><strong>Josephine Wendland</strong><small>Lehramt · Mainz</small></span>
+        <button class="icon-button" aria-label="Profil öffnen"><i class="ph ph-caret-down"></i></button>
+      </div>
+
+      <nav class="nav-list" id="navList">
+        <button data-route="overview"><i class="ph ph-house"></i>Heute</button>
+        <button data-route="uploads"><i class="ph ph-folder"></i>Materialien</button>
+        <button data-route="canvas"><i class="ph ph-chalkboard-teacher"></i>Arbeitsfläche</button>
+        <button data-route="calendar"><i class="ph ph-calendar-blank"></i>Kalender</button>
+        <button data-route="learning-plan"><i class="ph ph-book-open"></i>Lernplan</button>
+        <button data-route="gaps"><i class="ph ph-target"></i>Wissenslücken</button>
+        <button data-route="flashcards"><i class="ph ph-cards"></i>Karten</button>
+        <button data-route="quiz"><i class="ph ph-question"></i>Quiz</button>
+        <button data-route="reminders"><i class="ph ph-heart"></i>Erinnerungen</button>
+      </nav>
+
+      <div class="local-status">
+        <strong><span class="status-dot"></span>Lokale Verarbeitung aktiv</strong>
+        <span>Deine Daten bleiben auf diesem Gerät.</span>
+      </div>
+    </aside>
+
+    <div class="app-main">
+      <header class="topbar">
+        <button class="menu-button" id="menuButton" aria-label="Navigation öffnen" aria-expanded="false">☰</button>
+        <span class="today">Dienstag, 7. Juni · Mainz</span>
+        <label class="global-search">
+          <span aria-hidden="true">⌕</span>
+          <input id="globalSearch" type="search" placeholder="Material, Kurs oder Begriff suchen">
+          <kbd>⌘ K</kbd>
+        </label>
+        <button class="ask-button" id="askButton"><i class="ph ph-sparkle"></i> KI fragen</button>
+        <button class="icon-button notification" aria-label="Benachrichtigungen"><i class="ph ph-bell"></i><span>3</span></button>
+        <span class="user-label">Josephine Wendland · Lehramt</span>
+      </header>
+      <main id="app" tabindex="-1"></main>
+    </div>
+  </div>
+
+  <div class="scrim" id="scrim"></div>
+  <div class="toast" id="toast" role="status" aria-live="polite"></div>
+
+  <dialog id="aiDialog">
+    <form method="dialog" class="dialog-card">
+      <div class="dialog-head">
+        <div><small>Lokaler KI-Copilot</small><h2>Frage an deine Materialien</h2></div>
+        <button class="icon-button" value="cancel" aria-label="Schließen">×</button>
+      </div>
+      <label>Deine Frage<textarea id="aiPrompt" rows="4" placeholder="Zum Beispiel: Erkläre den Unterschied zwischen Translanguaging und Code-Switching."></textarea></label>
+      <p class="trust-note">Die Antwort wird ausschließlich aus deinen lokalen Quellen erzeugt.</p>
+      <div class="dialog-actions">
+        <button class="button secondary" value="cancel">Abbrechen</button>
+        <button class="button primary" id="aiSubmit" value="cancel">Antwort erzeugen</button>
+      </div>
+    </form>
+  </dialog>
+
+  <script src="app.js"></script>
+</body>
+</html>

styles.css

@@ -0,0 +1,656 @@
+:root {
+  --sidebar: #071f29;
+  --sidebar-2: #0a2b34;
+  --paper: #fbfcfa;
+  --surface: #ffffff;
+  --ink: #102126;
+  --muted: #647278;
+  --line: #d9e0dd;
+  --line-soft: #e9eeeb;
+  --emerald: #0c9656;
+  --emerald-dark: #086a42;
+  --emerald-soft: #eaf6ef;
+  --blue: #2369b3;
+  --blue-soft: #edf5ff;
+  --amber: #b56700;
+  --amber-soft: #fff6e5;
+  --red: #bb3e36;
+  --red-soft: #fff0ee;
+  --radius: 7px;
+  --serif: Georgia, "Times New Roman", serif;
+  --sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --mono: "Cascadia Mono", Consolas, monospace;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--sans); }
+body { font-size: 14px; }
+button, input, textarea, select { font: inherit; }
+button { color: inherit; }
+button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--emerald) 75%, white);
+  outline-offset: 2px;
+}
+
+.app-shell { min-height: 100dvh; display: grid; grid-template-columns: 218px minmax(0, 1fr); }
+.sidebar {
+  position: sticky; top: 0; height: 100dvh; padding: 20px 14px 17px; background: var(--sidebar);
+  color: #eef6f3; display: flex; flex-direction: column; overflow-y: auto; z-index: 20;
+}
+.brand { display: flex; align-items: center; gap: 10px; padding: 4px 7px 18px; }
+.brand-mark {
+  display: grid; place-items: center; width: 31px; height: 35px; color: white; font-size: 22px; font-weight: 800;
+  background: linear-gradient(145deg, #18aa70, #087044); clip-path: polygon(50% 0,100% 25%,78% 42%,100% 60%,50% 100%,0 75%,22% 57%,0 40%);
+}
+.brand-name { font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
+.brand-name b { color: #38c782; }
+.profile {
+  display: grid; grid-template-columns: 34px minmax(0,1fr) 24px; gap: 9px; align-items: center;
+  padding: 10px; margin-bottom: 15px; border: 1px solid #28434a; border-radius: var(--radius); background: #0b2a34;
+}
+.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--emerald); font-weight: 700; }
+.profile strong, .profile small { display: block; }
+.profile strong { font-size: 12px; }
+.profile small { color: #a7bbb9; font-size: 10px; margin-top: 3px; }
+.icon-button { border: 0; background: transparent; min-width: 32px; min-height: 32px; cursor: pointer; border-radius: 6px; }
+.icon-button:hover { background: rgba(255,255,255,.08); }
+.nav-list { display: grid; gap: 5px; }
+.nav-list button, .course-list button {
+  width: 100%; border: 0; background: transparent; color: #eef6f3; text-align: left; cursor: pointer;
+}
+.nav-list button {
+  min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius);
+  transition: background .16s ease, transform .16s ease;
+}
+.nav-list button:hover { background: rgba(255,255,255,.07); }
+.nav-list button:active { transform: translateY(1px); }
+.nav-list button.active { background: #176b4d; }
+.nav-icon { width: 20px; text-align: center; font-family: var(--mono); font-size: 17px; }
+.course-list { padding: 21px 8px 12px; border-top: 1px solid #28434a; margin-top: 18px; }
+.course-list p { margin: 0 0 8px; color: #93aaa9; font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
+.course-list button { padding: 5px 0; font-size: 11px; color: #bdd0ce; }
+.course-list button:hover { color: white; }
+.local-status {
+  margin-top: auto; padding: 12px; border: 1px solid #16805a; border-radius: var(--radius); background: #092c2b;
+  display: grid; gap: 6px; font-size: 10px; line-height: 1.35;
+}
+.local-status strong { font-size: 12px; }
+.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #55d68d; }
+
+.app-main { min-width: 0; }
+.topbar {
+  height: 64px; position: sticky; top: 0; z-index: 15; padding: 0 26px; display: grid;
+  grid-template-columns: max-content minmax(260px, 480px) max-content max-content max-content;
+  justify-content: end; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); background: rgba(251,252,250,.97);
+}
+.today { margin-right: auto; font-size: 12px; color: var(--muted); }
+.global-search {
+  height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line);
+  border-radius: var(--radius); background: white; color: var(--muted);
+}
+.global-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
+kbd { padding: 2px 6px; border-radius: 4px; background: #f0f3f1; font: 10px var(--mono); color: var(--muted); }
+.ask-button, .button {
+  min-height: 40px; padding: 8px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: white; cursor: pointer;
+}
+.ask-button { color: var(--emerald-dark); border-color: #a8d6bf; font-weight: 600; }
+.button:hover, .ask-button:hover { border-color: #9dafaa; background: #f7faf8; }
+.button:active, .ask-button:active { transform: translateY(1px); }
+.button.primary { border-color: var(--emerald-dark); background: var(--emerald-dark); color: white; }
+.button.primary:hover { background: #075838; }
+.button.danger { border-color: #e6aca8; color: var(--red); background: var(--red-soft); }
+.notification { position: relative; }
+.notification span { position: absolute; right: -1px; top: 0; display: grid; place-items: center; width: 16px; height: 16px; background: var(--emerald-dark); color: white; font-size: 9px; border-radius: 50%; }
+.user-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
+.menu-button { display: none; border: 0; background: transparent; font-size: 20px; }
+
+main { padding: 17px 26px 28px; min-height: calc(100dvh - 64px); }
+.page-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
+.page-head h1 { margin: 0; font: 400 clamp(31px, 2.65vw, 43px)/1 var(--serif); letter-spacing: -.025em; }
+.page-head p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
+.head-actions { display: flex; gap: 8px; }
+.panel {
+  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; min-width: 0;
+}
+.panel-head {
+  min-height: 47px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  border-bottom: 1px solid var(--line);
+}
+.panel-head h2, .panel-head h3 { margin: 0; font: 400 20px/1.1 var(--serif); }
+.panel-head h3 { font-size: 17px; }
+.panel-body { padding: 14px; }
+.muted { color: var(--muted); }
+.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
+.label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
+.badge {
+  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid var(--line);
+  border-radius: 5px; background: #f7faf8; font-size: 10px; white-space: nowrap;
+}
+.badge.green { border-color: #bad8c8; color: #09603d; background: var(--emerald-soft); }
+.badge.blue { border-color: #b8d3ee; color: #145992; background: var(--blue-soft); }
+.badge.amber { border-color: #efc67d; color: var(--amber); background: var(--amber-soft); }
+.badge.red { border-color: #efb3ae; color: var(--red); background: var(--red-soft); }
+.progress { height: 6px; border-radius: 5px; background: #e6ece9; overflow: hidden; }
+.progress > span { display: block; height: 100%; background: var(--emerald-dark); border-radius: inherit; }
+.row { display: flex; align-items: center; gap: 10px; }
+.stack { display: grid; gap: 10px; }
+.divider { height: 1px; background: var(--line); }
+.more { font-weight: 700; letter-spacing: .15em; }
+.empty-note { padding: 28px; text-align: center; color: var(--muted); }
+
+/* Overview */
+.overview-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(270px,.82fr) minmax(250px,.72fr); gap: 14px; }
+.briefing { grid-row: span 2; }
+.briefing-intro { padding: 17px; border-bottom: 1px solid var(--line); background: #fcfdfb; }
+.briefing-intro strong { display: block; font: 400 24px var(--serif); margin-bottom: 5px; }
+.agenda-list { display: grid; }
+.agenda-item { display: grid; grid-template-columns: 48px 8px minmax(0,1fr) max-content; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); align-items: start; }
+.agenda-item:last-child { border-bottom: 0; }
+.agenda-item time { font: 11px var(--mono); color: var(--muted); }
+.agenda-item i { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: var(--emerald); }
+.agenda-item.blue i { background: var(--blue); }
+.agenda-item.amber i { background: #d48a18; }
+.agenda-item strong { display: block; margin-bottom: 4px; font-size: 13px; }
+.agenda-item small { color: var(--muted); }
+.metric-list { display: grid; gap: 13px; }
+.metric-line { display: grid; grid-template-columns: minmax(0,1fr) 38px; gap: 7px; }
+.metric-line .progress { grid-column: 1 / -1; }
+.source-list, .gap-list, .activity-list { display: grid; }
+.source-row, .gap-row, .activity-row { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
+.source-row:last-child, .gap-row:last-child, .activity-row:last-child { border-bottom: 0; }
+.source-row { display: grid; grid-template-columns: 38px minmax(0,1fr) max-content; gap: 10px; align-items: center; }
+.thumb {
+  width: 38px; height: 38px; object-fit: cover; border: 1px solid var(--line); border-radius: 5px; background: #f1f3f2;
+}
+.source-row strong, .source-row small { display: block; }
+.source-row strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.source-row small { font-size: 10px; color: var(--muted); margin-top: 3px; }
+.gap-row { display: grid; grid-template-columns: minmax(0,1fr) max-content; gap: 8px; }
+.gap-row strong { font-size: 12px; }
+.gap-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
+.roadmap-mini { display: grid; grid-template-columns: 76px repeat(8,1fr); gap: 4px; font-size: 9px; align-items: center; }
+.roadmap-mini span { height: 20px; border-radius: 3px; background: #eef2f0; }
+.roadmap-mini span.on { background: #cfe8d9; border: 1px solid #9dc9af; }
+.roadmap-mini span.info { background: #d9e8f7; border: 1px solid #b3cee8; }
+.roadmap-mini span.warn { background: #ffedc8; border: 1px solid #ecc77d; }
+.roadmap-mini b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.trust-inline { margin-top: 12px; padding: 10px; border: 1px solid #b7daca; border-radius: var(--radius); background: var(--emerald-soft); color: #0b6441; font-size: 11px; }
+
+/* Uploads */
+.uploads-grid { display: grid; grid-template-columns: 280px minmax(430px, 1.4fr) 320px; gap: 10px; }
+.upload-queue { min-height: 720px; }
+.queue-item { padding: 13px; border-bottom: 1px solid var(--line-soft); }
+.queue-title { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
+.queue-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.queue-item .progress { margin: 9px 0 7px; }
+.queue-item small { color: var(--muted); }
+.queue-item.selected { background: #f2f8f5; box-shadow: inset 3px 0 var(--emerald); }
+.dropzone { margin: 13px; padding: 18px; border: 1px dashed #a9b9b2; border-radius: var(--radius); text-align: center; background: #fafcfb; }
+.dropzone.drag { border-color: var(--emerald); background: var(--emerald-soft); }
+.doc-review { display: grid; grid-template-columns: 1fr .86fr; min-height: 720px; }
+.doc-pane { padding: 12px; background: #f2f3f1; border-right: 1px solid var(--line); }
+.doc-toolbar { display: flex; gap: 7px; align-items: center; padding-bottom: 10px; font-size: 11px; }
+.document-page { height: 635px; padding: 25px 22px; background: white; border: 1px solid #bac3bf; box-shadow: 0 3px 8px rgba(12,31,37,.08); overflow: hidden; }
+.document-page img { width: 100%; height: 100%; object-fit: contain; }
+.note-pane { background: #f5f3ee; overflow: hidden; }
+.note-pane img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
+.ocr-panel textarea {
+  width: 100%; min-height: 425px; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius);
+  resize: vertical; font: 11px/1.65 var(--mono); color: #27363a; background: white;
+}
+.language-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 9px 0 15px; }
+.ocr-actions { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8px; margin-top: 12px; }
+.confidence { margin: 9px 0 14px; color: var(--muted); font-size: 11px; }
+
+/* Canvas */
+.canvas-page { margin: -17px -26px -28px; min-height: calc(100dvh - 64px); background: #f7f8f6; }
+.canvas-head { min-height: 70px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: white; }
+.canvas-head h1 { margin: 0; font: 400 32px var(--serif); }
+.canvas-head h1 span { margin-left: 18px; font: 14px var(--serif); color: var(--muted); }
+.canvas-grid { display: grid; grid-template-columns: minmax(360px,1.04fr) minmax(360px,.95fr) minmax(320px,.86fr); height: calc(100dvh - 134px); gap: 10px; padding: 10px; }
+.canvas-grid .panel { display: flex; flex-direction: column; min-height: 0; }
+.slide-workspace { display: grid; grid-template-columns: 83px minmax(0,1fr); min-height: 0; flex: 1; }
+.slide-thumbs { padding: 8px; overflow-y: auto; background: #fafbf9; border-right: 1px solid var(--line); }
+.slide-thumb { height: 99px; margin-bottom: 9px; border: 1px solid var(--line); border-radius: 5px; background: white; padding: 6px; overflow: hidden; }
+.slide-thumb.active { border: 2px solid var(--emerald-dark); }
+.slide-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
+.slide-main { padding: 10px; background: #eef1ef; min-height: 0; }
+.slide-main img { width: 100%; height: 100%; object-fit: contain; background: white; border: 1px solid #bcc6c1; }
+.notes-main { min-height: 0; flex: 1; background: #f4f0e8; overflow: auto; }
+.notes-main img { width: 100%; min-height: 100%; object-fit: cover; object-position: top; }
+.chat { min-height: 0; display: flex; flex-direction: column; }
+.messages { flex: 1; overflow-y: auto; padding: 14px; display: grid; align-content: start; gap: 12px; }
+.message { max-width: 90%; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.55; }
+.message.user { justify-self: end; background: var(--emerald-soft); border-color: #bad8c8; }
+.message.ai { background: white; }
+.alert-card { padding: 12px; border: 1px solid #edc47f; border-radius: var(--radius); background: var(--amber-soft); line-height: 1.45; }
+.alert-card strong { color: var(--amber); display: block; margin-bottom: 7px; }
+.chat-compose { padding: 10px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 7px; }
+.chat-compose input { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
+
+/* Calendar */
+.calendar-grid { display: grid; grid-template-columns: minmax(620px,1.75fr) minmax(290px,.8fr); gap: 14px; }
+.week-calendar { min-height: 740px; }
+.week-grid { padding: 12px 14px; display: grid; grid-template-columns: 50px repeat(5,1fr); grid-template-rows: 28px repeat(7,55px); position: relative; }
+.week-grid > div { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
+.week-grid .day { text-align: center; padding: 5px; color: var(--muted); font-size: 10px; }
+.week-grid .time { padding-top: 7px; font: 9px var(--mono); color: var(--muted); border-right: 1px solid var(--line); }
+.event {
+  z-index: 2; margin: 3px 6px; padding: 6px; border: 1px solid #9fcab2; border-radius: 6px; background: var(--emerald-soft);
+  font-size: 9px; line-height: 1.35; overflow: hidden;
+}
+.event.blue { background: var(--blue-soft); border-color: #aecce9; }
+.event.amber { background: var(--amber-soft); border-color: #ecc57c; }
+.roadmap { padding: 13px; border-top: 1px solid var(--line); }
+.roadmap h3 { font: 600 17px var(--serif); margin: 0 0 12px; }
+.roadmap-grid { display: grid; grid-template-columns: 145px repeat(8,1fr); gap: 5px; font-size: 9px; align-items: center; }
+.roadmap-grid span { height: 25px; border-radius: 4px; background: #edf1ef; border: 1px solid #dce4df; }
+.roadmap-grid span.on { background: #d8ebdf; border-color: #a5ceb5; }
+.roadmap-grid span.blue { background: #dceaf7; border-color: #b7d0e7; }
+.roadmap-grid span.amber { background: #ffedc9; border-color: #edc77e; }
+.today-block { padding: 12px; border-left: 3px solid var(--emerald-dark); background: #f4f8f5; margin-bottom: 8px; }
+.today-block strong, .today-block small { display: block; }
+.today-block strong { font-size: 11px; margin-bottom: 4px; }
+.calendar-asset { width: 100%; max-height: 260px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 5px; }
+.extraction-row { display: grid; grid-template-columns: 65px minmax(0,1fr) max-content; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 11px; }
+
+/* Flashcards */
+.cards-grid { display: grid; grid-template-columns: 310px minmax(450px,1fr) 300px; gap: 14px; }
+.deck-row { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
+.deck-row:hover { background: #f8faf9; }
+.deck-row.selected { background: var(--emerald-soft); }
+.deck-row strong, .deck-row small { display: block; }
+.deck-row small { color: var(--muted); margin: 5px 0 8px; }
+.field { display: grid; gap: 6px; margin-bottom: 12px; }
+.field label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
+.field textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); resize: vertical; }
+.field.question textarea { min-height: 100px; font: 400 22px/1.25 var(--serif); }
+.field.answer textarea { min-height: 155px; line-height: 1.55; }
+.source-box { padding: 10px; border: 1px solid #bad2ea; border-radius: 5px; background: var(--blue-soft); color: #165b98; font-size: 11px; }
+.evidence-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
+.evidence-strip img { width: 100%; height: 82px; object-fit: cover; border: 1px solid var(--line); border-radius: 5px; }
+.card-preview { min-height: 245px; padding: 26px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: #fdfefc; cursor: pointer; }
+.card-preview small { color: var(--muted); text-transform: uppercase; }
+.card-preview strong { margin: 20px 0; font: 600 23px/1.12 var(--serif); }
+.card-preview .back { display: none; line-height: 1.55; }
+.card-preview.flipped .front { display: none; }
+.card-preview.flipped .back { display: block; }
+.export-list { display: grid; gap: 8px; }
+.export-list .button { width: 100%; }
+
+/* Quiz */
+.quiz-grid { display: grid; grid-template-columns: minmax(600px,1fr) 320px; gap: 14px; }
+.quiz-card { min-height: 720px; }
+.quiz-content { padding: 25px 34px; }
+.quiz-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
+.quiz-question { margin: 28px 0 21px; font: 400 clamp(25px,2.25vw,36px)/1.15 var(--serif); max-width: 900px; }
+.answers { display: grid; gap: 9px; }
+.answer-option {
+  width: 100%; min-height: 58px; padding: 12px 15px; display: grid; grid-template-columns: 28px minmax(0,1fr);
+  align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: white; cursor: pointer;
+}
+.answer-option:hover { border-color: #91aa9e; background: #fafcfb; }
+.answer-option.selected { border-color: var(--emerald); background: var(--emerald-soft); }
+.answer-option.wrong { border-color: #ea9e98; background: var(--red-soft); }
+.answer-letter { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #bdc9c3; border-radius: 50%; font-family: var(--serif); }
+.explanation { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
+.explanation h3 { margin: 0 0 7px; color: var(--emerald-dark); font: 400 20px var(--serif); }
+.source-citation { margin-top: 12px; padding: 10px; border: 1px solid #b8d0e8; border-radius: 5px; background: var(--blue-soft); color: #14558e; font-size: 11px; }
+.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.stat { padding: 12px; background: #f2f5f3; border-radius: 6px; }
+.stat strong, .stat small { display: block; }
+.stat strong { font: 400 23px var(--serif); }
+.stat small { margin-top: 3px; color: var(--muted); }
+.difficulty { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
+.difficulty button { min-height: 34px; border: 1px solid var(--line); border-radius: 5px; background: white; font-size: 10px; cursor: pointer; }
+.difficulty button.active { background: var(--emerald-dark); color: white; border-color: var(--emerald-dark); }
+.focus-list { display: grid; gap: 11px; }
+
+.scrim { display: none; position: fixed; inset: 0; z-index: 18; background: rgba(4,19,24,.45); }
+.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; padding: 11px 15px; border-radius: var(--radius); background: var(--sidebar); color: white; box-shadow: 0 8px 30px rgba(0,0,0,.18); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .18s ease; }
+.toast.show { opacity: 1; transform: translateY(0); }
+dialog { border: 0; padding: 0; border-radius: 10px; width: min(560px, calc(100vw - 28px)); color: var(--ink); }
+dialog::backdrop { background: rgba(4,19,24,.48); }
+.dialog-card { padding: 20px; }
+.dialog-head { display: flex; justify-content: space-between; gap: 20px; }
+.dialog-head small { color: var(--emerald-dark); }
+.dialog-head h2 { margin: 4px 0 18px; font: 400 27px var(--serif); }
+.dialog-card label { display: grid; gap: 7px; font-weight: 600; }
+.dialog-card textarea { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius); resize: vertical; }
+.trust-note { color: var(--muted); font-size: 11px; }
+.dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 18px; }
+
+@media (max-width: 1180px) {
+  .app-shell { grid-template-columns: 196px minmax(0,1fr); }
+  .user-label, .today { display: none; }
+  .topbar { grid-template-columns: minmax(220px,1fr) max-content max-content; }
+  .overview-grid { grid-template-columns: minmax(0,1.45fr) minmax(260px,.8fr); }
+  .overview-grid > :last-child { grid-column: 1 / -1; }
+  .uploads-grid { grid-template-columns: 240px minmax(420px,1fr); }
+  .ocr-panel { grid-column: 1 / -1; }
+  .canvas-grid { grid-template-columns: 1fr 1fr; height: auto; }
+  .canvas-grid > :last-child { grid-column: 1 / -1; min-height: 580px; }
+  .calendar-grid { grid-template-columns: 1fr; }
+  .cards-grid { grid-template-columns: 250px minmax(420px,1fr); }
+  .cards-grid > :last-child { grid-column: 1 / -1; }
+}
+
+@media (max-width: 820px) {
+  .app-shell { display: block; }
+  .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: 260px; transition: transform .2s ease; }
+  .sidebar.open { transform: translateX(0); }
+  .scrim.show { display: block; }
+  .menu-button { display: block; }
+  .topbar { grid-template-columns: 38px minmax(0,1fr) max-content; padding: 0 12px; }
+  .topbar .notification { display: none; }
+  main { padding: 16px; }
+  .page-head { align-items: start; }
+  .page-head h1 { font-size: 34px; }
+  .head-actions { flex-wrap: wrap; justify-content: end; }
+  .overview-grid, .uploads-grid, .calendar-grid, .cards-grid, .quiz-grid { grid-template-columns: 1fr; }
+  .overview-grid > *, .uploads-grid > *, .cards-grid > * { grid-column: auto !important; }
+  .upload-queue { min-height: auto; }
+  .doc-review { min-height: 620px; }
+  .canvas-page { margin: -16px; }
+  .canvas-head { align-items: start; }
+  .canvas-head h1 span { display: block; margin: 5px 0 0; }
+  .canvas-grid { grid-template-columns: 1fr; height: auto; }
+  .canvas-grid > :last-child { grid-column: auto; }
+  .canvas-grid .panel { min-height: 650px; }
+  .roadmap-grid { grid-template-columns: 110px repeat(8, minmax(45px,1fr)); overflow-x: auto; }
+  .quiz-card { min-height: auto; }
+}
+
+@media (max-width: 560px) {
+  .topbar { height: 58px; }
+  .ask-button { padding: 8px 10px; font-size: 0; }
+  .ask-button::after { content: "✦"; font-size: 16px; }
+  main { min-height: calc(100dvh - 58px); padding: 12px; }
+  .page-head { display: grid; }
+  .head-actions { justify-content: start; }
+  .page-head h1 { font-size: 31px; }
+  .panel-head h2 { font-size: 18px; }
+  .agenda-item { grid-template-columns: 44px 7px minmax(0,1fr); }
+  .agenda-item .badge { grid-column: 3; justify-self: start; }
+  .doc-review { grid-template-columns: 1fr; min-height: auto; }
+  .doc-pane { border-right: 0; border-bottom: 1px solid var(--line); }
+  .document-page { height: 520px; }
+  .note-pane { height: 520px; }
+  .canvas-page { margin: -12px; }
+  .canvas-head { min-height: 110px; display: grid; }
+  .canvas-head .head-actions { display: none; }
+  .canvas-grid { padding: 7px; gap: 7px; }
+  .canvas-grid .panel { min-height: 560px; }
+  .slide-workspace { grid-template-columns: 64px minmax(0,1fr); }
+  .slide-thumb { height: 75px; }
+  .week-grid { overflow-x: auto; grid-template-columns: 45px repeat(5, 130px); }
+  .cards-grid .panel, .quiz-grid .panel { min-width: 0; }
+  .quiz-content { padding: 18px 15px; }
+  .quiz-question { font-size: 27px; }
+  .answer-option { grid-template-columns: 26px minmax(0,1fr); }
+  .field.question textarea { font-size: 19px; }
+  .toast { left: 12px; right: 12px; bottom: 12px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
+}
+
+/* Josephine editorial redesign */
+:root {
+  --sidebar: #fbfaf6;
+  --sidebar-2: #f7f4ed;
+  --paper: #fbfaf6;
+  --surface: #fffefa;
+  --ink: #25211f;
+  --muted: #756f69;
+  --line: #ded9d0;
+  --line-soft: #eeeae3;
+  --emerald: #146a57;
+  --emerald-dark: #0f5848;
+  --emerald-soft: #edf5f0;
+  --aubergine: #54203f;
+  --aubergine-soft: #f3eaf0;
+  --rose: #ca6478;
+  --rose-soft: #faedf0;
+  --gold: #a9751e;
+  --gold-soft: #fbf3e5;
+  --serif: "Cormorant Garamond", Georgia, serif;
+  --sans: "DM Sans", "Segoe UI", sans-serif;
+}
+
+body { font-family: var(--sans); background: var(--paper); }
+.app-shell { grid-template-columns: 178px minmax(0, 1fr); }
+.sidebar {
+  padding: 26px 13px 22px;
+  background: var(--sidebar);
+  color: var(--ink);
+  border-right: 1px solid var(--line);
+  box-shadow: none;
+}
+.brand { gap: 8px; padding: 2px 10px 26px; }
+.brand-mark {
+  display: grid; place-items: center; width: 29px; height: 35px;
+  color: var(--emerald); background: none; clip-path: none; font-size: 27px;
+}
+.brand-name { font: 500 18px/1 var(--serif); color: #292522; letter-spacing: 0; }
+.profile {
+  display: none;
+}
+.nav-list { gap: 5px; }
+.nav-list button {
+  min-height: 48px; padding: 10px 13px; gap: 12px;
+  border: 1px solid transparent; border-radius: 7px;
+  color: #393431; background: transparent;
+  font: 500 13px/1 var(--serif);
+}
+.nav-list button > i { width: 21px; font-size: 21px; }
+.nav-list button:hover { background: #f2eee7; }
+.nav-list button.active {
+  color: white; background: var(--emerald-dark); border-color: var(--emerald-dark);
+}
+.local-status {
+  margin-top: auto; padding: 13px 10px 0;
+  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent;
+  color: var(--muted); font-size: 10px; line-height: 1.55;
+}
+.local-status strong { color: #554f4a; font-size: 10px; font-weight: 500; }
+.status-dot { width: 7px; height: 7px; background: var(--emerald); }
+
+.topbar {
+  height: 58px; padding: 0 24px;
+  grid-template-columns: max-content minmax(250px, 430px) max-content max-content max-content;
+  background: rgba(251,250,246,.96);
+}
+.app-main:has(.josephine-home) .topbar { display: none; }
+.app-main:has(.josephine-home) main { padding: 0; min-height: 100dvh; }
+.global-search, .ask-button, .button { border-radius: 6px; }
+.page-head h1 { font-family: var(--serif); color: var(--aubergine); letter-spacing: 0; }
+
+.josephine-home { min-height: 100dvh; background: var(--surface); }
+.josephine-hero {
+  position: relative; min-height: 500px; overflow: hidden; background: #eee4d5;
+}
+.josephine-hero > img {
+  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
+}
+.josephine-hero::after {
+  content: ""; position: absolute; inset: 0 auto 0 0; width: 53%;
+  background: linear-gradient(90deg, rgba(252,249,242,.97) 0%, rgba(252,249,242,.72) 62%, rgba(252,249,242,0) 100%);
+  pointer-events: none;
+}
+.weather-line {
+  position: absolute; z-index: 2; top: 31px; left: 47px;
+  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
+  border-radius: 18px; background: rgba(255,255,255,.55); color: #514a45;
+  backdrop-filter: blur(8px); font: 13px var(--serif);
+}
+.weather-line i { font-size: 17px; }
+.hero-copy {
+  position: absolute; z-index: 2; left: 47px; top: 83px; width: min(440px, 43%);
+}
+.hero-copy h1 {
+  margin: 0; color: var(--aubergine);
+  font: 500 clamp(65px, 7vw, 106px)/.77 var(--serif);
+  letter-spacing: -2px;
+}
+.hero-motto {
+  margin: 16px 0 26px !important; color: #8a684c !important;
+  font: italic 22px/1.2 var(--serif); letter-spacing: .02em;
+}
+.hero-copy h2 { margin: 0 0 8px; font: 500 29px/1.1 var(--serif); }
+.hero-copy > p:last-child { margin: 0; color: #4f4a45; font-size: 13px; line-height: 1.55; }
+
+.daily-journal {
+  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(315px, .9fr);
+  min-height: 448px; background: #fffefa;
+}
+.journal-agenda { padding: 23px 34px 29px 47px; border-right: 1px solid var(--line); }
+.journal-agenda > header, .today-important > header {
+  display: flex; align-items: center; gap: 10px; min-height: 38px;
+  padding-bottom: 10px; border-bottom: 1px solid var(--line);
+}
+.journal-agenda header > i, .today-important header > i { font-size: 20px; }
+.journal-agenda header h2, .today-important header h2 {
+  margin: 0; font: 500 20px/1 var(--serif);
+}
+.journal-agenda header span { margin-left: 8px; color: #79685b; font: italic 19px var(--serif); }
+.day-list { position: relative; padding-left: 25px; }
+.day-list::before {
+  content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: #ddd7ce;
+}
+.day-entry {
+  position: relative; width: 100%; min-height: 69px; padding: 10px 5px 10px 9px;
+  display: grid; grid-template-columns: 72px 45px minmax(0,1fr) 20px; gap: 10px; align-items: center;
+  border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; text-align: left; cursor: pointer;
+}
+.day-entry::before {
+  content: ""; position: absolute; left: -25px; top: 31px; width: 8px; height: 8px;
+  border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px #fffefa;
+}
+.day-entry.blue::before { background: #3d7298; }
+.day-entry.rose::before { background: var(--rose); }
+.day-entry.aubergine::before { background: var(--aubergine); }
+.day-entry.gold::before { background: var(--gold); }
+.day-entry:hover { background: #fbf8f2; }
+.day-entry time { color: var(--emerald); font: 500 23px var(--serif); }
+.day-entry.blue time { color: #3d7298; }
+.day-entry.rose time { color: var(--rose); }
+.day-entry.aubergine time { color: var(--aubergine); }
+.day-entry.gold time { color: var(--gold); }
+.day-icon {
+  display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%;
+  color: var(--emerald); background: var(--emerald-soft); font-size: 21px;
+}
+.blue .day-icon { color: #3d7298; background: #edf3f7; }
+.rose .day-icon { color: var(--rose); background: var(--rose-soft); }
+.aubergine .day-icon { color: var(--aubergine); background: var(--aubergine-soft); }
+.gold .day-icon { color: var(--gold); background: var(--gold-soft); }
+.day-entry strong, .day-entry small { display: block; }
+.day-entry strong { margin-bottom: 4px; font: 500 16px var(--serif); }
+.day-entry small { color: var(--muted); font-size: 10px; line-height: 1.4; }
+.entry-arrow { opacity: 0; color: var(--muted); }
+.day-entry:hover .entry-arrow { opacity: 1; }
+
+.today-important { padding: 23px 31px 29px; }
+.important-row {
+  width: 100%; min-height: 92px; padding: 13px 4px;
+  display: grid; grid-template-columns: 45px minmax(0,1fr) 18px; gap: 12px; align-items: center;
+  border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; text-align: left; cursor: pointer;
+}
+.important-row:hover { background: #fbf8f2; }
+.important-icon {
+  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
+  background: var(--rose-soft); color: var(--rose); font-size: 21px;
+}
+.important-row.gap .important-icon { background: var(--aubergine-soft); color: var(--aubergine); }
+.important-row.next { margin-top: 14px; padding: 13px; border: 0; border-radius: 8px; background: var(--emerald-soft); }
+.important-row.next .important-icon { background: #fff; color: var(--emerald); }
+.important-row small, .important-row strong, .important-row em { display: block; }
+.important-row small { margin-bottom: 4px; color: var(--rose); font-size: 10px; font-style: normal; }
+.important-row.gap small { color: #8e5480; }
+.important-row.next small { color: var(--emerald); }
+.important-row strong { margin-bottom: 4px; font: 500 15px var(--serif); }
+.important-row em { color: var(--muted); font-size: 10px; font-style: normal; }
+.journal-note {
+  margin: 25px 0 0 54px; color: #5c907d; transform: rotate(-2deg);
+  font: italic 18px/1.25 var(--serif);
+}
+
+.quiet-page {
+  max-width: 1120px; margin: 0 auto; display: grid; gap: 18px;
+}
+.quiet-page.two-column { grid-template-columns: minmax(320px,.8fr) minmax(480px,1.2fr); }
+.plan-intro, .focus-story, .reminder-date {
+  padding: 35px 0 28px; border-bottom: 1px solid var(--line);
+}
+.eyebrow { color: var(--emerald); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
+.plan-intro h2, .focus-story h2 {
+  margin: 10px 0; color: var(--aubergine); font: 500 38px/1.05 var(--serif);
+}
+.plan-intro p, .focus-story p { max-width: 620px; color: var(--muted); line-height: 1.65; }
+.plan-days, .calm-list { display: grid; border-top: 1px solid var(--line); }
+.plan-days button, .calm-list button {
+  min-height: 78px; display: grid; grid-template-columns: 120px minmax(0,1fr) max-content;
+  gap: 18px; align-items: center; padding: 14px 8px; border: 0; border-bottom: 1px solid var(--line);
+  background: transparent; text-align: left; cursor: pointer;
+}
+.plan-days button:hover, .calm-list button:hover { background: #f8f5ef; }
+.plan-days time { color: var(--emerald); font: 500 19px var(--serif); }
+.plan-days strong, .plan-days span, .calm-list strong, .calm-list small { display: block; }
+.plan-days strong, .calm-list strong { font: 500 17px var(--serif); }
+.plan-days span, .calm-list small { margin-top: 4px; color: var(--muted); font-size: 11px; }
+.calm-list button { grid-template-columns: 12px minmax(0,1fr) max-content; }
+.calm-list em { color: var(--muted); font-size: 11px; font-style: normal; }
+.signal { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); }
+.signal.red { background: var(--rose); }
+.signal.amber { background: var(--gold); }
+.reminders-page { grid-template-columns: 260px minmax(0,1fr); align-items: start; }
+.reminder-date { border: 0; }
+.reminder-date span, .reminder-date strong { display: block; font-family: var(--serif); }
+.reminder-date span { color: var(--emerald); font-size: 18px; }
+.reminder-date strong { color: var(--aubergine); font-size: 48px; }
+.reminder-date p { color: var(--muted); line-height: 1.55; }
+.reminders-page .calm-list button { grid-template-columns: 45px minmax(0,1fr) max-content; }
+
+@media (max-width: 1050px) {
+  .app-shell { grid-template-columns: 164px minmax(0,1fr); }
+  .hero-copy { width: 48%; }
+  .hero-copy h1 { font-size: 72px; }
+  .daily-journal { grid-template-columns: 1fr; }
+  .journal-agenda { border-right: 0; border-bottom: 1px solid var(--line); }
+}
+
+@media (max-width: 820px) {
+  .sidebar { width: 250px; }
+  .app-main:has(.josephine-home) .topbar { display: grid; }
+  .app-main:has(.josephine-home) main { padding: 0; }
+  .josephine-hero { min-height: 610px; }
+  .josephine-hero > img { object-position: 66% center; }
+  .josephine-hero::after { width: 72%; }
+  .hero-copy { left: 28px; top: 80px; width: 58%; }
+  .weather-line { left: 28px; }
+  .journal-agenda, .today-important { padding-left: 24px; padding-right: 24px; }
+  .quiet-page.two-column, .reminders-page { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 560px) {
+  .josephine-hero { min-height: 690px; background: #fffefa; }
+  .josephine-hero > img { height: 390px; object-position: 68% center; }
+  .josephine-hero::after { display: none; }
+  .hero-copy {
+    top: 390px; left: 0; width: 100%; padding: 19px 20px 22px;
+    background: #fffefa;
+  }
+  .hero-copy h1 { font-size: 52px; line-height: .78; }
+  .hero-motto { margin: 13px 0 18px !important; font-size: 17px; }
+  .hero-copy h2 { margin: 0 0 7px; font-size: 25px; }
+  .weather-line { top: 20px; left: 20px; font-size: 11px; }
+  .journal-agenda, .today-important { padding: 20px 15px; }
+  .day-list { padding-left: 17px; }
+  .day-entry { grid-template-columns: 55px 37px minmax(0,1fr); gap: 7px; }
+  .day-entry::before { left: -17px; }
+  .day-entry time { font-size: 19px; }
+  .day-icon { width: 34px; height: 34px; }
+  .entry-arrow { display: none; }
+}