Redesign student UI and add OnlyOffice document integration

- Student section: new hero gradient header, fixed bottom nav bar with
  icon+label pills (Today/Courses/Spelling/Inbox/Docs)
- Today rows: card style with left accent stripe, lift on hover
- Course cards: grid layout with top color bar per course
- Docs tab: list view with doc cards, OnlyOffice editor embedded via
  iframe using server-signed JWT config
- Server: documents table, CRUD routes, OnlyOffice callback endpoint
  for auto-save, /api/docs/:id/editor-config returns signed config
- Blank DOCX template embedded as base64 for new document creation
- OnlyOffice server: https://onlyoffice.necloud.us (set ONLYOFFICE_JWT_SECRET
  env var to match your Document Server JWT secret)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/admin.js

@@ -216,7 +216,7 @@ async function loadDashboard() {
 
     const scores = recentScores.scores || recentScores || [];
     scoresEl.innerHTML = scores.length ? scores.slice(0, 8).map(sc => {
-      const pct = sc.total > 0 ? Math.round(sc.score / sc.total * 100) : null;
+      const pct = sc.points_possible > 0 ? Math.round(sc.score / sc.points_possible * 100) : null;
       const cls = pct === null ? '' : pct >= 80 ? '' : pct >= 60 ? ' mid' : ' low';
       const kidName = students.find(s => s.id === sc.student_id)?.name || '';
       return `<div class="dash-score-item">

public/app.js

@@ -313,7 +313,7 @@ document.querySelectorAll('.nav-pill').forEach((pill) =>
   pill.addEventListener('click', () => switchTab(pill.dataset.tab))
 );
 
-const TAB_ORDER = ['today', 'courses', 'spelling', 'inbox'];
+const TAB_ORDER = ['today', 'courses', 'spelling', 'inbox', 'docs'];
 let currentTab = 'today';
 
 function switchTab(name) {
@@ -331,6 +331,7 @@ function switchTab(name) {
     }
   });
   if (name === 'inbox') loadInbox();
+  if (name === 'docs') loadDocs();
 }
 
 function inboxSeenKey(studentId) { return `inbox_seen_${studentId}`; }
@@ -2518,6 +2519,117 @@ $('#btn-test').addEventListener('click', () => {
   startTest();
 });
 
+// ---------- docs (OnlyOffice) ----------
+
+let docsEditorInstance = null;
+let currentDocId = null;
+
+async function loadDocs() {
+  const sid = currentStudent?.id;
+  if (!sid) return;
+  const { docs } = await api(`/api/docs?studentId=${sid}`);
+  const list = $('#docs-list');
+  const empty = $('#docs-empty');
+  if (!docs.length) {
+    list.innerHTML = '';
+    empty.hidden = false;
+    return;
+  }
+  empty.hidden = true;
+  list.innerHTML = docs.map((d) => `
+    <div class="doc-card${d.submitted ? ' doc-submitted' : ''}" data-id="${d.id}" data-key="${esc(d.doc_key)}" data-title="${esc(d.title)}">
+      <div class="doc-card-icon">📄</div>
+      <div class="doc-card-info">
+        <div class="doc-card-title">${esc(d.title)}</div>
+        <div class="doc-card-meta">${d.submitted ? '✓ Submitted' : 'Draft'} · ${new Date(d.updated_at + 'Z').toLocaleDateString()}</div>
+      </div>
+      <button class="doc-delete-btn" data-id="${d.id}" aria-label="Delete">🗑</button>
+    </div>
+  `).join('');
+
+  list.querySelectorAll('.doc-card').forEach((card) => {
+    card.addEventListener('click', (e) => {
+      if (e.target.closest('.doc-delete-btn')) return;
+      openDocEditor(+card.dataset.id, card.dataset.key, card.dataset.title);
+    });
+  });
+  list.querySelectorAll('.doc-delete-btn').forEach((btn) => {
+    btn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      if (!confirm('Delete this document?')) return;
+      await api(`/api/docs/${btn.dataset.id}`, { method: 'DELETE' });
+      loadDocs();
+    });
+  });
+}
+
+async function openDocEditor(id, key, title) {
+  currentDocId = id;
+  $('#docs-list-view').hidden = true;
+  $('#docs-editor-view').hidden = false;
+  $('#docs-editor-title').textContent = title;
+  $('#btn-docs-submit').disabled = false;
+  $('#btn-docs-submit').textContent = 'Submit to Parent ✓';
+
+  const frame = $('#docs-editor-frame');
+  frame.innerHTML = '';
+  if (docsEditorInstance) {
+    try { docsEditorInstance.destroyEditor(); } catch { /* ignore */ }
+    docsEditorInstance = null;
+  }
+
+  const { onlyofficeUrl, config } = await api(`/api/docs/${id}/editor-config`).catch(() => null) || {};
+  if (!onlyofficeUrl || !config) {
+    frame.innerHTML = `<div class="docs-error">Could not load document config from server.</div>`;
+    return;
+  }
+
+  const apiScript = `${onlyofficeUrl}/web-apps/apps/api/documents/api.js`;
+
+  function initEditor() {
+    docsEditorInstance = new window.DocsAPI.DocEditor('docs-editor-frame', config);
+  }
+
+  if (window.DocsAPI) {
+    initEditor();
+  } else {
+    const s = document.createElement('script');
+    s.src = apiScript;
+    s.onload = initEditor;
+    s.onerror = () => {
+      frame.innerHTML = `<div class="docs-error">Could not load OnlyOffice editor from <code>${onlyofficeUrl}</code>. Make sure the server at <strong>${onlyofficeUrl}</strong> is reachable from this device.</div>`;
+    };
+    document.head.appendChild(s);
+  }
+}
+
+$('#btn-new-doc').addEventListener('click', async () => {
+  const title = prompt('Document title:', 'Untitled Document');
+  if (!title) return;
+  const { id, key } = await api('/api/docs', { method: 'POST', body: { studentId: currentStudent.id, title } });
+  loadDocs();
+  openDocEditor(id, key, title);
+});
+
+$('#btn-docs-back').addEventListener('click', () => {
+  if (docsEditorInstance) {
+    try { docsEditorInstance.destroyEditor(); } catch { /* ignore */ }
+    docsEditorInstance = null;
+  }
+  $('#docs-editor-frame').innerHTML = '';
+  $('#docs-editor-view').hidden = true;
+  $('#docs-list-view').hidden = false;
+  loadDocs();
+});
+
+$('#btn-docs-submit').addEventListener('click', async () => {
+  if (!currentDocId) return;
+  if (!confirm('Submit this document to your parent?')) return;
+  await api(`/api/docs/${currentDocId}/submit`, { method: 'POST' });
+  $('#btn-docs-submit').textContent = '✓ Submitted!';
+  $('#btn-docs-submit').disabled = true;
+});
+
 // ---------- boot ----------
 
 loadHome();

public/index.html

@@ -44,15 +44,17 @@
 
   <!-- Kid home: Today's work + nav -->
   <section id="view-kid" class="view" hidden>
-    <div class="kid-topbar">
-      <button class="back-btn" data-nav="home">← Switch</button>
-      <div class="kid-topbar-actions">
-        <button id="icon-picker-btn" class="theme-picker-btn" aria-label="Change my animal">🐾</button>
-        <button id="theme-picker-btn" class="theme-picker-btn" aria-label="Pick my color">🎨</button>
-        <button id="bg-picker-btn" class="theme-picker-btn" aria-label="Pick my background">🖼️</button>
+    <div class="kid-hero">
+      <div class="kid-topbar">
+        <button class="back-btn" data-nav="home">← Switch</button>
+        <div class="kid-topbar-actions">
+          <button id="icon-picker-btn" class="theme-picker-btn" aria-label="Change my animal">🐾</button>
+          <button id="theme-picker-btn" class="theme-picker-btn" aria-label="Pick my color">🎨</button>
+          <button id="bg-picker-btn" class="theme-picker-btn" aria-label="Pick my background">🖼️</button>
+        </div>
       </div>
+      <h1 id="kid-greeting"></h1>
     </div>
-    <h1 id="kid-greeting"></h1>
     <div id="theme-dots" class="theme-dots" hidden>
       <button class="theme-dot theme-blue"   data-theme="blue"   title="Blue"></button>
       <button class="theme-dot theme-green"  data-theme="green"  title="Green"></button>
@@ -75,10 +77,11 @@
     </div>
 
     <div class="kid-nav">
-      <button class="nav-pill active" data-tab="today">📋 Today</button>
-      <button class="nav-pill" data-tab="courses">📚 My Courses</button>
-      <button class="nav-pill" data-tab="spelling">✏️ Spelling</button>
-      <button class="nav-pill" data-tab="inbox">📬 Inbox<span id="inbox-badge" class="feedback-badge" hidden></span></button>
+      <button class="nav-pill active" data-tab="today"><span class="np-icon">📋</span><span class="np-label">Today</span></button>
+      <button class="nav-pill" data-tab="courses"><span class="np-icon">📚</span><span class="np-label">Courses</span></button>
+      <button class="nav-pill" data-tab="spelling"><span class="np-icon">✏️</span><span class="np-label">Spelling</span></button>
+      <button class="nav-pill" data-tab="inbox"><span class="np-icon">📬</span><span class="np-label">Inbox<span id="inbox-badge" class="feedback-badge" hidden></span></span></button>
+      <button class="nav-pill" data-tab="docs"><span class="np-icon">📝</span><span class="np-label">Docs</span></button>
     </div>
 
     <div id="tab-today" class="tab-panel">
@@ -124,6 +127,24 @@
         </form>
       </div>
     </div>
+
+    <div id="tab-docs" class="tab-panel" hidden>
+      <div id="docs-list-view">
+        <div class="docs-toolbar">
+          <button id="btn-new-doc" class="docs-new-btn">+ New Document</button>
+        </div>
+        <div id="docs-list"></div>
+        <p id="docs-empty" class="hint" hidden>No documents yet — tap + New Document to start writing!</p>
+      </div>
+      <div id="docs-editor-view" hidden>
+        <div class="docs-editor-toolbar">
+          <button id="btn-docs-back" class="docs-back-btn">← Back</button>
+          <span id="docs-editor-title" class="docs-editor-title-text"></span>
+          <button id="btn-docs-submit" class="docs-submit-btn">Submit to Parent ✓</button>
+        </div>
+        <div id="docs-editor-frame"></div>
+      </div>
+    </div>
   </section>
 
   <!-- All-done celebration overlay -->

public/styles.css

@@ -259,11 +259,72 @@ body:has(#view-home:not([hidden])) .page-confetti { display: block; }
 
 /* ============================================================ KID HOME (inner) */
 
+/* Full-width hero with kid accent gradient */
+#view-kid {
+  max-width: 100%;
+  padding: 0 0 5rem;
+  text-align: left;
+}
+
+.kid-hero {
+  background: linear-gradient(160deg, var(--kid-accent, var(--accent)) 0%,
+              color-mix(in srgb, var(--kid-accent, var(--accent)) 55%, #0d1b3e) 100%);
+  padding-bottom: 2rem;
+  position: relative;
+  overflow: hidden;
+}
+.kid-hero::before {
+  content: '';
+  position: absolute; inset: 0; pointer-events: none;
+  background: radial-gradient(circle at 80% -10%, rgba(255,255,255,.15) 0%, transparent 55%);
+}
+
+#view-kid .kid-topbar {
+  background: rgba(0,0,0,.12);
+  padding: .65rem 1.1rem;
+  border-bottom: none;
+}
+#view-kid .back-btn {
+  background: rgba(255,255,255,.18);
+  border-color: rgba(255,255,255,.25);
+  color: #fff;
+  backdrop-filter: blur(8px);
+}
+#view-kid .back-btn:hover {
+  background: rgba(255,255,255,.28);
+  color: #fff;
+}
+#view-kid .theme-picker-btn {
+  background: rgba(255,255,255,.18);
+  border: 1.5px solid rgba(255,255,255,.25);
+  color: #fff;
+}
+#view-kid .theme-picker-btn:hover { background: rgba(255,255,255,.28); }
+
 #kid-greeting {
   font-family: var(--font-kid);
-  font-size: 2rem;
-  font-weight: 800;
-  margin: 1rem 0; clear: both;
+  font-size: 2.2rem;
+  font-weight: 900;
+  color: #fff;
+  text-shadow: 0 2px 12px rgba(0,0,0,.18);
+  padding: .75rem 1.5rem 0;
+  margin: 0;
+  clear: both;
+  position: relative;
+  z-index: 1;
+}
+
+.streak-pill {
+  display: inline-block;
+  background: rgba(255,255,255,.2);
+  color: #fff;
+  border-radius: 999px;
+  padding: .3rem .9rem;
+  font-size: .88rem; font-weight: 700;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255,255,255,.25);
+  margin: .5rem 0 0 1.5rem;
+  position: relative; z-index: 1;
 }
 
 .week-card {
@@ -566,65 +627,123 @@ table.results tr:hover td { background: #fafbff; }
   color: var(--accent); text-decoration: underline; cursor: pointer; font-size: .9rem;
 }
 
-/* ============================================================ KID NAV PILLS */
+/* ============================================================ KID NAV PILLS — BOTTOM BAR */
 
 .kid-nav {
-  display: flex; gap: .4rem; justify-content: center;
-  margin: .5rem 0 1.5rem; clear: both; flex-wrap: wrap;
+  position: fixed;
+  bottom: 0; left: 0; right: 0;
+  display: flex; justify-content: space-around;
+  background: var(--card);
+  border-top: 1.5px solid var(--border);
+  padding: .45rem .5rem .6rem;
+  z-index: 100;
+  box-shadow: 0 -4px 24px rgba(0,0,0,.08);
 }
-.nav-pill {
-  font-family: var(--font-kid);
-  font-size: .95rem; font-weight: 700;
-  background: rgba(0,0,0,.05); color: var(--ink-2);
-  border: 1.5px solid var(--border);
-  border-radius: 999px; padding: .45rem 1.1rem; cursor: pointer;
-  transition: background .15s, color .15s, border-color .15s;
-}
-.nav-pill:hover { background: rgba(0,0,0,.08); color: var(--ink); }
-.nav-pill.active {
-  background: var(--accent); color: #fff; border-color: var(--accent);
-}
-.nav-pill.active:hover { background: var(--accent-dark); }
 
-.tab-panel { text-align: left; }
+.nav-pill {
+  flex: 1;
+  display: flex; flex-direction: column; align-items: center; gap: .15rem;
+  font-family: var(--font-kid);
+  font-size: .62rem; font-weight: 700; letter-spacing: .01em;
+  background: none; color: var(--muted);
+  border: none;
+  border-radius: 12px;
+  padding: .4rem .25rem .25rem;
+  cursor: pointer;
+  transition: color .15s, background .15s;
+  line-height: 1.1;
+  min-width: 0;
+}
+.nav-pill .np-icon { font-size: 1.35rem; line-height: 1; display: block; transition: transform .15s; }
+.nav-pill .np-label { display: block; white-space: nowrap; }
+.nav-pill:hover { color: var(--ink); }
+.nav-pill:hover .np-icon { transform: translateY(-2px); }
+.nav-pill.active { color: var(--kid-accent, var(--accent)); }
+.nav-pill.active .np-icon { filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); transform: translateY(-2px); }
+
+/* Admin nav pills still need old behaviour — scoped below in admin section */
+
+.tab-panel {
+  text-align: left;
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 1.25rem 1.25rem 1.5rem;
+}
 @keyframes tab-slide-right { from { transform: translateX(48px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
 @keyframes tab-slide-left  { from { transform: translateX(-48px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
 .tab-panel.sliding-right { animation: tab-slide-right .24s ease; }
 .tab-panel.sliding-left  { animation: tab-slide-left  .24s ease; }
 
+/* Pickers appear below the hero but above the tab panels */
+#view-kid #theme-dots,
+#view-kid #icon-grid,
+#view-kid #bg-pattern-panel {
+  max-width: 640px;
+  margin: .75rem auto 0;
+  padding: 0 1.25rem;
+}
+
 /* ============================================================ TODAY ROWS */
 
+.today-list { display: flex; flex-direction: column; gap: .65rem; }
+
 .today-row {
-  display: flex; align-items: center; gap: .85rem; width: 100%;
-  background: var(--card); border: 1.5px solid var(--border);
-  border-radius: var(--radius); padding: 1rem 1.15rem;
-  margin: .45rem 0; cursor: pointer; text-align: left;
+  display: flex; align-items: center; gap: 1rem; width: 100%;
+  background: var(--card);
+  border: none;
+  border-radius: 16px;
+  padding: 1.1rem 1.25rem 1.1rem 1.5rem;
+  margin: 0; cursor: pointer; text-align: left;
   font-family: inherit;
-  transition: border-color .15s, box-shadow .15s, transform .1s;
+  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1.5px var(--border);
+  transition: transform .15s ease, box-shadow .15s ease;
+  position: relative; overflow: hidden;
+}
+.today-row::before {
+  content: '';
+  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
+  background: var(--accent);
+  border-radius: 4px 0 0 4px;
 }
 .today-row:hover {
-  border-color: var(--accent); box-shadow: var(--shadow-sm);
-  transform: translateX(2px);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0,0,0,.1), 0 0 0 1.5px var(--border-hover);
 }
-.today-row .row-check { font-size: 1.35rem; flex-shrink: 0; }
-.today-row .row-title { flex: 1; font-size: 1rem; font-weight: 700; color: var(--ink); }
-.today-row .row-title small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; }
-.today-row .row-badge { font-size: .82rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
+.today-row .row-check { font-size: 1.4rem; flex-shrink: 0; width: 2rem; text-align: center; }
+.today-row .row-title { flex: 1; font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
+.today-row .row-title small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; margin-top: .12rem; }
+.today-row .row-badge { font-size: .78rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
 
 /* ============================================================ COURSE CARDS */
 
-.course-cards { display: flex; flex-direction: column; gap: .65rem; }
+.course-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: .85rem;
+}
 .course-card {
   display: flex; flex-direction: column; gap: .35rem; text-align: left;
-  background: var(--card); border: 1.5px solid var(--border);
-  border-left: 5px solid var(--accent);
-  border-radius: var(--radius); padding: 1rem 1.2rem; cursor: pointer; font-family: inherit;
-  transition: border-color .15s, box-shadow .15s, transform .1s;
+  background: var(--card);
+  border: none;
+  border-radius: 16px;
+  padding: 1.25rem 1.3rem;
+  cursor: pointer; font-family: inherit;
+  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1.5px var(--border);
+  transition: transform .15s ease, box-shadow .15s ease;
+  position: relative; overflow: hidden;
 }
-.course-card:hover { box-shadow: var(--shadow); transform: translateX(2px); }
-.course-card strong { font-size: 1.1rem; }
-.course-subject { color: var(--muted); font-size: .875rem; }
-.course-pct { font-size: .82rem; color: var(--muted); }
+.course-card::before {
+  content: '';
+  position: absolute; top: 0; left: 0; right: 0; height: 5px;
+  background: var(--course-color, var(--accent));
+}
+.course-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 0 0 1.5px var(--border-hover);
+}
+.course-card strong { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
+.course-subject { color: var(--muted); font-size: .82rem; }
+.course-pct { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
 
 /* ============================================================ UNIT BLOCKS (shared) */
 
@@ -2040,3 +2159,60 @@ body.bg-bubbles {
 @media (prefers-color-scheme: dark) {
   .ws-blank-input { color: #e2e8f0; }
 }
+
+/* ============================================================ DOCS TAB */
+
+.docs-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
+.docs-new-btn {
+  background: var(--accent); color: #fff; border: none;
+  border-radius: 12px; padding: .6rem 1.2rem; font-size: .95rem; font-weight: 700;
+  cursor: pointer; font-family: inherit; transition: opacity .15s;
+}
+.docs-new-btn:hover { opacity: .85; }
+
+.doc-card {
+  display: flex; align-items: center; gap: 1rem;
+  background: var(--card); border: none; border-radius: 16px;
+  padding: 1rem 1.25rem; margin-bottom: .65rem; cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1.5px var(--border);
+  transition: transform .15s, box-shadow .15s;
+}
+.doc-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1), 0 0 0 1.5px var(--border-hover); }
+.doc-card.doc-submitted { border-left: 4px solid #22c55e; }
+.doc-card-icon { font-size: 2rem; flex-shrink: 0; }
+.doc-card-info { flex: 1; }
+.doc-card-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
+.doc-card-meta { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
+.doc-delete-btn {
+  background: none; border: none; cursor: pointer; font-size: 1.1rem;
+  opacity: .5; padding: .25rem; border-radius: 8px; transition: opacity .15s;
+}
+.doc-delete-btn:hover { opacity: 1; background: #fee2e2; }
+
+.docs-editor-toolbar {
+  display: flex; align-items: center; gap: .75rem;
+  padding: .75rem 1.25rem; background: var(--card);
+  border-bottom: 1.5px solid var(--border);
+}
+.docs-back-btn {
+  background: none; border: 1.5px solid var(--border); color: var(--ink);
+  border-radius: 8px; padding: .4rem .85rem; font-size: .88rem; font-weight: 600;
+  cursor: pointer; font-family: inherit; white-space: nowrap;
+}
+.docs-editor-title-text { flex: 1; font-size: 1rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.docs-submit-btn {
+  background: #22c55e; color: #fff; border: none;
+  border-radius: 8px; padding: .4rem .85rem; font-size: .88rem; font-weight: 700;
+  cursor: pointer; font-family: inherit; white-space: nowrap; transition: opacity .15s;
+}
+.docs-submit-btn:hover { opacity: .85; }
+.docs-submit-btn:disabled { background: var(--muted); opacity: .6; cursor: default; }
+
+#docs-editor-view { display: flex; flex-direction: column; height: calc(100vh - 11rem); }
+#docs-editor-frame { flex: 1; }
+#docs-editor-frame iframe { width: 100%; height: 100%; border: none; }
+
+.docs-error { padding: 1.5rem; color: var(--muted); font-size: .9rem; }
+.docs-error code { background: var(--surface); padding: .1rem .4rem; border-radius: 4px; }
+
+#tab-docs .tab-panel { padding: 1.25rem; }