Styles for convert-first layout

src/style.css

@@ -47,13 +47,16 @@ button { font: inherit; color: inherit; cursor: pointer; border-radius: 999px; }
 main { flex: 1; padding: 0 16px; }
 #view-edit { display: flex; flex-direction: column; gap: 10px; height: 100%; }
 textarea {
-  width: 100%; min-height: 55dvh; resize: vertical;
+  width: 100%; min-height: 42dvh; resize: vertical;
   font: 17px/1.55 Georgia, "Iowan Old Style", serif;
   background: var(--card); color: var(--ink);
   border: 1px solid var(--line); border-radius: 14px; padding: 14px;
 }
 textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
-.edit-actions { display: flex; gap: 8px; justify-content: flex-end; }
+.edit-tools { display: flex; gap: 8px; margin-top: -2px; }
+.edit-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
+.edit-actions button { min-height: 48px; }
+.ghost.small { font-size: 13px; padding: 5px 12px; }
 .privacy, .note { font-size: 13px; color: var(--muted); margin: 0; }
 
 .reader {
@@ -99,6 +102,21 @@ dialog::backdrop { background: rgb(0 0 0 / .35); }
 .ready-list li.yes::before { content: '✓ '; color: #2f8a45; font-weight: 700; }
 .ready-list li.busy::before { content: '… '; }
 
-.player-extra { display: flex; justify-content: center; margin-top: 10px; }
-.ghost.small { font-size: 13px; padding: 5px 12px; }
-.ghost.small.done { color: #2f8a45; border-color: #b9d6bd; }
+.title-input {
+  font: 600 17px/1.3 Georgia, "Iowan Old Style", serif; color: var(--ink);
+  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; width: 100%;
+}
+.title-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
+
+.export {
+  max-width: 680px; margin: 4px auto 18px; padding: 14px 16px; border-radius: 16px;
+  background: var(--card); border: 1px solid var(--line);
+  display: flex; flex-direction: column; gap: 10px;
+}
+.export-head { display: flex; flex-direction: column; gap: 2px; }
+.export-head strong { font: 600 17px/1.3 Georgia, "Iowan Old Style", serif; }
+.ex-meta { font-size: 13px; color: var(--muted); }
+.progress.big { height: 6px; border-radius: 3px; margin: 0; }
+.export-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.export-actions .primary, .export-actions .ghost { flex: 1 1 auto; min-height: 44px; }
+.export.done { border-color: #b9d6bd; }