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/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 -->