diff --git a/frontend/admin.html b/frontend/admin.html
index 0d8cbc4..8ff0ec5 100644
--- a/frontend/admin.html
+++ b/frontend/admin.html
@@ -7,6 +7,12 @@
   <meta name="theme-color" content="#0a0c12" />
   <title>Lyrics Studio</title>
   <link rel="stylesheet" href="download-actions.css" />
+  <script>
+    try {
+      const savedTheme = JSON.parse(localStorage.getItem('_ytpdata') || '{}').settings?.theme;
+      document.documentElement.dataset.editorTheme = ['light', 'contrast'].includes(savedTheme) ? savedTheme : 'dark';
+    } catch { document.documentElement.dataset.editorTheme = 'dark'; }
+  </script>
   <style>
     :root {
       color-scheme: dark;
@@ -154,6 +160,48 @@
     .gate .brand { justify-content: center; margin-bottom: 18px; font-size: 22px; }
 
     /* ---------- editor: picker + empty state ---------- */
+    /* The editor follows the user's app appearance while the surrounding admin tools stay untouched. */
+    #p-editor {
+      --ed-bg: #121315; --ed-surface: #18191c; --ed-raised: #202226; --ed-selected: #2b2e33;
+      --ed-line: #42464d; --ed-text: #f3f1ed; --ed-muted: #c3c4c7; --ed-dim: #a1a5ac;
+      --ed-accent: #f06b53; --ed-action: #c6442f; --ed-on-action: #fff;
+      --ed-wave-played: #f06b53; --ed-wave-unplayed: #8f9399; --ed-wave-mark: #c3c4c7; --ed-wave-cursor: #fff;
+      --ok: #4ade80; --warn: #ffcf70; --bad: #ff8585;
+      --bg: var(--ed-bg); --bg-1: var(--ed-surface); --bg-2: var(--ed-raised); --bg-3: var(--ed-selected);
+      --line: var(--ed-line); --line-2: var(--ed-line); --text: var(--ed-text); --text-2: var(--ed-muted); --text-dim: var(--ed-dim);
+      --a1: var(--ed-accent); --a2: var(--ed-accent); --grad: var(--ed-action);
+      color: var(--ed-text); color-scheme: dark; background: var(--ed-bg); border: 1px solid var(--ed-line); border-radius: 14px; padding: 16px;
+    }
+    html[data-editor-theme="light"] #p-editor {
+      --ed-bg: #f4f2ee; --ed-surface: #fff; --ed-raised: #efece6; --ed-selected: #e5e0d8;
+      --ed-line: #d8d2c8; --ed-text: #1b1a18; --ed-muted: #4a4843; --ed-dim: #625e59;
+      --ed-accent: #b43623; --ed-action: #b43623; --ed-on-action: #fff;
+      --ed-wave-played: #b43623; --ed-wave-unplayed: #716c65; --ed-wave-mark: #4a4843; --ed-wave-cursor: #1b1a18;
+      --ok: #166534; --warn: #754500; --bad: #a32121;
+      color-scheme: light;
+    }
+    html[data-editor-theme="contrast"] #p-editor {
+      --ed-bg: #000; --ed-surface: #000; --ed-raised: #0a0a0a; --ed-selected: #161616;
+      --ed-line: #fff; --ed-text: #fff; --ed-muted: #fff; --ed-dim: #d8d8d8;
+      --ed-accent: #ff8a6c; --ed-action: #ff5a3c; --ed-on-action: #000;
+      --ed-wave-played: #ff5a3c; --ed-wave-unplayed: #fff; --ed-wave-mark: #fff; --ed-wave-cursor: #fff;
+      --ok: #00ff70; --warn: #ffff00; --bad: #ff7777;
+      color-scheme: dark;
+    }
+    #p-editor .card { background: var(--ed-surface); border-color: var(--ed-line); }
+    #p-editor .field, #p-editor select.mini, #p-editor .ln-tools input.tin { background: var(--ed-bg); border-color: var(--ed-line); color: var(--ed-text); }
+    #p-editor .deck { background: var(--ed-surface); border-color: var(--ed-line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
+    #p-editor #wave { background: var(--ed-bg); }
+    #p-editor #raw { background: var(--ed-surface); border-color: var(--ed-line); color: var(--ed-text); }
+    #p-editor .btn { min-height: 44px; }
+    #p-editor .btn.pri { background: var(--ed-action); color: var(--ed-on-action); }
+    #p-editor .btn.ok { background: var(--ed-action); color: var(--ed-on-action); }
+    #p-editor .btn.dng { color: var(--ed-action); border-color: var(--ed-action); background: transparent; }
+    #p-editor :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ed-accent); outline-offset: 2px; }
+    #p-editor ::selection { background: var(--ed-accent); color: var(--ed-bg); }
+    #p-editor :is(input, textarea) { caret-color: var(--ed-accent); }
+    #p-editor :is(input, textarea)::placeholder { color: var(--ed-dim); opacity: 1; }
+
     .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 4px; }
     .step { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
     .step b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 13px; margin-bottom: 8px; }
@@ -166,7 +214,7 @@
     .song-row .st { flex: none; font: 700 11px var(--ui); padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--text-dim); }
     .song-row .st.has { color: var(--ok); border-color: rgba(74,222,128,.4); }
     .song-open { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
-    .whisper-request { min-height: 44px; flex: none; }
+    .whisper-request { min-height: 46px; flex: none; }
     .whisper-draft { margin-block: 14px; }
     .whisper-draft pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; font: 400 14px/1.55 var(--ui); color: var(--text); }
     #whisperStatus { color: var(--text-dim); font-size: 14px; margin-block: 10px; }
@@ -186,57 +234,60 @@
     .song small { color: var(--text-dim); }
 
     .deck {
-      position: sticky; top: 58px; z-index: 30; padding: 12px; margin: 0 -6px 14px; border-radius: 22px;
-      background: #11141e; border: 1px solid var(--line-2);
-      -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 18px 40px -22px #000;
+      position: sticky; top: 58px; z-index: 30; padding: 12px; margin: 0 0 14px; border-radius: 14px;
+      background: var(--ed-surface); border: 1px solid var(--ed-line);
     }
-    #wave { width: 100%; height: 64px; display: block; border-radius: 12px; background: rgba(0,0,0,.35); cursor: pointer; touch-action: none; }
+    #wave { width: 100%; height: 64px; display: block; border-radius: 8px; background: var(--ed-bg); cursor: pointer; touch-action: none; }
     .transport { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
-    .round { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.06); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
-    .round.big { width: 52px; height: 52px; border: 0; background: var(--grad); box-shadow: 0 10px 24px -8px var(--a1); }
+    .round { width: 44px; min-width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--ed-line); background: var(--ed-raised); color: var(--ed-text); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
+    .round.big { width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--ed-action); color: var(--ed-on-action); box-shadow: none; }
     .round svg { width: 20px; height: 20px; }
-    .clock { font: 600 17px var(--mono); letter-spacing: -.02em; min-width: 108px; text-align: center; }
-    .clock b { color: var(--a2); } .clock span { color: var(--text-dim); font-size: 13px; }
-    .seg { display: inline-flex; padding: 3px; border-radius: 13px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
-    .seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font-weight: 700; font-size: 13px; }
-    .seg button[aria-pressed="true"] { background: var(--grad); color: #fff; }
-    select.mini { height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); padding: 0 8px; font-size: 13px; }
-    .iconbtn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); display: grid; place-items: center; }
+    .clock { font: 700 17px var(--mono); letter-spacing: -.02em; min-width: 108px; text-align: center; font-variant-numeric: tabular-nums; }
+    .clock b { color: var(--ed-accent); } .clock span { color: var(--ed-dim); font-size: 13px; }
+    .seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--ed-bg); border: 1px solid var(--ed-line); }
+    .seg button { min-width: 76px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ed-muted); font-weight: 700; font-size: 13px; }
+    .seg button[aria-pressed="true"] { background: var(--ed-selected); color: var(--ed-text); box-shadow: inset 0 0 0 1px var(--ed-line); }
+    select.mini { min-height: 44px; border-radius: 8px; border: 1px solid var(--ed-line); background: var(--ed-bg); color: var(--ed-text); padding: 0 10px; font-size: 13px; }
+    .iconbtn { width: 44px; height: 44px; border-radius: 9px; border: 1px solid var(--ed-line); background: var(--ed-raised); color: var(--ed-text); display: grid; place-items: center; }
     .iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
-    .iconbtn[disabled] { opacity: .3; pointer-events: none; }
-    .iconbtn[aria-pressed="true"] { background: rgba(124,92,255,.3); border-color: var(--a1); }
+    .iconbtn[disabled] { opacity: .5; cursor: not-allowed; }
+    .iconbtn[aria-pressed="true"] { background: var(--ed-selected); border-color: var(--ed-accent); }
+    #p-editor :is(.btn, .round, .iconbtn, .seg button, .more, .tc):hover:not(:disabled) { border-color: var(--ed-accent); }
+    #p-editor :is(.btn, .round, .iconbtn, .seg button, .more, .tc):active:not(:disabled) { transform: translateY(1px); }
 
     .drawer { display: grid; gap: 10px; padding: 14px; margin-bottom: 14px; border-radius: 18px; border: 1px dashed var(--line-2); background: rgba(255,255,255,.025); }
     .drawer .row label { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
 
     /* ---------- editor: lines ---------- */
     .lines { display: grid; gap: 8px; }
-    .ln { border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.03); transition: background .2s, border-color .2s, box-shadow .2s; scroll-margin: 200px; }
-    .ln-main { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
+    .ln { position: relative; border-radius: 10px; border: 1px solid var(--ed-line); background: var(--ed-surface); transition: background .16s, border-color .16s, box-shadow .16s; scroll-margin: 200px; }
+    .ln-main { display: grid; grid-template-columns: 88px minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 8px; }
     .tc {
-      flex: none; width: 82px; height: 38px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(0,0,0,.32);
-      font: 700 13px var(--mono); color: var(--text-2);
+      flex: none; width: 88px; min-height: 44px; border-radius: 8px; border: 1px solid var(--ed-line); background: var(--ed-bg);
+      font: 700 13px var(--mono); color: var(--ed-muted); font-variant-numeric: tabular-nums;
     }
-    .tc:hover { border-color: var(--a2); color: var(--text); }
-    .ln.untimed .tc { color: var(--warn); border-style: dashed; border-color: rgba(255,180,84,.55); }
-    .ln-text { flex: 1 1 auto; min-width: 0; min-height: 38px; height: auto; padding: 7px 8px; resize: vertical; overflow: hidden; line-height: 1.3; border: 0; border-radius: 9px; background: transparent; font-size: 16px; }
-    .ln.section .ln-text { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--a2); }
-    .ln.cue .ln-text { font-style: italic; color: var(--warn); }
-    .ln.now { background: rgba(124,92,255,.16); border-color: rgba(124,92,255,.55); box-shadow: 0 0 0 1px rgba(124,92,255,.25), 0 10px 30px -16px var(--a1); }
-    .ln.next { background: rgba(124,92,255,.06); }
-    .ln.sel { border-color: var(--a2); }
+    .tc:hover { border-color: var(--ed-accent); color: var(--ed-text); }
+    .ln.untimed .tc { color: var(--ed-accent); border-style: dashed; }
+    .ln-text { width: 100%; min-width: 0; min-height: 44px; max-height: 8rem; height: auto; padding: 8px 10px; resize: vertical; overflow: auto; line-height: 1.4; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ed-text); font-size: 16px; }
+    .ln.section .ln-text { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--ed-accent); }
+    .ln.cue .ln-text { font-style: italic; color: var(--ed-muted); }
+    .ln.now { background: var(--ed-selected); border-color: var(--ed-line); }
+    .ln.now .tc { color: var(--ed-on-action); background: var(--ed-action); border-color: var(--ed-action); }
+    .ln.next { background: var(--ed-bg); }
+    .ln.sel { outline: 2px solid var(--ed-accent); outline-offset: 2px; }
+    .ln.sel .ln-text { border-color: var(--ed-line); background: var(--ed-bg); }
     .ln.flash { animation: flash 1.6s ease; }
     @keyframes flash { 0%,60% { box-shadow: 0 0 0 3px var(--warn); } 100% { box-shadow: 0 0 0 0 transparent; } }
-    .flagchip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 99px; border: 1px solid rgba(255,180,84,.55); background: rgba(255,180,84,.12); color: var(--warn); font: 800 12px var(--ui); }
+    .flagchip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--warn); background: var(--ed-bg); color: var(--warn); font: 800 12px var(--ui); }
     .flagchip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
-    .ln.flagged { border-color: rgba(255,180,84,.5); background: rgba(255,180,84,.05); }
-    .more { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--text-dim); font-size: 20px; line-height: 1; }
-    .more:hover { background: rgba(255,255,255,.07); color: var(--text); }
-    .ln-tools { display: none; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 10px 10px 10px; }
+    .ln.flagged { border-color: var(--warn); }
+    .more { width: 44px; height: 44px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ed-dim); font-size: 20px; line-height: 1; }
+    .more:hover { background: var(--ed-raised); color: var(--ed-text); }
+    .ln-tools { display: none; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 8px 8px; }
     .ln.sel .ln-tools { display: flex; }
-    .ln-tools .btn { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
-    .ln-tools input.tin { width: 88px; height: 34px; text-align: center; font: 600 13px var(--mono); border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); }
-    .flagbox { display: grid; gap: 8px; margin: 0 10px 10px; padding: 12px; border-radius: 13px; background: rgba(255,180,84,.09); border: 1px solid rgba(255,180,84,.35); }
+    .ln-tools .btn { min-height: 44px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
+    .ln-tools input.tin { width: 88px; height: 44px; text-align: center; font: 600 13px var(--mono); border-radius: 8px; border: 1px solid var(--ed-line); background: var(--ed-bg); }
+    .flagbox { display: grid; gap: 8px; margin: 0 10px 10px; padding: 12px; border-radius: 13px; background: var(--ed-bg); border: 1px solid var(--warn); }
     .rep { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
     .rep .who { font-weight: 800; color: var(--warn); }
     .rep .why { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.08); font-size: 11.5px; color: var(--text-2); }
@@ -253,17 +304,28 @@
       background: rgba(20,23,34,.92); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -14px #000;
       -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
     }
+    #p-editor .savebar > div { background: var(--ed-surface); border-color: var(--ed-line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
+    #p-editor .dot, #p-editor .dirty .dot { box-shadow: none; }
     .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 10px var(--ok); }
     .dirty .dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); animation: pulse 1.4s infinite; }
     @keyframes pulse { 50% { opacity: .35; } }
     .savebar .stat { font-size: 13px; color: var(--text-2); flex: 1; min-width: 0; }
     .tap {
-      position: fixed; right: 18px; bottom: calc(var(--nav-h) + var(--safe) + 84px); z-index: 46; width: 104px; height: 104px; border-radius: 50%; border: 0;
-      background: var(--grad); color: #fff; font: 800 15px var(--ui); letter-spacing: .04em; box-shadow: 0 18px 40px -8px var(--a1), inset 0 2px 0 rgba(255,255,255,.35);
+      flex: none; min-width: 76px; min-height: 44px; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ed-line);
+      background: var(--ed-action); color: var(--ed-on-action); font: 800 14px var(--ui); letter-spacing: .04em; box-shadow: none;
       display: grid; place-items: center; text-align: center; line-height: 1.15;
     }
-    .tap small { display: block; font-weight: 600; opacity: .8; font-size: 11px; letter-spacing: 0; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .tap:active { transform: scale(.93); }
+    .tap small { display: none; }
+    .tap:active { transform: translateY(1px); }
+    .keyboard-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 2px 0; min-width: 0; color: var(--ed-muted); font-size: 12px; }
+    #p-editor .ghost { min-height: 44px; }
+    .keyboard-hint kbd { min-width: 24px; padding: 2px 5px; border: 1px solid var(--ed-line); border-radius: 4px; background: var(--ed-bg); color: var(--ed-text); font: 600 11px var(--mono); text-align: center; }
+    .editor-footer { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 14px; }
+    .line-code { color: var(--ed-dim); font: 600 11px var(--mono); font-variant-numeric: tabular-nums; }
+    #p-editor .ring { background: conic-gradient(var(--ed-accent) calc(var(--p) * 1%), var(--ed-raised) 0); }
+    #p-editor .ring::before { background: var(--ed-surface); }
+    #p-editor .ring span { color: var(--ed-text); }
+    #p-editor .flagchip, #p-editor .flagbox { color: var(--warn); }
 
     .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 20px 0; }
     .metric { padding: 18px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; }
@@ -297,20 +359,33 @@
       .nav .tab { flex-direction: column; justify-content: center; gap: 3px; height: auto; padding: 4px 0; font-size: 10.5px; border-radius: 12px; }
       .nav .tab .badge { position: absolute; top: 2px; left: 55%; }
       .steps { grid-template-columns: 1fr; }
-      .ln-main { flex-wrap: wrap; }
-      .ln-text { flex: 1 1 60%; }
-      .tc { width: 74px; }
-      .deck { top: 54px; padding: 8px; margin: 0 -6px 10px; border-radius: 18px; }
-      #wave { height: 40px; }
-      .transport { gap: 6px; margin-top: 8px; }
-      .round { width: 36px; height: 36px; } .round.big { width: 44px; height: 44px; }
+      .ln-main { grid-template-columns: 82px minmax(0, 1fr) 44px; gap: 6px; padding: 7px; }
+      .ln-text { grid-column: 2; }
+      .tc { width: 82px; }
+      .deck { top: 54px; padding: 8px; margin: 0 0 10px; border-radius: 12px; }
+      #wave { height: 48px; }
+      .transport { display: grid; grid-template-columns: 44px 52px 44px minmax(72px, 1fr) 74px; gap: 6px; margin-top: 8px; }
+      #bBack { grid-column: 1; } #bPlay { grid-column: 2; } #bFwd { grid-column: 3; } .clock { grid-column: 4; } #rate { grid-column: 5; }
+      .transport .seg { grid-column: 1 / span 2; }
+      #bUndo { grid-column: 3; } #bRedo { grid-column: 4; } #bTools { grid-column: 5; }
+      .round { width: 44px; height: 44px; } .round.big { width: 52px; height: 52px; }
       .clock { font-size: 15px; }
       .transport .grow { display: none; }
-      select.mini, .seg button { height: 32px; }
-      .iconbtn { width: 34px; height: 34px; }
+      .seg button { min-width: 0; min-height: 44px; padding: 0 5px; }
+      .iconbtn { width: 44px; height: 44px; }
       .song { margin-bottom: 10px; } .ring { width: 44px; height: 44px; }
-      .clock { min-width: 0; }
+      .clock { min-width: 0; font-size: 14px; }
       main { padding-top: 16px; }
+      #tapPad { grid-column: 1 / -1; width: 100%; min-height: 52px; height: 52px; }
+      .editor-footer { align-items: flex-start; }
+      #p-editor { padding: 12px; border-radius: 12px; }
+    }
+    @media (max-width: 370px) {
+      .transport { grid-template-columns: 44px 52px 44px minmax(64px, 1fr); }
+      #rate { grid-column: 4; }
+      #bUndo { grid-column: 1; } #bRedo { grid-column: 2; } #bTools { grid-column: 3; }
+      .transport .seg { grid-column: 1 / span 3; }
+      .clock { font-size: 12px; }
     }
     @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
   .media-shape { display:none; } .media-shape-classic { display:inline; }
@@ -399,7 +474,9 @@
             <button class="iconbtn" id="bUndo" type="button" title="Undo (Ctrl/⌘ Z)" aria-label="Undo" disabled><svg viewBox="0 0 24 24"><path d="M9 14L4 9l5-5"/><path d="M4 9h10a6 6 0 010 12h-3"/></svg></button>
             <button class="iconbtn" id="bRedo" type="button" title="Redo (Ctrl/⌘ Shift Z)" aria-label="Redo" disabled><svg viewBox="0 0 24 24"><path d="M15 14l5-5-5-5"/><path d="M20 9H10a6 6 0 000 12h3"/></svg></button>
             <button class="iconbtn" id="bTools" type="button" title="More tools" aria-label="More tools" aria-pressed="false"><svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></svg></button>
+            <button id="tapPad" class="tap hidden" type="button" aria-label="Stamp the next line">TAP<small id="tapNext">next line</small></button>
           </div>
+          <div class="keyboard-hint" aria-label="Keyboard shortcuts"><strong>Shortcuts</strong> <kbd>Space</kbd> stamp in Tap-sync · <kbd>↑</kbd><kbd>↓</kbd> select · <kbd>S</kbd> stamp selected · <kbd>K</kbd> play · <kbd>⌘/Ctrl S</kbd> save</div>
         </div>
 
         <div id="drawer" class="drawer hidden">
@@ -416,7 +493,7 @@
           </div>
         </div>
 
-        <div id="msg" class="msg"></div>
+        <div id="msg" class="msg" role="status" aria-live="polite"></div>
         <p id="whisperStatus" role="status" aria-live="polite"></p>
         <div id="whisperResult" class="card whisper-draft hidden">
           <h2 style="font-size:18px;margin:0 0 8px">Whisper transcript ready</h2>
@@ -426,10 +503,14 @@
         </div>
         <div id="lines" class="lines"></div>
         <textarea id="raw" aria-label="Lyrics as text; prefix continuation lines with vertical bar and space" class="hidden" spellcheck="false"></textarea>
-        <div class="row" style="margin-top:14px">
+        <div class="editor-footer">
           <button class="btn sm" id="addLine" type="button">＋ Add line</button>
-          <span class="muted" style="font-size:12.5px">Shortcuts: <code>Space</code> stamp (Tap-sync) · <code>S</code> stamp selected · <code>K</code> play · <code>↑↓</code> select · <code>⌘/Ctrl S</code> save</span>
         </div>
+        <div id="saveBar" class="savebar hidden"><div id="saveInner">
+          <span class="dot"></span><span class="stat" id="saveStat">All changes saved</span>
+          <button class="btn sm" id="discard" type="button">Discard</button>
+          <button class="btn pri" id="save" type="button">Save lyrics</button>
+        </div></div>
       </div>
     </section>
 
@@ -563,12 +644,6 @@
     </section>
   </main>
 
-  <div id="saveBar" class="savebar hidden"><div id="saveInner">
-    <span class="dot"></span><span class="stat" id="saveStat">All changes saved</span>
-    <button class="btn sm" id="discard" type="button">Discard</button>
-    <button class="btn pri" id="save" type="button">Save lyrics</button>
-  </div></div>
-  <button id="tapPad" class="tap hidden" type="button" aria-label="Stamp the next line">TAP<small id="tapNext">next line</small></button>
   <nav class="nav" id="tabsBottom" role="tablist"></nav>
 </div>
 
@@ -1339,22 +1414,26 @@
     const w = c.clientWidth || 600, h = c.height, dpr = window.devicePixelRatio || 1;
     if (c.width !== Math.round(w * dpr)) c.width = Math.round(w * dpr);
     const g = c.getContext('2d'); g.setTransform(dpr, 0, 0, dpr, 0, 0); g.clearRect(0, 0, w, h);
+    const waveStyle = getComputedStyle($('p-editor'));
+    const played = waveStyle.getPropertyValue('--ed-wave-played').trim();
+    const unplayed = waveStyle.getPropertyValue('--ed-wave-unplayed').trim();
+    const marker = waveStyle.getPropertyValue('--ed-wave-mark').trim();
+    const cursor = waveStyle.getPropertyValue('--ed-wave-cursor').trim();
     const dur = LE.dur || 1, t = cur();
     if (LE.peaks && LE.peaks.length) {
       const n = LE.peaks.length, bw = w / n;
-      const grad = g.createLinearGradient(0, 0, w, 0); grad.addColorStop(0, '#7c5cff'); grad.addColorStop(1, '#22d3ee');
       for (let i = 0; i < n; i++) {
         const bh = Math.max(2, (LE.peaks[i] / 100) * (h - 10));
-        g.fillStyle = (i * dur) / n <= t ? grad : 'rgba(255,255,255,.16)';
+        g.fillStyle = (i * dur) / n <= t ? played : unplayed;
         g.fillRect(i * bw, (h - bh) / 2, Math.max(1, bw - 1), bh);
       }
     } else {
-      g.fillStyle = 'rgba(255,255,255,.14)'; g.fillRect(0, h / 2 - 2, w, 4);
-      g.fillStyle = '#22d3ee'; g.fillRect(0, h / 2 - 2, (t / dur) * w, 4);
+      g.fillStyle = unplayed; g.fillRect(0, h / 2 - 2, w, 4);
+      g.fillStyle = played; g.fillRect(0, h / 2 - 2, (t / dur) * w, 4);
     }
-    g.fillStyle = 'rgba(255,255,255,.55)';
+    g.fillStyle = marker;
     for (const l of LE.lines) { if (l.t == null) continue; const x = ((l.t + LE.offset) / dur) * w; g.fillRect(x, 0, 1, 7); g.fillRect(x, h - 7, 1, 7); }
-    g.fillStyle = '#fff'; g.fillRect((t / dur) * w - 1, 0, 2, h);
+    g.fillStyle = cursor; g.fillRect((t / dur) * w - 1, 0, 2, h);
   }
   function seek(t) { if (!LE.audio) return; LE.audio.currentTime = Math.max(0, Math.min(LE.dur || 1e9, t)); tick(); }
   function stamp(i) {
@@ -1439,7 +1518,7 @@
   function setMode(tapOn) {
     LE.tap = tapOn;
     $('mTap').setAttribute('aria-pressed', String(tapOn)); $('mEdit').setAttribute('aria-pressed', String(!tapOn));
-    say(tapOn ? 'Tap-sync: press the big TAP button (or Space) each time the highlighted line starts. Play the song first.' : '', tapOn ? 'ok' : '');
+    say(tapOn ? 'Tap-sync active. TAP or Space stamps the next untimed line.' : '', tapOn ? 'ok' : '');
     lastIdx = -2; tick(); tapLabel(); syncBars();
   }
   $('mEdit').addEventListener('click', () => setMode(false));
diff --git a/frontend/media-icons.test.js b/frontend/media-icons.test.js
index bd8b90a..ffd6a3f 100644
--- a/frontend/media-icons.test.js
+++ b/frontend/media-icons.test.js
@@ -7,7 +7,7 @@ test('download and offline icons never use emoji or text glyphs', () => {
   // Arrow keys are prose, not action icons. Exact lines prevent new exceptions.
   const allow = new Map([
     ['index.html', new Set(['<div class="shortcut-row"><kbd>↑</kbd><kbd>↓</kbd><span>Volume up / down</span></div>'])],
-    ['admin.html', new Set(['<span class="muted" style="font-size:12.5px">Shortcuts: <code>Space</code> stamp (Tap-sync) · <code>S</code> stamp selected · <code>K</code> play · <code>↑↓</code> select · <code>⌘/Ctrl S</code> save</span>'])],
+    ['admin.html', new Set(['<div class="keyboard-hint" aria-label="Keyboard shortcuts"><strong>Shortcuts</strong> <kbd>Space</kbd> stamp in Tap-sync · <kbd>↑</kbd><kbd>↓</kbd> select · <kbd>S</kbd> stamp selected · <kbd>K</kbd> play · <kbd>⌘/Ctrl S</kbd> save</div>'])],
   ]);
   const failures=[];
   for (const file of readdirSync(__dirname).filter(f=>/\.(js|html|css)$/.test(f) && !f.endsWith('.test.js'))) {
diff --git a/plans/editor-redesign-shots/before-desktop-dark.png b/plans/editor-redesign-shots/before-desktop-dark.png
new file mode 100644
index 0000000..d30a506
Binary files /dev/null and b/plans/editor-redesign-shots/before-desktop-dark.png differ
diff --git a/plans/editor-redesign-shots/before-mobile-dark.png b/plans/editor-redesign-shots/before-mobile-dark.png
new file mode 100644
index 0000000..d094c11
Binary files /dev/null and b/plans/editor-redesign-shots/before-mobile-dark.png differ
diff --git a/plans/editor-redesign-shots/contrast-1280.png b/plans/editor-redesign-shots/contrast-1280.png
new file mode 100644
index 0000000..c8819bd
Binary files /dev/null and b/plans/editor-redesign-shots/contrast-1280.png differ
diff --git a/plans/editor-redesign-shots/contrast-1920.png b/plans/editor-redesign-shots/contrast-1920.png
new file mode 100644
index 0000000..1fb93c5
Binary files /dev/null and b/plans/editor-redesign-shots/contrast-1920.png differ
diff --git a/plans/editor-redesign-shots/contrast-390.png b/plans/editor-redesign-shots/contrast-390.png
new file mode 100644
index 0000000..7abe63c
Binary files /dev/null and b/plans/editor-redesign-shots/contrast-390.png differ
diff --git a/plans/editor-redesign-shots/contrast-768.png b/plans/editor-redesign-shots/contrast-768.png
new file mode 100644
index 0000000..8a115fd
Binary files /dev/null and b/plans/editor-redesign-shots/contrast-768.png differ
diff --git a/plans/editor-redesign-shots/dark-1280.png b/plans/editor-redesign-shots/dark-1280.png
new file mode 100644
index 0000000..c65e031
Binary files /dev/null and b/plans/editor-redesign-shots/dark-1280.png differ
diff --git a/plans/editor-redesign-shots/dark-1920.png b/plans/editor-redesign-shots/dark-1920.png
new file mode 100644
index 0000000..36bdea4
Binary files /dev/null and b/plans/editor-redesign-shots/dark-1920.png differ
diff --git a/plans/editor-redesign-shots/dark-390.png b/plans/editor-redesign-shots/dark-390.png
new file mode 100644
index 0000000..d31f48c
Binary files /dev/null and b/plans/editor-redesign-shots/dark-390.png differ
diff --git a/plans/editor-redesign-shots/dark-768.png b/plans/editor-redesign-shots/dark-768.png
new file mode 100644
index 0000000..92ab3e5
Binary files /dev/null and b/plans/editor-redesign-shots/dark-768.png differ
diff --git a/plans/editor-redesign-shots/light-1280.png b/plans/editor-redesign-shots/light-1280.png
new file mode 100644
index 0000000..68a4871
Binary files /dev/null and b/plans/editor-redesign-shots/light-1280.png differ
diff --git a/plans/editor-redesign-shots/light-1920.png b/plans/editor-redesign-shots/light-1920.png
new file mode 100644
index 0000000..9811636
Binary files /dev/null and b/plans/editor-redesign-shots/light-1920.png differ
diff --git a/plans/editor-redesign-shots/light-390.png b/plans/editor-redesign-shots/light-390.png
new file mode 100644
index 0000000..be1696a
Binary files /dev/null and b/plans/editor-redesign-shots/light-390.png differ
diff --git a/plans/editor-redesign-shots/light-768.png b/plans/editor-redesign-shots/light-768.png
new file mode 100644
index 0000000..25decbe
Binary files /dev/null and b/plans/editor-redesign-shots/light-768.png differ
diff --git a/tests/admin-lyrics.spec.js b/tests/admin-lyrics.spec.js
index 5e648a8..acc8e67 100644
--- a/tests/admin-lyrics.spec.js
+++ b/tests/admin-lyrics.spec.js
@@ -1,6 +1,7 @@
 const { test, expect } = require('@playwright/test');
+const fs = require('node:fs');
 const id = '0gfX0dFLaBc';
-async function fixture(page) {
+async function fixture(page, theme = 'dark') {
   const state = { job: null, starts: 0, saves: [] };
   await page.route('**/api/**', async route => {
     const req = route.request(), url = new URL(req.url()); let body = { ok: true };
@@ -16,6 +17,7 @@ async function fixture(page) {
     } else if (url.pathname === '/api/notes/' + id + '/lyrics' && req.method() === 'PUT') { state.saves.push(req.postDataJSON()); body.rev = 9; }
     return route.fulfill({ contentType: 'application/json', body: JSON.stringify(body) });
   });
+  await page.addInitScript(theme => localStorage.setItem('_ytpdata', JSON.stringify({ settings: { theme } })), theme);
   await page.goto('/admin.html#editor');
   await expect(page.locator('[data-open="' + id + '"]').first()).toBeVisible();
   return state;
@@ -165,3 +167,98 @@ test('editor loads the whole audio into the browser once and reuses it', async (
   await expect(page.locator('#dur')).toHaveText('0:01');
   expect(hits).toBe(1);
 });
+
+function ratio(fg, bg) {
+  const channel = value => {
+    const n = value / 255;
+    return n <= 0.04045 ? n / 12.92 : ((n + 0.055) / 1.055) ** 2.4;
+  };
+  const lum = color => {
+    const values = color.startsWith('#')
+      ? (color.slice(1).length === 3
+          ? [...color.slice(1)].map(value => value + value).join('')
+          : color.slice(1)).match(/.{2}/g).slice(0, 3).map(value => parseInt(value, 16))
+      : color.match(/[\d.]+/g).slice(0, 3).map(Number);
+    return 0.2126 * channel(values[0]) + 0.7152 * channel(values[1]) + 0.0722 * channel(values[2]);
+  };
+  const [a, b] = [lum(fg), lum(bg)].sort((x, y) => y - x);
+  return (a + 0.05) / (b + 0.05);
+}
+
+test('Lyrics Studio stays readable, touchable and contained across themes and screen sizes', async ({ page }) => {
+  const shots = 'plans/editor-redesign-shots'; fs.mkdirSync(shots, { recursive: true });
+  await page.setViewportSize({ width: 390, height: 844 });
+  await fixture(page, 'light');
+  await expect(page.locator('html')).toHaveAttribute('data-editor-theme', 'light');
+  await page.locator(`[data-open="${id}"]`).first().click();
+  await expect(page.locator('.ln')).toHaveCount(47);
+  await page.locator('.ln').first().locator('.tc').click();
+  await expect(page.locator('.ln').first()).toHaveClass(/sel/);
+  await page.locator('.ln').first().evaluate(row => row.classList.add('now'));
+  await page.locator('#mTap').click();
+  await page.locator('.ln').first().evaluate(row => row.classList.add('now'));
+  await expect(page.locator('#tapPad')).toBeVisible();
+  await page.locator('.ln-text').first().fill('A corrected lyric remains in the editor while the save controls stay available.');
+  await expect(page.locator('#saveBar')).toBeVisible();
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+
+  for (const theme of ['dark', 'light', 'contrast']) {
+    for (const width of [390, 768, 1280, 1920]) {
+      await page.setViewportSize({ width, height: width < 500 ? 844 : 900 });
+      await page.evaluate(value => { document.documentElement.dataset.editorTheme = value; }, theme);
+      const metrics = await page.evaluate(() => {
+        const css = selector => getComputedStyle(document.querySelector(selector));
+        const root = css('#p-editor'), title = css('#songTitle'), meta = css('#songMeta');
+        const primary = css('#save');
+        const line = css('.ln.sel .ln-text');
+        const row = css('.ln.sel');
+        const waveTokens = ['--ed-wave-played', '--ed-wave-unplayed', '--ed-wave-mark', '--ed-wave-cursor'];
+        const rect = selector => { const r = document.querySelector(selector).getBoundingClientRect(); return { x: r.x, y: r.y, width: r.width, height: r.height, right: r.right, bottom: r.bottom }; };
+        const visibleControls = [...document.querySelectorAll('#studio button, #studio select, #studio input, #studio textarea, #saveBar button, #tapPad')]
+          .filter(el => el.getClientRects().length);
+        return {
+          theme: document.documentElement.dataset.editorTheme,
+          viewport: innerWidth,
+          rootScroll: document.documentElement.scrollWidth,
+          editorScroll: document.querySelector('#p-editor').scrollWidth,
+          editorClient: document.querySelector('#p-editor').clientWidth,
+          titleRatio: [title.color, root.backgroundColor],
+          metaRatio: [meta.color, root.backgroundColor],
+          primaryRatio: [primary.color, primary.backgroundColor],
+          primaryBoundary: [row.outlineColor, root.backgroundColor],
+          lineRatio: [line.color, line.backgroundColor],
+          waveRatios: waveTokens.map(token => [root.getPropertyValue(token).trim(), root.getPropertyValue('--ed-bg').trim()]),
+          nowBorder: css('.ln.now').borderTopColor,
+          selectedOutline: row.outlineColor,
+          keyboardHint: (() => { const el = document.querySelector('.keyboard-hint'), r = el.getBoundingClientRect(); return { visible: !!el.getClientRects().length, insideDeck: document.querySelector('.deck').contains(el), bottom: r.bottom, top: r.top }; })(),
+          targets: visibleControls.map(el => ({ id: el.id || el.className, width: el.getBoundingClientRect().width, height: el.getBoundingClientRect().height })),
+          tap: rect('#tapPad'), save: rect('#saveInner'),
+          focus: (() => { const el = document.querySelector('#bBack'); el.focus({ focusVisible: true }); const s = getComputedStyle(el); return { style: s.outlineStyle, width: s.outlineWidth }; })(),
+          reduceMotion: matchMedia('(prefers-reduced-motion: reduce)').matches,
+          transition: getComputedStyle(document.querySelector('.ln')).transitionDuration,
+          rowCount: document.querySelectorAll('.ln').length,
+        };
+      });
+      expect(metrics.rootScroll, `${theme} ${width}px page overflow`).toBeLessThanOrEqual(width + 1);
+      expect(metrics.editorScroll, `${theme} ${width}px editor overflow`).toBeLessThanOrEqual(metrics.editorClient + 1);
+      expect(metrics.rowCount).toBe(47);
+      expect(ratio(...metrics.titleRatio), `${theme} title contrast`).toBeGreaterThanOrEqual(4.5);
+      expect(ratio(...metrics.metaRatio), `${theme} metadata contrast`).toBeGreaterThanOrEqual(4.5);
+      expect(ratio(...metrics.primaryRatio), `${theme} primary action contrast ${JSON.stringify(metrics.primaryRatio)}`).toBeGreaterThanOrEqual(4.5);
+      expect(ratio(...metrics.primaryBoundary), `${theme} selected boundary contrast`).toBeGreaterThanOrEqual(3);
+      expect(ratio(...metrics.lineRatio), `${theme} lyric text contrast`).toBeGreaterThanOrEqual(4.5);
+      for (const colors of metrics.waveRatios) expect(ratio(...colors), `${theme} waveform contrast ${colors[0]}`).toBeGreaterThanOrEqual(3);
+      expect(metrics.nowBorder).not.toBe(metrics.selectedOutline);
+      expect(metrics.keyboardHint.visible).toBe(true);
+      expect(metrics.keyboardHint.insideDeck).toBe(true);
+      for (const target of metrics.targets) expect(target.height, `${target.id} target at ${width}px`).toBeGreaterThanOrEqual(44);
+      expect(metrics.focus.style).not.toBe('none');
+      expect(metrics.focus.width).toBe('3px');
+      expect(metrics.reduceMotion).toBe(true);
+      expect(metrics.transition).toBe('0s');
+      expect(metrics.tap.bottom).toBeLessThanOrEqual(metrics.save.y);
+      if (width < 500) expect(metrics.tap.right).toBeLessThanOrEqual(width);
+      await page.screenshot({ path: `${shots}/${theme}-${width}.png`, fullPage: false });
+    }
+  }
+});