Use full browser width with 2-column layout at 1100px+

Widened admin-main to 1400px max-width and added panel-cols/panel-col
wrappers so Kids, Courses, Spelling, and Flashcards all display content
on the left and forms/editors on the right on wider screens. Falls back
to single-column on smaller viewports.

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

public/admin.html

@@ -39,8 +39,14 @@
       <!-- Kids -->
       <section id="panel-kids" class="panel">
         <h1>Kids</h1>
+        <div class="panel-cols">
+          <div class="panel-col">
             <div id="student-rows"></div>
-        <form id="add-student-form" class="inline-form">
+          </div>
+          <div class="panel-col">
+            <div class="admin-card">
+              <h2 style="margin:0 0 0.75rem">Add a kid</h2>
+              <form id="add-student-form" class="inline-form" style="flex-direction:column">
                 <input id="new-student-name" placeholder="Name" aria-label="New kid name">
                 <select id="new-student-emoji" aria-label="Avatar">
                   <option>🦊</option><option>🐸</option><option>🦄</option><option>🐯</option>
@@ -49,18 +55,30 @@
                 </select>
                 <button type="submit">Add kid</button>
               </form>
+            </div>
+          </div>
+        </div>
       </section>
 
       <!-- Courses list -->
       <section id="panel-courses" class="panel">
         <h1>Courses</h1>
+        <div class="panel-cols">
+          <div class="panel-col">
             <div id="course-rows"></div>
-        <form id="add-course-form" class="inline-form">
+          </div>
+          <div class="panel-col">
+            <div class="admin-card">
+              <h2 style="margin:0 0 0.75rem">Add a course</h2>
+              <form id="add-course-form" class="inline-form" style="flex-direction:column">
                 <input id="new-course-name" placeholder="Course name (e.g. Science 3)" aria-label="Course name">
                 <input id="new-course-subject" placeholder="Subject" aria-label="Subject">
                 <input id="new-course-color" type="color" value="#4f86f7" aria-label="Color">
                 <button type="submit">Add course</button>
               </form>
+            </div>
+          </div>
+        </div>
       </section>
 
       <!-- Course detail (units + items + roster) -->
@@ -277,11 +295,16 @@
       <!-- Spelling (legacy word lists + weekly assignment) -->
       <section id="panel-spelling" class="panel">
         <h1>Spelling</h1>
+        <div class="panel-cols">
+          <div class="panel-col">
             <h2>This week's list per kid</h2>
             <div id="assign-rows"></div>
-
             <h2>Word lists</h2>
             <div id="list-rows"></div>
+            <h2>Test results</h2>
+            <div id="results-area"></div>
+          </div>
+          <div class="panel-col">
             <details id="list-editor-details">
               <summary id="list-editor-title">New list</summary>
               <form id="list-form" class="admin-card">
@@ -297,7 +320,6 @@
                 </div>
               </form>
             </details>
-
             <details id="list-bulk-details">
               <summary>Bulk import lists</summary>
               <div class="admin-card">
@@ -312,15 +334,18 @@
                 <p id="list-bulk-status" class="hint" style="margin:0.4rem 0 0"></p>
               </div>
             </details>
-
-        <h2>Test results</h2>
-        <div id="results-area"></div>
+          </div>
+        </div>
       </section>
 
       <!-- Flashcard decks -->
       <section id="panel-decks" class="panel">
         <h1>Flashcard Decks</h1>
+        <div class="panel-cols">
+          <div class="panel-col">
             <div id="deck-rows"></div>
+          </div>
+          <div class="panel-col">
             <details id="deck-editor-details">
               <summary id="deck-editor-title">New deck</summary>
               <form id="deck-form" class="admin-card">
@@ -336,7 +361,6 @@
                 </div>
               </form>
             </details>
-
             <details id="deck-bulk-details">
               <summary>Bulk import decks</summary>
               <div class="admin-card">
@@ -351,6 +375,8 @@
                 <p id="deck-bulk-status" class="hint" style="margin:0.4rem 0 0"></p>
               </div>
             </details>
+          </div>
+        </div>
       </section>
 
       <!-- Settings -->

public/styles.css

@@ -333,11 +333,20 @@ table.results tr:nth-child(even) td { background: #faf7ee; }
 }
 .admin-logo { font-size: 1.3rem; font-weight: 800; color: var(--ink); text-decoration: none; }
 .admin-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; }
-.admin-main { max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
+.admin-main { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
 .admin-main h1 { margin-bottom: 1rem; clear: both; }
 .admin-main h2 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; }
 .panel { text-align: left; }
 
+/* 2-column layout for wide screens */
+.panel-cols { display: flex; flex-direction: column; gap: 1.5rem; }
+.panel-col { min-width: 0; }
+@media (min-width: 1100px) {
+  .panel-cols { flex-direction: row; align-items: start; gap: 2.5rem; }
+  .panel-col { flex: 1; }
+  .panel-col:first-child { flex: 1.2; }
+}
+
 .admin-card {
   background: var(--card); border-radius: 14px; padding: 1.25rem;
   margin: 0.75rem 0; box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06);