refactor: move romaji overrides into dedicated modal, fix placeholders

index.html

@@ -658,17 +658,12 @@
         </div>
       </div>
       <div class="settings-section">
-        <h3 style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
-          <span style="width:24px;height:24px;border-radius:6px;background:var(--accent-dim);display:inline-flex;align-items:center;justify-content:center;font-size:12px">㊙</span>
-          Romaji Korrekturen
-        </h3>
-        <div class="hint" style="margin-bottom:10px">Kanji → korrektes Romaji. Wird in Sort-Tags automatisch übernommen.</div>
-        <div id="romaji-overrides-list" style="display:flex;flex-direction:column;gap:5px;margin-bottom:10px"></div>
-        <div style="display:flex;gap:6px;align-items:center">
-          <input id="ro-kanji"  placeholder="照井順政" style="flex:1;padding:8px 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font);font-size:13px;outline:none" onkeydown="if(event.key==='Enter')addRomajiOverrideUI()">
-          <span style="color:var(--text2);flex-shrink:0">→</span>
-          <input id="ro-romaji" placeholder="Terui Yoshimasa" style="flex:1.2;padding:8px 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font);font-size:13px;outline:none" onkeydown="if(event.key==='Enter')addRomajiOverrideUI()">
-          <button onclick="addRomajiOverrideUI()" style="flex-shrink:0;padding:8px 12px;border-radius:8px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#000;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer">+</button>
+        <div style="display:flex;align-items:center;justify-content:space-between">
+          <div>
+            <div style="font-size:13px;font-weight:600">Romaji Korrekturen</div>
+            <div class="hint">Kanji → korrektes Romaji für Sort-Tags</div>
+          </div>
+          <button onclick="openRomajiOverridesModal()" class="btn-outline" style="padding:7px 14px;font-size:13px;font-weight:600;flex-shrink:0">Liste öffnen</button>
         </div>
       </div>
       <div class="settings-section">
@@ -694,6 +689,26 @@
   </div>
 </div>
 
+<!-- ROMAJI OVERRIDES MODAL -->
+<div class="modal-overlay" id="romaji-overrides-modal">
+  <div class="modal" style="padding:0;display:flex;flex-direction:column;max-height:80vh;width:min(460px,calc(100vw - 32px))">
+    <div style="display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border);flex-shrink:0">
+      <div style="font-size:16px;font-weight:700">Romaji Korrekturen</div>
+      <button onclick="closeRomajiOverridesModal()" style="background:var(--surface2);border:none;color:var(--text2);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center">✕</button>
+    </div>
+    <div style="flex:1;overflow-y:auto;padding:14px 20px">
+      <div class="hint" style="margin-bottom:12px">Kanji → korrektes Romaji. Wird beim Öffnen des Edit-Dialogs und bei Downloads automatisch in die Sort-Tags übernommen.</div>
+      <div id="romaji-overrides-list" style="display:flex;flex-direction:column;gap:5px;margin-bottom:14px"></div>
+      <div style="display:flex;gap:6px;align-items:center">
+        <input id="ro-kanji"  placeholder="米津玄師" style="flex:1;padding:8px 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font);font-size:13px;outline:none" onkeydown="if(event.key==='Enter')addRomajiOverrideUI()">
+        <span style="color:var(--text2);flex-shrink:0">→</span>
+        <input id="ro-romaji" placeholder="Yonezu Kenshi" style="flex:1.2;padding:8px 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font);font-size:13px;outline:none" onkeydown="if(event.key==='Enter')addRomajiOverrideUI()">
+        <button onclick="addRomajiOverrideUI()" style="flex-shrink:0;padding:8px 12px;border-radius:8px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#000;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer">+</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- JOB PANEL -->
 <div class="jobs-panel" id="jobs-panel"></div>