Update design

src/public/index.html

@@ -115,19 +115,25 @@
 
         <!-- Step 4: Building -->
         <section id="step-building" class="step" hidden>
-            <p id="build-progress">Starting...</p>
-            <div class="spinner"></div>
+            <div class="build-header">
+                <div class="spinner"></div>
+                <p id="build-progress">Starting...</p>
+            </div>
             <pre id="build-log" class="build-log"></pre>
         </section>
 
         <!-- Step 5: Done -->
         <section id="step-done" class="step" hidden>
-            <div id="build-status" class="status-supported"></div>
-            <pre id="done-log" class="build-log"></pre>
+            <div id="build-status" class="info-banner"></div>
+            <pre id="done-log" class="build-log done-log"></pre>
             <div id="build-actions">
                 <button id="btn-write" class="primary">Write to Kobo</button>
                 <button id="btn-download" class="secondary">Download KoboRoot.tgz</button>
             </div>
+            <p class="fallback-hint" id="download-hint">
+                Place the downloaded <strong>KoboRoot.tgz</strong> in the <strong>.kobo</strong> directory
+                on your Kobo's USB drive, then safely eject and reboot the device.
+            </p>
             <p class="hint" hidden id="write-success">
                 KoboRoot.tgz has been written to your Kobo.
                 Safely eject the device and reboot it to apply the patches.

src/public/style.css

@@ -299,21 +299,20 @@ button:disabled {
     overflow-y: auto;
     border: 1px solid var(--border);
     border-radius: 5px;
-    padding: 0.5rem;
 }
 
 /* Patch file sections */
 .patch-file-section {
     background: var(--card-bg);
-    border: 1px solid var(--border-light);
-    border-radius: 10px;
-    margin-bottom: 0.75rem;
-    box-shadow: var(--shadow);
-    overflow: hidden;
+    border-bottom: 1px solid var(--border-light);
+}
+
+.patch-file-section:last-child {
+    border-bottom: none;
 }
 
 .patch-file-section summary {
-    padding: 0.75rem 1rem;
+    padding: 0.6rem 0.75rem;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
@@ -422,18 +421,32 @@ input[type="file"] {
 #build-actions {
     display: flex;
     gap: 0.75rem;
-    margin-top: 1rem;
+    margin-top: 1.25rem;
+}
+
+/* Build header (spinner + progress text) */
+.build-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.25rem;
+}
+
+.build-header p {
+    margin-bottom: 0;
+    font-weight: 500;
+    color: var(--text);
 }
 
 /* Spinner */
 .spinner {
-    width: 28px;
-    height: 28px;
-    border: 3px solid var(--border-light);
+    width: 22px;
+    height: 22px;
+    border: 2.5px solid var(--border-light);
     border-top-color: var(--primary);
     border-radius: 50%;
     animation: spin 0.7s linear infinite;
-    margin: 0.5rem 0;
+    flex-shrink: 0;
 }
 
 @keyframes spin {
@@ -446,14 +459,18 @@ input[type="file"] {
     padding: 0.75rem 1rem;
     background: #0f172a;
     color: #94a3b8;
-    border-radius: 8px;
+    border-radius: 6px;
     font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
     font-size: 0.73rem;
     white-space: pre-wrap;
     height: calc(10 * 1.5em + 1.5rem);
     overflow-y: auto;
     line-height: 1.5;
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+/* Done screen log is shorter */
+.done-log {
+    height: calc(7 * 1.5em + 1.5rem);
 }
 
 .hint {
@@ -471,13 +488,12 @@ input[type="file"] {
     padding: 0.75rem 1rem;
     background: #0f172a;
     color: #e2e8f0;
-    border-radius: 8px;
+    border-radius: 6px;
     font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
     font-size: 0.78rem;
     white-space: pre-wrap;
     max-height: 300px;
     overflow-y: auto;
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
 .step a {