Step 3: the layout - drag keys to move or hide them, add and delete keys, page numbers, the Restart page switch

Keys screen: every key is a draggable chip (empty cells and the tray are drop zones), + New key and
+ New restart key dialogs, Delete this key, Companion page numbers, 'this campus has a Restart
page'. A taken cell is refused on the spot; 'Layout changed: Apply will re-import ...' comes from
the server's plan. Screens wait for a pending draft save before asking the server about it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

settings/ui/style.css

@@ -91,3 +91,7 @@ ul.changes li.command { font-family: var(--mono); font-size: .9em; color: var(--
 .notice.problem { background: #fdecea; color: #7a1d16; border: 1px solid var(--problem); }
 ol.steps { padding-left: 18px; } ol.steps li { margin: 3px 0; }
 tr.sel { background: var(--accent-soft); }
+/* step 3: layout */
+.key[draggable="true"] { cursor: grab; } .key.empty[data-drop] { outline: 1px dashed #555; opacity: .7; } .key.empty.over { outline: 2px solid var(--accent); opacity: 1; }
+.tray.over { outline: 2px solid var(--accent); border-radius: 8px; } .tray button[draggable="true"] { cursor: grab; }
+input.pagenum { width: 4.5em; padding: 2px 4px; font: inherit; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }