feat: theme system with persistent selection and Dark Ocean starter theme

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

styles.css

@@ -2,7 +2,7 @@
   --bg:#07070f;--bg2:#0d0d1a;--bg3:#12121f;
   --surface:#1a1a2e;--surface2:#22223a;
   --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
-  --accent:#e8a020;--accent2:#f0b840;
+  --accent:#e8a020;--accent2:#f0b840;--accent-dark:#c07010;
   --accent-dim:rgba(232,160,32,0.15);--accent-glow:rgba(232,160,32,0.3);
   --blue:#4f8ef7;--blue-dim:rgba(79,142,247,0.15);
   --green:#4caf7d;--green-dim:rgba(76,175,125,0.15);
@@ -20,7 +20,7 @@ html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--t
 #setup-screen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--bg);background-image:radial-gradient(ellipse 60% 50% at 30% 50%,rgba(232,160,32,.08) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 80% 30%,rgba(80,60,160,.1) 0%,transparent 70%)}
 .setup-card{width:min(420px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border2);border-radius:20px;padding:40px 36px;box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04)}
 .setup-logo{display:flex;align-items:center;gap:12px;margin-bottom:28px}
-.logo-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#c07010);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 8px 24px var(--accent-glow)}
+.logo-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 8px 24px var(--accent-glow)}
 .setup-logo h1{font-size:24px;font-weight:700;letter-spacing:-.5px}
 .setup-logo h1 em{color:var(--accent);font-style:normal}
 .setup-tabs{display:flex;gap:4px;background:var(--bg2);border-radius:8px;padding:3px;margin-bottom:24px}
@@ -32,7 +32,7 @@ html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--t
 .field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
 .field input::placeholder{color:var(--text3)}
 .field .hint{font-size:11px;color:var(--text3);margin-top:4px;line-height:1.4}
-.btn-primary{width:100%;margin-top:20px;padding:13px;background:linear-gradient(135deg,var(--accent),#c07010);color:#000;font-family:var(--font);font-size:15px;font-weight:700;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:opacity .2s,transform .15s;letter-spacing:.2px}
+.btn-primary{width:100%;margin-top:20px;padding:13px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#000;font-family:var(--font);font-size:15px;font-weight:700;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:opacity .2s,transform .15s;letter-spacing:.2px}
 .btn-primary:hover{opacity:.9;transform:translateY(-1px)}
 .btn-primary:disabled{opacity:.5;cursor:default;transform:none}
 .setup-error{margin-top:12px;padding:10px 14px;background:rgba(224,85,85,.12);border:1px solid rgba(224,85,85,.3);border-radius:var(--radius-sm);color:#ff8a8a;font-size:13px;display:none}
@@ -46,7 +46,7 @@ html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--t
 .sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;padding-bottom:var(--player-h)}
 .sidebar-header{padding:18px 18px 10px;display:flex;align-items:center;justify-content:space-between}
 .sidebar-logo{display:flex;align-items:center;gap:9px}
-.sidebar-logo .icon{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#c07010);display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 4px 12px var(--accent-glow)}
+.sidebar-logo .icon{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 4px 12px var(--accent-glow)}
 .sidebar-logo span{font-size:16px;font-weight:700}
 .sidebar-logo em{color:var(--accent);font-style:normal}
 .header-btns{display:flex;gap:4px}
@@ -737,6 +737,13 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 @keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 @keyframes toastOut{to{opacity:0;transform:translateY(8px)}}
 
+/* ── THEME PICKER ── */
+.theme-picker{display:flex;flex-wrap:wrap;gap:8px}
+.theme-swatch{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9px;border:2px solid var(--border2);background:var(--bg2);cursor:pointer;transition:border-color .15s,background .15s;font-size:13px;font-weight:500;color:var(--text2)}
+.theme-swatch:hover{border-color:var(--border2);background:var(--surface)}
+.theme-swatch.active{border-color:var(--accent);color:var(--text)}
+.theme-swatch-dot{width:18px;height:18px;border-radius:50%;background:var(--sw-accent);flex-shrink:0;box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}
+
 /* ── SETTINGS MODAL ── */
 .settings-section{margin-bottom:20px}
 .settings-section h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-bottom:10px}