diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd10d9a..5c7e3cd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,106 @@
 # Changelog
 
+## 4.0.0 — 2026-07-12
+
+### "Sinyal" — new visual identity
+- Complete restyle: warm charcoal surfaces, amber "radio dial glow" default
+  accent (`#f2a33c`, was violet `#8b7cf6`), and a new type system —
+  Bricolage Grotesque (display) / Schibsted Grotesk (UI) / Spline Sans Mono
+  (numerals/labels).
+- Signature **frequency-line** waveform motif: the hero scrubber in the new
+  Now Playing sheet, and an animated line on the mini player while playing.
+- The 4 themes (Auto / Dark / Light / OLED Black) are kept, restyled to the
+  new palette. Dark ("Kor") and OLED ("Gece") text ramps are tuned for
+  readability — secondary text ~10:1 and tertiary/mono labels ~5.7–6.4:1 on
+  the background; navigation labels use the secondary tier. The accent picker
+  now offers **7** Sinyal swatches (Amber, Copper, Signal Red, Moss, Teal,
+  Sky, Lilac); **previously saved accents are remapped to their nearest new
+  swatch** on the fly (`ui/theme.ts` → `normalizeAccent`) — the stored
+  setting itself is left untouched, so rolling back is non-destructive.
+- **New brand mark**: the "sinyal" crest — five round-capped frequency bars —
+  replaces the S monogram everywhere (in-app logo, favicon, PWA/launcher
+  icons, monochrome themed icon). The in-app mark breathes gently and the
+  "Seseri" wordmark carries a soft signal sheen; both are static under
+  `prefers-reduced-motion`.
+- YouTube artwork now loads from the official `i.ytimg.com` CDN (derived
+  from the video id) instead of Piped/Invidious instance proxies, which
+  frequently go dark; search-result artwork also falls back to a calm
+  placeholder tile when an image fails to load.
+- **Mini player → mini transport**: skip back/forward and play/pause live
+  directly in the dock, and the progress hairline is a tap/drag seek slider —
+  no need to open the full player for everyday control. On wider screens the
+  transport (prev / skip / play / skip / next) sits centred, with the sleep
+  timer and speed selector grouped at the end (both kept in sync with the
+  sheet's controls). The expand chevron or the title area still opens the
+  Now Playing sheet (scrubber, queue, YouTube video frame).
+- **YouTube embed → audio background rescue**: when a track has to start on
+  the iframe fallback (which a locked phone pauses), the app keeps retrying
+  audio resolution in the background and hot-swaps to the `<audio>` element
+  at the same position the moment a stream resolves — restoring lock-screen
+  playback and Media Session controls without interrupting the listener.
+- **Language menu with real flags**: a custom accessible listbox
+  (`ui/lang-menu.ts`) with hand-drawn inline SVG flags (`ui/flags.ts`) —
+  Windows renders no emoji flags, and native `<option>` can't show images.
+  It now lives on the Home header too, not only in Settings.
+
+### Information architecture — full redesign
+- New primary navigation: a bottom tab bar on mobile / left sidebar on
+  desktop — **Home / Search / Library / Settings**.
+- **Home**: a "continue listening" rail built from cached progress +
+  subscriptions data, plus a subscriptions grid.
+- **Search**: iTunes search and RSS/YouTube paste share one screen, with
+  progressive dual-source results.
+- **Library**: Subscriptions and Downloads tabs with a storage-usage
+  summary; replaces the old home-screen favorites rows.
+- **Podcast detail**: episode list with sort/filter (unchanged data, new
+  frame).
+- **Now Playing**: a full-screen sheet on mobile / floating panel on
+  desktop, with transport, sleep timer, speed, and queue access — the mini
+  player now opens this sheet instead of navigating back into the feed.
+- **Queue**: promoted from a sort-bar dropdown to its own page view.
+- **Settings**: promoted from a modal `<dialog>` to its own page view (same
+  sections and stored options).
+
+### Routing
+- New `?view=search|library|queue|settings` deep links alongside the
+  existing `?podcast=` / `?rss=` / `?yt=` params, which are unchanged.
+- Back-button contract: one step from any feed/view always returns home
+  (`ui/router.ts` replaces rather than pushes between non-home states).
+- PWA manifest: `theme_color`/`background_color` updated to `#171310`; the
+  "Search" shortcut now opens `?view=search` instead of the bare start URL.
+
+### Architecture
+- UI split into a headless **playback-controller**
+  (`src/ui/playback-controller.ts`) plus per-view modules under
+  `src/ui/views/` (`home`, `search`, `library`, `podcast`, `queue`,
+  `settings`, `now-playing`) registered through a small view registry
+  (`src/ui/views.ts`) and a shared nav controller (`src/ui/nav.ts`). The
+  old `src/ui/screens/` (`player.ts`, `settings.ts`) and
+  `src/ui/queue-panel.ts` are retired; their logic moved into the new view
+  modules.
+- Styles split by concern — `tokens` / `themes` / `base` / `layout` /
+  `controls` / `overlays` / `signal-line`, plus one CSS file per view under
+  `src/styles/views/` — assembled through `src/styles/index.css`;
+  `components.css` is retired.
+- The runtime layer (`player/`, `feeds/`, `storage/`, `state/`, worker,
+  service worker) is untouched by the rewrite.
+- `src/ui/router.test.ts` grown to cover the new `?view=` routes (29 tests).
+
+### i18n
+- 18 new keys across all 8 languages for the new nav/home/library/queue/
+  now-playing UI (`nav_*`, `home_*`, `lib_*`, `np_open`, `np_close`).
+
+### Kept / compatible
+- All legacy deep links (`?podcast=`, `?rss=`, `?yt=`) still work unchanged.
+- Stored data keys (`pp_prog`, `pp_favs`, `pp_last_*`, settings) are
+  untouched — no migration needed, no data loss on upgrade.
+- Offline downloads, OPML import/export, sleep timer, media-session
+  integration, keyboard shortcuts (Space/arrows while a feed or the Now
+  Playing sheet is open), RTL (Arabic), `prefers-reduced-motion`, and focus
+  management all carry over as-is.
+- **116+ unit tests green** (client); worker suite untouched by this
+  redesign.
+
 ## 3.1.0 — 2026-07-08
 
 ### Added
diff --git a/README.md b/README.md
index 3b18598..ca9140b 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,13 @@ YouTube link — stream, resume, queue and download episodes for offline
 listening. Vite + strict TypeScript frontend, optional Cloudflare Worker
 backend, installable as a PWA / Microsoft Store / Google Play app.
 
+**"Sinyal" design** — warm charcoal surfaces, an amber "radio dial glow"
+accent, and a signature frequency-line waveform motif. Navigation is a bottom
+tab bar (mobile) / left sidebar (desktop) across four sections — **Home**
+(continue-listening + subscriptions), **Search**, **Library**
+(subscriptions/downloads) and **Settings** — with a full-screen **Now
+Playing** sheet for transport, sleep timer, speed and queue access.
+
 **▶ Live:** https://iacbi.github.io/seseri/ ·
 **🪟 Windows app:** [download the installer](https://github.com/IACBI/seseri/releases/latest)
 
@@ -29,24 +36,27 @@ backend, installable as a PWA / Microsoft Store / Google Play app.
 | 🔍 **Podcast search** | by name, Apple Podcasts link, or a direct RSS feed URL |
 | ▶️ **YouTube shows** | search by name (channels/playlists/videos appear in results) or paste a link; audio streams through the Worker (Innertube + range-aware proxy → background/lock-screen playback) or public Piped instances, with an official `youtube-nocookie` embed fallback |
 | 📥 **Offline episodes** | downloads live in the Cache API and play (and seek) with no connection; feeds are cached in IndexedDB and refresh in the background (stale-while-revalidate) |
-| 🧾 **Play queue** | queue any episode as "up next" — the queue wins over list order |
-| 🎧 **Mini player** | leaving a feed keeps playing; a floating transport on the home screen takes you back |
-| 🌊 **Waveform scrubber** | per-episode waveform with drag-to-seek, live playhead and time tooltip |
-| 🎛 **Full player** | play/pause, prev/next, skip, speed 0.5×–2.5×, sleep timer, resume position |
-| 🖥 **Desktop layout** | ≥900px shows a library rail beside the episode pane |
-| ⭐ **Subscriptions** | star podcasts; OPML import/export + JSON backup |
-| 🎨 **Themes** | Auto (system), Dark, Light, OLED Black; 7 accent colors |
+| 🧾 **Play queue** | queue any episode as "up next" — the queue wins over list order; own page under **Queue** |
+| 🎧 **Mini transport** | leaving a feed keeps playing; the persistent dock carries skip/play controls (plus prev/next & speed on wide screens) and a seekable progress line — the chevron expands the full **Now Playing** sheet |
+| 🌊 **Frequency-line scrubber** | signature waveform motif — drag-to-seek hero scrubber in Now Playing, animated line on the mini player while playing |
+| 🎛 **Now Playing sheet** | full-screen (mobile) / floating panel (desktop): play/pause, prev/next, skip, speed 0.5×–2.5×, sleep timer, resume position |
+| 🖥 **Desktop layout** | ≥900px swaps the tab bar for a persistent left sidebar (Home/Search/Library/Settings) |
+| ⭐ **Subscriptions** | star podcasts; live in **Library**; OPML import/export + JSON backup |
+| 🎨 **Themes** | Auto (system), Dark, Light, OLED Black; 7 accent colors (amber "dial glow" default) |
 | 🌍 **Multilingual** | TR / EN / DE / FR / ES / AR / JA / RU (incl. RTL) |
 | 📲 **Installable** | PWA with maskable/monochrome icons, shortcuts, store screenshots |
-| ♿ **Accessible** | native `<dialog>` settings, aria-live status, keyboard-operable, `prefers-reduced-motion` |
+| ♿ **Accessible** | keyboard-operable views, aria-live status/busy states, focus management on navigation, `prefers-reduced-motion` |
 
 #### Keyboard shortcuts
 
+Active while a podcast feed or the Now Playing sheet is open (not while typing in a field):
+
 | Key | Action |
 |-----|--------|
 | `Space` | Play / pause |
 | `←` / `→` | Seek back / forward |
 | `↑` / `↓` | Previous / next episode |
+| `Esc` | Close the Now Playing sheet |
 
 ### 🚀 Getting started
 
@@ -89,9 +99,20 @@ and falls back to public CORS proxies automatically when it is unreachable.
 │   ├── player/            # audio engine, media session, sleep timer, offline downloads
 │   ├── state/             # signals: settings, queue, now-playing
 │   ├── storage/           # localStorage (legacy keys), IndexedDB, OPML
-│   ├── ui/                # shell, router, screens, mini player, theme, toast, waveform
+│   ├── ui/
+│   │   ├── playback-controller.ts  # headless playback session, shared by every view
+│   │   ├── views/          # home, search, library, podcast, queue, settings, now-playing
+│   │   ├── views.ts        # view registry (show/hide, focus hand-off)
+│   │   ├── nav.ts          # tab bar / sidebar controller
+│   │   ├── router.ts       # ?podcast= / ?rss= / ?yt= / ?view= ↔ history
+│   │   └── shell.ts, theme.ts, mini-player.ts, toast.ts, waveform.ts, confirm.ts, …
 │   ├── i18n/              # 8 languages, compile-time key completeness
-│   ├── styles/            # tokens / themes / base / components
+│   ├── styles/
+│   │   ├── tokens.css, themes.css, base.css, layout.css, controls.css,
+│   │   │   overlays.css, signal-line.css   # design-system layers
+│   │   ├── views/          # one stylesheet per view (home, search, library, podcast,
+│   │   │                   # queue, settings, now-playing)
+│   │   └── index.css       # barrel import
 │   └── sw.ts              # service worker (injectManifest)
 ├── worker/                # Cloudflare Worker API (Hono): /v1/feed /v1/itunes /v1/yt/*
 ├── public/                # manifest, icons (incl. maskable/monochrome), screenshots,
@@ -142,6 +163,14 @@ linki yapıştır — çal, kaldığın yerden devam et, kuyruğa ekle, bölüml
 Cloudflare Worker arka ucu; PWA / Microsoft Store / Google Play uygulaması
 olarak kurulabilir.
 
+**"Sinyal" tasarımı** — sıcak antrasit yüzeyler, kehribar "radyo kadranı"
+vurgusu ve imza niteliğindeki frekans-çizgisi dalga-form motifi. Gezinme;
+alttan sekme çubuğu (mobil) / soldan kenar çubuğu (masaüstü) olmak üzere dört
+bölümden oluşur — **Ana Sayfa** (kaldığın yerden devam et + abonelikler),
+**Ara**, **Kütüphane** (abonelikler/indirilenler) ve **Ayarlar** — ayrıca
+oynatma, uyku zamanlayıcısı, hız ve kuyruğa erişim için tam ekran **Şimdi
+Çalıyor** paneli.
+
 **▶ Canlı:** https://iacbi.github.io/seseri/ ·
 **🪟 Windows uygulaması:** [kurulumu indir](https://github.com/IACBI/seseri/releases/latest)
 
@@ -152,16 +181,16 @@ olarak kurulabilir.
 | 🔍 **Podcast arama** | isim, Apple Podcasts linki veya doğrudan RSS URL'si |
 | ▶️ **YouTube yayınları** | **isimle ara** (kanal/playlist/videolar sonuçlarda listelenir) veya link yapıştır; ses Worker üzerinden akar (Innertube + range destekli proxy → arka plan/kilit ekranı çalma) ya da Piped'e, o da olmazsa resmi `youtube-nocookie` embed'e düşer |
 | 📥 **Çevrimdışı bölümler** | indirilenler Cache API'de yaşar, bağlantısız çalar ve sarar; feed'ler IndexedDB'de önbelleklenir, arka planda tazelenir |
-| 🧾 **Kuyruk** | bölümü "sıradaki" olarak işaretle — kuyruk, liste sırasından önce gelir |
-| 🎧 **Mini oynatıcı** | feed'den çıkınca çalma sürer; ana ekrandaki yüzen bar seni geri götürür |
-| 🌊 **Dalga-form çubuğu** | bölüme özel, sürüklenebilir dalga-form; canlı oynatma başı |
-| 🎛 **Tam oynatıcı** | oynat/duraklat, önceki/sonraki, atlama, 0.5×–2.5× hız, uyku zamanlayıcısı |
-| 🖥 **Masaüstü düzeni** | ≥900px'te solda kütüphane rayı, sağda bölüm paneli |
-| ⭐ **Abonelikler** | yıldızla; OPML içe/dışa aktarma + JSON yedek |
-| 🎨 **Temalar** | Otomatik (sistem), Koyu, Açık, OLED Siyah; 7 vurgu rengi |
+| 🧾 **Kuyruk** | bölümü "sıradaki" olarak işaretle — kuyruk, liste sırasından önce gelir; kendi sayfası **Kuyruk** görünümünde |
+| 🎧 **Mini transport** | feed'den çıkınca çalma sürer; kalıcı dock üzerinde atlama/oynat kontrolleri (geniş ekranda önceki/sonraki ve hız) ve dokunarak sarılabilir ilerleme çizgisi — ok simgesi tam **Şimdi Çalıyor** panelini açar |
+| 🌊 **Frekans-çizgisi dalga-form** | imza motif — Şimdi Çalıyor panelinde sürüklenebilir kahraman dalga-form, çalarken mini oynatıcıda animasyonlu çizgi |
+| 🎛 **Şimdi Çalıyor paneli** | tam ekran (mobil) / yüzen panel (masaüstü): oynat/duraklat, önceki/sonraki, atlama, 0.5×–2.5× hız, uyku zamanlayıcısı |
+| 🖥 **Masaüstü düzeni** | ≥900px'te sekme çubuğu yerini kalıcı soldan kenar çubuğuna bırakır (Ana Sayfa/Ara/Kütüphane/Ayarlar) |
+| ⭐ **Abonelikler** | yıldızla; **Kütüphane**'de yaşar; OPML içe/dışa aktarma + JSON yedek |
+| 🎨 **Temalar** | Otomatik (sistem), Koyu, Açık, OLED Siyah; 7 vurgu rengi (varsayılan kehribar "kadran ışıltısı") |
 | 🌍 **Çok dilli** | TR / EN / DE / FR / ES / AR / JA / RU (RTL dahil) |
 | 📲 **Kurulabilir** | maskable/monochrome ikonlu PWA, kısayollar, mağaza görselleri |
-| ♿ **Erişilebilir** | native `<dialog>` ayarlar, aria-live durum, klavye, `prefers-reduced-motion` |
+| ♿ **Erişilebilir** | klavyeyle kullanılabilir görünümler, aria-live durum/busy, gezinmede odak yönetimi, `prefers-reduced-motion` |
 
 ### 🚀 Hızlı başlangıç
 
diff --git a/desktop/src-tauri/tauri.conf.json b/desktop/src-tauri/tauri.conf.json
index b5130c0..7033aed 100644
--- a/desktop/src-tauri/tauri.conf.json
+++ b/desktop/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Seseri",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "identifier": "io.github.iacbi.seseri",
   "build": {
     "frontendDist": "https://iacbi.github.io/seseri/",
diff --git a/docs/STORE.md b/docs/STORE.md
index 325277f..183cc09 100644
--- a/docs/STORE.md
+++ b/docs/STORE.md
@@ -73,14 +73,14 @@ npm install          # bir kez
 npx tauri build      # ilk seferde Rust bağımlılıklarını derler (5-15 dk)
 ```
 
-Çıktı: `desktop/src-tauri/target/release/bundle/nsis/Seseri_3.0.0_x64-setup.exe`
+Çıktı: `desktop/src-tauri/target/release/bundle/nsis/Seseri_4.0.0_x64-setup.exe`
 
 ### Dağıtma (GitHub Releases)
 
 ```bash
-gh release create v3.0.0 \
-  "desktop/src-tauri/target/release/bundle/nsis/Seseri_3.0.0_x64-setup.exe" \
-  --repo IACBI/seseri --title "Seseri 3.0.0" \
+gh release create v4.0.0 \
+  "desktop/src-tauri/target/release/bundle/nsis/Seseri_4.0.0_x64-setup.exe" \
+  --repo IACBI/seseri --title "Seseri 4.0.0" \
   --notes "Windows kurulumu — indir, çalıştır, kur."
 ```
 
@@ -97,8 +97,11 @@ gh release create v3.0.0 \
 - **Sürüm güncelleme:** uygulama içeriği web'den geldiği için yeni installer
   yalnızca ikon/pencere gibi kabuk değişikliklerinde gerekir
   (`tauri.conf.json` → `version` artır, yeniden `tauri build`, yeni release).
-- İkonlar `npx tauri icon ../public/icons/icon-512.png` ile S-monogramından
-  yeniden üretilir.
+- İkonlar `npx tauri icon ../public/icons/icon-512.png` ile "sinyal"
+  markasından (beş çubuklu frekans işareti) yeniden üretilir; kaynak PNG'ler
+  `node scripts/icons.cjs` ile `public/icons/seseri.svg`'den çıkar. Not:
+  4.0'ta marka S-monogramından sinyal işaretine geçti — bir sonraki masaüstü
+  sürümünde `tauri icon` adımı yeniden koşulmalı.
 
 ---
 
@@ -127,7 +130,13 @@ gh release create v3.0.0 \
    kontrolleri, URL çubuğunun görünmediği doğrulanır.
 7. **Grow → Store presence → Main store listing:** açıklama, 512 ikon,
    1024×500 feature graphic, telefon ekran görüntüleri
-   (`public/screenshots/narrow-*.png` kullanılabilir).
+   (`public/screenshots/narrow-*.png` kullanılabilir — 4.0 ile birlikte
+   "Sinyal" kimliğini ve yeni gezinmeyi (Ana Sayfa/Ara/Kütüphane/Ayarlar +
+   Şimdi Çalıyor paneli) yansıtacak şekilde yeniden üretilecek).
+   Açıklama metni artık sıcak antrasit/kehribar "Sinyal" kimliğini ve
+   alttan sekme çubuğu / soldan kenar çubuğu ile Ana Sayfa, Ara, Kütüphane,
+   Ayarlar ekranlarını anlatmalı — eski iki ekranlı (arama + oynatıcı) ve
+   menekşe renkli sürüm açıklaması artık geçerli değil.
 8. **Policy → App content:** gizlilik politikası URL'i, Data safety formu
    (veri toplanmıyor; tüm veriler cihazda), IARC anketi.
 9. **Production → Create release** → aynı `.aab` → **Submit for review**
@@ -178,7 +187,7 @@ Bu adımlar tamamlanana kadar iOS desteği "Safari PWA" olarak belgelenir.
 
 ## Sürüm kontrol listesi
 
-- [ ] `npm run verify` yeşil (lint, tsc, 102+26 test, build)
+- [ ] `npm run verify` yeşil (lint, tsc, 121 istemci + 26 worker birim testi, build)
 - [ ] `v*` tag'i push edilince `.github/workflows/desktop.yml` NSIS
       kurulumunu taslak Release olarak üretir (imzasız — SmartScreen uyarısı)
 - [ ] `node scripts/smoke-p3-offline.cjs` ve `smoke-p5-mini.cjs` yeşil
diff --git a/docs/TESTPLAN.md b/docs/TESTPLAN.md
index 2a707da..db2feb7 100644
--- a/docs/TESTPLAN.md
+++ b/docs/TESTPLAN.md
@@ -5,7 +5,7 @@ Referans davranış: `v1-legacy` git etiketi (`git checkout v1-legacy` + `npx se
 
 ## 1. Arama ve keşif
 
-- [ ] Ana ekranda arama kutusuna "radyo tiyatrosu" yaz → iTunes sonuçları kapak + isim + sanatçıyla listelenir.
+- [ ] **Ara** sekmesine geç, arama kutusuna "radyo tiyatrosu" yaz → iTunes sonuçları kapak + isim + sanatçıyla listelenir.
 - [ ] Sonuca tıkla → podcast ekranı açılır, bölümler listelenir (tarih + süre görünür).
 - [ ] Arama kutusuna Apple podcast **sayısal ID** yapıştır → doğrudan o podcast açılır.
 - [ ] Arama kutusuna **ham RSS URL** yapıştır (örn. `https://feeds.simplecast.com/54nAGcIl`) → feed açılır.
@@ -39,9 +39,10 @@ Referans davranış: `v1-legacy` git etiketi (`git checkout v1-legacy` + `npx se
 
 ## 5. Abonelikler (favoriler)
 
-- [ ] Podcast'i favorile → ana ekranda kart olarak görünür.
+- [ ] Podcast'i favorile → **Kütüphane → Abonelikler** sekmesinde kart olarak görünür.
 - [ ] Favoriden kaldır → karttan düşer.
 - [ ] Favori karta tıkla → podcast açılır, son çalınan bölüm hatırlanır (`pp_last_*`).
+- [ ] Aboneliği olan podcast'ler **Ana Sayfa**'daki abonelikler ızgarasında da görünür.
 
 ## 6. İndirme
 
@@ -56,23 +57,28 @@ Referans davranış: `v1-legacy` git etiketi (`git checkout v1-legacy` + `npx se
 
 ## 8. Ayarlar
 
-- [ ] Ayarlar paneli açılır/kapanır; Esc ile kapanır.
+- [ ] **Ayarlar** artık sekme çubuğu/kenar çubuğundan açılan tam sayfa bir görünüm (eski modal `<dialog>` değil); geri tuşu/kenar çubuğundan diğer sekmelere geçilebilir.
 - [ ] Hız, atlama süreleri, auto-next, resume ayarları kalıcıdır (yenile → korunur).
-- [ ] 7 vurgu rengi değişir ve tüm UI'a yansır.
+- [ ] 7 vurgu rengi (Amber/Copper/Signal Red/Moss/Teal/Sky/Lilac) değişir ve tüm UI'a yansır; varsayılan Amber.
+- [ ] Eski bir sürümden gelen (3.x) kayıtlı vurgu rengiyle açılınca en yakın yeni Sinyal rengine otomatik eşlenir (`normalizeAccent`), swatch'ta doğru olan aktif görünür.
 - [ ] Yazı boyutu ve satır yüksekliği değişir.
 - [ ] Varsayılan sıralama çalışır (yeni→eski / eski→yeni).
-- [ ] "İlerlemeyi temizle" ve "Tümünü temizle" çalışır (onaylı).
+- [ ] "İlerlemeyi temizle" ve "Tümünü temizle" çalışır (onaylı, styled confirm dialog).
+- [ ] Depolama satırı kullanım gösterir; "İndirilenleri Sil" onaylı çalışır.
 
 ## 9. Tema ve dil
 
-- [ ] 3 tema: dark / light / oled — hepsi tutarlı görünür.
-- [ ] Dil değiştir: **tr / en** tam kontrol; diğerlerinden en az biri spot kontrol.
-- [ ] **ar** seçince RTL düzeni doğru (yönler, hizalar).
+- [ ] 4 tema: **Otomatik / Dark / Light / OLED Black** — hepsi Sinyal paletiyle (sıcak antrasit yüzeyler) tutarlı görünür.
+- [ ] Ayarlar ekranından dil değiştir: **tr / en** tam kontrol; diğerlerinden en az biri spot kontrol.
+- [ ] **ar** seçince RTL düzeni doğru (yönler, hizalar, sekme çubuğu/kenar çubuğu dahil).
 - [ ] İlk açılışta tarayıcı diline göre otomatik dil.
 
 ## 10. Klavye
 
-- [ ] Space: play/pause; ←/→: seek; ↑/↓ veya liste okları: bölüm gezinme (mevcut kısayol seti).
+- [ ] Podcast ekranı açıkken **veya** Şimdi Çalıyor paneli açıkken: Space play/pause; ←/→ seek; ↑/↓ önceki/sonraki bölüm.
+- [ ] Bir input/select/textarea'ya odaklanmışken bu kısayollar tetiklenmez.
+- [ ] Ana Sayfa/Ara/Kütüphane görünümlerinde (feed kapalı, panel kapalı) bu kısayollar pasif.
+- [ ] Şimdi Çalıyor paneli açıkken Esc paneli kapatır (geçmişe eklenmez — tek adımda kapanır).
 - [ ] Bölüm listesinde klavyeyle gezinme + Enter ile çalma.
 
 ## 11. PWA
@@ -95,36 +101,70 @@ Referans davranış: `v1-legacy` git etiketi (`git checkout v1-legacy` + `npx se
 - [ ] CORS engelli bir feed'de indirme → dosya indirme fallback bildirimi.
 - [ ] OPML dışa aktar → içe aktar → abonelikler aynı (round-trip).
 
-## 14. Mini oynatıcı & kuyruk (v3)
+## 14. Mini oynatıcı, Şimdi Çalıyor paneli & kuyruk
 
-- [ ] Bölüm çalarken "Geri" → ana ekran; **çalma devam eder**, altta mini bar görünür.
-- [ ] Mini bardaki oynat/duraklat yerinde çalışır (gezinmez).
-- [ ] Mini bara dokun → aynı feed'e döner (yeniden yüklenmez, çalan bölüm işaretli).
-- [ ] Satırdaki kuyruk düğmesi → sıra numarası rozeti; bölüm bitince kuyruktaki çalar.
+- [ ] Bölüm çalarken "Geri" → ana ekran (veya önceki sekme); **çalma devam eder**, altta kalıcı mini dock görünür.
+- [ ] Mini dock'taki oynat/duraklat yerinde çalışır (gezinmez, panel açmaz).
+- [ ] Mini dock'a dokun/Enter → tam ekran (mobil) / yüzen panel (masaüstü) **Şimdi Çalıyor** paneli açılır — feed yeniden yüklenmez, çalan bölüm işaretli.
+- [ ] Çalarken mini dock'taki frekans-çizgisi animasyonlu; duraklatınca veya `prefers-reduced-motion` altında sabit çizgiye döner.
+- [ ] Şimdi Çalıyor panelinde hero dalga-form üzerinde sürükle-bırak seek çalışır.
+- [ ] Panelin kapat düğmesi ve Esc ikisi de paneli kapatır, odak tetikleyici elemana döner.
+- [ ] **Kuyruk** görünümü (sekme çubuğu/kenar çubuğunda yok — Şimdi Çalıyor panelinden veya `?view=queue` ile açılır): sıralı liste, yukarı/aşağı taşı, kaldır, tümünü temizle çalışır.
+- [ ] Satırdaki kuyruk düğmesi → sıra numarası rozeti; bölüm bitince **kuyruk her zaman auto-next'ten önce gelir** (kuyrukta bölüm varsa auto-next ayarı ne olursa olsun kuyruktaki çalar).
 - [ ] Farklı feed açınca kuyruk sıfırlanır.
 
-## 15. Masaüstü düzeni & tema (v3)
+## 15. Masaüstü düzeni & tema
 
-- [ ] ≥900px + feed açık: solda kütüphane rayı (arama + abonelikler), sağda bölümler; ray'dan abonelik tıklamak sağı değiştirir.
-- [ ] <900px: tek ekran davranışı korunur.
-- [ ] Tema "Otomatik": işletim sistemi teması değişince uygulama canlı uyar.
+- [ ] ≥900px: sekme çubuğu yerine solda **kalıcı kenar çubuğu** (Ana Sayfa/Ara/Kütüphane/Ayarlar); aktif sekme vurgulanır (`aria-current="page"`).
+- [ ] ≥900px: mini dock kenar çubuğunun sağında, tam genişlikte konumlanır (kenar çubuğunu örtmez).
+- [ ] <900px: alttan sekme çubuğu + tek panelli ekran davranışı korunur.
+- [ ] Tema "Otomatik": işletim sistemi teması değişince uygulama canlı uyar (4 tema: Dark/Light/OLED Black + Otomatik).
 - [ ] Bölüm satırlarında ilerleme çizgisi; bitenler soluk + ✓.
 
 ## 16. Responsive & erişilebilirlik denetimi
 
 Ekran görüntüsü altyapısı: `scripts/shot.cjs` (headless Edge + vite preview; önce `npm run build`).
 
-- [ ] Genişlikler: **320 / 360 / 390 / 520 / 600 / 768 / 900 / 1280** — ana ekran, arama sonuçları, feed, ayarlar paneli: yatay kaydırma yok, metinler taşmaz (ellipsis), bileşenler üst üste binmez.
-- [ ] 360×640'ta ayarlar paneli dikey kaydırılabilir, tüm satırlar erişilebilir.
+- [ ] Genişlikler: **320 / 360 / 390 / 520 / 600 / 768 / 900 / 1280** — Ana Sayfa, Ara, feed, Ayarlar sayfası: yatay kaydırma yok, metinler taşmaz (ellipsis), bileşenler üst üste binmez.
+- [ ] 360×640'ta Ayarlar sayfası dikey kaydırılabilir, tüm satırlar erişilebilir.
 - [ ] ≤520px: sıralama etiketi gizli, sıralama düğmesi yönü göstermeye devam eder.
 - [ ] Light temada aynı genişliklerde kontrast/okunabilirlik kontrolü (özellikle küçük mono etiketler).
-- [ ] `ar` (RTL): başlık, kontroller ve liste hizaları aynalanır; taşma yok.
-- [ ] Klavye: Tab ile arama sonuçları gezinilir, Enter/Space açar; select/range odak halkası görünür; ayarlar kapatma düğmesi anlamlı `aria-label` taşır.
+- [ ] `ar` (RTL): başlık, kontroller, liste hizaları **ve sekme çubuğu/kenar çubuğu** aynalanır; taşma yok.
+- [ ] Klavye: Tab ile arama sonuçları gezinilir, Enter/Space açar; select/range odak halkası görünür; sekme çubuğu/kenar çubuğu öğeleri Tab ile erişilebilir, aktif öğe `aria-current="page"` taşır; Şimdi Çalıyor paneli kapatma düğmesi anlamlı `aria-label` taşır.
 - [ ] Arama hatasında kırmızı hata kutusu + "Tekrar dene" düğmesi; boş sonuçta boş durum mesajı; yükleme sırasında "Aranıyor..." kutusu.
 
-## 17. Worker & derin linkler (v3)
+## 17. Worker & derin linkler
 
 - [ ] `npm run worker:dev` açıkken RSS worker üzerinden gelir (Network'te `/v1/feed`).
 - [ ] Worker kapalıyken aynı feed halka açık proxy'lerle yine yüklenir.
 - [ ] `?resume=1` → son açılan feed otomatik açılır (mağaza kısayolu).
-- [ ] Deep-link ile gelinen sayfada "Geri" → siteden çıkmaz, ana ekrana döner.
+- [ ] `?view=search` / `?view=library` / `?view=queue` / `?view=settings` → ilgili görünüm doğrudan açılır (soğuk yükleme).
+- [ ] Legacy derin linkler (`?podcast=`, `?rss=`, `?yt=`) hâlâ çalışır — 3.x'ten paylaşılan bir link 4.0'da da aynı feed'i açar.
+- [ ] Deep-link ile gelinen sayfada (feed **veya** `?view=`) "Geri" → siteden çıkmaz, tek adımda ana ekrana döner (tarayıcı geri tuşu **ve** uygulama içi geri tuşu).
+- [ ] Bir view'dan başka bir view'a geçip sonra geri tuşuna basınca da tek adımda ana ekrana dönülür (aradaki view geçmişte "yığılmaz").
+- [ ] PWA manifest kısayolu "Ara" → `?view=search` açar (eski davranış: boş başlangıç URL'i).
+
+## 18. Oynatma regresyon matrisi
+
+Her kaynak × eylem kombinasyonu en az bir kez denenir; ✓/✗ olarak işaretlenir.
+
+| Kaynak / Eylem | Play | Seek | Sonraki/Önceki | Auto-next | Kuyruk auto-next'i ezer | Çevrimdışı indir+çal | Uyku zamanlayıcısı | Hız | Medya tuşları | Mini→Şimdi Çalıyor |
+|---|---|---|---|---|---|---|---|---|---|---|
+| RSS | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] |
+| iTunes (RSS'e çözümlenir) | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] |
+| YouTube — tekil video | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] |
+| YouTube — playlist | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] | [ ] |
+
+Notlar:
+- **Kuyruk auto-next'i ezer**: bir bölüm kuyruğa eklenmişken çalınan bölüm biterse, auto-next ayarı açık/kapalı fark etmeksizin kuyruktaki bölüm çalar (`playback-controller.ts` — `dequeueNext` her zaman `autoNext` kontrolünden önce denenir).
+- **Çevrimdışı indir+çal**: DevTools → Network → Offline ile denenir; indirilen bölüm hem çalar hem seek eder. YouTube'da embed fallback'e düşen bölümler indirilemez (yalnızca Worker/Piped üzerinden çözümlenen ses indirilebilir) — bu durum ayrı satırda "N/A" olarak işaretlenebilir.
+- **Medya tuşları**: kilit ekranı/bildirim paneli play/pause/next/prev; başlık+kapak görünür.
+- **Mini transport**: mini dock üzerinde geri/ileri sarma + oynat/duraklat (≥640px'te önceki/sonraki ortada; uyku zamanlayıcısı + hız sağ kümede, panel seçicileriyle senkron); alt ilerleme çizgisi dokun/sürükle ile sarar. Başlık alanı veya genişletme oku (Enter/Space dahil) yeni bölüm başlatmadan Şimdi Çalıyor panelini açar.
+- **Embed→ses kurtarma**: iframe fallback ile başlayan YouTube bölümünde uygulama arka planda ses çözümlemeyi yeniden dener ve akış çözüldüğünde aynı konumdan `<audio>`'ya kesintisiz geçer (kilit ekranı çalması + medya tuşları geri gelir).
+
+### Yeni gezinme kontrolleri
+
+- [ ] Sekme çubuğu (mobil) / kenar çubuğu (masaüstü): Ana Sayfa/Ara/Kütüphane/Ayarlar arasında geçiş, aktif sekme vurgusu.
+- [ ] `?view=` derin linkleri (yukarıdaki bölüm 17) soğuk yükleme + uygulama-içi gezinme ile çalışır.
+- [ ] Geri tuşu tek-adım-ana-ekran kuralı: feed → geri → ana ekran; view → geri → ana ekran; view → view → geri → ana ekran (asla iki adım gerekmez).
+- [ ] Esc: Şimdi Çalıyor paneli açıkken kapatır; Onay diyaloğu açıkken iptal eder (odak Vazgeç'te varsayılan).
diff --git a/docs/screens-v2/01-home.png b/docs/screens-v2/01-home.png
deleted file mode 100644
index ecb8980..0000000
Binary files a/docs/screens-v2/01-home.png and /dev/null differ
diff --git a/docs/screens-v2/02-results.png b/docs/screens-v2/02-results.png
deleted file mode 100644
index 35582d7..0000000
Binary files a/docs/screens-v2/02-results.png and /dev/null differ
diff --git a/docs/screens-v2/03-playing.png b/docs/screens-v2/03-playing.png
deleted file mode 100644
index 8542b50..0000000
Binary files a/docs/screens-v2/03-playing.png and /dev/null differ
diff --git a/docs/screens-v2/04-settings.png b/docs/screens-v2/04-settings.png
deleted file mode 100644
index b223115..0000000
Binary files a/docs/screens-v2/04-settings.png and /dev/null differ
diff --git a/docs/screens-v2/05-light.png b/docs/screens-v2/05-light.png
deleted file mode 100644
index 9d2a9ee..0000000
Binary files a/docs/screens-v2/05-light.png and /dev/null differ
diff --git a/docs/screens-v2/06-home-favs.png b/docs/screens-v2/06-home-favs.png
deleted file mode 100644
index b5c056c..0000000
Binary files a/docs/screens-v2/06-home-favs.png and /dev/null differ
diff --git a/docs/screens-v2/07-youtube.png b/docs/screens-v2/07-youtube.png
deleted file mode 100644
index 3dd1efc..0000000
Binary files a/docs/screens-v2/07-youtube.png and /dev/null differ
diff --git a/docs/screens-v4/desktop-feed.png b/docs/screens-v4/desktop-feed.png
new file mode 100644
index 0000000..6ee79c1
Binary files /dev/null and b/docs/screens-v4/desktop-feed.png differ
diff --git a/docs/screens-v4/desktop-home.png b/docs/screens-v4/desktop-home.png
new file mode 100644
index 0000000..5fb5c82
Binary files /dev/null and b/docs/screens-v4/desktop-home.png differ
diff --git a/docs/screens-v4/desktop-search.png b/docs/screens-v4/desktop-search.png
new file mode 100644
index 0000000..0a79a32
Binary files /dev/null and b/docs/screens-v4/desktop-search.png differ
diff --git a/docs/screens-v4/mobile-feed.png b/docs/screens-v4/mobile-feed.png
new file mode 100644
index 0000000..ebd3ae6
Binary files /dev/null and b/docs/screens-v4/mobile-feed.png differ
diff --git a/docs/screens-v4/mobile-home.png b/docs/screens-v4/mobile-home.png
new file mode 100644
index 0000000..3ebe8af
Binary files /dev/null and b/docs/screens-v4/mobile-home.png differ
diff --git a/docs/screens-v4/now-playing-sheet.png b/docs/screens-v4/now-playing-sheet.png
new file mode 100644
index 0000000..eb5e8ed
Binary files /dev/null and b/docs/screens-v4/now-playing-sheet.png differ
diff --git a/docs/screens-v4/settings-view.png b/docs/screens-v4/settings-view.png
new file mode 100644
index 0000000..fb11cfe
Binary files /dev/null and b/docs/screens-v4/settings-view.png differ
diff --git a/docs/screens-v4/tablet-feed.png b/docs/screens-v4/tablet-feed.png
new file mode 100644
index 0000000..3cfc6e7
Binary files /dev/null and b/docs/screens-v4/tablet-feed.png differ
diff --git a/index.html b/index.html
index d047b41..f893892 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@
 <meta name="twitter:card" content="summary">
 <meta name="twitter:image:alt" content="Seseri logo">
 <link rel="manifest" href="manifest.webmanifest">
-<meta name="theme-color" content="#0d0e13">
+<meta name="theme-color" content="#171310">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
@@ -43,7 +43,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="preconnect" href="https://itunes.apple.com">
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Schibsted+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap">
 </head>
 <body>
 <div id="app"></div>
diff --git a/package.json b/package.json
index 29a2d8d..295a083 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "seseri",
   "private": true,
-  "version": "3.1.0",
+  "version": "4.0.0",
   "type": "module",
   "description": "Seseri — free, no-account podcast player. iTunes search, RSS, YouTube audio.",
   "license": "MIT",
diff --git a/public/icons/icon-192.png b/public/icons/icon-192.png
index 083a896..4cbc03d 100644
Binary files a/public/icons/icon-192.png and b/public/icons/icon-192.png differ
diff --git a/public/icons/icon-512.png b/public/icons/icon-512.png
index 1e4f55e..b2c0ff1 100644
Binary files a/public/icons/icon-512.png and b/public/icons/icon-512.png differ
diff --git a/public/icons/maskable-192.png b/public/icons/maskable-192.png
index 0416a97..1f8888f 100644
Binary files a/public/icons/maskable-192.png and b/public/icons/maskable-192.png differ
diff --git a/public/icons/maskable-512.png b/public/icons/maskable-512.png
index a2ce9b6..b072bea 100644
Binary files a/public/icons/maskable-512.png and b/public/icons/maskable-512.png differ
diff --git a/public/icons/monochrome-512.png b/public/icons/monochrome-512.png
index 12817b2..5920c22 100644
Binary files a/public/icons/monochrome-512.png and b/public/icons/monochrome-512.png differ
diff --git a/public/icons/seseri.svg b/public/icons/seseri.svg
index b7987a0..98bb500 100644
--- a/public/icons/seseri.svg
+++ b/public/icons/seseri.svg
@@ -1,20 +1,27 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!-- Seseri "sinyal" mark: five round-capped bars, amber dial glow on warm charcoal. -->
   <defs>
     <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#948af9"/>
-      <stop offset="1" stop-color="#6a5ad6"/>
+      <stop offset="0" stop-color="#241c13"/>
+      <stop offset="1" stop-color="#14100c"/>
     </linearGradient>
-    <radialGradient id="sheen" cx="0.32" cy="0.22" r="0.9">
-      <stop offset="0" stop-color="#ffffff" stop-opacity="0.28"/>
-      <stop offset="0.55" stop-color="#ffffff" stop-opacity="0"/>
+    <linearGradient id="bar" gradientUnits="userSpaceOnUse" x1="0" y1="106" x2="0" y2="406">
+      <stop offset="0" stop-color="#ffc46b"/>
+      <stop offset="0.55" stop-color="#f2a33c"/>
+      <stop offset="1" stop-color="#c98a33"/>
+    </linearGradient>
+    <radialGradient id="sheen" cx="0.32" cy="0.2" r="0.95">
+      <stop offset="0" stop-color="#f2a33c" stop-opacity="0.14"/>
+      <stop offset="0.6" stop-color="#f2a33c" stop-opacity="0"/>
     </radialGradient>
   </defs>
   <rect width="512" height="512" rx="116" fill="url(#bg)"/>
   <rect width="512" height="512" rx="116" fill="url(#sheen)"/>
-  <!-- S monogram: two 270° arcs, one continuous stroke -->
-  <path d="M 334 184 A 78 78 0 1 0 256 262 A 78 78 0 1 1 178 340"
-        fill="none" stroke="rgba(20,16,50,0.22)" stroke-width="60" stroke-linecap="round"
-        transform="translate(0 5)"/>
-  <path d="M 334 184 A 78 78 0 1 0 256 262 A 78 78 0 1 1 178 340"
-        fill="none" stroke="#ffffff" stroke-width="60" stroke-linecap="round"/>
+  <g stroke="url(#bar)" stroke-width="44" stroke-linecap="round">
+    <line x1="100" y1="205" x2="100" y2="307"/>
+    <line x1="178" y1="148" x2="178" y2="364"/>
+    <line x1="256" y1="106" x2="256" y2="406"/>
+    <line x1="334" y1="178" x2="334" y2="334"/>
+    <line x1="412" y1="136" x2="412" y2="376"/>
+  </g>
 </svg>
diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
index 195b545..0944d58 100644
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -6,8 +6,8 @@
   "display": "standalone",
   "display_override": ["window-controls-overlay", "standalone"],
   "orientation": "any",
-  "background_color": "#0b0c11",
-  "theme_color": "#0b0c11",
+  "background_color": "#171310",
+  "theme_color": "#171310",
   "start_url": "./",
   "scope": "./",
   "lang": "tr",
@@ -52,21 +52,21 @@
       "sizes": "1920x1080",
       "type": "image/png",
       "form_factor": "wide",
-      "label": "Desktop: library rail beside the episode list"
+      "label": "Desktop: sidebar navigation beside the episode list"
     },
     {
       "src": "screenshots/narrow-home.png",
       "sizes": "1080x1920",
       "type": "image/png",
       "form_factor": "narrow",
-      "label": "Home: search any podcast or paste a link"
+      "label": "Home: continue listening and subscriptions"
     },
     {
       "src": "screenshots/narrow-feed.png",
       "sizes": "1080x1920",
       "type": "image/png",
       "form_factor": "narrow",
-      "label": "Player: waveform seek, speed and sleep timer"
+      "label": "Podcast: episode list, downloads and queue"
     }
   ],
   "shortcuts": [
@@ -81,7 +81,7 @@
       "name": "Ara / Search",
       "short_name": "Ara",
       "description": "Podcast ara",
-      "url": "./",
+      "url": "./?view=search",
       "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192" }]
     }
   ]
diff --git a/public/screenshots/narrow-feed.png b/public/screenshots/narrow-feed.png
index f8e4726..d6531b3 100644
Binary files a/public/screenshots/narrow-feed.png and b/public/screenshots/narrow-feed.png differ
diff --git a/public/screenshots/narrow-home.png b/public/screenshots/narrow-home.png
index 613fe0d..43a5abb 100644
Binary files a/public/screenshots/narrow-home.png and b/public/screenshots/narrow-home.png differ
diff --git a/public/screenshots/wide-feed.png b/public/screenshots/wide-feed.png
index 913698c..5f151c2 100644
Binary files a/public/screenshots/wide-feed.png and b/public/screenshots/wide-feed.png differ
diff --git a/scripts/icons.cjs b/scripts/icons.cjs
index 0df6f0d..432a414 100644
--- a/scripts/icons.cjs
+++ b/scripts/icons.cjs
@@ -8,33 +8,48 @@ const EDGE = 'C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe';
 const ROOT = path.join(__dirname, '..');
 const OUT = path.join(ROOT, 'public', 'icons');
 
-const S_PATH = 'M 334 184 A 78 78 0 1 0 256 262 A 78 78 0 1 1 178 340';
+/* The "sinyal" mark: five round-capped bars (frequency-line crest).
+ * Centers x = 100..412 step 78; heights echo the in-app brand mark. */
+const BARS = [
+  { x: 100, h: 102 },
+  { x: 178, h: 216 },
+  { x: 256, h: 300 },
+  { x: 334, h: 156 },
+  { x: 412, h: 240 },
+];
 const GRAD = `
   <defs>
     <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#948af9"/><stop offset="1" stop-color="#6a5ad6"/>
+      <stop offset="0" stop-color="#241c13"/><stop offset="1" stop-color="#14100c"/>
     </linearGradient>
-    <radialGradient id="sheen" cx="0.32" cy="0.22" r="0.9">
-      <stop offset="0" stop-color="#ffffff" stop-opacity="0.28"/>
-      <stop offset="0.55" stop-color="#ffffff" stop-opacity="0"/>
+    <!-- userSpaceOnUse: zero-width line bboxes can't carry an objectBoundingBox gradient -->
+    <linearGradient id="bar" gradientUnits="userSpaceOnUse" x1="0" y1="106" x2="0" y2="406">
+      <stop offset="0" stop-color="#ffc46b"/><stop offset="0.55" stop-color="#f2a33c"/><stop offset="1" stop-color="#c98a33"/>
+    </linearGradient>
+    <radialGradient id="sheen" cx="0.32" cy="0.2" r="0.95">
+      <stop offset="0" stop-color="#f2a33c" stop-opacity="0.14"/>
+      <stop offset="0.6" stop-color="#f2a33c" stop-opacity="0"/>
     </radialGradient>
   </defs>`;
-const S_MARK = (scale = 1) => `
+const SIG_MARK = (scale = 1, stroke = 'url(#bar)') => `
   <g transform="translate(256 256) scale(${scale}) translate(-256 -256)">
-    <path d="${S_PATH}" fill="none" stroke="rgba(20,16,50,0.22)" stroke-width="60" stroke-linecap="round" transform="translate(0 5)"/>
-    <path d="${S_PATH}" fill="none" stroke="#ffffff" stroke-width="60" stroke-linecap="round"/>
+    ${BARS.map(
+      (b) =>
+        `<line x1="${b.x}" y1="${256 - b.h / 2}" x2="${b.x}" y2="${256 + b.h / 2}"
+           stroke="${stroke}" stroke-width="44" stroke-linecap="round"/>`,
+    ).join('\n    ')}
   </g>`;
 
 /** variant → svg body (512 box) + transparent? */
 const VARIANTS = {
   // rounded tile, transparent corners — launcher/"any"
-  'icon-192': { size: 192, alpha: true, svg: `${GRAD}<rect width="512" height="512" rx="116" fill="url(#bg)"/><rect width="512" height="512" rx="116" fill="url(#sheen)"/>${S_MARK(1)}` },
-  'icon-512': { size: 512, alpha: true, svg: `${GRAD}<rect width="512" height="512" rx="116" fill="url(#bg)"/><rect width="512" height="512" rx="116" fill="url(#sheen)"/>${S_MARK(1)}` },
+  'icon-192': { size: 192, alpha: true, svg: `${GRAD}<rect width="512" height="512" rx="116" fill="url(#bg)"/><rect width="512" height="512" rx="116" fill="url(#sheen)"/>${SIG_MARK(1)}` },
+  'icon-512': { size: 512, alpha: true, svg: `${GRAD}<rect width="512" height="512" rx="116" fill="url(#bg)"/><rect width="512" height="512" rx="116" fill="url(#sheen)"/>${SIG_MARK(1)}` },
   // full-bleed square, mark inside the 80% safe zone — Android maskable
-  'maskable-192': { size: 192, alpha: false, svg: `${GRAD}<rect width="512" height="512" fill="url(#bg)"/><rect width="512" height="512" fill="url(#sheen)"/>${S_MARK(0.74)}` },
-  'maskable-512': { size: 512, alpha: false, svg: `${GRAD}<rect width="512" height="512" fill="url(#bg)"/><rect width="512" height="512" fill="url(#sheen)"/>${S_MARK(0.74)}` },
+  'maskable-192': { size: 192, alpha: false, svg: `${GRAD}<rect width="512" height="512" fill="url(#bg)"/><rect width="512" height="512" fill="url(#sheen)"/>${SIG_MARK(0.74)}` },
+  'maskable-512': { size: 512, alpha: false, svg: `${GRAD}<rect width="512" height="512" fill="url(#bg)"/><rect width="512" height="512" fill="url(#sheen)"/>${SIG_MARK(0.74)}` },
   // white mark on transparency — Android 13 themed icon
-  'monochrome-512': { size: 512, alpha: true, svg: `<g transform="translate(256 256) scale(0.9) translate(-256 -256)"><path d="${S_PATH}" fill="none" stroke="#ffffff" stroke-width="60" stroke-linecap="round"/></g>` },
+  'monochrome-512': { size: 512, alpha: true, svg: SIG_MARK(0.9, '#ffffff') },
 };
 
 (async () => {
diff --git a/scripts/shot.cjs b/scripts/shot.cjs
index 29aa232..d0200e5 100644
--- a/scripts/shot.cjs
+++ b/scripts/shot.cjs
@@ -1,4 +1,5 @@
-/* Screenshot helper for UI review: home + feed at desktop/mobile widths. */
+/* Screenshot helper for UI review of the "Sinyal" UI: home, search view, feed
+ * (desktop/tablet/mobile), the settings VIEW and the Now Playing sheet. */
 const { spawn } = require('child_process');
 const http = require('http');
 const path = require('path');
@@ -9,6 +10,18 @@ const ORIGIN = `http://localhost:${PORT}`;
 const EDGE = 'C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe';
 const OUT = process.argv[2] || path.join(__dirname, '..', 'docs', 'screens-p5');
 
+function makeWav(seconds = 120) {
+  const rate = 8000;
+  const data = Buffer.alloc(rate * seconds, 128); // 8-bit silence
+  const h = Buffer.alloc(44);
+  h.write('RIFF', 0); h.writeUInt32LE(36 + data.length, 4); h.write('WAVE', 8);
+  h.write('fmt ', 12); h.writeUInt32LE(16, 16); h.writeUInt16LE(1, 20); h.writeUInt16LE(1, 22);
+  h.writeUInt32LE(rate, 24); h.writeUInt32LE(rate, 28); h.writeUInt16LE(1, 32); h.writeUInt16LE(8, 34);
+  h.write('data', 36); h.writeUInt32LE(data.length, 40);
+  return Buffer.concat([h, data]);
+}
+const WAV = makeWav();
+
 const LOOKUP = {
   resultCount: 4,
   results: [
@@ -34,7 +47,7 @@ function waitServer(url, tries = 60) {
   let browser;
   try {
     await waitServer(ORIGIN + '/');
-    browser = await puppeteer.launch({ executablePath: EDGE, headless: 'new', args: ['--mute-audio'] });
+    browser = await puppeteer.launch({ executablePath: EDGE, headless: 'new', args: ['--mute-audio', '--autoplay-policy=no-user-gesture-required'] });
     const page = await browser.newPage();
     await page.setRequestInterception(true);
     page.on('request', (req) => {
@@ -46,7 +59,9 @@ function waitServer(url, tries = 60) {
         if (u.includes('itunes.apple.com/search')) {
           return req.respond({ status: 200, contentType: 'application/json', headers: { 'access-control-allow-origin': '*' }, body: JSON.stringify({ results: [ { collectionId: 777000111, collectionName: 'Design Notes', artistName: 'Studio FM', artworkUrl100: '', trackCount: 3 } ] }) }).catch(() => {});
         }
-        if (u.includes('/fake/ep')) return req.abort().catch(() => {});
+        if (u.includes('/fake/ep')) {
+          return req.respond({ status: 200, contentType: 'audio/wav', headers: { 'access-control-allow-origin': '*' }, body: WAV }).catch(() => {});
+        }
         return req.continue().catch(() => {});
       } catch { /* disabled */ }
     });
@@ -67,21 +82,39 @@ function waitServer(url, tries = 60) {
       console.log('shot', s.name);
     }
 
-    // Settings drawer (native dialog)
+    // Search view — type a query and capture the results list
     await page.setViewport({ width: 1280, height: 800 });
-    await page.goto(ORIGIN + '/?podcast=777000111', { waitUntil: 'networkidle2' });
-    await page.waitForSelector('.ep-item', { timeout: 15000 }).catch(() => {});
-    await page.click('#settingsBtn');
+    await page.goto(ORIGIN + '/?view=search', { waitUntil: 'networkidle2' });
+    await page.type('#searchInput', 'design');
+    await page.click('#searchBtn');
+    await page.waitForSelector('#resultsList .row', { timeout: 15000 }).catch(() => {});
     await new Promise((r) => setTimeout(r, 700));
-    const dlg = await page.evaluate(() => {
-      const d = document.getElementById('settingsPanel');
-      return { open: d.open, focusInside: d.contains(document.activeElement) };
+    await page.screenshot({ path: path.join(OUT, 'desktop-search.png') });
+    console.log('shot desktop-search');
+
+    // Settings VIEW (formerly a native <dialog>) — now a plain page view
+    await page.goto(ORIGIN + '/?view=settings', { waitUntil: 'networkidle2' });
+    await page.waitForSelector('#s_theme', { visible: true, timeout: 15000 }).catch(() => {});
+    const settingsOk = await page.evaluate(() => {
+      const themeSel = document.getElementById('s_theme');
+      const view = document.getElementById('view-settings');
+      return { themeVisible: !!themeSel && !themeSel.closest('[hidden]'), view: document.body.dataset.view, hasSwatches: !!document.getElementById('colorSwatches')?.children.length };
     });
-    console.log('settings dialog', JSON.stringify(dlg));
-    await page.screenshot({ path: path.join(OUT, 'settings-dialog.png') });
-    await page.keyboard.press('Escape');
+    console.log('settings view', JSON.stringify(settingsOk));
+    await new Promise((r) => setTimeout(r, 500));
+    await page.screenshot({ path: path.join(OUT, 'settings-view.png') });
+    console.log('shot settings-view');
+
+    // Now Playing sheet — play an episode, then open the sheet from the active row
+    await page.goto(ORIGIN + '/?podcast=777000111', { waitUntil: 'networkidle2' });
+    await page.waitForSelector('.ep-item', { timeout: 15000 }).catch(() => {});
+    await page.click('.ep-item').catch(() => {});
+    await page.waitForFunction(() => document.body.classList.contains('is-playing'), { timeout: 15000 }).catch(() => {});
+    await page.click('.ep-item.active').catch(() => {});
+    await page.waitForFunction(() => document.getElementById('npSheet')?.classList.contains('open'), { timeout: 8000 }).catch(() => {});
     await new Promise((r) => setTimeout(r, 700));
-    console.log('after esc: open =', await page.evaluate(() => document.getElementById('settingsPanel').open));
+    await page.screenshot({ path: path.join(OUT, 'now-playing-sheet.png') });
+    console.log('shot now-playing-sheet');
   } finally {
     if (browser) await browser.close().catch(() => {});
     server.kill('SIGTERM');
diff --git a/scripts/smoke-live.cjs b/scripts/smoke-live.cjs
index 4f2a759..2cd70ad 100644
--- a/scripts/smoke-live.cjs
+++ b/scripts/smoke-live.cjs
@@ -23,19 +23,22 @@ const EDGE = 'C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe';
     await page.evaluate(() => navigator.serviceWorker.ready);
     ok('service worker active', true);
 
-    // Real search → results through the deployed worker
+    // Real search → results through the deployed worker. Search is a view now,
+    // so navigate to it (the nav bar is always mounted) before typing.
+    await page.click('#navSearch');
+    await page.waitForSelector('#searchInput', { visible: true, timeout: 15000 });
     await page.type('#searchInput', 'the daily');
     await page.click('#searchBtn');
-    await page.waitForSelector('.result-item', { timeout: 60000 });
+    await page.waitForSelector('#resultsList .row', { timeout: 60000 });
     const res = await page.evaluate(() => ({
-      rows: document.querySelectorAll('.result-item').length,
+      rows: document.querySelectorAll('#resultsList .row').length,
       hints: [...document.querySelectorAll('.search-hint')].map((h) => h.textContent.trim()),
     }));
     ok('search returns results', res.rows > 0, `${res.rows} rows · ${res.hints.join(' | ')}`);
     ok('YouTube section present', res.hints.some((t) => t.includes('YouTube')));
 
     // Open the first podcast and play an episode (real audio CDN)
-    await page.click('.result-item');
+    await page.click('#resultsList .row');
     await page.waitForSelector('.ep-item', { timeout: 60000 });
     const eps = await page.$$eval('.ep-item', (n) => n.length);
     ok('feed opens', eps > 5, `${eps} eps`);
diff --git a/scripts/smoke-p3-offline.cjs b/scripts/smoke-p3-offline.cjs
index a07883e..f62473e 100644
--- a/scripts/smoke-p3-offline.cjs
+++ b/scripts/smoke-p3-offline.cjs
@@ -71,8 +71,8 @@ function waitServer(url, tries = 60) {
     await page.goto(`${ORIGIN}/?podcast=777000111`, { waitUntil: 'networkidle2' });
     console.log('  [state]', JSON.stringify(await page.evaluate(() => ({
       href: location.href,
-      search: document.getElementById('searchScreen')?.style.display,
-      player: document.getElementById('playerScreen')?.style.display,
+      view: document.body.dataset.view,
+      feedOpen: document.body.classList.contains('feed-open'),
       idb: typeof indexedDB,
     }))));
     await page.waitForSelector('.ep-item', { timeout: 20000 });
@@ -104,21 +104,26 @@ function waitServer(url, tries = 60) {
     const stillDone = await page.$('.ep-dl-btn.done');
     ok('offline: download badge persists', !!stillDone);
 
-    // 4) Play the downloaded episode offline
+    // 4) Play the downloaded episode offline (row click loads+plays; the
+    //    Now Playing sheet stays closed but #tCur updates from the engine)
     await page.click('.ep-item');
     await page.waitForFunction(() => document.body.classList.contains('is-playing'), { timeout: 15000 });
     await new Promise((r) => setTimeout(r, 2500));
     const t1 = await page.$eval('#tCur', (e) => e.textContent);
     ok('offline: downloaded episode plays', t1 !== '0:00', `tCur=${t1}`);
 
-    // 5) Seek works on the blob source
+    // 5) Seek works on the blob source — the seek keys live on the Now Playing
+    //    scrubber, so open the sheet (click the active row) and focus it first
+    await page.click('.ep-item.active');
+    await page.waitForFunction(() => document.getElementById('npSheet')?.classList.contains('open'), { timeout: 8000 });
+    await page.focus('#progressWrap');
     await page.keyboard.press('ArrowRight');
     await new Promise((r) => setTimeout(r, 800));
     const t2 = await page.$eval('#tCur', (e) => e.textContent);
     const secs = (s) => s.split(':').reduce((a, b) => a * 60 + +b, 0);
     ok('offline: seek on downloaded audio', secs(t2) >= secs(t1) + 10, `${t1} -> ${t2}`);
 
-    // 6) Episode 2 (not downloaded) must NOT play offline
+    // 6) Duration comes from the decoded blob (the sheet's #tTot)
     const dur = await page.$eval('#tTot', (e) => e.textContent);
     ok('offline: duration from blob', dur === '2:00', dur);
   } catch (e) {
@@ -130,7 +135,8 @@ function waitServer(url, tries = 60) {
         status: document.getElementById('statusText')?.textContent,
         epList: document.getElementById('epList')?.textContent?.slice(0, 150),
         title: document.getElementById('pTitle')?.textContent,
-        playerVisible: document.getElementById('playerScreen')?.style.display,
+        view: document.body.dataset.view,
+        sheetOpen: document.getElementById('npSheet')?.classList.contains('open'),
       }));
       console.log('  [dump]', JSON.stringify(dump));
     } catch {}
diff --git a/scripts/smoke-p5-mini.cjs b/scripts/smoke-p5-mini.cjs
index 9953019..aaec04c 100644
--- a/scripts/smoke-p5-mini.cjs
+++ b/scripts/smoke-p5-mini.cjs
@@ -66,6 +66,15 @@ function waitServer(url, tries = 60) {
     await page.waitForFunction(() => document.body.classList.contains('is-playing'), { timeout: 15000 });
     ok('episode playing', true);
 
+    // Queue: toggle on the 2nd episode shows position chip, toggle off clears
+    // (done here, while the feed's episode list is on screen)
+    await page.click('.ep-item:nth-child(2) .ep-q-btn');
+    const chip = await page.$eval('.ep-item:nth-child(2) .ep-q-btn', (b) => ({ q: b.classList.contains('queued'), txt: b.textContent.trim() }));
+    ok('queue chip shows position', chip.q && chip.txt === '1', chip.txt);
+    await page.click('.ep-item:nth-child(2) .ep-q-btn');
+    const off = await page.$eval('.ep-item:nth-child(2) .ep-q-btn', (b) => b.classList.contains('queued'));
+    ok('queue toggle off', !off);
+
     // Back to home — playback must survive
     await page.click('#backBtn');
     await page.waitForFunction(() => !document.body.classList.contains('feed-open'), { timeout: 8000 });
@@ -87,24 +96,16 @@ function waitServer(url, tries = 60) {
     ok('mini button pauses in place', paused);
     await page.click('#miniPlay');
 
-    // Tapping the bar returns to the same feed without a reload
-    await page.click('#miniPlayer');
-    await page.waitForFunction(() => document.body.classList.contains('feed-open'), { timeout: 8000 });
-    const back = await page.evaluate(() => ({
+    // The expand chevron (or title area) opens the Now Playing sheet — the bar
+    // itself now hosts inline transport controls, so it is no longer a button.
+    await page.click('#miniExpand');
+    await page.waitForFunction(() => document.getElementById('npSheet')?.classList.contains('open'), { timeout: 8000 });
+    const sheet = await page.evaluate(() => ({
       playing: document.body.classList.contains('is-playing'),
-      eps: document.querySelectorAll('.ep-item').length,
-      active: !!document.querySelector('.ep-item.active'),
-      url: location.search,
+      open: document.getElementById('npSheet').classList.contains('open'),
+      title: document.getElementById('nowTitle')?.textContent,
     }));
-    ok('mini opens feed again, still playing', back.playing && back.eps === 2 && back.active, back.url);
-
-    // Queue: toggle on the 2nd episode shows position chip, toggle off clears
-    await page.click('.ep-item:nth-child(2) .ep-q-btn');
-    const chip = await page.$eval('.ep-item:nth-child(2) .ep-q-btn', (b) => ({ q: b.classList.contains('queued'), txt: b.textContent.trim() }));
-    ok('queue chip shows position', chip.q && chip.txt === '1', chip.txt);
-    await page.click('.ep-item:nth-child(2) .ep-q-btn');
-    const off = await page.$eval('.ep-item:nth-child(2) .ep-q-btn', (b) => b.classList.contains('queued'));
-    ok('queue toggle off', !off);
+    ok('mini opens Now Playing sheet, still playing', sheet.playing && sheet.open, sheet.title);
   } catch (e) {
     ok('smoke run', false, e.message);
   } finally {
diff --git a/scripts/smoke-p8-ytsearch.cjs b/scripts/smoke-p8-ytsearch.cjs
index 529781f..51826e0 100644
--- a/scripts/smoke-p8-ytsearch.cjs
+++ b/scripts/smoke-p8-ytsearch.cjs
@@ -33,7 +33,8 @@ function waitServer(url, tries = 60) {
     const workerYt = [];
     page.on('request', (r) => { if (r.url().includes('8787/v1/yt/')) workerYt.push(r.url().replace(/^.*8787/, '')); });
     await page.setViewport({ width: 1280, height: 800 });
-    await page.goto(ORIGIN + '/', { waitUntil: 'networkidle2' });
+    // Search is a view now — deep-link straight to it so #searchInput is shown.
+    await page.goto(ORIGIN + '/?view=search', { waitUntil: 'networkidle2' });
 
     await page.type('#searchInput', 'lex fridman podcast');
     await page.click('#searchBtn');
@@ -43,38 +44,41 @@ function waitServer(url, tries = 60) {
     );
     const rows = await page.evaluate(() => {
       const hints = [...document.querySelectorAll('.search-hint')].map((h) => h.textContent.trim());
-      return { hints, items: document.querySelectorAll('.result-item').length };
+      return { hints, items: document.querySelectorAll('#resultsList .row').length };
     });
     ok('search shows YouTube section', rows.hints.some((t) => t.includes('YouTube')), rows.hints.join(' | ') + ` · ${rows.items} rows`);
     if (SHOT) await page.screenshot({ path: path.join(SHOT, 'yt-search.png') });
 
     // open the first CHANNEL/PLAYLIST under the YouTube hint (author "YouTube"
-    // and no duration badge marks channels), else fall back to the first row
+    // and no duration/count badge marks channels), else fall back to the first
+    // row. Result rows are now `.row` with `.row-sub` (author) / `.row-meta`.
     await page.evaluate(() => {
-      const nodes = [...document.getElementById('resultsList').children];
+      const nodes = [...document.getElementById('resultsList').querySelectorAll('.search-hint, .row')];
       const yi = nodes.findIndex((n) => n.classList.contains('search-hint') && n.textContent.includes('YouTube'));
-      const ytRows = nodes.slice(yi + 1);
-      const chan = ytRows.find((n) => n.querySelector('.result-author')?.textContent === 'YouTube' && !n.querySelector('.result-count'));
+      const ytRows = nodes.slice(yi + 1).filter((n) => n.classList.contains('row'));
+      const chan = ytRows.find((n) => n.querySelector('.row-sub')?.textContent === 'YouTube' && !n.querySelector('.row-meta'));
       (chan ?? ytRows[0]).click();
     });
     await page.waitForSelector('.ep-item', { timeout: 60000 });
     const eps = await page.$$eval('.ep-item', (n) => n.length);
     ok('YouTube feed opens with episodes', eps >= 1, `${eps} eps`);
 
-    // try playback: click first episode, wait for either audio playing or embed mode
+    // try playback: click first episode, wait for either audio playing (body
+    // .is-playing) or the embed fallback engaging (#npPlayer.yt-mode — the class
+    // is toggled whether or not the Now Playing sheet is open)
     await page.click('.ep-item');
     const outcome = await page
       .waitForFunction(
         () =>
-          document.body.classList.contains('is-playing')
-            ? (document.querySelector('#pPlayer').classList.contains('yt-mode') && document.querySelector('audio')) ? 'audio' : 'playing'
-            : null,
+          document.body.classList.contains('is-playing') ||
+          !!document.querySelector('#npPlayer')?.classList.contains('yt-mode'),
         { timeout: 60000 },
       )
       .then(() => true)
       .catch(() => false);
     const mode = await page.evaluate(() => ({
       playing: document.body.classList.contains('is-playing'),
+      ytMode: !!document.querySelector('#npPlayer')?.classList.contains('yt-mode'),
       status: document.getElementById('statusText')?.textContent,
     }));
     ok('playback starts (stream or embed)', outcome, JSON.stringify(mode));
diff --git a/scripts/store-shots.cjs b/scripts/store-shots.cjs
index 0119d99..4f8eff1 100644
--- a/scripts/store-shots.cjs
+++ b/scripts/store-shots.cjs
@@ -39,19 +39,23 @@ function waitServer(url, tries = 60) {
   try {
     await waitServer(ORIGIN + '/');
     browser = await puppeteer.launch({ executablePath: EDGE, headless: 'new', args: ['--mute-audio'] });
-    const page = await browser.newPage();
-    await page.setRequestInterception(true);
-    page.on('request', (req) => {
-      const u = req.url();
-      try {
-        if (u.includes('itunes.apple.com/lookup')) return req.respond({ status: 200, contentType: 'application/json', headers: { 'access-control-allow-origin': '*' }, body: JSON.stringify(LOOKUP) }).catch(() => {});
-        if (u.includes('/fake/ep')) return req.abort().catch(() => {});
-        return req.continue().catch(() => {});
-      } catch {}
-    });
 
-    const grab = async (name, w, h, url, waitEp) => {
-      await page.setViewport({ width: w, height: h, deviceScaleFactor: 1 });
+    const mock = async (page) => {
+      await page.setRequestInterception(true);
+      page.on('request', (req) => {
+        const u = req.url();
+        try {
+          if (u.includes('itunes.apple.com/lookup')) return req.respond({ status: 200, contentType: 'application/json', headers: { 'access-control-allow-origin': '*' }, body: JSON.stringify(LOOKUP) }).catch(() => {});
+          if (u.includes('/fake/ep')) return req.abort().catch(() => {});
+          return req.continue().catch(() => {});
+        } catch {}
+      });
+    };
+
+    const grab = async (page, name, w, h, dsf, url, waitEp) => {
+      // Narrow shots render the real mobile layout (CSS px < 900) and rely on
+      // deviceScaleFactor to hit the manifest's 1080×1920 output size.
+      await page.setViewport({ width: w, height: h, deviceScaleFactor: dsf });
       await page.goto(ORIGIN + url, { waitUntil: 'networkidle2' });
       if (waitEp) await page.waitForSelector('.ep-item', { timeout: 15000 }).catch(() => {});
       await new Promise((r) => setTimeout(r, 1600)); // let the S finish drawing
@@ -59,9 +63,33 @@ function waitServer(url, tries = 60) {
       console.log('store-shot', name);
     };
 
-    await grab('wide-feed', 1920, 1080, '/?podcast=777000111', true);
-    await grab('narrow-home', 1080, 1920, '/', false);
-    await grab('narrow-feed', 1080, 1920, '/?podcast=777000111', true);
+    const page = await browser.newPage();
+    await mock(page);
+    await grab(page, 'wide-feed', 1920, 1080, 1, '/?podcast=777000111', true);
+
+    // Seed a lived-in home: opening the feed above cached it in IndexedDB, so
+    // a subscription + resume position light up the continue rail + subs grid.
+    // The narrow shots run in a SECOND tab while this one stays open. This
+    // tab's app saves its own (empty) in-memory progress on pagehide AND on
+    // visibilitychange — both would clobber the seed, so silence them first.
+    await page.evaluate(() => {
+      localStorage.setItem('pp_favs', JSON.stringify([
+        { id: '777000111', name: 'Gündem Özel', artist: 'Seseri Stüdyo', art: '' },
+      ]));
+      localStorage.setItem('pp_last_777000111', '333');
+      localStorage.setItem('pp_prog', JSON.stringify({ 333: 1240 }));
+      // Block this tab's own progress writes from clobbering the seed.
+      const orig = Storage.prototype.setItem;
+      Storage.prototype.setItem = function (k, v) {
+        if (k === 'pp_prog') return;
+        return orig.call(this, k, v);
+      };
+    });
+
+    const page2 = await browser.newPage();
+    await mock(page2);
+    await grab(page2, 'narrow-home', 360, 640, 3, '/', false);
+    await grab(page2, 'narrow-feed', 360, 640, 3, '/?podcast=777000111', true);
   } finally {
     if (browser) await browser.close().catch(() => {});
     server.kill('SIGTERM');
diff --git a/src/app.ts b/src/app.ts
index d20594d..c0d04cc 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,8 +1,7 @@
-import { applyLang } from './i18n';
-import { t } from './i18n';
+import { applyLang, t } from './i18n';
 import { initMediaSession } from './player/media-session';
 import { requestPersistence } from './player/offline';
-import { pbCurrent, pbDuration, pbPaused, pbSeekTo } from './player/engine';
+import { pbCurrent, pbDuration, pbSeekTo } from './player/engine';
 import { loadProgress, saveProgressNow, setQuotaListener } from './storage/progress';
 import { local } from './storage/local';
 import { loadSubscriptions } from './storage/subscriptions';
@@ -10,18 +9,24 @@ import { loadSettings, settings } from './state/settings';
 import type { FeedRequest } from './feeds/types';
 import { bindI18nDom } from './ui/i18n-dom';
 import { initMiniPlayer } from './ui/mini-player';
+import { initNav, type NavDestination } from './ui/nav';
 import { initOfflineBanner } from './ui/offline-banner';
-import { initRouter, parseLocation } from './ui/router';
+import { createPlaybackController } from './ui/playback-controller';
+import { initRouter, parseLocation, type AppView } from './ui/router';
 import { renderShell, must } from './ui/shell';
-import { initPlayerScreen } from './ui/screens/player';
-import { initSearchScreen } from './ui/screens/search';
-import { initSettingsPanel } from './ui/screens/settings';
 import { applyAccent, applyTheme } from './ui/theme';
 import { toast } from './ui/toast';
+import { showView, type ViewName } from './ui/views';
+import { initHomeView } from './ui/views/home';
+import { initLibraryView } from './ui/views/library';
+import { initNowPlaying } from './ui/views/now-playing';
+import { initPodcastView } from './ui/views/podcast';
+import { initQueueView } from './ui/views/queue';
+import { initSearchView } from './ui/views/search';
+import { initSettingsView } from './ui/views/settings';
 
 export function boot(): void {
-  const app = must('app');
-  renderShell(app);
+  renderShell(must('app'));
 
   // ── state & appearance ───────────────────────────────────────────
   loadSettings();
@@ -33,69 +38,77 @@ export function boot(): void {
   applyLang(S.lang);
   document.documentElement.style.setProperty('--player-font-size', S.fontSize);
   document.documentElement.style.setProperty('--list-row-height', S.rowHeight);
-  bindI18nDom();
   setQuotaListener(() => toast(t('storage_full'), 'error'));
   requestPersistence(); // keep downloads/idb safe from storage-pressure eviction
   initOfflineBanner();
 
-  // ── screens & router ─────────────────────────────────────────────
-  let lastFeedReq: FeedRequest | null = null;
+  // ── playback session (single instance, shared by all views) ──────
+  const playback = createPlaybackController();
+
   // Remembered across sessions for the "Resume" app shortcut (?resume=1)
   const rememberFeed = (req: FeedRequest): void => {
-    lastFeedReq = req;
     local.set('pp_last_feed', req);
   };
 
-  const search = initSearchScreen({
-    openFeed: (req) => {
-      rememberFeed(req);
-      player.openFeed(req);
-      router.feedOpened(req);
-    },
-  });
+  /** Central "open a feed" intent — every entry point funnels through here. */
+  const openFeed = (req: FeedRequest, opts: { push?: boolean; focus?: boolean } = {}): void => {
+    rememberFeed(req);
+    playback.openFeed(req);
+    showView('podcast', { focus: opts.focus ?? true });
+    router.feedOpened(req, opts.push ?? true);
+  };
 
-  const player = initPlayerScreen({
-    onFeedOpened: (req) => {
-      rememberFeed(req);
-      /* URL handled by the router (avoids double push) */
-    },
-    onClosed: () => {
-      search.show();
-      search.restoreFocus(); // return focus to the row/input that opened the feed
-    },
+  // ── views ─────────────────────────────────────────────────────────
+  const home = initHomeView({ openFeed: (req) => openFeed(req) });
+  // (Phase 3 wires search.restoreFocus into back-navigation focus hand-off.)
+  initSearchView({ openFeed: (req) => openFeed(req) });
+  initLibraryView({ openFeed: (req) => openFeed(req) });
+  const nowPlayingSheet = initNowPlaying({
+    playback,
+    openQueue: () => goView('queue'),
+  });
+  initPodcastView({
+    playback,
     onBack: () => {
       if (router.canGoBack()) history.back();
       else router.goHome();
     },
+    openNowPlaying: () => nowPlayingSheet.open(),
   });
+  initQueueView({ playback });
+  initSettingsView({ onDataCleared: () => home.refresh() });
+
+  // Static markup is in place — localize it (re-runs on language change).
+  bindI18nDom();
 
+  // ── router & navigation ───────────────────────────────────────────
   const router = initRouter({
     showFeed: (req) => {
       rememberFeed(req);
-      player.openFeed(req);
+      playback.openFeed(req);
+      showView('podcast');
     },
     showHome: () => {
       saveProgressNow();
-      player.hide(); // playback continues — the mini player takes over
+      nowPlayingSheet.close();
+      showView('home'); // playback continues — the mini player takes over
     },
+    showView: (view: AppView) => showView(view as ViewName),
   });
 
-  initMiniPlayer({
-    onOpen: () => {
-      if (!lastFeedReq) return;
-      player.openFeed(lastFeedReq);
-      router.feedOpened(lastFeedReq);
-    },
-  });
+  /** Nav/tab intent: home is the bare path, other views get ?view=. */
+  const goView = (dest: NavDestination | 'queue'): void => {
+    nowPlayingSheet.close();
+    if (dest === 'home') {
+      router.goHome();
+      return;
+    }
+    showView(dest);
+    router.viewOpened(dest);
+  };
+  initNav({ go: goView });
 
-  const settingsPanel = initSettingsPanel({
-    onDataCleared: () => {
-      if (player.isOpen()) {
-        /* list re-render happens via settings subscription */
-      }
-    },
-  });
-  must('settingsBtn').addEventListener('click', () => settingsPanel.open());
+  initMiniPlayer({ playback, onOpen: () => nowPlayingSheet.open() });
 
   // ── media session ────────────────────────────────────────────────
   initMediaSession({
@@ -104,10 +117,9 @@ export function boot(): void {
       const d = pbDuration();
       if (d) pbSeekTo(Math.min(pbCurrent() + settings().skipForward, d));
     },
-    prevTrack: () => must('btnPrev').click(),
-    nextTrack: () => must('btnNext').click(),
+    prevTrack: () => playback.prev(),
+    nextTrack: () => playback.next(),
   });
-  void pbPaused;
 
   // ── persistence on exit ──────────────────────────────────────────
   window.addEventListener('beforeunload', saveProgressNow);
@@ -129,12 +141,11 @@ export function boot(): void {
         ? resumeReq
         : null;
   if (initialReq) {
-    rememberFeed(initialReq);
-    player.openFeed(initialReq, false); // cold deep-link: don't steal focus on first paint
-    router.feedOpened(initialReq, false);
-    search.renderFavs(); // desktop rail is visible alongside the feed
+    // Cold deep link: don't steal focus on first paint, replace (no push).
+    openFeed(initialReq, { push: false, focus: false });
+  } else if (route.kind === 'view') {
+    showView(route.view as ViewName, { focus: false });
   } else {
-    search.show();
-    search.focusInput();
+    showView('home', { focus: false });
   }
 }
diff --git a/src/i18n/langs/ar.ts b/src/i18n/langs/ar.ts
index f9de5b9..1deb709 100644
--- a/src/i18n/langs/ar.ts
+++ b/src/i18n/langs/ar.ts
@@ -115,6 +115,24 @@ const ar: Lang = {
   toast_opml_exported: "تم تصدير OPML ✓",
   toast_json_exported: "تم تنزيل النسخة الاحتياطية ✓",
   lang_select_label: "لغة الواجهة",
+  nav_home: "الرئيسية",
+  nav_search: "بحث",
+  nav_library: "المكتبة",
+  nav_settings: "الإعدادات",
+  home_tagline: "مشغّل بودكاست مجاني بدون حساب",
+  home_continue: "متابعة الاستماع",
+  home_empty: "لا شيء هنا بعد.",
+  home_empty_hint: "ابحث عن بودكاست للبدء — ستظهر برامجك الأخيرة هنا.",
+  home_see_all: "عرض الكل",
+  lib_tab_subs: "الاشتراكات",
+  lib_tab_downloads: "التنزيلات",
+  lib_empty_subs: "لا اشتراكات بعد.",
+  lib_empty_subs_hint: "افتح بودكاست واضغط على النجمة للاشتراك.",
+  lib_empty_downloads: "لا حلقات منزّلة.",
+  lib_delete_download: "حذف التنزيل",
+  lib_dl_total: (n, size) => `${n} حلقة · ${size}`,
+  np_open: "فتح المشغّل",
+  np_close: "إغلاق المشغّل",
 };
 
 export default ar;
diff --git a/src/i18n/langs/de.ts b/src/i18n/langs/de.ts
index 985f4ee..6d42318 100644
--- a/src/i18n/langs/de.ts
+++ b/src/i18n/langs/de.ts
@@ -115,6 +115,24 @@ const de: Lang = {
   toast_opml_exported: "OPML exportiert ✓",
   toast_json_exported: "Backup heruntergeladen ✓",
   lang_select_label: "Sprache der Oberfläche",
+  nav_home: "Startseite",
+  nav_search: "Suche",
+  nav_library: "Bibliothek",
+  nav_settings: "Einstellungen",
+  home_tagline: "Kostenloser Podcast-Player ohne Konto",
+  home_continue: "Weiterhören",
+  home_empty: "Noch nichts gehört.",
+  home_empty_hint: "Suche einen Podcast — deine zuletzt gehörten Sendungen erscheinen hier.",
+  home_see_all: "Alle anzeigen",
+  lib_tab_subs: "Abonnements",
+  lib_tab_downloads: "Downloads",
+  lib_empty_subs: "Noch keine Abonnements.",
+  lib_empty_subs_hint: "Öffne einen Podcast und tippe auf den Stern, um zu abonnieren.",
+  lib_empty_downloads: "Keine heruntergeladenen Folgen.",
+  lib_delete_download: "Download löschen",
+  lib_dl_total: (n, size) => `${n} Folgen · ${size}`,
+  np_open: "Player öffnen",
+  np_close: "Player schließen",
 };
 
 export default de;
diff --git a/src/i18n/langs/en.ts b/src/i18n/langs/en.ts
index 0c76409..b1e83d1 100644
--- a/src/i18n/langs/en.ts
+++ b/src/i18n/langs/en.ts
@@ -115,6 +115,24 @@ const en: Lang = {
   toast_opml_exported: "OPML exported ✓",
   toast_json_exported: "Backup downloaded ✓",
   lang_select_label: "Interface language",
+  nav_home: "Home",
+  nav_search: "Search",
+  nav_library: "Library",
+  nav_settings: "Settings",
+  home_tagline: "Free, no-account podcast player",
+  home_continue: "Continue listening",
+  home_empty: "Nothing here yet.",
+  home_empty_hint: "Search for a podcast to start — your recent shows will appear here.",
+  home_see_all: "See all",
+  lib_tab_subs: "Subscriptions",
+  lib_tab_downloads: "Downloads",
+  lib_empty_subs: "No subscriptions yet.",
+  lib_empty_subs_hint: "Open a podcast and tap the star to subscribe.",
+  lib_empty_downloads: "No downloaded episodes.",
+  lib_delete_download: "Delete download",
+  lib_dl_total: (n, size) => `${n} episodes · ${size}`,
+  np_open: "Open player",
+  np_close: "Close player",
 };
 
 export default en;
diff --git a/src/i18n/langs/es.ts b/src/i18n/langs/es.ts
index 5423e69..866b36b 100644
--- a/src/i18n/langs/es.ts
+++ b/src/i18n/langs/es.ts
@@ -115,6 +115,24 @@ const es: Lang = {
   toast_opml_exported: "OPML exportado ✓",
   toast_json_exported: "Copia de seguridad descargada ✓",
   lang_select_label: "Idioma de la interfaz",
+  nav_home: "Inicio",
+  nav_search: "Buscar",
+  nav_library: "Biblioteca",
+  nav_settings: "Ajustes",
+  home_tagline: "Reproductor de pódcast gratuito y sin cuenta",
+  home_continue: "Seguir escuchando",
+  home_empty: "Aún no hay nada.",
+  home_empty_hint: "Busca un pódcast para empezar: tus programas recientes aparecerán aquí.",
+  home_see_all: "Ver todo",
+  lib_tab_subs: "Suscripciones",
+  lib_tab_downloads: "Descargas",
+  lib_empty_subs: "Aún no hay suscripciones.",
+  lib_empty_subs_hint: "Abre un pódcast y toca la estrella para suscribirte.",
+  lib_empty_downloads: "No hay episodios descargados.",
+  lib_delete_download: "Eliminar la descarga",
+  lib_dl_total: (n, size) => `${n} episodios · ${size}`,
+  np_open: "Abrir el reproductor",
+  np_close: "Cerrar el reproductor",
 };
 
 export default es;
diff --git a/src/i18n/langs/fr.ts b/src/i18n/langs/fr.ts
index 039d3a4..e81a320 100644
--- a/src/i18n/langs/fr.ts
+++ b/src/i18n/langs/fr.ts
@@ -115,6 +115,24 @@ const fr: Lang = {
   toast_opml_exported: "OPML exporté ✓",
   toast_json_exported: "Sauvegarde téléchargée ✓",
   lang_select_label: "Langue de l'interface",
+  nav_home: "Accueil",
+  nav_search: "Recherche",
+  nav_library: "Bibliothèque",
+  nav_settings: "Réglages",
+  home_tagline: "Lecteur de podcasts gratuit, sans compte",
+  home_continue: "Reprendre l'écoute",
+  home_empty: "Rien ici pour l'instant.",
+  home_empty_hint: "Cherchez un podcast pour commencer — vos écoutes récentes apparaîtront ici.",
+  home_see_all: "Tout voir",
+  lib_tab_subs: "Abonnements",
+  lib_tab_downloads: "Téléchargements",
+  lib_empty_subs: "Aucun abonnement pour l'instant.",
+  lib_empty_subs_hint: "Ouvrez un podcast et touchez l'étoile pour vous abonner.",
+  lib_empty_downloads: "Aucun épisode téléchargé.",
+  lib_delete_download: "Supprimer le téléchargement",
+  lib_dl_total: (n, size) => `${n} épisodes · ${size}`,
+  np_open: "Ouvrir le lecteur",
+  np_close: "Fermer le lecteur",
 };
 
 export default fr;
diff --git a/src/i18n/langs/ja.ts b/src/i18n/langs/ja.ts
index 62720d1..c8d0892 100644
--- a/src/i18n/langs/ja.ts
+++ b/src/i18n/langs/ja.ts
@@ -115,6 +115,24 @@ const ja: Lang = {
   toast_opml_exported: "OPMLをエクスポートしました ✓",
   toast_json_exported: "バックアップをダウンロードしました ✓",
   lang_select_label: "表示言語",
+  nav_home: "ホーム",
+  nav_search: "検索",
+  nav_library: "ライブラリ",
+  nav_settings: "設定",
+  home_tagline: "無料・アカウント不要のポッドキャストプレーヤー",
+  home_continue: "続きを聴く",
+  home_empty: "まだ何もありません。",
+  home_empty_hint: "ポッドキャストを検索して始めましょう。最近聴いた番組がここに表示されます。",
+  home_see_all: "すべて表示",
+  lib_tab_subs: "購読中",
+  lib_tab_downloads: "ダウンロード",
+  lib_empty_subs: "まだ購読がありません。",
+  lib_empty_subs_hint: "番組を開いて星をタップすると購読できます。",
+  lib_empty_downloads: "ダウンロード済みのエピソードはありません。",
+  lib_delete_download: "ダウンロードを削除",
+  lib_dl_total: (n, size) => `${n}エピソード · ${size}`,
+  np_open: "プレーヤーを開く",
+  np_close: "プレーヤーを閉じる",
 };
 
 export default ja;
diff --git a/src/i18n/langs/ru.ts b/src/i18n/langs/ru.ts
index d671b32..1febd16 100644
--- a/src/i18n/langs/ru.ts
+++ b/src/i18n/langs/ru.ts
@@ -115,6 +115,24 @@ const ru: Lang = {
   toast_opml_exported: "OPML экспортирован ✓",
   toast_json_exported: "Резервная копия скачана ✓",
   lang_select_label: "Язык интерфейса",
+  nav_home: "Главная",
+  nav_search: "Поиск",
+  nav_library: "Библиотека",
+  nav_settings: "Настройки",
+  home_tagline: "Бесплатный подкаст-плеер без аккаунта",
+  home_continue: "Продолжить прослушивание",
+  home_empty: "Здесь пока пусто.",
+  home_empty_hint: "Найдите подкаст, чтобы начать — недавние шоу появятся здесь.",
+  home_see_all: "Показать все",
+  lib_tab_subs: "Подписки",
+  lib_tab_downloads: "Загрузки",
+  lib_empty_subs: "Подписок пока нет.",
+  lib_empty_subs_hint: "Откройте подкаст и нажмите на звезду, чтобы подписаться.",
+  lib_empty_downloads: "Нет загруженных выпусков.",
+  lib_delete_download: "Удалить загрузку",
+  lib_dl_total: (n, size) => `${n} выпусков · ${size}`,
+  np_open: "Открыть плеер",
+  np_close: "Закрыть плеер",
 };
 
 export default ru;
diff --git a/src/i18n/langs/tr.ts b/src/i18n/langs/tr.ts
index beee2f4..1e5b71e 100644
--- a/src/i18n/langs/tr.ts
+++ b/src/i18n/langs/tr.ts
@@ -115,6 +115,24 @@ const tr: Lang = {
   toast_opml_exported: "OPML dışa aktarıldı ✓",
   toast_json_exported: "Yedek indirildi ✓",
   lang_select_label: "Arayüz dili",
+  nav_home: "Ana Sayfa",
+  nav_search: "Ara",
+  nav_library: "Kütüphane",
+  nav_settings: "Ayarlar",
+  home_tagline: "Ücretsiz, hesapsız podcast çalar",
+  home_continue: "Devam Et",
+  home_empty: "Henüz bir şey dinlemedin.",
+  home_empty_hint: "Bir podcast ara ve dinlemeye başla — son dinlediklerin burada görünecek.",
+  home_see_all: "Tümünü gör",
+  lib_tab_subs: "Abonelikler",
+  lib_tab_downloads: "İndirilenler",
+  lib_empty_subs: "Henüz abonelik yok.",
+  lib_empty_subs_hint: "Bir podcast açıp yıldıza dokunarak abone ol.",
+  lib_empty_downloads: "İndirilen bölüm yok.",
+  lib_delete_download: "İndirmeyi sil",
+  lib_dl_total: (n, size) => `${n} bölüm · ${size}`,
+  np_open: "Oynatıcıyı aç",
+  np_close: "Oynatıcıyı kapat",
 };
 
 export default tr;
diff --git a/src/i18n/types.ts b/src/i18n/types.ts
index 234bdd5..f1f7b26 100644
--- a/src/i18n/types.ts
+++ b/src/i18n/types.ts
@@ -117,6 +117,25 @@ export interface Lang {
   toast_opml_exported: string;
   toast_json_exported: string;
   lang_select_label: string;
+  /* ── 4.0 "Sinyal" IA ── */
+  nav_home: string;
+  nav_search: string;
+  nav_library: string;
+  nav_settings: string;
+  home_tagline: string;
+  home_continue: string;
+  home_empty: string;
+  home_empty_hint: string;
+  home_see_all: string;
+  lib_tab_subs: string;
+  lib_tab_downloads: string;
+  lib_empty_subs: string;
+  lib_empty_subs_hint: string;
+  lib_empty_downloads: string;
+  lib_delete_download: string;
+  lib_dl_total: LangFn;
+  np_open: string;
+  np_close: string;
 }
 
 export type LangKey = keyof Lang;
diff --git a/src/lib/format.ts b/src/lib/format.ts
index 85570a7..eba6720 100644
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -34,6 +34,13 @@ export function fmtDur(ms: number): string {
   return h > 0 ? `${h}${t('dur_h')} ${String(m).padStart(2, '0')}${t('dur_m')}` : `${m}${t('dur_m')}`;
 }
 
+export function fmtBytes(n: number): string {
+  if (n >= 1e9) return (n / 1e9).toFixed(1) + ' GB';
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + ' MB';
+  if (n >= 1e3) return (n / 1e3).toFixed(0) + ' KB';
+  return n + ' B';
+}
+
 export function fmtTime(s: number): string {
   if (!Number.isFinite(s) || isNaN(s)) return '0:00';
   const h = Math.floor(s / 3600);
diff --git a/src/main.ts b/src/main.ts
index df88666..48923e6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,4 @@
-import './styles/tokens.css';
-import './styles/themes.css';
-import './styles/base.css';
-import './styles/components.css';
+import './styles/index.css';
 import { boot } from './app';
 
 boot();
diff --git a/src/state/settings.ts b/src/state/settings.ts
index bc9b0b7..992858e 100644
--- a/src/state/settings.ts
+++ b/src/state/settings.ts
@@ -33,7 +33,7 @@ export const DEFAULT_SETTINGS: Settings = {
   theme: 'auto',
   defaultSort: 'asc',
   showDl: true,
-  accentColor: '#8b7cf6',
+  accentColor: '#f2a33c',
   lang: 'tr',
 };
 
diff --git a/src/styles/base.css b/src/styles/base.css
index cb53d4e..1074718 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,4 +1,4 @@
-/* Reset, a11y, icon system, body — legacy lines 52 + 165-214 */
+/* Reset, a11y, icon system, typography, body. */
 *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
 
 /* Respect reduced-motion */
@@ -35,7 +35,7 @@
 /* mirror directional icons in RTL */
 [dir="rtl"] .icon-flip { transform: scaleX(-1); }
 
-/* The mount node is transparent to layout: screens are body flex items */
+/* The mount node is transparent to layout: the frame is a body flex item */
 #app { display: contents; }
 
 body {
@@ -54,3 +54,71 @@ body {
   text-rendering: optimizeLegibility;
   transition: background-color 0.45s var(--ease-out), color 0.35s var(--ease-out);
 }
+
+/* ─ Typography defaults — display face carries the personality ─ */
+h1, h2, h3, .display {
+  font-family: var(--font-display);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+time, .mono, .time-row {
+  font-family: var(--font-mono);
+  font-feature-settings: 'tnum';
+  letter-spacing: 0;
+}
+
+a { color: var(--accent); }
+
+img { max-width: 100%; }
+
+/* ─ Brand: the "sinyal" mark — five bars breathing very gently ─
+   Resting frame (0%) is the natural pose, so reduced-motion (durations
+   zeroed in the block above) leaves a clean static mark. */
+.sig-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 11%;
+  inline-size: 100%;
+  block-size: 100%;
+}
+.sig-mark i {
+  inline-size: 12%;
+  border-radius: 999px;
+  background: currentColor;
+  transform-origin: center;
+  animation: sig-breathe 3.8s var(--ease-smooth) infinite;
+}
+.sig-mark i:nth-child(1) { block-size: 34%; animation-delay: 0s; }
+.sig-mark i:nth-child(2) { block-size: 72%; animation-delay: 0.35s; }
+.sig-mark i:nth-child(3) { block-size: 100%; animation-delay: 0.7s; }
+.sig-mark i:nth-child(4) { block-size: 52%; animation-delay: 1.05s; }
+.sig-mark i:nth-child(5) { block-size: 80%; animation-delay: 1.4s; }
+@keyframes sig-breathe {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(1.18); }
+}
+
+/* ─ Brand: wordmark sheen — a soft signal sweeps through "Seseri" ─
+   The 0% frame parks the shine off-canvas, so the resting/reduced-motion
+   state reads as plain text. */
+.wm {
+  background: linear-gradient(
+    100deg,
+    var(--text) 0%,
+    var(--text) 42%,
+    var(--wm-shine) 50%,
+    var(--text) 58%,
+    var(--text) 100%
+  );
+  background-size: 300% 100%;
+  background-position: 100% 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: wm-sweep 7s var(--ease-smooth) infinite;
+}
+@keyframes wm-sweep {
+  0%, 46% { background-position: 100% 0; }
+  74%, 100% { background-position: 0% 0; }
+}
diff --git a/src/styles/components.css b/src/styles/components.css
deleted file mode 100644
index eba0589..0000000
--- a/src/styles/components.css
+++ /dev/null
@@ -1,1438 +0,0 @@
-/* All screen/component styles — legacy lines 216-1284 (split further in P5) */
-/* ═══════════════════════════════════════
-   SEARCH SCREEN
-═══════════════════════════════════════ */
-#searchScreen {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 24px;
-  gap: 34px;
-  background: var(--bg);
-  position: relative;
-  overflow: hidden;
-  transition: background-color 0.45s var(--ease-out);
-}
-/* Twin ambient studio glow */
-#searchScreen::before {
-  content: '';
-  position: absolute;
-  top: 30%; left: 50%;
-  width: min(720px, 130vw); height: min(720px, 130vw);
-  transform: translate(-50%, -50%);
-  background:
-    radial-gradient(circle at 42% 40%, var(--accent-glow) 0%, transparent 60%),
-    radial-gradient(circle at 62% 58%, rgba(192,132,252,0.10) 0%, transparent 58%);
-  opacity: 0.9;
-  pointer-events: none;
-  z-index: 0;
-  /* radial gradients are already soft — no blur filter (a continuously
-     animated filter pass is expensive and steals frames from scrolling) */
-  will-change: transform, opacity;
-  animation: glow-breathe 11s var(--ease-out) infinite;
-}
-/* Faint grid vignette for depth */
-#searchScreen::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(ellipse 80% 60% at 50% 42%, transparent 55%, var(--hero-vignette) 100%);
-  pointer-events: none;
-  z-index: 0;
-}
-.brand, .search-wrap, .results-list { position: relative; z-index: 1; }
-
-.brand {
-  text-align: center;
-  animation: rise-in 0.8s var(--ease-out) both;
-}
-.brand-logo {
-  width: 84px; height: 84px;
-  background: var(--accent-grad);
-  border-radius: 26px;
-  display: flex; align-items: center; justify-content: center;
-  margin: 0 auto var(--s-5);
-  position: relative;
-  box-shadow: 0 18px 50px -12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -10px 24px -12px rgba(0,0,0,0.35);
-  animation: logo-float 7s ease-in-out infinite;
-}
-.brand-logo::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 1px;
-  background: linear-gradient(160deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 45%);
-  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor; mask-composite: exclude;
-  pointer-events: none;
-}
-.brand-logo svg {
-  width: 52px; height: 52px; display: block;
-  color: var(--accent-text);
-  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));
-}
-/* The S draws itself once on load, then rests — quiet, not busy */
-.brand-logo .s-mark {
-  stroke-dasharray: 100;
-  stroke-dashoffset: 100;
-  animation: s-draw 1.3s var(--ease-out) 0.2s forwards;
-}
-@keyframes s-draw { to { stroke-dashoffset: 0; } }
-
-.brand-name {
-  font-family: var(--font-display);
-  font-size: var(--fs-2xl);
-  font-weight: 600;
-  letter-spacing: -1.8px;
-  line-height: 1;
-  margin: 0;
-  background: linear-gradient(110deg,
-    var(--text) 0%, var(--text) 38%,
-    var(--wm-shine) 46%, var(--accent) 52%, var(--wm-shine) 58%,
-    var(--text) 66%, var(--text) 100%);
-  background-size: 250% 100%;
-  background-position: 150% 0;
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  -webkit-text-fill-color: transparent;
-  animation: text-sheen 8s var(--ease-out) infinite;
-}
-.brand-tag {
-  margin-top: 14px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 0.5px;
-  color: var(--text3);
-}
-
-.search-wrap {
-  width: 100%;
-  max-width: 560px;
-  animation: rise-in 0.8s var(--ease-out) 0.1s both;
-}
-.search-row {
-  display: flex;
-  gap: 10px;
-}
-.search-input {
-  flex: 1;
-  min-width: 0;
-  background: var(--surface);
-  border: 1px solid var(--border2);
-  color: var(--text);
-  font-family: var(--font-body);
-  font-size: 15px;
-  padding: 16px 20px;
-  border-radius: var(--r);
-  outline: none;
-  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--hairline);
-  transition: border-color 0.25s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.25s;
-}
-.search-input:focus {
-  border-color: var(--accent);
-  background: var(--surface2);
-  box-shadow: 0 0 0 4px var(--accent-glow), var(--shadow-md);
-}
-.search-input::placeholder { color: var(--text3); }
-
-.search-btn {
-  background: var(--accent-grad);
-  border: none;
-  color: var(--accent-text);
-  font-family: var(--font-mono);
-  font-size: 13px;
-  font-weight: 500;
-  padding: 16px 26px;
-  border-radius: var(--r);
-  cursor: pointer;
-  transition: filter 0.18s, transform 0.16s var(--ease-spring), box-shadow 0.25s;
-  white-space: nowrap;
-  box-shadow: 0 10px 24px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.22);
-}
-.search-btn:hover { filter: brightness(1.07); box-shadow: 0 14px 30px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.22); transform: translateY(-1px); }
-.search-btn:active { transform: scale(0.97); }
-.search-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
-
-.search-hint {
-  font-size: 11px;
-  color: var(--text3);
-  font-family: var(--font-mono);
-  text-align: center;
-  letter-spacing: 0.2px;
-  padding: var(--s-1) 0 var(--s-2);
-}
-
-.results-list {
-  width: 100%;
-  max-width: 560px;
-  display: flex;
-  flex-direction: column;
-  gap: 9px;
-  max-height: 348px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-  padding: 2px;
-  margin: -2px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border2) transparent;
-}
-.results-list::-webkit-scrollbar { width: 5px; }
-.results-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
-
-.result-item {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: var(--s-3) var(--s-4);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--r);
-  cursor: pointer;
-  box-shadow: var(--shadow-sm);
-  transition: border-color 0.2s, background 0.2s, transform 0.24s var(--ease-out), box-shadow 0.24s;
-  animation: rise-in 0.5s var(--ease-out) both;
-}
-.result-item:hover {
-  border-color: var(--accent);
-  background: var(--surface2);
-  transform: translateY(-3px);
-  box-shadow: 0 16px 38px -18px var(--accent-glow), var(--shadow-md);
-}
-.result-item:active { transform: translateY(-1px); }
-.result-item:nth-child(1) { animation-delay: 0.02s; }
-.result-item:nth-child(2) { animation-delay: 0.06s; }
-.result-item:nth-child(3) { animation-delay: 0.10s; }
-.result-item:nth-child(4) { animation-delay: 0.14s; }
-.result-item:nth-child(5) { animation-delay: 0.18s; }
-.result-item:nth-child(6) { animation-delay: 0.22s; }
-.result-item:nth-child(n+7) { animation-delay: 0.26s; }
-.result-thumb {
-  width: 54px; height: 54px;
-  border-radius: var(--r-xs);
-  object-fit: cover;
-  flex-shrink: 0;
-  background: var(--border);
-  box-shadow: inset 0 0 0 1px var(--hairline);
-}
-.result-info { flex: 1; min-width: 0; }
-.result-name { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; letter-spacing: -0.01em; }
-.result-author { font-size: 11.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.result-count { font-size: 10px; color: var(--accent); font-family: var(--font-mono); margin-top: var(--s-1); }
-.result-arrow { color: var(--text3); font-size: 19px; flex-shrink: 0; transition: transform var(--d-base) var(--ease-out), color var(--d-base); }
-.result-item:hover .result-arrow { color: var(--accent); transform: translateX(4px); }
-
-.empty-state {
-  padding: 34px 20px;
-  text-align: center;
-  color: var(--text3);
-  font-family: var(--font-mono);
-  font-size: var(--fs-sm);
-  line-height: 2;
-}
-.empty-state--error { color: var(--red); }
-
-/* ═══════════════════════════════════════
-   PLAYER SCREEN
-═══════════════════════════════════════ */
-#playerScreen {
-  flex: 1;
-  display: none;
-  flex-direction: column;
-  overflow: hidden;
-  position: relative;
-  background:
-    radial-gradient(120% 60% at 50% -10%, var(--accent-soft) 0%, transparent 50%),
-    var(--bg);
-}
-/* Screen switching is class-driven so media queries can override it */
-body.feed-open #searchScreen { display: none; }
-body.feed-open #playerScreen { display: flex; }
-
-/* Header (glass) */
-.p-header {
-  /* grow into the safe area on notched devices so the 66px content band is
-     preserved below the status bar (box-sizing: border-box) */
-  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
-  padding: env(safe-area-inset-top, 0px) 18px 0;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  gap: var(--s-3);
-  background: var(--glass);
-  backdrop-filter: blur(18px) saturate(1.4);
-  -webkit-backdrop-filter: blur(18px) saturate(1.4);
-  flex-shrink: 0;
-  position: relative;
-  z-index: var(--z-header);
-}
-.p-back {
-  background: var(--surface);
-  border: 1px solid var(--border2);
-  color: var(--text2);
-  cursor: pointer;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  padding: 8px 13px;
-  border-radius: var(--r-xs);
-  transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.16s var(--ease-spring);
-  flex-shrink: 0;
-}
-.p-back { position: relative; }
-/* ≥44px touch target (box stays ~30px tall) */
-.p-back::after { content: ''; position: absolute; top: 50%; inset-inline: 0; height: 44px; transform: translateY(-50%); }
-.p-back:hover { border-color: var(--accent); color: var(--accent); transform: translateX(-2px); }
-.p-back:active { transform: translateX(-2px) scale(0.96); }
-.p-thumb {
-  width: 42px; height: 42px;
-  border-radius: var(--r-xs);
-  object-fit: cover;
-  flex-shrink: 0;
-  background: var(--border);
-  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline);
-}
-.p-meta { flex: 1; min-width: 0; }
-.p-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
-.p-author { font-size: 11.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
-.p-epcount { font-family: var(--font-mono); font-size: 10px; color: var(--text3); flex-shrink: 0; text-align: end; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }
-.p-epcount strong { color: var(--accent); font-size: 15px; display: block; font-weight: 600; }
-
-/* Icon chrome buttons */
-.settings-btn {
-  background: var(--surface);
-  border: 1px solid var(--border2);
-  color: var(--text2);
-  cursor: pointer;
-  width: 36px; height: 36px;
-  display: flex; align-items: center; justify-content: center;
-  border-radius: var(--r-xs);
-  font-size: 15px;
-  line-height: 1;
-  transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.16s var(--ease-spring);
-  flex-shrink: 0;
-  position: relative;
-}
-/* ≥44px touch target around the 36px chrome button */
-.settings-btn::after { content: ''; position: absolute; inset: -4px; }
-.settings-btn .icon { width: 17px; height: 17px; }
-.settings-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
-.settings-btn:active { transform: scale(0.94); }
-/* Favorited: accent-filled star + accent chrome */
-#favBtn.faved { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
-#favBtn.faved .icon { fill: currentColor; }
-
-/* Status strip */
-.p-status {
-  padding: 0 20px;
-  height: var(--status-h);
-  background: var(--bg2);
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  flex-shrink: 0;
-}
-.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); flex-shrink: 0; transition: background 0.3s; }
-.dot.loading { background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse-ring 1.4s var(--ease-out) infinite; }
-.dot.ok { background: var(--green); }
-.dot.error { background: var(--red); }
-.p-status-text { font-size: 11px; font-family: var(--font-mono); color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-/* Player block */
-.p-player {
-  padding: var(--s-5) var(--s-5) var(--s-5);
-  border-bottom: 1px solid var(--border);
-  background: var(--glass-2);
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-  flex-shrink: 0;
-  position: relative;
-  z-index: 2;
-}
-.p-now-head {
-  display: flex;
-  align-items: center;
-  gap: var(--s-2);
-  margin-bottom: var(--s-2);
-}
-.p-now-label {
-  font-size: 9.5px;
-  font-family: var(--font-mono);
-  color: var(--accent);
-  text-transform: uppercase;
-  letter-spacing: 1.6px;
-}
-.now-eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 13px; }
-.now-eq i {
-  display: block;
-  width: 2.5px;
-  height: 40%;
-  background: var(--accent);
-  border-radius: 2px;
-  transform-origin: bottom;
-}
-#pPlayer.playing .now-eq i { animation: eq-bounce 0.95s var(--ease-out) infinite; }
-.now-eq i:nth-child(1) { animation-delay: 0s; height: 55%; }
-.now-eq i:nth-child(2) { animation-delay: 0.18s; height: 100%; }
-.now-eq i:nth-child(3) { animation-delay: 0.36s; height: 70%; }
-.now-eq i:nth-child(4) { animation-delay: 0.12s; height: 45%; }
-.p-now-title {
-  font-family: var(--font-display);
-  font-size: calc(var(--player-font-size) + 2px);
-  font-weight: 600;
-  color: var(--text);
-  margin-bottom: var(--s-4);
-  line-height: 1.35;
-  min-height: 20px;
-  letter-spacing: -0.015em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
-}
-.p-now-title.swapping { opacity: 0; transform: translateY(6px); }
-
-audio { display: none; }
-
-/* Waveform scrubber — the signature: sound made visible */
-.wave {
-  position: relative;
-  width: 100%;
-  height: 46px;
-  margin-bottom: var(--s-2);
-  cursor: pointer;
-  touch-action: none;
-  outline: none;
-  border-radius: var(--r-xs);
-  transition: transform var(--d-fast) var(--ease-out);
-}
-.wave:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); }
-.wave-layer {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  pointer-events: none;
-}
-.wave-layer i {
-  flex: 1 1 0;
-  min-width: 0;
-  height: 18%;
-  border-radius: 1.5px;
-  transform-origin: center;
-  transition: height var(--d-base) var(--ease-out);
-}
-.wave-base i { background: var(--wave-track); }
-.wave-fill {
-  clip-path: inset(0 100% 0 0);
-  transition: clip-path var(--d-base) linear;
-  will-change: clip-path;
-}
-.wave-fill i { background: var(--wave-played); }
-/* leading-edge playhead */
-.wave-head {
-  position: absolute;
-  top: 50%; left: 0;
-  width: 2px; height: 76%;
-  border-radius: 2px;
-  background: var(--accent);
-  transform: translate(-1px, -50%) scaleY(0);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-  transition: transform var(--d-fast) var(--ease-spring), left var(--d-base) linear;
-  pointer-events: none;
-}
-.wave:hover .wave-head,
-.wave.scrubbing .wave-head,
-#pPlayer.playing .wave-head { transform: translate(-1px, -50%) scaleY(1); }
-#pPlayer.playing .wave-head { animation: head-pulse 1.7s var(--ease-out) infinite; }
-/* gentle per-bar life on the played region while playing — only every other
-   bar animates, which keeps the "living" feel at roughly half the layer cost */
-#pPlayer.playing .wave-fill i:nth-child(2n) { animation: wave-breathe 2s var(--ease-out) infinite; }
-#pPlayer.playing .wave-fill i:nth-child(4n) { animation-delay: .22s; }
-#pPlayer.playing .wave-fill i:nth-child(6n) { animation-delay: .4s; }
-/* hover/scrub time tooltip */
-.wave-tip {
-  position: absolute;
-  bottom: calc(100% + 7px);
-  left: 0;
-  transform: translateX(-50%);
-  background: var(--surface2);
-  border: 1px solid var(--border2);
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 10px;
-  padding: 3px 7px;
-  border-radius: var(--r-xs);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity var(--d-fast) var(--ease-out);
-  white-space: nowrap;
-  box-shadow: var(--shadow-md);
-  z-index: 3;
-}
-.wave:hover .wave-tip, .wave.scrubbing .wave-tip { opacity: 1; }
-.time-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: var(--fs-xs);
-  font-family: var(--font-mono);
-  color: var(--text3);
-  margin-bottom: var(--s-4);
-}
-
-/* Controls */
-.controls {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-}
-.ctrl-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  background: var(--surface);
-  border: 1px solid var(--border2);
-  color: var(--text2);
-  cursor: pointer;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  padding: 9px 13px;
-  border-radius: var(--r-xs);
-  transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.16s var(--ease-spring);
-  white-space: nowrap;
-  line-height: 1;
-  position: relative;
-}
-/* ≥44px touch target (box is ~33px tall; small horizontal bleed clears the 9px sibling gap) */
-.ctrl-btn::after { content: ''; position: absolute; inset-block: -6px; inset-inline: -3px; }
-.ctrl-btn .icon { width: 15px; height: 15px; }
-.ctrl-skip { font-variant-numeric: tabular-nums; }
-.ctrl-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
-.ctrl-btn:active { transform: scale(0.95); }
-.ctrl-btn:disabled { opacity: 0.28; cursor: not-allowed; }
-.ctrl-btn:disabled:hover { border-color: var(--border2); color: var(--text2); transform: none; }
-
-.play-btn {
-  width: 50px; height: 50px;
-  background: var(--accent-grad);
-  border: none;
-  color: var(--accent-text);
-  font-size: 18px;
-  border-radius: 50%;
-  cursor: pointer;
-  display: flex; align-items: center; justify-content: center;
-  transition: filter 0.18s, transform 0.16s var(--ease-spring), box-shadow 0.25s;
-  flex-shrink: 0;
-  box-shadow: 0 8px 22px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
-  position: relative;
-}
-.play-btn .icon { width: 20px; height: 20px; }
-.play-btn::after {
-  content: '';
-  position: absolute;
-  inset: -5px;
-  border-radius: 50%;
-  border: 1.5px solid var(--accent);
-  opacity: 0;
-  transition: opacity 0.3s, transform 0.3s var(--ease-out);
-}
-#pPlayer.playing .play-btn::after { opacity: 0.35; animation: ring-pulse 2s var(--ease-out) infinite; }
-.play-btn:hover { filter: brightness(1.08); box-shadow: 0 12px 28px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25); transform: translateY(-1px) scale(1.04); }
-.play-btn:active { transform: scale(0.92); }
-.play-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
-.play-btn:disabled:hover { filter: none; transform: none; box-shadow: none; }
-
-/* Idle player — a feed is open but nothing is loaded yet: present as a prompt */
-#pPlayer.idle .p-now-head { opacity: 0; }
-#pPlayer.idle .wave { opacity: 0.4; pointer-events: none; filter: grayscale(0.5); }
-#pPlayer.idle .time-row { opacity: 0.45; }
-
-/* YouTube embed — audio-only: the player is kept rendered (so audio plays) but
-   moved off-screen, so YouTube feeds look like a normal audio podcast (cover art
-   + waveform) instead of a video. NOTE: the official embed still streams video in
-   the background — there is no audio-only stream — but lowest quality is requested
-   to keep the data use down. Never display:none (that can stop playback). */
-.yt-frame {
-  position: absolute;
-  width: 1px; height: 1px;
-  left: -9999px; top: 0;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-}
-.yt-frame iframe, .yt-frame #ytHost { width: 100%; height: 100%; border: 0; display: block; }
-
-.spacer { flex: 1; }
-
-/* Custom select chrome — matches the button cluster (no native arrow) */
-.sel-wrap { position: relative; display: inline-flex; align-items: center; }
-.sel-ic { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--text2); pointer-events: none; }
-.seri-select {
-  appearance: none; -webkit-appearance: none;
-  direction: ltr;
-  background: var(--surface);
-  border: 1px solid var(--border2);
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  padding: 8px 26px 8px 11px;
-  border-radius: var(--r-xs);
-  cursor: pointer;
-  outline: none;
-  transition: border-color 0.18s, color 0.18s, box-shadow 0.18s;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  background-size: 12px;
-}
-.sleep-select { padding-inline-start: 28px; } /* room for the moon icon (select is direction:ltr, so this resolves to the left) */
-.seri-select:hover, .seri-select:focus { border-color: var(--accent); }
-.seri-select:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); }
-.sleep-select.active { border-color: var(--accent); color: var(--accent); }
-.sleep-wrap:has(.sleep-select.active) .sel-ic { color: var(--accent); }
-
-/* Sort / filter bar */
-.sort-bar {
-  min-height: var(--sortbar-h);
-  padding: 0 22px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  gap: 10px;
-  background: var(--bg2);
-}
-.sort-left { display: flex; align-items: center; gap: 10px; }
-.sort-info { font-size: 11px; font-family: var(--font-mono); color: var(--text3); }
-.sort-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  background: var(--surface);
-  border: 1px solid var(--border2);
-  color: var(--text2);
-  cursor: pointer;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  padding: 6px 11px;
-  border-radius: var(--r-xs);
-  transition: border-color 0.18s, color 0.18s, transform 0.16s var(--ease-spring);
-  position: relative;
-}
-/* ≥44px touch target (box is ~28px tall, already wider than 44px) */
-.sort-toggle::after { content: ''; position: absolute; top: 50%; inset-inline: 0; height: 44px; transform: translateY(-50%); }
-.sort-toggle .icon { width: 14px; height: 14px; }
-.sort-toggle:hover { border-color: var(--accent); color: var(--accent); }
-.sort-toggle:active { transform: scale(0.95); }
-
-.search-filter {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--text);
-  font-family: var(--font-body);
-  font-size: var(--fs-sm);
-  padding: 7px 12px;
-  border-radius: var(--r-xs);
-  outline: none;
-  width: 170px;
-  transition: border-color 0.2s, width 0.28s var(--ease-out), box-shadow 0.25s;
-}
-.search-filter:focus { border-color: var(--accent); width: 210px; box-shadow: 0 0 0 3px var(--accent-glow); }
-.search-filter::placeholder { color: var(--text3); }
-
-/* Episode list */
-.ep-list {
-  flex: 1;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border2) transparent;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-}
-.ep-list::-webkit-scrollbar { width: 6px; }
-.ep-list::-webkit-scrollbar-track { background: transparent; }
-.ep-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
-.ep-list::-webkit-scrollbar-thumb:hover { background: var(--text3); }
-
-.ep-item {
-  display: flex;
-  align-items: center;
-  gap: 13px;
-  padding: 0 22px;
-  height: var(--list-row-height);
-  border-bottom: 1px solid var(--border);
-  cursor: pointer;
-  transition: background 0.2s var(--ease-out), padding-inline-start 0.22s var(--ease-out);
-  position: relative;
-  /* Skip rendering rows scrolled out of view (big win on 100+ episode feeds) */
-  content-visibility: auto;
-  contain-intrinsic-size: 0 var(--list-row-height);
-}
-.ep-list.entering .ep-item { animation: rise-in 0.45s var(--ease-out) both; }
-.ep-list.entering .ep-item:nth-child(1)  { animation-delay: 0.00s; }
-.ep-list.entering .ep-item:nth-child(2)  { animation-delay: 0.03s; }
-.ep-list.entering .ep-item:nth-child(3)  { animation-delay: 0.06s; }
-.ep-list.entering .ep-item:nth-child(4)  { animation-delay: 0.09s; }
-.ep-list.entering .ep-item:nth-child(5)  { animation-delay: 0.12s; }
-.ep-list.entering .ep-item:nth-child(6)  { animation-delay: 0.15s; }
-.ep-list.entering .ep-item:nth-child(7)  { animation-delay: 0.18s; }
-.ep-list.entering .ep-item:nth-child(8)  { animation-delay: 0.21s; }
-.ep-list.entering .ep-item:nth-child(9)  { animation-delay: 0.24s; }
-.ep-list.entering .ep-item:nth-child(10) { animation-delay: 0.27s; }
-.ep-list.entering .ep-item:nth-child(n+11) { animation-delay: 0.30s; }
-.ep-item:hover { background: var(--surface); padding-inline-start: 27px; }
-.ep-item.active { background: var(--accent-soft); }
-.ep-item.active::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: 0; top: 0; bottom: 0;
-  width: 3px;
-  background: var(--accent-grad);
-  /* flat on the leading edge, rounded toward the content (inline-end) */
-  border-radius: 0;
-  border-start-end-radius: 3px;
-  border-end-end-radius: 3px;
-  box-shadow: 0 0 12px -1px var(--accent-glow);
-}
-
-.ep-num {
-  font-family: var(--font-mono);
-  font-size: var(--fs-xs);
-  color: var(--text3);
-  width: 28px;
-  text-align: end;
-  flex-shrink: 0;
-  font-variant-numeric: tabular-nums;
-}
-.ep-item.active .ep-num { color: var(--accent); }
-/* Mini equalizer that replaces the index on the active row */
-.ep-eq { display: inline-flex; align-items: flex-end; justify-content: flex-end; gap: 2px; height: 13px; width: 100%; }
-.ep-eq i { width: 3px; height: 35%; background: var(--accent); border-radius: 1px; transform-origin: bottom; }
-.ep-eq i:nth-child(1) { height: 55%; }
-.ep-eq i:nth-child(2) { height: 100%; }
-.ep-eq i:nth-child(3) { height: 72%; }
-body.is-playing .ep-item.active .ep-eq i { animation: eq-bounce 0.9s var(--ease-out) infinite; }
-body.is-playing .ep-item.active .ep-eq i:nth-child(2) { animation-delay: 0.15s; }
-body.is-playing .ep-item.active .ep-eq i:nth-child(3) { animation-delay: 0.3s; }
-.ep-info { flex: 1; min-width: 0; }
-.ep-name {
-  font-size: 12.5px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-bottom: 3px;
-  color: var(--text);
-  letter-spacing: -0.01em;
-  transition: color 0.18s;
-}
-.ep-item.active .ep-name { color: var(--accent); }
-.ep-date-dur {
-  font-size: 10px;
-  font-family: var(--font-mono);
-  color: var(--text3);
-}
-.ep-saved-badge {
-  font-size: 9px;
-  font-family: var(--font-mono);
-  color: var(--yellow);
-  margin-inline-start: 6px;
-}
-.ep-done-badge {
-  font-size: 10px;
-  color: var(--green);
-  margin-inline-start: 6px;
-}
-/* Partially-played: a hairline showing how far the listener got */
-.ep-progress {
-  position: absolute;
-  inset-inline: 0; bottom: -1px;
-  height: 2px;
-  pointer-events: none;
-}
-.ep-progress i {
-  display: block;
-  height: 100%;
-  background: var(--accent);
-  opacity: 0.55;
-  border-radius: 0 1px 1px 0;
-}
-/* Finished episodes recede so the unheard ones stand out */
-.ep-item.listened .ep-name { color: var(--text3); font-weight: 400; }
-.ep-item.listened .ep-num { color: var(--text3); }
-
-.retry-btn {
-  background: var(--surface);
-  border: 1px solid var(--border2);
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: var(--fs-sm);
-  padding: 10px 22px;
-  min-height: 44px;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: border-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
-}
-.retry-btn:hover { border-color: var(--accent); }
-.retry-btn:active { transform: scale(0.96); }
-
-.ep-actions { display: flex; gap: 6px; flex-shrink: 0; }
-.ep-dl-btn {
-  background: var(--surface);
-  border: 1px solid var(--border2);
-  color: var(--text3);
-  cursor: pointer;
-  font-size: 11px;
-  width: 30px; height: 30px;
-  display: flex; align-items: center; justify-content: center;
-  border-radius: var(--r-xs);
-  font-family: var(--font-mono);
-  transition: border-color 0.18s, color 0.18s, transform 0.16s var(--ease-spring);
-  opacity: 0;
-  position: relative;
-}
-.ep-item:hover .ep-dl-btn, .ep-dl-btn.done { opacity: 1; }
-.ep-dl-btn .icon { width: 15px; height: 15px; }
-.ep-dl-btn:hover { border-color: var(--green); color: var(--green); transform: translateY(-1px); }
-.ep-dl-btn.done { border-color: var(--green); color: var(--green); }
-/* Queue toggle: shows its 1-based position while queued */
-.ep-q-btn.queued {
-  border-color: var(--accent);
-  color: var(--accent);
-  opacity: 1;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 600;
-}
-/* Unfavorite button (in the subscriptions list) reads as a filled accent star */
-.ep-dl-btn.unfav { color: var(--accent); border-color: var(--accent); opacity: 1; }
-.ep-dl-btn.unfav:hover { border-color: var(--red); color: var(--red); }
-/* On touch devices the dl button is always visible (no hover). The enlarged
-   hit area is scoped to touch only: on desktop the button is opacity:0 until
-   row-hover, and a bleeding hit box would otherwise steal row clicks.
-   Vertical -7px reaches 44px; horizontal is capped at -4px (~38px) because the
-   two action buttons sit in a 6px-gap cluster and would otherwise overlap. */
-@media (hover: none) {
-  .ep-dl-btn { opacity: 1; }
-  .ep-dl-btn::after { content: ''; position: absolute; inset-block: -7px; inset-inline: -4px; }
-}
-
-/* ═══════════════════════════════════════
-   SETTINGS PANEL
-═══════════════════════════════════════ */
-/* While the drawer is open, freeze continuous background motion so scrolling
-   the panel runs at full frame rate (nothing behind it competes for the GPU) */
-body.settings-open #searchScreen::before,
-body.settings-open .brand-logo,
-body.settings-open .brand-name,
-body.settings-open .wave-fill i,
-body.settings-open .now-eq i,
-body.settings-open .ep-eq i,
-body.settings-open .play-btn::after,
-body.settings-open .dot.loading { animation-play-state: paused; }
-
-/* Native <dialog> drawer: modal focus trap + Esc from the platform, the
-   slide-in still driven by .open so motion matches the rest of the app. */
-.settings-panel {
-  position: fixed;
-  /* anchored to the inline-end edge so it mirrors to the left in RTL */
-  inset: 0;
-  inset-inline-start: auto;
-  margin: 0;
-  /* clear the notch/status bar and the screen-edge inset the drawer sits on.
-     env() insets are physical; inset-right is correct while the drawer is on
-     the right (LTR) — the RTL rule below swaps it to inset-left. */
-  padding: 0;
-  padding-block-start: env(safe-area-inset-top, 0px);
-  padding-inline-end: env(safe-area-inset-right, 0px);
-  border: none;
-  width: 340px;
-  max-width: 88vw;
-  height: 100%;
-  max-height: none;
-  color: inherit;
-  /* Solid surface (no backdrop-filter): a drawer slides over content, and
-     animating translateX on a blurred element re-rasterizes the whole backdrop
-     every frame — the main cause of the settings FPS drop. */
-  background: var(--surface);
-  border-inline-start: 1px solid var(--border2);
-  box-shadow: var(--shadow-lg);
-  z-index: var(--z-panel);
-  transform: translateX(100%);
-  transition: transform var(--d-slow) var(--ease-out);
-  will-change: transform;
-  contain: paint;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border2) transparent;
-}
-.settings-panel::-webkit-scrollbar { width: 6px; }
-.settings-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
-.settings-panel.open { transform: translateX(0); }
-.settings-panel::backdrop { background: rgba(6,7,11,0.55); }
-/* Edge anchoring + border now mirror automatically via logical properties.
-   Only the closed-state slide direction needs flipping — transforms are not
-   direction-aware, so the drawer must slide off to the left in RTL. */
-[dir="rtl"] .settings-panel { transform: translateX(-100%); padding-inline-end: env(safe-area-inset-left, 0px); }
-
-.settings-header {
-  padding: 22px 22px 16px;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-  position: sticky;
-  top: 0;
-  background: var(--surface);
-  z-index: 2;
-}
-.settings-title { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
-.settings-close {
-  background: none;
-  border: none;
-  color: var(--text3);
-  cursor: pointer;
-  font-size: var(--fs-xl);
-  line-height: 1;
-  padding: 0 4px;
-  transition: color 0.18s, transform 0.18s var(--ease-spring);
-  position: relative;
-}
-/* ≥44px touch target centered on the small × glyph */
-.settings-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
-.settings-close:hover { color: var(--text); transform: rotate(90deg); }
-
-.settings-body { padding: 22px; display: flex; flex-direction: column; gap: 26px; }
-
-.s-section-title {
-  font-size: 10px;
-  font-family: var(--font-mono);
-  color: var(--text3);
-  text-transform: uppercase;
-  letter-spacing: 1.2px;
-  margin-bottom: 14px;
-}
-
-.s-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--s-3);
-  margin-bottom: 14px;
-}
-.s-label { font-size: 12.5px; color: var(--text2); flex: 1; }
-.s-sublabel { font-size: 10px; color: var(--text3); font-family: var(--font-mono); margin-top: 3px; }
-
-.s-select {
-  background: var(--surface2);
-  border: 1px solid var(--border2);
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  padding: 7px 9px;
-  border-radius: var(--r-xs);
-  cursor: pointer;
-  outline: none;
-  min-width: 96px;
-  transition: border-color 0.18s;
-}
-.s-select:hover, .s-select:focus { border-color: var(--accent); }
-.s-select:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); }
-
-.s-range {
-  -webkit-appearance: none;
-  width: 100%;
-  height: 4px;
-  background: var(--border2);
-  border-radius: 2px;
-  outline: none;
-  cursor: pointer;
-  margin-top: var(--s-2);
-}
-.s-range:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); }
-.s-range::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 15px; height: 15px;
-  border-radius: 50%;
-  background: var(--accent);
-  cursor: pointer;
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.s-toggle { position: relative; width: 40px; height: 23px; flex-shrink: 0; }
-.s-toggle input { opacity: 0; width: 0; height: 0; }
-.s-toggle-track {
-  position: absolute;
-  inset: 0;
-  background: var(--border2);
-  border-radius: 23px;
-  cursor: pointer;
-  transition: background 0.25s var(--ease-out);
-}
-.s-toggle input:checked + .s-toggle-track { background: var(--accent); }
-.s-toggle-track::before {
-  content: '';
-  position: absolute;
-  width: 17px; height: 17px;
-  inset-inline-start: 3px; top: 3px;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-  transition: transform 0.28s var(--ease-spring);
-}
-.s-toggle input:checked + .s-toggle-track::before { transform: translateX(17px); }
-/* transform is not direction-aware — in RTL the knob rests at the inline-start
-   (right) edge and must travel the other way when checked */
-[dir="rtl"] .s-toggle input:checked + .s-toggle-track::before { transform: translateX(-17px); }
-
-.s-color-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
-.s-color-swatch {
-  width: 28px; height: 28px;
-  border-radius: 50%;
-  cursor: pointer;
-  border: 2px solid transparent;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), var(--shadow-sm);
-  transition: border-color 0.18s, transform 0.16s var(--ease-spring);
-  position: relative;
-}
-/* Enlarged touch target. Grid gap is only 10px, so extend just to the gap
-   midpoint (~38px hit box) — a full 44px (-8px) would overlap neighbours and
-   raise mis-taps. */
-.s-color-swatch::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
-.s-color-swatch:hover { transform: scale(1.16); }
-.s-color-swatch.active { border-color: var(--text); transform: scale(1.08); }
-
-.s-divider { border: none; border-top: 1px solid var(--border); margin: 2px 0; }
-
-.s-btn {
-  background: var(--surface2);
-  border: 1px solid var(--border2);
-  color: var(--text2);
-  cursor: pointer;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  padding: 10px 14px;
-  border-radius: var(--r-xs);
-  transition: border-color 0.18s, color 0.18s, background 0.18s;
-  width: 100%;
-  text-align: start;
-  position: relative;
-}
-/* ≥44px touch target without changing the visual box (36px tall otherwise) */
-.s-btn::after { content: ''; position: absolute; top: 50%; inset-inline: 0; height: 44px; transform: translateY(-50%); }
-.s-btn:hover { border-color: var(--accent); color: var(--accent); }
-.s-btn.danger:hover { border-color: var(--red); color: var(--red); background: rgba(240,106,106,0.06); }
-
-/* Language picker — search screen */
-.search-screen-topbar {
-  position: absolute;
-  /* keep the language picker clear of the status bar / notch */
-  top: calc(18px + env(safe-area-inset-top, 0px));
-  inset-inline-end: 22px;
-  display: flex;
-  align-items: center;
-  gap: var(--s-2);
-  z-index: var(--z-banner);
-}
-.lang-select {
-  background: var(--glass);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--border2);
-  color: var(--text2);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  padding: 8px 10px;
-  border-radius: var(--r-xs);
-  cursor: pointer;
-  outline: none;
-  transition: border-color 0.18s, color 0.18s;
-}
-.lang-select:hover, .lang-select:focus { border-color: var(--accent); color: var(--text); }
-.lang-select:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); }
-
-/* ═══════════════════════════════════════
-   RESPONSIVE
-═══════════════════════════════════════ */
-@media (max-width: 520px) {
-  .p-header { padding: 0 14px; gap: 9px; }
-  .p-epcount { display: none; }
-  .p-player { padding: 16px 16px 18px; }
-  .controls { flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
-  .controls .spacer { display: none; }
-  .ctrl-btn { padding: 9px 11px; }
-  .brand-name { font-size: 34px; }
-  .brand-logo { width: 74px; height: 74px; }
-  .search-input { font-size: 14px; padding: 14px 16px; }
-  .search-screen-topbar { top: calc(14px + env(safe-area-inset-top, 0px)); inset-inline-end: 14px; }
-  .ep-item { padding: 0 16px; }
-  .ep-item:hover { padding-inline-start: 20px; }
-  .sort-bar { padding: 0 16px; }
-  /* No room next to the filter input — the label wraps into 2–3 lines.
-     The toggle button still shows the direction, so drop the text. */
-  .sort-info { display: none; }
-}
-
-/* ═══════════════════════════════════════
-   MINI PLAYER
-   Floating transport on the home screen while a track is loaded — leaving
-   a feed no longer stops playback.
-═══════════════════════════════════════ */
-.mini-player {
-  display: none;
-  position: fixed;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
-  width: min(560px, calc(100vw - 24px));
-  align-items: center;
-  gap: var(--s-3);
-  padding: 10px 12px;
-  background: var(--glass);
-  backdrop-filter: blur(18px) saturate(1.4);
-  -webkit-backdrop-filter: blur(18px) saturate(1.4);
-  border: 1px solid var(--border2);
-  border-radius: 16px;
-  box-shadow: 0 18px 44px -18px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02) inset;
-  cursor: pointer;
-  z-index: var(--z-mini);
-  overflow: hidden;
-  animation: mini-rise 0.4s var(--ease-out) both;
-}
-body.has-track:not(.feed-open) .mini-player { display: flex; }
-.mini-player:hover { border-color: var(--accent); }
-.mini-progress-track {
-  position: absolute;
-  top: 0; inset-inline: 0;
-  height: 2px;
-  background: var(--border);
-}
-.mini-progress {
-  height: 100%;
-  width: 0%;
-  background: var(--accent-grad);
-  transition: width 0.3s linear;
-}
-.mini-art {
-  width: 40px; height: 40px;
-  border-radius: 10px;
-  object-fit: cover;
-  background: var(--surface2);
-  flex-shrink: 0;
-}
-.mini-info { flex: 1; min-width: 0; }
-.mini-title {
-  font-size: 13px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.mini-feed {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text3);
-  margin-top: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.mini-play {
-  width: 44px; height: 44px;
-  border-radius: 50%;
-  border: none;
-  background: var(--accent-grad);
-  color: var(--accent-text);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: transform 0.15s var(--ease-out);
-}
-.mini-play:hover { transform: scale(1.06); }
-.mini-play:active { transform: scale(0.94); }
-.mini-play .icon { width: 17px; height: 17px; }
-@keyframes mini-rise {
-  from { opacity: 0; transform: translate(-50%, 16px); }
-  to   { opacity: 1; transform: translate(-50%, 0); }
-}
-
-/* ═══════════════════════════════════════
-   DESKTOP TWO-PANE (≥900px, feed open)
-   Library rail on the left, episodes on the right — the idle home screen
-   keeps its full-width hero.
-═══════════════════════════════════════ */
-@media (min-width: 900px) {
-  body.feed-open { flex-direction: row; }
-  body.feed-open #searchScreen {
-    display: flex;
-    flex: 0 0 clamp(300px, 30vw, 400px);
-    justify-content: flex-start;
-    padding: 20px 18px 24px;
-    gap: 18px;
-    border-inline-end: 1px solid var(--border);
-  }
-  /* the rail is a tool, not a stage — no ambient glow, no float */
-  body.feed-open #searchScreen::before,
-  body.feed-open #searchScreen::after { display: none; }
-  body.feed-open .search-screen-topbar { display: none; }
-  body.feed-open .brand {
-    display: flex;
-    align-items: center;
-    gap: var(--s-3);
-    width: 100%;
-    animation: none;
-  }
-  body.feed-open .brand-logo {
-    width: 40px; height: 40px;
-    border-radius: 13px;
-    margin: 0;
-    animation: none;
-    box-shadow: 0 8px 22px -8px var(--accent-glow);
-  }
-  body.feed-open .brand-logo svg { width: 22px; height: 22px; }
-  body.feed-open .brand-name { font-size: var(--fs-xl); letter-spacing: -0.8px; }
-  body.feed-open .search-wrap { max-width: none; animation: none; }
-  body.feed-open .results-list {
-    max-width: none;
-    max-height: none;
-    flex: 1;
-  }
-  body.feed-open #playerScreen { flex: 1; min-width: 0; }
-  /* back button is meaningless when both panes are visible */
-  body.feed-open .p-back { display: none; }
-}
-
-/* ═══════════════════════════════════════
-   KEYFRAMES
-═══════════════════════════════════════ */
-@keyframes rise-in {
-  from { opacity: 0; transform: translateY(14px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
-@keyframes glow-breathe {
-  0%, 100% { opacity: 0.38; transform: translate(-50%, -50%) scale(0.94); }
-  50%      { opacity: 0.7;  transform: translate(-50%, -50%) scale(1.05); }
-}
-@keyframes eq-bounce {
-  0%, 100% { transform: scaleY(0.42); }
-  50%      { transform: scaleY(1); }
-}
-@keyframes wave-breathe {
-  0%, 100% { transform: scaleY(0.9); }
-  50%      { transform: scaleY(1.12); }
-}
-@keyframes head-pulse {
-  0%, 100% { box-shadow: 0 0 0 2px var(--accent-glow); }
-  50%      { box-shadow: 0 0 9px 3px var(--accent-glow); }
-}
-@keyframes wave-flow {
-  0%, 100% { transform: scaleY(0.5); }
-  50%      { transform: scaleY(1); }
-}
-@keyframes logo-float {
-  0%, 100% { transform: translateY(0); }
-  50%      { transform: translateY(-5px); }
-}
-@keyframes text-sheen {
-  0%   { background-position: 150% 0; }
-  50%, 100% { background-position: -60% 0; }
-}
-@keyframes shimmer {
-  0%   { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
-@keyframes pulse-ring {
-  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
-  70%  { box-shadow: 0 0 0 6px transparent; }
-  100% { box-shadow: 0 0 0 0 transparent; }
-}
-@keyframes ring-pulse {
-  0%   { transform: scale(0.96); opacity: 0.4; }
-  70%  { transform: scale(1.18); opacity: 0; }
-  100% { transform: scale(1.18); opacity: 0; }
-}
-
-/* Screen enter */
-.screen-enter { animation: screen-in 0.45s var(--ease-out) both; }
-@keyframes screen-in {
-  from { opacity: 0; transform: translateY(8px) scale(0.995); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-/* Skeleton */
-.skeleton-list { padding: var(--s-2) 0; }
-.skeleton-row {
-  display: flex; align-items: center; gap: 13px;
-  padding: 0 22px; height: var(--list-row-height);
-  border-bottom: 1px solid var(--border);
-}
-.sk { background: var(--surface2); border-radius: 6px; position: relative; overflow: hidden; }
-.sk::after {
-  content: ''; position: absolute; inset: 0;
-  background: linear-gradient(90deg, transparent 0%, var(--accent-soft) 50%, transparent 100%);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s linear infinite;
-}
-.sk-num { width: 20px; height: 11px; }
-.sk-line1 { height: 11px; width: 62%; margin-bottom: var(--s-2); }
-.sk-line2 { height: 9px; width: 34%; }
-
-/* ─ Toast notifications (v2 — replaces alert()) ─ */
-.toast-host {
-  position: fixed;
-  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: var(--z-toast);
-  display: flex;
-  flex-direction: column;
-  gap: var(--s-2);
-  align-items: center;
-  pointer-events: none;
-}
-.toast {
-  background: var(--glass);
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-  color: var(--text);
-  border: 1px solid var(--border2);
-  border-radius: var(--r);
-  box-shadow: var(--shadow-md);
-  padding: 10px 16px;
-  font-size: var(--fs-md);
-  font-family: var(--font-body);
-  max-width: min(90vw, 420px);
-  opacity: 0;
-  translate: 0 8px;
-  transition: opacity var(--d-base) var(--ease-out), translate var(--d-base) var(--ease-out);
-}
-.toast.show { opacity: 1; translate: 0 0; }
-.toast-error { border-color: var(--red); color: var(--red); }
-
-/* ── Confirm dialog ─────────────────────────────────────────────── */
-.confirm-dialog {
-  border: 1px solid var(--border2);
-  border-radius: var(--r-lg);
-  background: var(--surface);
-  color: var(--text);
-  box-shadow: var(--shadow-lg);
-  padding: 22px;
-  width: min(92vw, 380px);
-  opacity: 0;
-  translate: 0 10px;
-  transition: opacity var(--d-base) var(--ease-out), translate var(--d-base) var(--ease-out);
-}
-.confirm-dialog.open { opacity: 1; translate: 0 0; }
-.confirm-dialog::backdrop { background: rgba(6, 7, 11, 0.55); }
-.confirm-title {
-  margin: 0 0 8px;
-  font-size: var(--fs-lg);
-  font-family: var(--font-display);
-}
-.confirm-msg {
-  margin: 0 0 18px;
-  font-size: var(--fs-md);
-  color: var(--text2);
-  line-height: 1.5;
-}
-.confirm-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-.confirm-actions .s-btn { min-height: 44px; }
-
-/* ── Queue panel ────────────────────────────────────────────────── */
-.sort-left { position: relative; }
-.queue-toggle { position: relative; }
-.queue-count {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--accent-text);
-  background: var(--accent);
-  border-radius: 999px;
-  min-width: 16px;
-  height: 16px;
-  line-height: 16px;
-  text-align: center;
-  padding: 0 4px;
-  margin-inline-start: 4px;
-}
-.queue-panel {
-  position: absolute;
-  top: calc(100% + 8px);
-  inset-inline-start: 0;
-  z-index: var(--z-mini);
-  width: min(88vw, 360px);
-  background: var(--surface);
-  border: 1px solid var(--border2);
-  border-radius: var(--r);
-  box-shadow: var(--shadow-lg);
-  padding: var(--s-3);
-}
-.queue-panel-title {
-  margin: 0 0 var(--s-2);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text3);
-}
-.queue-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
-.queue-empty { color: var(--text3); font-size: var(--fs-md); padding: var(--s-2) 0; }
-.queue-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
-.queue-pos { font-family: var(--font-mono); font-size: 10px; color: var(--accent); min-width: 16px; }
-.queue-name { flex: 1; min-width: 0; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.queue-act {
-  background: none;
-  border: none;
-  color: var(--text2);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: var(--r-xs);
-  position: relative;
-  display: flex;
-  transition: color 0.18s, background 0.18s;
-}
-.queue-act:hover { color: var(--text); background: var(--surface2); }
-/* comfortable rows: extend each action's tap band vertically */
-.queue-act::after { content: ''; position: absolute; inset-block: -8px; inset-inline: -2px; }
-.queue-act .icon { width: 15px; height: 15px; }
-.queue-panel-foot { margin-top: var(--s-2); display: flex; justify-content: flex-end; }
-.queue-panel-foot .s-btn { width: auto; }
-
-/* ── Offline banner ─────────────────────────────────────────────── */
-.offline-banner {
-  position: fixed;
-  top: calc(env(safe-area-inset-top, 0px) + 10px);
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: var(--z-banner);
-  background: var(--glass);
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-  color: var(--text2);
-  border: 1px solid var(--border2);
-  border-radius: 999px;
-  box-shadow: var(--shadow-md);
-  padding: 7px 16px;
-  font-size: var(--fs-sm);
-  font-family: var(--font-mono);
-  max-width: min(90vw, 480px);
-  text-align: center;
-  pointer-events: none;
-}
diff --git a/src/styles/controls.css b/src/styles/controls.css
new file mode 100644
index 0000000..86230e5
--- /dev/null
+++ b/src/styles/controls.css
@@ -0,0 +1,347 @@
+/* Shared control kit: buttons, selects, toggles, inputs, generic list rows,
+   state boxes, skeletons, badges. View CSS composes these — do not fork. */
+
+/* ─ Buttons ─ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-2);
+  min-height: 44px;
+  padding: 0 var(--s-4);
+  border: 1px solid var(--border2);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: var(--fs-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background var(--d-fast) var(--ease-smooth), border-color var(--d-fast) var(--ease-smooth), transform var(--d-fast) var(--ease-smooth);
+}
+.btn:hover { background: var(--surface2); border-color: var(--border2); }
+.btn:active { transform: scale(0.98); }
+.btn-primary {
+  background: var(--accent-grad);
+  border-color: transparent;
+  color: var(--accent-text);
+  font-weight: 600;
+}
+.btn-primary:hover { background: var(--accent-grad); filter: brightness(1.06); }
+.btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
+.btn.danger:hover { background: color-mix(in srgb, var(--red) 12%, var(--surface)); }
+
+/* legacy alias kept for ported markup (settings/confirm buttons) */
+.s-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-2);
+  min-height: 44px;
+  padding: 0 var(--s-4);
+  border: 1px solid var(--border2);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: var(--fs-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background var(--d-fast) var(--ease-smooth), border-color var(--d-fast) var(--ease-smooth);
+}
+.s-btn:hover { background: var(--surface2); }
+.s-btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
+.s-btn.danger:hover { background: color-mix(in srgb, var(--red) 12%, var(--surface)); }
+
+/* Icon-only button */
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
+  border: 0;
+  border-radius: var(--r-sm);
+  background: none;
+  color: var(--text2);
+  cursor: pointer;
+  transition: background var(--d-fast) var(--ease-smooth), color var(--d-fast) var(--ease-smooth);
+}
+.icon-btn:hover { background: var(--surface2); color: var(--text); }
+.icon-btn.faved, .icon-btn.active { color: var(--accent); }
+
+/* ─ Select ─ */
+.seri-select {
+  appearance: none;
+  min-height: 36px;
+  padding: 0 var(--s-4) 0 var(--s-3);
+  border: 1px solid var(--border2);
+  border-radius: var(--r-xs);
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: var(--fs-sm);
+  cursor: pointer;
+}
+.seri-select:hover { background: var(--surface2); }
+.s-select { /* legacy alias */
+  appearance: none;
+  min-height: 36px;
+  padding: 0 var(--s-3);
+  border: 1px solid var(--border2);
+  border-radius: var(--r-xs);
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: var(--fs-sm);
+  cursor: pointer;
+}
+
+/* ─ Toggle switch (ported .s-toggle markup) ─ */
+.s-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
+.s-toggle input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; cursor: pointer; }
+.s-toggle-track {
+  inline-size: 40px;
+  block-size: 22px;
+  border-radius: 999px;
+  background: var(--border2);
+  transition: background var(--d-base) var(--ease-smooth);
+  flex-shrink: 0;
+}
+.s-toggle-track::after {
+  content: '';
+  position: absolute;
+  inset-block-start: 3px;
+  inset-inline-start: 3px;
+  inline-size: 16px;
+  block-size: 16px;
+  border-radius: 50%;
+  background: var(--text);
+  transition: transform var(--d-base) var(--ease-spring);
+}
+.s-toggle input:checked + .s-toggle-track { background: var(--accent); }
+.s-toggle input:checked + .s-toggle-track::after { transform: translateX(18px); background: var(--accent-text); }
+[dir="rtl"] .s-toggle input:checked + .s-toggle-track::after { transform: translateX(-18px); }
+.s-toggle input:focus-visible + .s-toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* ─ Text input ─ */
+.text-input {
+  min-height: 44px;
+  padding: 0 var(--s-4);
+  border: 1px solid var(--border2);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: var(--fs-md);
+  transition: border-color var(--d-fast) var(--ease-smooth), box-shadow var(--d-fast) var(--ease-smooth);
+}
+.text-input::placeholder { color: var(--text3); }
+.text-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+/* ─ Generic media row (result rows, subscription rows, download rows) ─ */
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  min-height: var(--list-row-height);
+  padding: var(--s-2) var(--s-3);
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  transition: background var(--d-fast) var(--ease-smooth);
+}
+.row:hover, .row:focus-visible { background: var(--surface); }
+.row-art {
+  inline-size: 44px;
+  block-size: 44px;
+  border-radius: var(--r-xs);
+  object-fit: cover;
+  background: var(--surface2);
+  flex-shrink: 0;
+}
+.row-info { flex: 1; min-width: 0; }
+.row-name {
+  font-size: var(--player-font-size);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.row-sub {
+  font-size: var(--fs-sm);
+  color: var(--text2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-block-start: 2px;
+}
+.row-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text3); flex-shrink: 0; }
+
+/* Section label above row groups */
+.search-hint {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text3);
+  margin: var(--s-5) 0 var(--s-2);
+  padding-inline: var(--s-3);
+}
+
+/* ─ State boxes (loading / empty / error) ─ */
+.empty-state {
+  text-align: center;
+  color: var(--text2);
+  padding: var(--s-7) var(--s-5);
+  font-size: var(--fs-md);
+  line-height: 1.6;
+}
+.empty-state--error { color: var(--red); }
+.empty-state-hint { color: var(--text3); font-size: var(--fs-sm); margin-block-start: var(--s-2); }
+.retry-btn {
+  min-height: 40px;
+  padding: 0 var(--s-4);
+  border: 1px solid var(--border2);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--font-body);
+  cursor: pointer;
+}
+.retry-btn:hover { background: var(--surface2); }
+
+/* ─ Skeleton shimmer ─ */
+.skeleton-list { padding: var(--s-2) var(--s-3); }
+.skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  min-height: var(--list-row-height);
+  padding: var(--s-2) 0;
+}
+.sk {
+  background: var(--surface2);
+  border-radius: var(--r-xs);
+  position: relative;
+  overflow: hidden;
+}
+.sk::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
+  animation: sk-shimmer 1.4s infinite;
+}
+@keyframes sk-shimmer { to { transform: translateX(100%); } }
+.sk-num { inline-size: 28px; block-size: 28px; border-radius: 50%; flex-shrink: 0; }
+.sk-line1 { block-size: 12px; inline-size: 70%; margin-block-end: 8px; }
+.sk-line2 { block-size: 9px; inline-size: 40%; }
+
+/* ─ Badges ─ */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.badge-done { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
+
+/* ─ Language menu (custom listbox with inline SVG flags) ─ */
+.lang-menu { position: relative; display: inline-block; }
+.lang-menu-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  min-height: 40px;
+  padding: 0 var(--s-3);
+  border: 1px solid var(--border2);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background var(--d-fast) var(--ease-smooth), border-color var(--d-fast) var(--ease-smooth);
+}
+.lang-menu-btn:hover { background: var(--surface2); }
+.lang-menu-btn.compact { font-family: var(--font-mono); letter-spacing: 0.04em; }
+.lang-menu-chev { width: 14px; height: 14px; color: var(--text3); }
+.flag {
+  inline-size: 21px;
+  block-size: 14px;
+  border-radius: 3px;
+  /* hairline so white fields (JP/RU) don't dissolve into light surfaces */
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+  flex-shrink: 0;
+}
+.lang-menu-flag { display: inline-flex; }
+.lang-menu-pop {
+  position: absolute;
+  inset-block-start: calc(100% + var(--s-1));
+  inset-inline-end: 0;
+  min-inline-size: 176px;
+  padding: var(--s-1);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  background: var(--bg2);
+  box-shadow: var(--shadow-lg);
+  z-index: var(--z-panel);
+  display: flex;
+  flex-direction: column;
+}
+.lang-menu-pop[hidden] { display: none; }
+.lang-menu-opt {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  min-height: 40px;
+  padding: 0 var(--s-3);
+  border: 0;
+  border-radius: var(--r-xs);
+  background: none;
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: var(--fs-md);
+  cursor: pointer;
+  text-align: start;
+}
+.lang-menu-opt:hover,
+.lang-menu-opt:focus-visible { background: var(--surface); outline: none; }
+.lang-menu-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
+.lang-menu-opt.selected { color: var(--accent); font-weight: 600; }
+.lang-menu-name { flex: 1; }
+.lang-menu-check { width: 15px; height: 15px; }
+
+/* ─ Tabs (library) ─ */
+.tabs {
+  display: flex;
+  gap: var(--s-1);
+  border-block-end: 1px solid var(--border);
+  margin-block-end: var(--s-4);
+}
+.tab {
+  min-height: 44px;
+  padding: 0 var(--s-4);
+  border: 0;
+  background: none;
+  color: var(--text2);
+  font-family: var(--font-body);
+  font-size: var(--fs-md);
+  font-weight: 600;
+  cursor: pointer;
+  border-block-end: 2px solid transparent;
+  transition: color var(--d-fast) var(--ease-smooth), border-color var(--d-fast) var(--ease-smooth);
+}
+.tab:hover { color: var(--text); }
+.tab[aria-selected="true"] { color: var(--accent); border-block-end-color: var(--accent); }
diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 0000000..2bc0f4b
--- /dev/null
+++ b/src/styles/index.css
@@ -0,0 +1,16 @@
+/* Style barrel — cascade order matters: tokens → themes → base → frame →
+   shared kit → overlays → signature → views. main.ts imports only this file. */
+@import './tokens.css';
+@import './themes.css';
+@import './base.css';
+@import './layout.css';
+@import './controls.css';
+@import './overlays.css';
+@import './signal-line.css';
+@import './views/home.css';
+@import './views/search.css';
+@import './views/library.css';
+@import './views/podcast.css';
+@import './views/now-playing.css';
+@import './views/queue.css';
+@import './views/settings.css';
diff --git a/src/styles/layout.css b/src/styles/layout.css
new file mode 100644
index 0000000..4b3c29d
--- /dev/null
+++ b/src/styles/layout.css
@@ -0,0 +1,177 @@
+/* App frame: navigation (mobile bottom tab bar / desktop left sidebar),
+   view container, mini-player dock placement, safe areas.
+   Logical properties only — RTL comes for free. */
+
+.app-frame {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ───────────────────────── main / views ───────────────────────── */
+.app-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+.view {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  /* room for the mini dock + tab bar (mobile) — desktop overrides below */
+  padding-block-end: calc(var(--tabbar-h) + var(--mini-h) + env(safe-area-inset-bottom, 0px) + var(--s-4));
+}
+.view[hidden] { display: none; }
+
+/* Shared content column inside a view */
+.view-inner {
+  max-width: 720px;
+  margin-inline: auto;
+  padding: var(--s-5) var(--s-4);
+}
+
+/* View headline convention */
+.view-title {
+  font-family: var(--font-display);
+  font-size: var(--fs-xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-block-end: var(--s-4);
+}
+
+/* Enter transition — views.ts re-adds .view-enter on show */
+.view-enter { animation: view-in var(--d-base) var(--ease-out); }
+@keyframes view-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* ───────────────────────── navigation ─────────────────────────── */
+.app-nav {
+  z-index: var(--z-nav);
+  background: var(--glass);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+.nav-brand { display: none; }
+.nav-items { display: flex; list-style: none; }
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  min-height: 44px;
+  border: 0;
+  background: none;
+  /* Navigation labels are primary wayfinding, not metadata — text2, not text3. */
+  color: var(--text2);
+  font-family: var(--font-body);
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  border-radius: var(--r-xs);
+  transition: color var(--d-fast) var(--ease-smooth);
+}
+.nav-item .icon { width: 22px; height: 22px; }
+.nav-item:hover { color: var(--text); }
+.nav-item.active { color: var(--accent); }
+.nav-item.active .nav-dot { opacity: 1; transform: none; }
+/* active marker — a tiny signal tick */
+.nav-dot {
+  width: 14px; height: 2px;
+  border-radius: 2px;
+  background: var(--accent);
+  opacity: 0;
+  transform: scaleX(0.3);
+  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
+}
+
+/* Mobile: fixed bottom tab bar */
+@media (max-width: 899px) {
+  .app-nav {
+    position: fixed;
+    inset-inline: 0;
+    inset-block-end: 0;
+    border-block-start: 1px solid var(--hairline);
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+  }
+  .nav-items { justify-content: space-around; block-size: var(--tabbar-h); }
+  .nav-item { flex: 1; max-width: 120px; }
+}
+
+/* Desktop: static left sidebar */
+@media (min-width: 900px) {
+  .app-nav {
+    inline-size: var(--nav-w);
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    padding: var(--s-5) var(--s-3);
+    border-inline-end: 1px solid var(--border);
+    background: var(--bg2);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+  .nav-brand {
+    display: flex;
+    align-items: center;
+    gap: var(--s-3);
+    padding: var(--s-2) var(--s-3) var(--s-5);
+    color: var(--text);
+  }
+  .nav-brand-logo { width: 28px; height: 28px; color: var(--accent); }
+  .nav-brand-name {
+    font-family: var(--font-display);
+    font-size: 19px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+  }
+  .nav-items { flex-direction: column; gap: var(--s-1); }
+  .nav-item {
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: var(--s-3);
+    padding: 0 var(--s-3);
+    font-size: var(--fs-md);
+    inline-size: 100%;
+  }
+  .nav-item .icon { width: 19px; height: 19px; }
+  .nav-item.active { background: var(--accent-soft); }
+  .nav-item .nav-dot { display: none; }
+  /* settings pinned to the bottom of the rail */
+  .nav-items .nav-spring { flex: 1; }
+
+  .view {
+    padding-block-end: calc(var(--mini-h) + env(safe-area-inset-bottom, 0px) + var(--s-4));
+  }
+  .view-inner { padding: var(--s-6) var(--s-6); }
+}
+
+/* ───────────────────── mini-player dock frame ─────────────────── */
+/* Placement only — the mini player's inner look lives in signal-line.css /
+   overlays. Shown while a track is loaded (body.has-track). */
+.mini-player {
+  position: fixed;
+  inset-inline: var(--s-2);
+  inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--s-2));
+  block-size: var(--mini-h);
+  z-index: var(--z-mini);
+  display: none;
+}
+body.has-track .mini-player { display: flex; }
+
+@media (min-width: 900px) {
+  .mini-player {
+    inset-inline-start: calc(var(--nav-w) + var(--s-3));
+    inset-inline-end: var(--s-3);
+    inset-block-end: var(--s-3);
+  }
+}
diff --git a/src/styles/overlays.css b/src/styles/overlays.css
new file mode 100644
index 0000000..02313ad
--- /dev/null
+++ b/src/styles/overlays.css
@@ -0,0 +1,104 @@
+/* Overlays: toast, confirm dialog, offline banner, Now Playing sheet chrome.
+   The sheet's inner content is styled in views/now-playing.css. */
+
+/* ─ Toast ─ */
+.toast-host {
+  position: fixed;
+  inset-block-end: calc(var(--tabbar-h) + var(--mini-h) + env(safe-area-inset-bottom, 0px) + var(--s-4));
+  inset-inline: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--s-2);
+  z-index: var(--z-toast);
+  pointer-events: none;
+}
+@media (min-width: 900px) {
+  .toast-host { inset-block-end: calc(var(--mini-h) + var(--s-5)); }
+}
+.toast {
+  max-width: min(420px, calc(100vw - 32px));
+  padding: var(--s-3) var(--s-4);
+  border-radius: var(--r-sm);
+  background: var(--glass);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border: 1px solid var(--hairline);
+  box-shadow: var(--shadow-md);
+  color: var(--text);
+  font-size: var(--fs-md);
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
+}
+.toast.show { opacity: 1; transform: none; }
+.toast-error { border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
+
+/* ─ Confirm dialog ─ */
+.confirm-dialog {
+  margin: auto;
+  inline-size: min(380px, calc(100vw - 40px));
+  padding: var(--s-5);
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  background: var(--bg2);
+  color: var(--text);
+  box-shadow: var(--shadow-lg);
+  opacity: 0;
+  transform: translateY(10px) scale(0.98);
+  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
+}
+.confirm-dialog.open { opacity: 1; transform: none; }
+.confirm-dialog::backdrop { background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
+.confirm-title { font-size: var(--fs-lg); margin-block-end: var(--s-3); }
+.confirm-msg { color: var(--text2); font-size: var(--fs-md); line-height: 1.55; margin-block-end: var(--s-5); }
+.confirm-actions { display: flex; justify-content: flex-end; gap: var(--s-3); }
+
+/* ─ Offline banner ─ */
+.offline-banner {
+  position: fixed;
+  inset-block-start: env(safe-area-inset-top, 0px);
+  inset-inline: 0;
+  z-index: var(--z-banner);
+  text-align: center;
+  padding: var(--s-2) var(--s-4);
+  font-size: var(--fs-sm);
+  color: var(--yellow);
+  background: color-mix(in srgb, var(--yellow) 10%, var(--bg2));
+  border-block-end: 1px solid color-mix(in srgb, var(--yellow) 25%, transparent);
+}
+.offline-banner[hidden] { display: none; }
+
+/* ─ Now Playing sheet chrome (contents in views/now-playing.css) ─ */
+.np-sheet {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-sheet);
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  transform: translateY(100%);
+  transition: transform var(--d-slow) var(--ease-out), visibility var(--d-slow);
+  visibility: hidden;
+  padding-block-start: env(safe-area-inset-top, 0px);
+  padding-block-end: env(safe-area-inset-bottom, 0px);
+}
+.np-sheet.open { transform: none; visibility: visible; }
+.np-sheet[hidden] { display: none; }
+
+@media (min-width: 900px) {
+  .np-sheet {
+    inset: auto var(--s-4) var(--s-4) auto;
+    inset-inline-start: calc(var(--nav-w) + var(--s-4));
+    max-inline-size: 980px;
+    margin-inline-start: auto;
+    block-size: min(640px, calc(100dvh - 48px));
+    border: 1px solid var(--border);
+    border-radius: var(--r-xl);
+    box-shadow: var(--shadow-lg);
+    transform: translateY(24px);
+    opacity: 0;
+  }
+  .np-sheet.open { transform: none; opacity: 1; }
+}
diff --git a/src/styles/signal-line.css b/src/styles/signal-line.css
new file mode 100644
index 0000000..4c24225
--- /dev/null
+++ b/src/styles/signal-line.css
@@ -0,0 +1,336 @@
+/* Signature "frequency line" motif — owned by WP-E (Now Playing + mini player).
+   Sound made visible: a row of amber bars over a hairline baseline. The design
+   is drawn for its RESTING state first (a clean line); the playing state adds a
+   gentle shimmer. base.css zeroes animation durations under prefers-reduced-
+   motion — the static line is the correct fallback, so we never fight it.
+   Rules: consume --wave-track / --wave-played / --accent tokens; logical
+   properties throughout; the fill mirrors under [dir="rtl"]. */
+
+/* ═══════════════════ Hero scrubber (Now Playing) ═══════════════════ */
+.signal-scrub {
+  position: relative;
+  block-size: 84px;
+  padding-block: var(--s-3);
+  cursor: pointer;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.signal-scrub:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 5px;
+  border-radius: var(--r-sm);
+}
+
+/* Layers box holds the bars + baseline + playhead. In RTL the whole box is
+   mirrored so the clip-path fill (physical, inset from the end) reads right. */
+.signal-layers { position: absolute; inset: var(--s-3) 0; }
+[dir="rtl"] .signal-layers { transform: scaleX(-1); }
+
+/* base = unplayed silhouette; fill = amber overlay clipped to progress.
+   waveform.ts builds identical <i> bars in both, so the fill tracks the base
+   exactly. Fill clip-path is set inline: inset(0 <remaining>% 0 0). */
+.signal-base,
+.signal-fill {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2px;
+}
+.signal-base i,
+.signal-fill i {
+  flex: 1 1 0;
+  min-inline-size: 2px;
+  min-block-size: 2px;
+  border-radius: 999px;
+  transform-origin: center;
+}
+.signal-base i { background: var(--wave-track); }
+.signal-fill i {
+  background: var(--accent);
+  box-shadow: 0 0 5px var(--accent-glow);
+}
+
+/* the fine hairline that gives the motif its name */
+.signal-baseline {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 50%;
+  block-size: 1px;
+  transform: translateY(-50%);
+  background: linear-gradient(90deg, transparent, var(--border2) 10%, var(--border2) 90%, transparent);
+  pointer-events: none;
+}
+
+/* playhead: a slim amber tick with a glowing node — left% set by waveform.ts */
+.signal-head {
+  position: absolute;
+  inset-block: 3px;
+  inline-size: 2px;
+  margin-inline-start: -1px;
+  border-radius: 999px;
+  background: var(--accent-2);
+  box-shadow: 0 0 8px 1px var(--accent-glow);
+  pointer-events: none;
+}
+.signal-head::after {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: 10px;
+  block-size: 10px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: var(--accent-2);
+  box-shadow: 0 0 12px 3px var(--accent-glow);
+}
+
+/* scrub/hover time bubble (mono) — left% set by waveform.ts */
+.signal-tip {
+  position: absolute;
+  inset-block-end: 100%;
+  margin-block-end: var(--s-1);
+  transform: translateX(-50%);
+  padding: 2px 7px;
+  border-radius: var(--r-xs);
+  background: var(--surface2);
+  border: 1px solid var(--border2);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--d-fast) var(--ease-smooth);
+}
+[dir="rtl"] .signal-tip { transform: translateX(-50%) scaleX(-1); }
+.signal-scrub:hover .signal-tip,
+.signal-scrub.scrubbing .signal-tip { opacity: 1; }
+.signal-scrub.scrubbing .signal-head { inline-size: 3px; }
+.signal-scrub.scrubbing .signal-head::after { inline-size: 13px; block-size: 13px; }
+
+/* Playing shimmer — a travelling scaleY pulse, staggered by nth-child so it
+   reads as an organic wave. base + fill animate in lockstep (same heights,
+   same delays) so the amber never drifts off its silhouette. */
+@keyframes signal-shimmer {
+  0%, 100% { transform: scaleY(0.6); }
+  50% { transform: scaleY(1); }
+}
+.np-player.playing .signal-base i,
+.np-player.playing .signal-fill i {
+  animation: signal-shimmer 1.15s var(--ease-smooth) infinite;
+}
+.np-player.playing .signal-base i:nth-child(3n),
+.np-player.playing .signal-fill i:nth-child(3n) { animation-duration: 1.4s; animation-delay: -0.25s; }
+.np-player.playing .signal-base i:nth-child(3n+1),
+.np-player.playing .signal-fill i:nth-child(3n+1) { animation-duration: 0.95s; animation-delay: -0.55s; }
+.np-player.playing .signal-base i:nth-child(4n),
+.np-player.playing .signal-fill i:nth-child(4n) { animation-delay: -0.85s; }
+
+/* ═══════════════════════ Mini transport dock ══════════════════════ */
+/* layout.css fixes the .mini-player position; the look lives here.
+   The dock IS the transport now: skip/play/skip (+prev/next/speed on wider
+   screens) live inline; the chevron or the title area expands the full sheet. */
+.mini-player {
+  align-items: center;
+  gap: var(--s-2);
+  padding-inline: var(--s-3) var(--s-2);
+  padding-block: 0;
+  overflow: hidden;
+  border-radius: var(--r-lg);
+  background: var(--glass);
+  backdrop-filter: blur(16px) saturate(1.3);
+  -webkit-backdrop-filter: blur(16px) saturate(1.3);
+  border: 1px solid var(--hairline);
+  box-shadow: var(--shadow-md);
+}
+
+/* Title/art region — the tap target that expands the full player */
+.mini-main {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  flex: 1;
+  min-inline-size: 0;
+  align-self: stretch;
+  cursor: pointer;
+  border-radius: var(--r-sm);
+}
+.mini-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+
+/* Inline transport cluster — centred between title (start) and the
+   secondary cluster (speed + sleep + expand, end) on wide screens */
+.mini-controls,
+.mini-secondary {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  flex-shrink: 0;
+}
+.mini-sec-ctl {
+  display: none;
+  align-items: center;
+  gap: 2px;
+  color: var(--text3);
+}
+.mini-sec-ctl .icon { inline-size: 14px; block-size: 14px; }
+@media (min-width: 640px) {
+  body.has-track .mini-player {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+  }
+  .mini-main { min-inline-size: 0; }
+  .mini-controls { justify-self: center; }
+  .mini-secondary { justify-self: end; }
+}
+.mini-tp {
+  min-inline-size: 38px;
+  min-block-size: 44px;
+  color: var(--text2);
+}
+.mini-tp:hover { color: var(--text); background: none; }
+.mini-tp:disabled { opacity: 0.3; cursor: default; }
+.mini-tp:disabled:hover { color: var(--text2); }
+.mini-tp svg { inline-size: 19px; block-size: 19px; }
+
+/* skip buttons: seconds badge centred inside the circular-arrow glyph */
+.mini-skip { position: relative; }
+.mini-skip-n {
+  position: absolute;
+  inset-block-start: 53%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%);
+  font-family: var(--font-mono);
+  font-size: 7.5px;
+  font-weight: 700;
+  color: currentColor;
+  pointer-events: none;
+}
+
+.mini-sel {
+  min-block-size: 34px;
+  margin-inline: var(--s-1);
+  padding-inline: var(--s-2);
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+}
+.mini-sel.active { color: var(--accent); border-color: var(--accent); }
+select.mini-wide2 { display: none; }
+.mini-wide { display: none; }
+@media (min-width: 640px) {
+  .mini-wide { display: inline-flex; }
+}
+@media (min-width: 760px) {
+  .mini-sec-ctl.mini-wide2 { display: inline-flex; }
+  select.mini-wide2 { display: block; }
+}
+
+.mini-expand { color: var(--text3); }
+.mini-expand:hover { color: var(--accent); }
+
+/* slim frequency line across the dock's top edge */
+.mini-signal {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: var(--s-4);
+  block-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2px;
+  opacity: 0.5;
+  pointer-events: none;
+}
+.mini-signal i {
+  flex: 1 1 0;
+  block-size: 3px;
+  border-radius: 999px;
+  background: var(--wave-track);
+  transform-origin: center;
+}
+body.is-playing .mini-signal { opacity: 1; }
+body.is-playing .mini-signal i {
+  background: var(--accent);
+  box-shadow: 0 0 4px var(--accent-glow);
+  animation: signal-shimmer 1.15s var(--ease-smooth) infinite;
+}
+body.is-playing .mini-signal i:nth-child(3n) { animation-duration: 1.4s; animation-delay: -0.25s; }
+body.is-playing .mini-signal i:nth-child(3n+1) { animation-duration: 0.95s; animation-delay: -0.55s; }
+body.is-playing .mini-signal i:nth-child(4n) { animation-delay: -0.85s; }
+
+/* progress hairline pinned to the dock's bottom edge — now a seek slider:
+   the ::before pseudo widens the touch target without changing the look */
+.mini-progress-track {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  block-size: 3px;
+  background: var(--border);
+  cursor: pointer;
+  touch-action: none;
+}
+.mini-progress-track::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  inset-block: -10px 0;
+}
+.mini-progress-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.mini-progress-track:hover .mini-progress { background: var(--accent-2); }
+.mini-progress {
+  block-size: 100%;
+  inline-size: 0;
+  background: var(--accent);
+  border-radius: 0 999px 999px 0;
+  transition: width 0.25s linear;
+}
+[dir="rtl"] .mini-progress { border-radius: 999px 0 0 999px; }
+
+.mini-art {
+  inline-size: 40px;
+  block-size: 40px;
+  border-radius: var(--r-sm);
+  object-fit: cover;
+  background: var(--surface2);
+  flex-shrink: 0;
+}
+.mini-info { flex: 1; min-inline-size: 0; }
+.mini-title {
+  font-size: var(--fs-md);
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mini-feed {
+  font-size: var(--fs-xs);
+  color: var(--text2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-block-start: 1px;
+}
+
+.mini-play {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 42px;
+  block-size: 42px;
+  flex-shrink: 0;
+  margin-inline: var(--s-1);
+  border: 0;
+  border-radius: 50%;
+  background: var(--accent-grad);
+  color: var(--accent-text);
+  cursor: pointer;
+  box-shadow: 0 2px 10px -3px var(--accent);
+  transition: transform var(--d-fast) var(--ease-spring), filter var(--d-fast) var(--ease-smooth);
+}
+.mini-play svg { inline-size: 19px; block-size: 19px; }
+.mini-play:hover { filter: brightness(1.06); }
+.mini-play:active { transform: scale(0.92); }
diff --git a/src/styles/themes.css b/src/styles/themes.css
index 7ae636b..e597f06 100644
--- a/src/styles/themes.css
+++ b/src/styles/themes.css
@@ -1,20 +1,21 @@
-/* Theme overrides — legacy lines 145-163 */
-/* Per-theme translucent chrome + scheme hint (theme class set on <html> by JS) */
+/* Per-theme overrides — theme class set on <html> by src/ui/theme.ts.
+   The 9 core surface/text tokens are injected by JS (THEME_VALUES); this file
+   only re-derives the translucent chrome, shadows and sheen per theme. */
 html.theme-light { color-scheme: light; }
 html.theme-light {
-  --glass: rgba(255,255,255,0.74);
-  --glass-2: rgba(255,255,255,0.55);
-  --hairline: rgba(15,18,28,0.05);
-  --shadow-sm: 0 1px 2px rgba(20,24,40,0.06), 0 2px 10px -6px rgba(20,24,40,0.12);
-  --shadow-md: 0 6px 20px -10px rgba(20,24,40,0.16), 0 2px 6px -4px rgba(20,24,40,0.10);
-  --shadow-lg: 0 30px 70px -24px rgba(30,36,60,0.28);
+  --glass: rgba(255,255,255,0.78);
+  --glass-2: rgba(255,255,255,0.58);
+  --hairline: rgba(30,25,18,0.06);
+  --shadow-sm: 0 1px 2px rgba(40,32,20,0.06), 0 2px 10px -6px rgba(40,32,20,0.12);
+  --shadow-md: 0 6px 20px -10px rgba(40,32,20,0.16), 0 2px 6px -4px rgba(40,32,20,0.10);
+  --shadow-lg: 0 30px 70px -24px rgba(50,40,24,0.28);
   /* On a light canvas the sheen must be a coloured shimmer, not white (which
-     would erase the letters); a faint cool vignette keeps depth without mud. */
+     would erase the letters); a faint warm vignette keeps depth without mud. */
   --wm-shine: var(--accent-dim);
-  --hero-vignette: rgba(24,28,48,0.05);
+  --hero-vignette: rgba(48,38,24,0.05);
 }
 html.theme-oled {
-  --glass: rgba(8,8,11,0.78);
-  --glass-2: rgba(16,16,22,0.6);
-  --hairline: rgba(255,255,255,0.05);
+  --glass: rgba(10,8,7,0.82);
+  --glass-2: rgba(18,15,12,0.6);
+  --hairline: rgba(255,255,255,0.06);
 }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 79cde45..73bf48e 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -1,44 +1,47 @@
-/* Design tokens — extracted verbatim from legacy index.html (lines 54-143) */
+/* Design tokens — "Sinyal" identity (Seseri 4.0 redesign).
+   Warm charcoal surfaces + amber "radio dial glow" accent.
+   The 9 surface/text values below MUST stay equal to THEME_VALUES.dark in
+   src/ui/theme.ts — theme.test.ts guards the parity (anti-FOUC). */
 :root {
   color-scheme: dark;
-  /* ─ Surfaces — deep studio ink, faint cool cast ─ */
-  --bg: #0b0c11;
-  --bg2: #101117;
-  --surface: #15161e;
-  --surface2: #1c1e28;
-  --border: #23252f;
-  --border2: #30333f;
-  /* ─ Signature accent — electric violet (JS-overridable) ─ */
-  --accent: #8b7cf6;
-  --accent-dim: #6c5ce0;
-  --accent-2: #c084fc;
-  --accent-glow: rgba(139,124,246,0.18);
-  --accent-soft: rgba(139,124,246,0.10);
-  --accent-text: #ffffff;
-  --accent-grad: linear-gradient(135deg, #8b7cf6 0%, #6c5ce0 100%);
-  --text: #edeff7;
-  --text2: #9aa0b8;
-  --text3: #5d6280;
-  --green: #43d49a;
-  --red: #f06a6a;
-  --yellow: #e6bb4f;
+  /* ─ Surfaces — warm charcoal, faint ember cast ─ */
+  --bg: #171310;
+  --bg2: #1e1915;
+  --surface: #262019;
+  --surface2: #302822;
+  --border: #3e342a;
+  --border2: #4e4234;
+  /* ─ Signature accent — amber dial glow (JS-overridable) ─ */
+  --accent: #f2a33c;
+  --accent-dim: #bd7f2f;
+  --accent-2: #ffc46b;
+  --accent-glow: rgba(242,163,60,0.18);
+  --accent-soft: rgba(242,163,60,0.10);
+  --accent-text: #1a1510;
+  --accent-grad: linear-gradient(135deg, #f2a33c 0%, #bd7f2f 100%);
+  --text: #f6f1e7;
+  --text2: #cabfae;
+  --text3: #9a8d76;
+  --green: #58b283;
+  --red: #e0584f;
+  --yellow: #d9a83c;
 
   /* ─ Wordmark sheen + hero vignette — overridden per-theme so they never
-       collapse into the background (white sheen vanishes on a white canvas) ─ */
+       collapse into the background ─ */
   --wm-shine: #ffffff;
   --hero-vignette: rgba(0,0,0,0.18);
 
-  /* ─ Translucent chrome (recomputed per-theme by .theme-* below) ─ */
-  --glass: rgba(20,21,29,0.72);
-  --glass-2: rgba(28,30,40,0.6);
-  --hairline: rgba(255,255,255,0.04);
+  /* ─ Translucent chrome (recomputed per-theme by .theme-* overrides) ─ */
+  --glass: rgba(26,22,18,0.78);
+  --glass-2: rgba(36,30,25,0.6);
+  --hairline: rgba(255,255,255,0.05);
 
   /* ─ Typography ─ */
-  --font-display: 'Space Grotesk', 'DM Sans', sans-serif;
-  --font-body: 'DM Sans', system-ui, sans-serif;
-  --font-mono: 'DM Mono', ui-monospace, monospace;
+  --font-display: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
+  --font-body: 'Schibsted Grotesk', system-ui, sans-serif;
+  --font-mono: 'Spline Sans Mono', ui-monospace, monospace;
 
-  /* ─ Motion — easings + a tuned duration scale (route transitions through these) ─ */
+  /* ─ Motion — easings + a tuned duration scale ─ */
   --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
@@ -62,7 +65,7 @@
   --fs-md: 13.5px;
   --fs-lg: 16px;
   --fs-xl: 22px;
-  --fs-2xl: 46px;
+  --fs-2xl: 40px;
 
   /* ─ Radii ─ */
   --r-xs: 8px;
@@ -71,29 +74,34 @@
   --r-lg: 18px;
   --r-xl: 24px;
 
-  /* ─ Elevation — layered, diffuse ramp for depth on ink ─ */
+  /* ─ Elevation — layered, diffuse ramp for depth on charcoal ─ */
   --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 2px 8px -5px rgba(0,0,0,0.45);
   --shadow-md: 0 2px 6px -3px rgba(0,0,0,0.40), 0 8px 24px -10px rgba(0,0,0,0.55);
   --shadow-lg: 0 8px 24px -12px rgba(0,0,0,0.50), 0 30px 70px -24px rgba(0,0,0,0.65);
 
-  /* ─ Waveform scrubber (signature) ─ */
+  /* ─ Waveform / frequency line (signature) ─ */
   --wave-track: var(--border2);
   --wave-played: var(--accent);
 
-  /* ─ Settings (JS-overridable) ─ */
-  --player-font-size: 14px;
-  --list-row-height: 56px;
+  /* ─ Settings (JS-overridable — settings view writes these) ─ */
+  --player-font-size: 13px;
+  --list-row-height: 54px;
 
   /* ─ Layout ─ */
-  --header-h: 66px;
+  --header-h: 64px;
   --status-h: 30px;
-  --sortbar-h: 40px;
+  --sortbar-h: 44px;
+  --nav-w: 232px;      /* desktop sidebar width */
+  --tabbar-h: 60px;    /* mobile bottom tab bar */
+  --mini-h: 64px;      /* mini-player dock */
 
   /* ─ Stacking order — one scale for the layered UI (low → high). Local
        stacking inside a single component (0/1/2/3) stays literal. ─ */
   --z-header: 5;
   --z-banner: 10;
   --z-mini: 60;
+  --z-nav: 70;
+  --z-sheet: 90;
   --z-panel: 101;
   --z-toast: 300;
 }
diff --git a/src/styles/views/home.css b/src/styles/views/home.css
new file mode 100644
index 0000000..ce4ae53
--- /dev/null
+++ b/src/styles/views/home.css
@@ -0,0 +1,115 @@
+/* Home view — owned by WP-A. Compose controls.css primitives (.row, .search-hint,
+   .empty-state); tokens only, logical properties only. */
+
+/* ── Compact brand header (mobile-first) ───────────────────────────── */
+.home-brand {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-3);
+  margin-block-end: var(--s-5);
+}
+.home-brand-id {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  min-width: 0;
+}
+.home-brand-mark {
+  display: inline-flex;
+  inline-size: 42px;
+  block-size: 42px;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+.home-wordmark {
+  font-family: var(--font-display);
+  font-size: var(--fs-xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  outline: none;
+}
+.home-tagline {
+  font-size: var(--fs-sm);
+  color: var(--text2);
+  margin-block-start: 2px;
+}
+
+/* Desktop (≥900px): the sidebar already carries the brand — keep only the
+   language menu, parked at the header's end. */
+@media (min-width: 900px) {
+  .home-brand { justify-content: flex-end; margin-block-end: var(--s-3); }
+  .home-brand-id { display: none; }
+}
+
+/* ── "Devam Et" — continue-listening rows with a thin progress bar ─── */
+.home-continue-item { margin-block-end: 2px; }
+.home-progress {
+  block-size: 3px;
+  border-radius: 2px;
+  background: var(--border2);
+  margin: 3px var(--s-3) 0;
+  overflow: hidden;
+}
+.home-progress-fill {
+  block-size: 100%;
+  min-inline-size: 3px;
+  background: var(--accent);
+  border-radius: 2px;
+  transition: inline-size var(--d-base) var(--ease-out);
+}
+
+/* ── "Aboneliklerim" — artwork tile grid ───────────────────────────── */
+.home-subs {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: var(--s-3);
+  padding-inline: var(--s-3);
+  margin-block-start: var(--s-2);
+}
+.home-sub {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  padding: var(--s-2);
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  transition: background var(--d-fast) var(--ease-smooth);
+}
+.home-sub:hover { background: var(--surface); }
+.home-sub:focus-visible {
+  background: var(--surface);
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.home-sub-art {
+  inline-size: 100%;
+  aspect-ratio: 1;
+  border-radius: var(--r-xs);
+  object-fit: cover;
+  background: var(--surface2);
+}
+.home-sub-name {
+  font-size: var(--fs-sm);
+  color: var(--text2);
+  line-height: 1.3;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* Very narrow screens: fall back to rows. */
+@media (max-width: 380px) {
+  .home-subs { grid-template-columns: 1fr; gap: var(--s-1); }
+  .home-sub { flex-direction: row; align-items: center; }
+  .home-sub-art {
+    inline-size: 48px;
+    block-size: 48px;
+    aspect-ratio: auto;
+    flex-shrink: 0;
+  }
+  .home-sub-name { -webkit-line-clamp: 1; line-clamp: 1; }
+}
diff --git a/src/styles/views/library.css b/src/styles/views/library.css
new file mode 100644
index 0000000..bacd7eb
--- /dev/null
+++ b/src/styles/views/library.css
@@ -0,0 +1,46 @@
+/* Library view — owned by WP-C. Compose controls.css primitives (.tabs, .tab,
+   .row, .empty-state, .icon-btn); tokens only, logical properties only.
+   Layout (centered column) comes from .view-inner in layout.css. */
+
+/* Rows sit flush in the panel; primitives supply the inner look. */
+#view-library .lib-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* Subscription rows are activatable — give keyboard focus a clear ring. */
+#view-library .row[role='button']:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+/* Downloads: summary + quiet device-usage line above the list. */
+#view-library .lib-dl-summary {
+  font-size: var(--fs-sm);
+  color: var(--text2);
+  padding-inline: var(--s-3);
+  margin-block-end: var(--s-1);
+}
+#view-library .lib-dl-usage {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  color: var(--text3);
+  padding-inline: var(--s-3);
+  margin-block-end: var(--s-3);
+}
+
+/* Downloaded episodes carry no artwork — a calm icon tile stands in. */
+#view-library .lib-dl-row {
+  cursor: default;
+}
+#view-library .lib-dl-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text3);
+}
+#view-library .lib-dl-icon .icon {
+  inline-size: 20px;
+  block-size: 20px;
+}
diff --git a/src/styles/views/now-playing.css b/src/styles/views/now-playing.css
new file mode 100644
index 0000000..6ec722d
--- /dev/null
+++ b/src/styles/views/now-playing.css
@@ -0,0 +1,232 @@
+/* Now Playing sheet contents — owned by WP-E (sheet chrome is in overlays.css).
+   Hero scrubber = the signature frequency line (see signal-line.css).
+   Tokens only, logical properties only. */
+
+.np-inner {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100%;
+  gap: var(--s-4);
+  padding: var(--s-3) var(--s-5) var(--s-6);
+}
+@media (min-width: 900px) {
+  .np-inner { padding: var(--s-4) var(--s-6) var(--s-5); }
+}
+
+/* ─ Top bar: dismiss chevron + feed eyebrow ─ */
+.np-top {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  flex-shrink: 0;
+}
+.np-close svg { inline-size: 24px; block-size: 24px; }
+.np-feed {
+  min-inline-size: 0;
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ─ Player body ─ */
+.np-player {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  gap: var(--s-5);
+}
+.np-controls {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-5);
+}
+
+/* ─ Artwork / embedded video stage ─ */
+.np-stage {
+  position: relative;
+  align-self: center;
+  inline-size: min(72vw, 320px);
+  aspect-ratio: 1;
+  margin-block: var(--s-2);
+}
+.np-art {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  border-radius: var(--r-xl);
+  background: var(--surface2);
+  box-shadow: var(--shadow-lg);
+}
+.yt-frame {
+  position: absolute;
+  inset: 0;
+  display: none;
+  border-radius: var(--r-lg);
+  overflow: hidden;
+  background: #000;
+}
+.yt-frame,
+#ytHost,
+.yt-frame iframe {
+  inline-size: 100%;
+  block-size: 100%;
+}
+.yt-frame iframe { border: 0; display: block; }
+.np-player.yt-mode .np-art { display: none; }
+.np-player.yt-mode .yt-frame { display: block; }
+/* Artless feed (and no embedded video): drop the empty stage entirely. */
+.np-player.no-art:not(.yt-mode) .np-stage { display: none; }
+.np-player.yt-mode .np-stage {
+  inline-size: min(92vw, 560px);
+  aspect-ratio: 16 / 9;
+}
+
+/* ─ Episode title (display face, crossfades on track change) ─ */
+.np-title {
+  font-family: var(--font-display);
+  font-size: var(--fs-xl);
+  font-weight: 600;
+  line-height: 1.22;
+  letter-spacing: -0.02em;
+  text-align: center;
+  color: var(--text);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  transition: opacity 0.15s var(--ease-smooth);
+}
+.np-title.swapping { opacity: 0; }
+
+/* ─ Time row (mono) ─ */
+.np-times {
+  display: flex;
+  justify-content: space-between;
+  margin-block-start: calc(-1 * var(--s-4));
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+  color: var(--text2);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ─ Transport row ─ */
+.np-transport {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-3);
+}
+@media (min-width: 380px) {
+  .np-transport { gap: var(--s-5); }
+}
+.np-tp { color: var(--text2); }
+.np-tp:hover { color: var(--text); }
+.np-tp svg { inline-size: 22px; block-size: 22px; }
+.np-tp:disabled { opacity: 0.3; cursor: default; }
+.np-tp:disabled:hover { background: none; color: var(--text2); }
+
+/* skip buttons: seconds badge centred inside the circular-arrow glyph */
+.np-skip { position: relative; }
+.np-skip-n {
+  position: absolute;
+  inset-block-start: 52%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%);
+  font-family: var(--font-mono);
+  font-size: 8.5px;
+  font-weight: 700;
+  color: currentColor;
+  pointer-events: none;
+}
+
+/* the amber hero: big circular play/pause */
+.np-play {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 68px;
+  block-size: 68px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--accent-grad);
+  color: var(--accent-text);
+  cursor: pointer;
+  box-shadow: 0 6px 20px -6px var(--accent), 0 0 0 6px var(--accent-soft);
+  transition: transform var(--d-fast) var(--ease-spring),
+    box-shadow var(--d-base) var(--ease-out), filter var(--d-fast) var(--ease-smooth);
+}
+.np-play svg { inline-size: 28px; block-size: 28px; }
+.np-play:hover { filter: brightness(1.06); }
+.np-play:active { transform: scale(0.95); }
+.np-player.playing .np-play {
+  box-shadow: 0 8px 26px -4px var(--accent), 0 0 0 9px var(--accent-soft);
+}
+
+/* ─ Secondary row: sleep, speed, queue ─ */
+.np-secondary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--s-3) var(--s-5);
+  margin-block-start: var(--s-1);
+}
+.np-sec-ctl {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1);
+  color: var(--text2);
+}
+.np-sec-ctl svg { inline-size: 16px; block-size: 16px; }
+.np-sec-glyph { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text3); }
+.np-sel { min-block-size: 40px; }
+.np-sel.active { color: var(--accent); border-color: var(--accent); }
+
+.np-queue { position: relative; color: var(--text2); }
+.np-queue:hover { color: var(--text); }
+.np-queue.has-queue { color: var(--accent); }
+.np-queue-badge {
+  position: absolute;
+  inset-block-start: 3px;
+  inset-inline-end: 3px;
+  min-inline-size: 16px;
+  block-size: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: var(--accent-text);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  opacity: 0;
+  transform: scale(0.6);
+  transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-spring);
+}
+.np-queue.has-queue .np-queue-badge { opacity: 1; transform: none; }
+
+/* ─ Desktop: two columns inside the floating panel ─ */
+@media (min-width: 900px) {
+  .np-player {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--s-7);
+  }
+  .np-stage {
+    flex: 0 0 auto;
+    align-self: center;
+    inline-size: min(38%, 300px);
+    margin: 0;
+  }
+  .np-controls { flex: 1; min-inline-size: 0; }
+  .np-title { text-align: start; }
+  .np-transport { justify-content: flex-start; }
+  .np-secondary { justify-content: flex-start; }
+}
diff --git a/src/styles/views/podcast.css b/src/styles/views/podcast.css
new file mode 100644
index 0000000..b0ce085
--- /dev/null
+++ b/src/styles/views/podcast.css
@@ -0,0 +1,358 @@
+/* Podcast detail view (feed header + episode list) — owned by WP-D.
+   Episode rows consume --list-row-height and --player-font-size.
+   Composes controls.css primitives (.icon-btn, .text-input, .empty-state,
+   .skeleton*, .badge); tokens only, logical properties only (RTL-safe).
+
+   Discipline over flourish: this is a reading surface. The one spark of amber
+   is the active row — its equalizer bars and progress underline. Everything
+   else stays in warm charcoal so the boldness budget lives in the player. */
+
+.p-inner {
+  padding-block-start: var(--s-5);
+}
+
+/* ── header ─────────────────────────────────────────────────────── */
+.p-header {
+  display: grid;
+  grid-template-columns: auto auto 1fr auto;
+  align-items: center;
+  gap: var(--s-3);
+  margin-block-end: var(--s-4);
+}
+.p-back {
+  flex-shrink: 0;
+  margin-inline-start: calc(var(--s-2) * -1);
+}
+.p-art {
+  inline-size: 72px;
+  block-size: 72px;
+  border-radius: var(--r);
+  object-fit: cover;
+  background: var(--surface2);
+  box-shadow: var(--shadow-sm);
+  flex-shrink: 0;
+}
+.p-art:not(.has-art) {
+  /* No artwork yet — a calm placeholder tile, no broken-image glyph. */
+  background:
+    radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 60%),
+    var(--surface2);
+}
+.p-meta {
+  min-inline-size: 0;
+}
+.p-title {
+  font-family: var(--font-display);
+  font-size: var(--fs-xl);
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: var(--text);
+  /* Two-line clamp keeps the header height honest for long titles. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.p-title:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: var(--r-xs);
+}
+.p-author {
+  font-size: var(--fs-md);
+  color: var(--text2);
+  margin-block-start: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.p-count {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  color: var(--text3);
+  margin-block-start: var(--s-1);
+  letter-spacing: 0.02em;
+}
+.p-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--s-1);
+  flex-shrink: 0;
+  align-self: start;
+}
+.p-fav.faved {
+  color: var(--accent);
+}
+.p-fav:not(.faved) .icon {
+  /* Outline-star feel: dim until subscribed. */
+  opacity: 0.85;
+}
+
+/* ── status strip ───────────────────────────────────────────────── */
+.p-status {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  min-block-size: var(--status-h);
+  margin-block-end: var(--s-3);
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+  color: var(--text2);
+}
+.dot {
+  inline-size: 8px;
+  block-size: 8px;
+  border-radius: 50%;
+  background: var(--text3);
+  flex-shrink: 0;
+  transition: background var(--d-base) var(--ease-smooth);
+}
+.dot.loading {
+  background: var(--accent);
+  animation: dot-pulse 1s var(--ease-smooth) infinite;
+}
+.dot.ok {
+  background: var(--green);
+}
+.dot.error {
+  background: var(--red);
+}
+@keyframes dot-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+.p-status-text {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── sort / filter bar ──────────────────────────────────────────── */
+.p-listbar {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  min-block-size: var(--sortbar-h);
+  margin-block-end: var(--s-2);
+}
+.p-sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  min-block-size: 40px;
+  padding-inline: var(--s-3);
+  border: 1px solid var(--border2);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+  color: var(--text2);
+  font-family: var(--font-body);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background var(--d-fast) var(--ease-smooth), color var(--d-fast) var(--ease-smooth);
+}
+.p-sort:hover {
+  background: var(--surface2);
+  color: var(--text);
+}
+.p-sort-info {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  color: var(--text3);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.p-filter {
+  flex: 1;
+  min-inline-size: 0;
+  min-block-size: 40px;
+}
+
+/* ── episode list ───────────────────────────────────────────────── */
+.ep-list {
+  display: flex;
+  flex-direction: column;
+}
+.ep-item {
+  position: relative;
+  display: grid;
+  grid-template-columns: 32px 1fr auto;
+  align-items: center;
+  gap: var(--s-3);
+  min-block-size: var(--list-row-height);
+  padding-block: var(--s-2);
+  padding-inline: var(--s-2);
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  transition: background var(--d-fast) var(--ease-smooth);
+}
+.ep-item:hover,
+.ep-item:focus-visible {
+  background: var(--surface);
+  outline: none;
+}
+.ep-item:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--border2);
+}
+.ep-item.active {
+  background: var(--accent-soft);
+}
+.ep-item.listened {
+  opacity: 0.62;
+}
+.ep-item.listened:hover {
+  opacity: 1;
+}
+
+/* row number / equalizer */
+.ep-num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 32px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+  color: var(--text3);
+}
+.ep-eq {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  block-size: 15px;
+}
+.ep-eq i {
+  inline-size: 3px;
+  block-size: 100%;
+  border-radius: 1px;
+  background: var(--accent);
+  transform-origin: bottom;
+  animation: eq-bounce 0.9s var(--ease-smooth) infinite;
+}
+.ep-eq i:nth-child(2) { animation-delay: 0.25s; }
+.ep-eq i:nth-child(3) { animation-delay: 0.5s; }
+/* Bars freeze when playback is paused (mirrors the player frequency line). */
+body:not(.is-playing) .ep-eq i {
+  animation-play-state: paused;
+  block-size: 40%;
+}
+@keyframes eq-bounce {
+  0%, 100% { transform: scaleY(0.35); }
+  50% { transform: scaleY(1); }
+}
+
+.ep-info {
+  min-inline-size: 0;
+}
+.ep-name {
+  font-size: var(--player-font-size);
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ep-item.active .ep-name {
+  color: var(--accent-2);
+  font-weight: 600;
+}
+.ep-date-dur {
+  display: flex;
+  align-items: center;
+  gap: var(--s-1);
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  color: var(--text3);
+  margin-block-start: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ep-saved-badge {
+  font-family: var(--font-body);
+}
+.ep-done-badge {
+  padding-inline: 6px;
+}
+
+/* row actions */
+.ep-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--s-1);
+  flex-shrink: 0;
+}
+.ep-act {
+  min-inline-size: 40px;
+  min-block-size: 40px;
+  color: var(--text3);
+}
+.ep-act:hover {
+  color: var(--text);
+}
+.ep-q-btn.queued {
+  color: var(--accent);
+}
+.ep-q-pos {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 20px;
+  block-size: 20px;
+  padding-inline: 4px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: var(--accent-text);
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  font-weight: 700;
+}
+.ep-dl-btn.done {
+  color: var(--green);
+  font-size: var(--fs-md);
+}
+
+/* thin progress underline for partially-played rows */
+.ep-progress {
+  position: absolute;
+  inset-inline: var(--s-2);
+  inset-block-end: 3px;
+  block-size: 2px;
+  border-radius: 2px;
+  background: var(--border);
+  overflow: hidden;
+}
+.ep-progress i {
+  display: block;
+  block-size: 100%;
+  border-radius: 2px;
+  background: var(--accent);
+}
+
+/* ── desktop ────────────────────────────────────────────────────── */
+@media (min-width: 900px) {
+  .p-inner {
+    max-width: 860px;
+    padding-block-start: var(--s-6);
+  }
+  .p-art {
+    inline-size: 96px;
+    block-size: 96px;
+    border-radius: var(--r-lg);
+  }
+  .p-title {
+    font-size: var(--fs-2xl);
+    letter-spacing: -0.03em;
+  }
+}
+
+/* Respect reduced-motion for the dial pulse + equalizer. */
+@media (prefers-reduced-motion: reduce) {
+  .dot.loading,
+  .ep-eq i {
+    animation: none;
+  }
+}
diff --git a/src/styles/views/queue.css b/src/styles/views/queue.css
new file mode 100644
index 0000000..76182fb
--- /dev/null
+++ b/src/styles/views/queue.css
@@ -0,0 +1,55 @@
+/* Queue view — owned by WP-F. Compose controls.css primitives; tokens only,
+   logical properties only. */
+
+.queue-inner {
+  max-width: 560px;
+}
+
+.queue-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1);
+}
+
+.queue-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.queue-pos {
+  flex-shrink: 0;
+  min-inline-size: 1.5em;
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+  color: var(--text3);
+  text-align: end;
+}
+
+.queue-name {
+  flex: 1;
+  min-inline-size: 0;
+  font-size: var(--player-font-size);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Move/remove controls: compact icon-btn variant, still 44px tall targets */
+.queue-row .icon-btn {
+  min-inline-size: 40px;
+  block-size: 40px;
+}
+.queue-row .icon-btn:last-child:hover { color: var(--red); }
+
+.queue-foot {
+  display: flex;
+  justify-content: center;
+  margin-block-start: var(--s-5);
+}
+.queue-clear[hidden] { display: none; }
diff --git a/src/styles/views/search.css b/src/styles/views/search.css
new file mode 100644
index 0000000..5cfd340
--- /dev/null
+++ b/src/styles/views/search.css
@@ -0,0 +1,57 @@
+/* Search view — owned by WP-B. Compose controls.css primitives (.row, .row-art,
+   .row-info, .row-name, .row-sub, .row-meta, .search-hint, .empty-state);
+   tokens only, logical properties only.
+
+   This view is the app's front door: a generous, confident search field under a
+   display-font headline, results rendered as calm rows below. */
+
+.search-inner {
+  padding-block-start: var(--s-7);
+}
+
+/* Front-door headline — larger and more confident than the standard view title. */
+.search-title {
+  font-size: var(--fs-2xl);
+  line-height: 1.05;
+  margin-block-end: var(--s-5);
+}
+
+/* Prominent search row: input grows to fill, amber button holds its size. */
+.search-row {
+  display: flex;
+  align-items: stretch;
+  gap: var(--s-2);
+  margin-block-end: var(--s-3);
+}
+.search-input {
+  flex: 1;
+  min-width: 0;
+  min-height: 52px;
+  font-size: var(--fs-lg);
+}
+.search-btn {
+  flex-shrink: 0;
+  min-height: 52px;
+  padding-inline: var(--s-5);
+  white-space: nowrap;
+}
+
+/* Results sit directly under the search row; the primitives carry the styling. */
+.results-list {
+  margin-block-start: var(--s-3);
+}
+/* First section label needs no extra top gap under the search row. */
+.results-list > div:first-child > .search-hint:first-child {
+  margin-block-start: var(--s-2);
+}
+
+/* Desktop: a slightly wider, airier column. */
+@media (min-width: 900px) {
+  .search-inner {
+    max-width: 820px;
+    padding-block-start: var(--s-8);
+  }
+  .search-title {
+    margin-block-end: var(--s-6);
+  }
+}
diff --git a/src/styles/views/settings.css b/src/styles/views/settings.css
new file mode 100644
index 0000000..852313a
--- /dev/null
+++ b/src/styles/views/settings.css
@@ -0,0 +1,92 @@
+/* Settings view — owned by WP-F. Ported .s-row/.s-label/.s-select/.s-toggle
+   markup keeps working via controls.css; view-specific layout here.
+   Tokens only, logical properties only. */
+
+.settings-inner {
+  max-width: 640px;
+}
+
+.s-section {
+  margin-block-end: var(--s-6);
+}
+.s-section:last-child {
+  margin-block-end: 0;
+}
+
+/* Small-caps section label, echoing controls.css .search-hint */
+.s-section-title {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text3);
+  margin-block-end: var(--s-2);
+  padding-block-end: var(--s-2);
+  border-block-end: 1px solid var(--border);
+}
+
+/* Setting row: label block on the start, control on the end */
+.s-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-4);
+  min-block-size: 44px;
+  padding-block: var(--s-1);
+}
+.s-label {
+  font-size: var(--player-font-size);
+  color: var(--text);
+}
+.s-sublabel {
+  font-size: var(--fs-sm);
+  color: var(--text3);
+  margin-block-start: 2px;
+}
+.s-row .s-select {
+  flex-shrink: 0;
+}
+
+/* Accent swatches */
+.s-color-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s-3);
+  padding-block: var(--s-2) var(--s-4);
+}
+.s-color-swatch {
+  inline-size: 28px;
+  block-size: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: transform var(--d-fast) var(--ease-smooth), box-shadow var(--d-fast) var(--ease-smooth);
+}
+.s-color-swatch:hover {
+  transform: scale(1.08);
+}
+.s-color-swatch:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+.s-color-swatch.active {
+  border-color: var(--bg);
+  box-shadow: 0 0 0 2px var(--accent);
+}
+
+/* Data section: buttons stacked, danger group last */
+.s-data-btns {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  margin-block-start: var(--s-3);
+}
+.s-data-btns .s-btn {
+  justify-content: flex-start;
+}
+.s-data-btns .s-btn.danger {
+  margin-block-start: 0;
+}
+.s-data-btns .s-btn.danger:first-of-type {
+  margin-block-start: var(--s-3);
+}
diff --git a/src/ui/data/continue-listening.test.ts b/src/ui/data/continue-listening.test.ts
new file mode 100644
index 0000000..2f75d50
--- /dev/null
+++ b/src/ui/data/continue-listening.test.ts
@@ -0,0 +1,175 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { CachedFeed } from '../../storage/db';
+import type { Episode, FeedMeta, FeedRequest } from '../../feeds/types';
+
+/**
+ * continueListening() is a READ-ONLY aggregator: it may only read
+ * subscriptions, progress, the last-feed pointer and the idb feed cache, and
+ * must never write. All four storage modules are mocked with in-memory,
+ * inspectable state so we can drive every branch and prove zero writes.
+ */
+
+// Hoisted, controllable state shared by the mock factories below.
+const state = vi.hoisted(() => ({
+  subs: [] as FeedMeta[],
+  /** Value returned for local.get('pp_last_feed', …). */
+  lastFeed: null as FeedRequest | null,
+  /** feedId → last-played episodeId */
+  lastPlayed: new Map<string, string>(),
+  /** episodeId → saved seconds */
+  progress: new Map<string, number>(),
+  /** feedId → CachedFeed */
+  cached: new Map<string, CachedFeed>(),
+  /** every attempted write, by name — must stay empty */
+  writes: [] as string[],
+}));
+
+vi.mock('../../storage/subscriptions', () => ({
+  subscriptions: () => state.subs,
+}));
+
+vi.mock('../../storage/progress', () => ({
+  getLastPlayed: vi.fn((feedId: string) => state.lastPlayed.get(feedId) ?? null),
+  getProgress: vi.fn((id: string) => state.progress.get(id) ?? 0),
+}));
+
+vi.mock('../../storage/local', () => ({
+  local: {
+    get: vi.fn((key: string, fallback: unknown) =>
+      key === 'pp_last_feed' ? state.lastFeed : fallback,
+    ),
+    rawGet: vi.fn(() => null),
+    set: vi.fn(() => {
+      state.writes.push('local.set');
+    }),
+    rawSet: vi.fn(() => {
+      state.writes.push('local.rawSet');
+    }),
+    remove: vi.fn(() => {
+      state.writes.push('local.remove');
+    }),
+    clear: vi.fn(() => {
+      state.writes.push('local.clear');
+    }),
+  },
+}));
+
+vi.mock('../../storage/db', () => ({
+  getCachedFeed: vi.fn(async (id: string) => state.cached.get(id)),
+  putCachedFeed: vi.fn(async () => {
+    state.writes.push('db.putCachedFeed');
+  }),
+}));
+
+import { continueListening } from './continue-listening';
+import { local } from '../../storage/local';
+import { putCachedFeed } from '../../storage/db';
+
+// ── builders ─────────────────────────────────────────────────────────
+function ep(trackId: string, ms = 100_000): Episode {
+  return { trackId, trackName: 'Ep ' + trackId, releaseDate: '', episodeUrl: '', trackTimeMillis: ms };
+}
+function meta(id: string): FeedMeta {
+  return { id, name: 'Feed ' + id, artist: 'Artist ' + id, art: '' };
+}
+/** Register a cached iTunes feed and its last-played + progress in one shot. */
+function seedFeed(
+  id: string,
+  opts: { episodes?: Episode[]; lastPlayed?: string; progressSec?: number } = {},
+): void {
+  const episodes = opts.episodes ?? [ep('e' + id)];
+  state.cached.set(id, { id, feed: { meta: meta(id), episodes, limited: false }, fetchedAt: 0 });
+  if (opts.lastPlayed) state.lastPlayed.set(id, opts.lastPlayed);
+  if (opts.progressSec != null) state.progress.set(opts.lastPlayed ?? 'e' + id, opts.progressSec);
+}
+
+beforeEach(() => {
+  state.subs = [];
+  state.lastFeed = null;
+  state.lastPlayed.clear();
+  state.progress.clear();
+  state.cached.clear();
+  state.writes = [];
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  // Nothing in this module is allowed to persist state.
+  expect(state.writes).toEqual([]);
+});
+
+describe('continueListening — inclusion rules', () => {
+  it('includes only cached feeds that have a last-played episode with progress > 5s', async () => {
+    // Included: cached, last-played, 50s of 100s.
+    seedFeed('100', { lastPlayed: 'e100', progressSec: 50 });
+    // Skipped: progress at the 5s floor (positionSec <= 5 is not resumable).
+    seedFeed('200', { lastPlayed: 'e200', progressSec: 5 });
+    // Skipped: has progress but its feed was never cached.
+    state.lastPlayed.set('300', 'e300');
+    state.progress.set('e300', 60);
+    // Skipped: cached but no saved last-played pointer.
+    seedFeed('400');
+    state.subs = [meta('100'), meta('200'), meta('300'), meta('400')];
+
+    const out = await continueListening();
+
+    expect(out).toHaveLength(1);
+    const item = out[0]!;
+    expect(item.feed.id).toBe('100');
+    expect(item.episode.trackId).toBe('e100');
+    expect(item.positionSec).toBe(50);
+    expect(item.percent).toBeCloseTo(50);
+  });
+
+  it('skips finished episodes (>= 96%) but keeps partially-heard ones', async () => {
+    seedFeed('100', { lastPlayed: 'e100', progressSec: 98 }); // 98% → finished → skip
+    seedFeed('200', { lastPlayed: 'e200', progressSec: 40 }); // 40% → keep
+    state.subs = [meta('100'), meta('200')];
+
+    const out = await continueListening();
+
+    expect(out).toHaveLength(1);
+    expect(out[0]!.feed.id).toBe('200');
+  });
+});
+
+describe('continueListening — ordering & dedupe', () => {
+  it('puts the pp_last_feed item first and never duplicates it with its subscription', async () => {
+    seedFeed('100', { lastPlayed: 'e100', progressSec: 30 });
+    seedFeed('200', { lastPlayed: 'e200', progressSec: 40 });
+    state.subs = [meta('100'), meta('200')];
+    // Most-recent pointer aims at the *second* subscription.
+    state.lastFeed = { kind: 'itunes', id: '200' };
+
+    const out = await continueListening();
+
+    expect(out.map((i) => i.feed.id)).toEqual(['200', '100']); // 200 hoisted, not repeated
+  });
+});
+
+describe('continueListening — limit', () => {
+  it('caps the result at the requested limit', async () => {
+    for (const id of ['100', '200', '300', '400']) {
+      seedFeed(id, { lastPlayed: 'e' + id, progressSec: 42 });
+    }
+    state.subs = ['100', '200', '300', '400'].map(meta);
+
+    expect(await continueListening(2)).toHaveLength(2);
+    expect(await continueListening()).toHaveLength(4); // default limit (6) not reached
+  });
+});
+
+describe('continueListening — no writes', () => {
+  it('performs no persistence for any storage layer', async () => {
+    seedFeed('100', { lastPlayed: 'e100', progressSec: 30 });
+    state.subs = [meta('100')];
+    state.lastFeed = { kind: 'itunes', id: '100' };
+
+    await continueListening();
+
+    // The afterEach guard also checks state.writes; assert on the mocks directly.
+    expect(vi.mocked(local.set)).not.toHaveBeenCalled();
+    expect(vi.mocked(local.rawSet)).not.toHaveBeenCalled();
+    expect(vi.mocked(putCachedFeed)).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/ui/data/continue-listening.ts b/src/ui/data/continue-listening.ts
new file mode 100644
index 0000000..b986b01
--- /dev/null
+++ b/src/ui/data/continue-listening.ts
@@ -0,0 +1,124 @@
+/**
+ * Read-only aggregators for the Home view. ZERO writes — this module may only
+ * read subscriptions, progress, the last-feed pointer and the IndexedDB feed
+ * cache. WP-A implements `continueListening()`; the shape below is frozen.
+ */
+
+import type { Episode, FeedMeta, FeedRequest, Subscription } from '../../feeds/types';
+import { ytFromToken } from '../../feeds/input-parse';
+import { subscriptions } from '../../storage/subscriptions';
+import { getLastPlayed, getProgress } from '../../storage/progress';
+import { getCachedFeed } from '../../storage/db';
+import { local } from '../../storage/local';
+
+/** Convert a stored subscription id into a feed request (legacy id scheme). */
+export function requestFromSubscription(sub: Subscription): FeedRequest | null {
+  const s = String(sub.id);
+  if (s.startsWith('yt:')) {
+    const p = s.split(':'); // yt:<type>:<id>
+    const type = p[1];
+    const id = p.slice(2).join(':');
+    if ((type === 'playlist' || type === 'channel' || type === 'video') && id) {
+      return { kind: 'yt', info: { type, id } };
+    }
+    // Older entries may carry the token instead
+    const ref = sub.yt ? ytFromToken(sub.yt) : null;
+    return ref ? { kind: 'yt', info: ref } : null;
+  }
+  if (s.startsWith('rss:')) return { kind: 'rss', url: s.slice(4) };
+  return { kind: 'itunes', id: s };
+}
+
+/** One "continue listening" row: an episode with saved progress + its feed. */
+export interface ContinueItem {
+  feed: FeedMeta;
+  req: FeedRequest;
+  episode: Episode;
+  /** Saved position in seconds. */
+  positionSec: number;
+  /** 0–100 (0 when the duration is unknown). */
+  percent: number;
+}
+
+/**
+ * Collect resumable episodes across subscribed feeds using ONLY cached data:
+ * for each subscription → getLastPlayed(feedId) → getProgress(episodeId) →
+ * episode metadata from getCachedFeed(feedId). Feeds never cached are skipped
+ * (no network). Sorted most-recently-meaningful first, capped at `limit`.
+ *
+ * WP-0 stub — WP-A lands the real implementation.
+ */
+export async function continueListening(limit = 6): Promise<ContinueItem[]> {
+  const out: ContinueItem[] = [];
+  const seen = new Set<string>();
+
+  const collect = (item: ContinueItem | null, feedId: string): void => {
+    if (item && !seen.has(feedId)) {
+      seen.add(feedId);
+      out.push(item);
+    }
+  };
+
+  // Most-recent feed pointer first — may point at a feed that isn't subscribed.
+  const lastReq = local.get<FeedRequest | null>('pp_last_feed', null);
+  if (lastReq) {
+    const feedId = feedIdFromRequest(lastReq);
+    if (feedId) collect(await buildItem(feedId, lastReq), feedId);
+  }
+
+  // Then every subscribed feed with a resumable last-played episode.
+  const subs = subscriptions();
+  const built = await Promise.all(
+    subs.map((sub) => {
+      const req = requestFromSubscription(sub);
+      return req ? buildItem(String(sub.id), req, sub) : Promise.resolve(null);
+    }),
+  );
+  subs.forEach((sub, i) => collect(built[i] ?? null, String(sub.id)));
+
+  return out.slice(0, limit);
+}
+
+/** Cache key / FeedMeta id for a request: `<id>` | `rss:<url>` | `yt:<type>:<id>`. */
+function feedIdFromRequest(req: FeedRequest): string {
+  switch (req.kind) {
+    case 'itunes':
+      return req.id;
+    case 'rss':
+      return 'rss:' + req.url;
+    case 'yt':
+      return `yt:${req.info.type}:${req.info.id}`;
+  }
+}
+
+/**
+ * Resolve one resumable episode from cached data alone. Returns null when the
+ * feed was never cached, has no saved last-played position (> 5 s), the episode
+ * is gone from the cache, or the item is effectively finished (>= 96%).
+ */
+async function buildItem(
+  feedId: string,
+  req: FeedRequest,
+  fallbackMeta?: FeedMeta,
+): Promise<ContinueItem | null> {
+  const episodeId = getLastPlayed(feedId);
+  if (!episodeId) return null;
+  const positionSec = getProgress(episodeId);
+  if (positionSec <= 5) return null;
+
+  const cached = await getCachedFeed(feedId);
+  if (!cached) return null;
+  const episode = cached.feed.episodes.find((e) => String(e.trackId) === String(episodeId));
+  if (!episode) return null;
+
+  const percent =
+    episode.trackTimeMillis > 0
+      ? Math.min(100, ((positionSec * 1000) / episode.trackTimeMillis) * 100)
+      : 0;
+  if (percent >= 96) return null;
+
+  const feed = cached.feed.meta ?? fallbackMeta;
+  if (!feed) return null;
+
+  return { feed, req, episode, positionSec, percent };
+}
diff --git a/src/ui/flags.ts b/src/ui/flags.ts
new file mode 100644
index 0000000..0cb2574
--- /dev/null
+++ b/src/ui/flags.ts
@@ -0,0 +1,66 @@
+/**
+ * Inline SVG flags for the language menu — Windows renders no emoji flags, so
+ * these are drawn by hand (24×16, simplified but recognizable at 20px).
+ * Self-contained by design: the CSP allows no external image hosts to fail.
+ * Constant markup, no interpolated data — innerHTML is safe here.
+ */
+
+import type { LangCode } from '../i18n/types';
+
+const wrap = (body: string): string =>
+  `<svg class="flag" viewBox="0 0 24 16" aria-hidden="true" focusable="false">${body}</svg>`;
+
+export const FLAGS: Record<LangCode, string> = {
+  tr: wrap(
+    `<rect width="24" height="16" fill="#e30a17"/>` +
+      `<circle cx="10" cy="8" r="4" fill="#fff"/>` +
+      `<circle cx="11" cy="8" r="3.2" fill="#e30a17"/>` +
+      `<polygon fill="#fff" points="15.4,6.3 15.8,7.45 17.02,7.47 16.05,8.21 16.4,9.38 15.4,8.68 14.4,9.38 14.75,8.21 13.78,7.47 15,7.45"/>`,
+  ),
+  en: wrap(
+    `<rect width="24" height="16" fill="#012169"/>` +
+      `<path d="M0,0 24,16 M24,0 0,16" stroke="#fff" stroke-width="3.2"/>` +
+      `<path d="M0,0 24,16 M24,0 0,16" stroke="#C8102E" stroke-width="1.3"/>` +
+      `<path d="M12,0 V16 M0,8 H24" stroke="#fff" stroke-width="5.3"/>` +
+      `<path d="M12,0 V16 M0,8 H24" stroke="#C8102E" stroke-width="3.2"/>`,
+  ),
+  de: wrap(
+    `<rect width="24" height="16" fill="#000"/>` +
+      `<rect y="5.33" width="24" height="5.34" fill="#DD0000"/>` +
+      `<rect y="10.67" width="24" height="5.33" fill="#FFCC00"/>`,
+  ),
+  fr: wrap(
+    `<rect width="8" height="16" fill="#002395"/>` +
+      `<rect x="8" width="8" height="16" fill="#fff"/>` +
+      `<rect x="16" width="8" height="16" fill="#ED2939"/>`,
+  ),
+  es: wrap(
+    `<rect width="24" height="16" fill="#AA151B"/>` +
+      `<rect y="4" width="24" height="8" fill="#F1BF00"/>`,
+  ),
+  ar: wrap(
+    `<rect width="24" height="16" fill="#165d31"/>` +
+      `<rect x="5" y="5" width="14" height="1.7" rx="0.85" fill="#fff" opacity="0.92"/>` +
+      `<rect x="4.5" y="9.6" width="15" height="1.3" rx="0.65" fill="#fff"/>`,
+  ),
+  ja: wrap(
+    `<rect width="24" height="16" fill="#fff"/>` + `<circle cx="12" cy="8" r="4.8" fill="#BC002D"/>`,
+  ),
+  ru: wrap(
+    `<rect width="24" height="16" fill="#fff"/>` +
+      `<rect y="5.33" width="24" height="5.34" fill="#0039A6"/>` +
+      `<rect y="10.67" width="24" height="5.33" fill="#D52B1E"/>`,
+  ),
+};
+
+/** Native (endonym) display names, shown next to the flags. */
+export const NATIVE_NAMES: Record<LangCode, string> = {
+  tr: 'Türkçe',
+  en: 'English',
+  de: 'Deutsch',
+  fr: 'Français',
+  es: 'Español',
+  ar: 'العربية',
+  ja: '日本語',
+  ru: 'Русский',
+};
diff --git a/src/ui/icons.ts b/src/ui/icons.ts
new file mode 100644
index 0000000..7e2c678
--- /dev/null
+++ b/src/ui/icons.ts
@@ -0,0 +1,41 @@
+/**
+ * Inline SVG sprite — the app's single icon set, referenced via
+ * `<use href="#ic-…">` (see `icon()` in h.ts). Feather-style 24×24 strokes.
+ * Constant markup, no interpolated data — innerHTML is safe here.
+ */
+
+export const ICON_SPRITE = `
+<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
+  <symbol id="ic-home" viewBox="0 0 24 24"><path d="M3 9.5 12 3l9 6.5V20a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 20z"/><polyline points="9 21.5 9 13 15 13 15 21.5"/></symbol>
+  <symbol id="ic-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7.5"/><line x1="21" y1="21" x2="16.4" y2="16.4"/></symbol>
+  <symbol id="ic-library" viewBox="0 0 24 24"><path d="M2 3.5h6a4 4 0 0 1 4 4V21a3 3 0 0 0-3-3H2z"/><path d="M22 3.5h-6a4 4 0 0 0-4 4V21a3 3 0 0 1 3-3h7z"/></symbol>
+  <symbol id="ic-star" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></symbol>
+  <symbol id="ic-share" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></symbol>
+  <symbol id="ic-settings" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></symbol>
+  <symbol id="ic-play" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4"/></symbol>
+  <symbol id="ic-pause" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></symbol>
+  <symbol id="ic-prev" viewBox="0 0 24 24"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></symbol>
+  <symbol id="ic-next" viewBox="0 0 24 24"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></symbol>
+  <symbol id="ic-rewind" viewBox="0 0 24 24"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></symbol>
+  <symbol id="ic-forward" viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></symbol>
+  <symbol id="ic-download" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></symbol>
+  <symbol id="ic-sort" viewBox="0 0 24 24"><polyline points="21 16 17 20 13 16"/><line x1="17" y1="20" x2="17" y2="4"/><polyline points="3 8 7 4 11 8"/><line x1="7" y1="4" x2="7" y2="20"/></symbol>
+  <symbol id="ic-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></symbol>
+  <symbol id="ic-arrow-right" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></symbol>
+  <symbol id="ic-back" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></symbol>
+  <symbol id="ic-chevron-right" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></symbol>
+  <symbol id="ic-chevron-down" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></symbol>
+  <symbol id="ic-queue" viewBox="0 0 24 24"><line x1="3" y1="6" x2="13" y2="6"/><line x1="3" y1="12" x2="13" y2="12"/><line x1="3" y1="18" x2="9" y2="18"/><line x1="18" y1="9" x2="18" y2="15"/><line x1="15" y1="12" x2="21" y2="12"/></symbol>
+  <symbol id="ic-up" viewBox="0 0 24 24"><polyline points="6 14 12 8 18 14"/></symbol>
+  <symbol id="ic-down" viewBox="0 0 24 24"><polyline points="6 10 12 16 18 10"/></symbol>
+  <symbol id="ic-x" viewBox="0 0 24 24"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></symbol>
+  <symbol id="ic-check" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></symbol>
+  <symbol id="ic-trash" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></symbol>
+  <symbol id="ic-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15.5 14"/></symbol>
+</svg>`;
+
+/** The Seseri brand mark — a five-bar "sinyal" crest (frequency-line motif).
+ *  Bars inherit currentColor; .sig-mark CSS in base.css sizes and gently
+ *  animates them (static under prefers-reduced-motion). */
+export const BRAND_MARK = `
+<span class="sig-mark" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span>`;
diff --git a/src/ui/lang-menu.ts b/src/ui/lang-menu.ts
new file mode 100644
index 0000000..c25142e
--- /dev/null
+++ b/src/ui/lang-menu.ts
@@ -0,0 +1,121 @@
+/**
+ * Language menu — a custom accessible dropdown (native <option> can't render
+ * images, and Windows draws no emoji flags, so a real listbox with inline SVG
+ * flags is the only way to show them). Used on Home (compact: flag + code)
+ * and in Settings (full: flag + native name).
+ */
+
+import { applyLang, currentLang, t, LANG_CODES } from '../i18n';
+import type { LangCode } from '../i18n/types';
+import { setSetting, settings } from '../state/settings';
+import { FLAGS, NATIVE_NAMES } from './flags';
+import { h, icon } from './h';
+
+export function createLangMenu(opts: { compact?: boolean } = {}): HTMLElement {
+  const compact = opts.compact ?? false;
+
+  const triggerFlag = h('span', { className: 'lang-menu-flag' });
+  const triggerLabel = h('span', { className: 'lang-menu-label' });
+  const trigger = h(
+    'button',
+    {
+      className: 'lang-menu-btn' + (compact ? ' compact' : ''),
+      type: 'button',
+      attrs: { 'aria-haspopup': 'listbox', 'aria-expanded': 'false' },
+    },
+    triggerFlag,
+    triggerLabel,
+    icon('ic-chevron-down', 'lang-menu-chev'),
+  );
+  const pop = h('div', {
+    className: 'lang-menu-pop',
+    role: 'listbox',
+    attrs: { hidden: '', tabindex: '-1' },
+  });
+  const root = h('div', { className: 'lang-menu' }, trigger, pop);
+
+  function syncTrigger(): void {
+    const code = currentLang();
+    triggerFlag.innerHTML = FLAGS[code]; // constant markup, no data
+    triggerLabel.textContent = compact ? code.toUpperCase() : NATIVE_NAMES[code];
+    trigger.setAttribute('aria-label', t('lang_select_label') + ': ' + NATIVE_NAMES[code]);
+  }
+
+  function optionRow(code: LangCode): HTMLElement {
+    const selected = code === currentLang();
+    const flag = h('span', { className: 'lang-menu-flag' });
+    flag.innerHTML = FLAGS[code]; // constant markup, no data
+    const row = h(
+      'button',
+      {
+        className: 'lang-menu-opt' + (selected ? ' selected' : ''),
+        type: 'button',
+        role: 'option',
+        attrs: { 'aria-selected': String(selected), 'data-lang': code },
+      },
+      flag,
+      h('span', { className: 'lang-menu-name' }, NATIVE_NAMES[code]),
+      selected ? icon('ic-check', 'lang-menu-check') : null,
+    );
+    row.addEventListener('click', () => {
+      setSetting('lang', code);
+      applyLang(code);
+      close();
+      trigger.focus();
+    });
+    return row;
+  }
+
+  function isOpen(): boolean {
+    return !pop.hasAttribute('hidden');
+  }
+  function open(): void {
+    if (isOpen()) return;
+    pop.replaceChildren(...LANG_CODES.map(optionRow));
+    pop.removeAttribute('hidden');
+    trigger.setAttribute('aria-expanded', 'true');
+    pop.querySelector<HTMLElement>('.lang-menu-opt.selected')?.focus();
+  }
+  function close(): void {
+    if (!isOpen()) return;
+    pop.setAttribute('hidden', '');
+    trigger.setAttribute('aria-expanded', 'false');
+  }
+
+  trigger.addEventListener('click', () => (isOpen() ? close() : open()));
+  pop.addEventListener('keydown', (e) => {
+    const opts_ = [...pop.querySelectorAll<HTMLElement>('.lang-menu-opt')];
+    const i = opts_.indexOf(document.activeElement as HTMLElement);
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      close();
+      trigger.focus();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      opts_[Math.min(i + 1, opts_.length - 1)]?.focus();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      opts_[Math.max(i - 1, 0)]?.focus();
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      opts_[0]?.focus();
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      opts_[opts_.length - 1]?.focus();
+    }
+  });
+  // Light dismiss: click outside closes.
+  document.addEventListener('click', (e) => {
+    if (isOpen() && !root.contains(e.target as Node)) close();
+  });
+
+  // Language may change from anywhere (another menu instance, settings sync).
+  currentLang.subscribe(() => {
+    syncTrigger();
+    if (isOpen()) pop.replaceChildren(...LANG_CODES.map(optionRow));
+  });
+  settings.subscribe(syncTrigger);
+  syncTrigger();
+
+  return root;
+}
diff --git a/src/ui/mini-player.ts b/src/ui/mini-player.ts
index ef93605..63d9cdd 100644
--- a/src/ui/mini-player.ts
+++ b/src/ui/mini-player.ts
@@ -1,25 +1,76 @@
-import { t } from '../i18n';
+import { currentLang, t } from '../i18n';
+import { fmtTime } from '../lib/format';
 import { httpsOnly } from '../lib/safe';
-import { onEngine, pbPause, pbPaused, pbPlay } from '../player/engine';
+import { onEngine, pbDuration, pbSeekTo, pbSetRate } from '../player/engine';
+import { setSleepTimer } from '../player/sleep-timer';
 import { nowPlaying } from '../state/now-playing';
+import { setSetting, settings } from '../state/settings';
+import type { PlaybackController } from './playback-controller';
 import { must } from './shell';
+import { toast } from './toast';
 
 /**
- * Persistent mini transport, shown on the home screen while something is
- * loaded — leaving a feed no longer stops playback; this is the way back.
+ * Persistent mini transport — a real transport bar, not just a "reopen"
+ * handle: skip back/forward, play/pause, prev/next + speed (wider screens)
+ * and a tap-to-seek progress hairline live right in the dock. The expand
+ * chevron (or the title area) opens the full Now Playing sheet for the
+ * scrubber, sleep timer, queue and the YouTube video frame.
  */
-export function initMiniPlayer(deps: { onOpen: () => void }): void {
-  const bar = must('miniPlayer');
+
+/** Slim frequency-line bars drawn on the mini dock (animated via CSS while
+ * body.is-playing; a clean static line when paused or under reduced motion). */
+const MINI_BARS = 24;
+const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5];
+const SLEEPS = [0, 15, 30, 60];
+
+export function initMiniPlayer(deps: { playback: PlaybackController; onOpen: () => void }): void {
+  const { playback } = deps;
+  const main = must('miniMain');
   const art = must<HTMLImageElement>('miniArt');
   const title = must('miniTitle');
   const feed = must('miniFeed');
-  const btn = must<HTMLButtonElement>('miniPlay');
+  const btnPlay = must<HTMLButtonElement>('miniPlay');
+  const btnPrev = must<HTMLButtonElement>('miniPrev');
+  const btnNext = must<HTMLButtonElement>('miniNext');
+  const btnBack = must<HTMLButtonElement>('miniBack');
+  const btnFwd = must<HTMLButtonElement>('miniFwd');
+  const lblBack = must('miniLblBack');
+  const lblFwd = must('miniLblFwd');
+  const speedSel = must<HTMLSelectElement>('miniSpeed');
+  const sleepSel = must<HTMLSelectElement>('miniSleep');
+  const expand = must<HTMLButtonElement>('miniExpand');
+  const scrub = must('miniScrub');
   const progress = must('miniProgress');
+  const signal = must('miniSignal');
+
+  const bars = document.createDocumentFragment();
+  for (let i = 0; i < MINI_BARS; i++) bars.appendChild(document.createElement('i'));
+  signal.replaceChildren(bars);
+
+  for (const v of SPEEDS) {
+    const o = document.createElement('option');
+    o.value = String(v);
+    o.textContent = v + '×';
+    speedSel.appendChild(o);
+  }
+  function buildSleepOptions(): void {
+    const cur = sleepSel.value || '0';
+    sleepSel.replaceChildren();
+    for (const n of SLEEPS) {
+      const o = document.createElement('option');
+      o.value = String(n);
+      o.textContent = n === 0 ? '—' : n + ' ' + t('dur_m');
+      sleepSel.appendChild(o);
+    }
+    sleepSel.value = cur;
+  }
+  buildSleepOptions();
+  currentLang.subscribe(buildSleepOptions);
 
   function setIcon(playing: boolean): void {
-    const u = btn.querySelector('use');
+    const u = btnPlay.querySelector('use');
     if (u) u.setAttribute('href', playing ? '#ic-pause' : '#ic-play');
-    btn.setAttribute('aria-label', playing ? t('pause') : t('play'));
+    btnPlay.setAttribute('aria-label', playing ? t('pause') : t('play'));
   }
 
   nowPlaying.subscribe((now) => {
@@ -32,28 +83,122 @@ export function initMiniPlayer(deps: { onOpen: () => void }): void {
     art.style.display = src ? '' : 'none';
   });
 
+  // prev/next availability tracks the playback session
+  playback.session.subscribe((s) => {
+    btnPrev.disabled = s.currentIndex <= 0;
+    btnNext.disabled = s.currentIndex < 0 || s.currentIndex >= s.filtered.length - 1;
+  });
+
   onEngine((e) => {
     switch (e.type) {
       case 'play':
+        // Own body.is-playing so the frequency line animates regardless of
+        // which module drove playback (idempotent add/remove — safe to share).
+        document.body.classList.add('is-playing');
         setIcon(true);
         break;
       case 'pause':
       case 'error':
+        document.body.classList.remove('is-playing');
         setIcon(false);
         break;
-      case 'timeupdate':
-        progress.style.width = e.duration ? `${(e.current / e.duration) * 100}%` : '0%';
+      case 'timeupdate': {
+        const pct = e.duration ? (e.current / e.duration) * 100 : 0;
+        progress.style.width = pct + '%';
+        scrub.setAttribute('aria-valuenow', String(Math.round(pct)));
+        if (e.duration) {
+          scrub.setAttribute('aria-valuetext', fmtTime(e.current) + ' / ' + fmtTime(e.duration));
+        }
         break;
+      }
     }
   });
 
-  btn.addEventListener('click', (e) => {
-    e.stopPropagation();
-    if (pbPaused()) pbPlay();
-    else pbPause();
+  // ── transport ────────────────────────────────────────────────────
+  btnPlay.addEventListener('click', () => playback.togglePlay());
+  btnBack.addEventListener('click', () => playback.seekRel(-settings().skipBack));
+  btnFwd.addEventListener('click', () => playback.seekRel(settings().skipForward));
+  btnPrev.addEventListener('click', () => playback.prev());
+  btnNext.addEventListener('click', () => playback.next());
+  speedSel.addEventListener('change', () => {
+    const v = parseFloat(speedSel.value) || 1;
+    setSetting('defaultSpeed', v);
+    pbSetRate(v);
   });
-  bar.addEventListener('click', deps.onOpen);
-  bar.addEventListener('keydown', (e) => {
+  sleepSel.addEventListener('change', () => {
+    const min = parseInt(sleepSel.value) || 0;
+    sleepSel.classList.toggle('active', min > 0);
+    // Mirror into the sheet's select so both surfaces show the same timer
+    // (sleep-timer.ts holds one global timer — last caller wins either way).
+    const sheetSel = document.getElementById('sleepSel') as HTMLSelectElement | null;
+    if (sheetSel) {
+      sheetSel.value = sleepSel.value;
+      sheetSel.classList.toggle('active', min > 0);
+    }
+    if (min > 0) toast(t('sleep_set', min));
+    setSleepTimer(min, () => {
+      sleepSel.value = '0';
+      sleepSel.classList.remove('active');
+      if (sheetSel) {
+        sheetSel.value = '0';
+        sheetSel.classList.remove('active');
+      }
+      toast(t('sleep_done'));
+    });
+  });
+
+  settings.subscribe((S) => {
+    lblBack.textContent = String(S.skipBack);
+    lblFwd.textContent = String(S.skipForward);
+    speedSel.value = String(S.defaultSpeed);
+  });
+  lblBack.textContent = String(settings().skipBack);
+  lblFwd.textContent = String(settings().skipForward);
+  speedSel.value = String(settings().defaultSpeed);
+
+  // ── tap/drag-to-seek on the progress hairline ────────────────────
+  let scrubbing = false;
+  function seekAt(clientX: number): void {
+    const dur = pbDuration();
+    if (!dur) return;
+    const rect = scrub.getBoundingClientRect();
+    let f = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    if (document.documentElement.dir === 'rtl') f = 1 - f;
+    pbSeekTo(f * dur);
+    progress.style.width = f * 100 + '%';
+  }
+  scrub.addEventListener('pointerdown', (e) => {
+    if (!pbDuration()) return;
+    scrubbing = true;
+    try {
+      scrub.setPointerCapture(e.pointerId);
+    } catch {
+      /* unsupported */
+    }
+    seekAt(e.clientX);
+  });
+  scrub.addEventListener('pointermove', (e) => {
+    if (scrubbing) seekAt(e.clientX);
+  });
+  const endScrub = (): void => {
+    scrubbing = false;
+  };
+  scrub.addEventListener('pointerup', endScrub);
+  scrub.addEventListener('pointercancel', endScrub);
+  scrub.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      playback.seekRel(-settings().skipBack);
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      playback.seekRel(settings().skipForward);
+    }
+  });
+
+  // ── expand to the full Now Playing sheet ─────────────────────────
+  expand.addEventListener('click', deps.onOpen);
+  main.addEventListener('click', deps.onOpen);
+  main.addEventListener('keydown', (e) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       deps.onOpen();
diff --git a/src/ui/nav.ts b/src/ui/nav.ts
new file mode 100644
index 0000000..81b2b7a
--- /dev/null
+++ b/src/ui/nav.ts
@@ -0,0 +1,35 @@
+/**
+ * Navigation controller — one DOM for both the mobile tab bar and the desktop
+ * sidebar (CSS switches the layout). Highlights the active destination and
+ * forwards taps to the app's navigation intents.
+ */
+
+import { must } from './shell';
+import { onViewChange, type ViewName } from './views';
+
+export type NavDestination = 'home' | 'search' | 'library' | 'settings';
+
+export function initNav(deps: { go(dest: NavDestination): void }): void {
+  const items: Record<NavDestination, HTMLButtonElement> = {
+    home: must<HTMLButtonElement>('navHome'),
+    search: must<HTMLButtonElement>('navSearch'),
+    library: must<HTMLButtonElement>('navLibrary'),
+    settings: must<HTMLButtonElement>('navSettings'),
+  };
+
+  for (const [dest, btn] of Object.entries(items) as Array<[NavDestination, HTMLButtonElement]>) {
+    btn.addEventListener('click', () => deps.go(dest));
+  }
+
+  function setActive(view: ViewName): void {
+    // The podcast view belongs to no tab; keep the last highlight off.
+    for (const [dest, btn] of Object.entries(items) as Array<[NavDestination, HTMLButtonElement]>) {
+      const active = view === dest;
+      btn.classList.toggle('active', active);
+      if (active) btn.setAttribute('aria-current', 'page');
+      else btn.removeAttribute('aria-current');
+    }
+  }
+
+  onViewChange(setActive);
+}
diff --git a/src/ui/playback-controller.ts b/src/ui/playback-controller.ts
new file mode 100644
index 0000000..7efff7f
--- /dev/null
+++ b/src/ui/playback-controller.ts
@@ -0,0 +1,750 @@
+/**
+ * Playback controller — the single owner of the playback session: feed
+ * loading (stale-while-revalidate), episode selection, source selection
+ * (offline blob → direct URL → YouTube embed fallback), blob-URL lifecycle,
+ * queue/auto-next, progress persistence and Media Session metadata.
+ *
+ * INTERFACE CONTRACT (frozen in WP-0): the types below are consumed by the
+ * podcast, now-playing and queue views. WP-D replaces the stub factory body
+ * with the behavior-preserving port of the legacy screens/player.ts
+ * (`git show ed59840:src/ui/screens/player.ts`) WITHOUT changing these types.
+ */
+
+import type { Episode, FeedMeta, FeedRequest, ResolvedFeed } from '../feeds/types';
+import { signal, type Signal } from '../state/signals';
+import { resolveFeed } from '../feeds/resolve';
+import { t, currentLang } from '../i18n';
+import { httpsOnly } from '../lib/safe';
+import {
+  audio,
+  embedStop,
+  handleEmbedState,
+  isUsingEmbed,
+  onEngine,
+  pbCurrent,
+  pbDuration,
+  pbPause,
+  pbPaused,
+  pbPlay,
+  pbSeekTo,
+  pbSetRate,
+  setUsingEmbed,
+} from '../player/engine';
+import { downloadEpisode } from '../player/downloads';
+import { downloadOffline, offlineAudioUrl, removeDownload } from '../player/offline';
+import { getCachedFeed, putCachedFeed, listDownloads } from '../storage/db';
+import { setMediaMetadata } from '../player/media-session';
+import { getLastPlayed, getProgress, setLastPlayed, setProgress } from '../storage/progress';
+import { nowPlaying } from '../state/now-playing';
+import { clearQueue, dequeueNext, enqueue, queuePosition, removeFromQueue } from '../state/queue';
+import { settings } from '../state/settings';
+import {
+  ensureEmbed,
+  getEmbed,
+  onEmbedError,
+  onEmbedStateChange,
+  ytPlaylistIds,
+} from '../youtube/embed';
+import { ytServiceAudioUrl } from '../youtube/piped';
+import { svcJson } from '../feeds/proxy-chain';
+import { toast } from './toast';
+
+export interface PlaybackStatus {
+  kind: 'idle' | 'loading' | 'ok' | 'error';
+  /** Human-readable, already translated. */
+  message: string;
+}
+
+export interface PlaybackSession {
+  meta: FeedMeta | null;
+  /** The request that produced this session (null before the first feed). */
+  req: FeedRequest | null;
+  /** All episodes, in the current sort order. */
+  episodes: Episode[];
+  /** Episodes after sort + text filter — indexes below point into this. */
+  filtered: Episode[];
+  /** Index of the loaded episode in `filtered`, -1 when none. */
+  currentIndex: number;
+  currentTrackId: string | null;
+  isYT: boolean;
+  /** True when only the latest ~15 items could be listed (YT Atom fallback). */
+  limited: boolean;
+  sortAsc: boolean;
+  filter: string;
+  downloadedIds: ReadonlySet<string>;
+  status: PlaybackStatus;
+}
+
+export interface PlaybackController {
+  /** Reactive session snapshot — views subscribe and re-render from this. */
+  readonly session: Signal<PlaybackSession>;
+  /** Load a feed (SWR: cached copy paints instantly, network refreshes). */
+  openFeed(req: FeedRequest): void;
+  /** Retry the last failed openFeed. */
+  retry(): void;
+  /** Load + (optionally) play an episode by its index in `filtered`. */
+  playEpisode(idx: number, autoplay?: boolean): void;
+  next(): void;
+  prev(): void;
+  togglePlay(): void;
+  seekRel(seconds: number): void;
+  toggleSort(): void;
+  setFilter(q: string): void;
+  /** Add/remove an episode (by `filtered` index) from the up-next queue. */
+  toggleQueued(idx: number): void;
+  /** Download an episode offline, or remove the downloaded copy on 2nd tap. */
+  downloadToggle(idx: number): Promise<void>;
+  /** Title lookup for queue rows (falls back to a localized placeholder). */
+  episodeTitle(id: string): string;
+  /** Stop playback and clear the session. */
+  reset(): void;
+}
+
+export function emptySession(): PlaybackSession {
+  return {
+    meta: null,
+    req: null,
+    episodes: [],
+    filtered: [],
+    currentIndex: -1,
+    currentTrackId: null,
+    isYT: false,
+    limited: false,
+    sortAsc: true,
+    filter: '',
+    downloadedIds: new Set(),
+    status: { kind: 'idle', message: '' },
+  };
+}
+
+/**
+ * The real playback controller — a behaviour-preserving port of the legacy
+ * combined player screen (`src/ui/screens/player.ts`), stripped of all view
+ * concerns. Everything the views need to render lives in the `session` signal;
+ * everything else (blob-URL lifecycle, abort controllers, embed notice) is
+ * private closure state.
+ */
+export function createPlaybackController(): PlaybackController {
+  const session = signal<PlaybackSession>(emptySession());
+
+  // ── private, non-reactive state ──────────────────────────────────
+  let loadAbort: AbortController | null = null;
+  let currentBlobUrl: string | null = null;
+  let embedNoticeShown = false;
+
+  // ── session helpers ──────────────────────────────────────────────
+  const patch = (p: Partial<PlaybackSession>): void => session.update((s) => ({ ...s, ...p }));
+  /** Force a re-emit (list rows read queue/progress/settings out of band). */
+  const bump = (): void => session.update((s) => ({ ...s }));
+
+  function okStatus(count: number, limited: boolean): PlaybackStatus {
+    return {
+      kind: 'ok',
+      message: t('status_ok', count) + (limited ? ' · ' + t('yt_limit_note') : ''),
+    };
+  }
+
+  function feedIdOf(req: FeedRequest): string {
+    switch (req.kind) {
+      case 'itunes':
+        return req.id;
+      case 'rss':
+        return 'rss:' + req.url;
+      case 'yt':
+        return 'yt:' + req.info.type + ':' + req.info.id;
+    }
+  }
+
+  // ── feed opening (stale-while-revalidate) ────────────────────────
+  function openFeed(req: FeedRequest): void {
+    const cur = session();
+    // Re-entering the already-loaded feed (e.g. via the mini player): keep it
+    // — reloading would interrupt playback.
+    if (cur.meta?.id === feedIdOf(req) && cur.episodes.length) return;
+
+    loadAbort?.abort();
+    loadAbort = new AbortController();
+    const sig = loadAbort.signal;
+    const timeout = setTimeout(() => loadAbort?.abort(), req.kind === 'itunes' ? 10000 : 25000);
+
+    embedStop();
+    setUsingEmbed(false);
+    clearQueue();
+
+    // Fresh session for this feed, preserving only the sticky filter text.
+    session.set({
+      ...emptySession(),
+      req,
+      isYT: req.kind === 'yt',
+      sortAsc: cur.sortAsc,
+      filter: cur.filter,
+      status: { kind: 'loading', message: t('status_loading') },
+    });
+
+    const feedId = feedIdOf(req);
+    let painted = false; // true once a list (cache or network) is on screen
+
+    const applyResolved = (resolved: ResolvedFeed): void => {
+      const eps = resolved.episodes;
+      if (!eps.length) throw new Error(t('ep_not_found'));
+
+      const S = settings();
+      const sortAsc = S.defaultSort === 'asc';
+      const hasDates = eps.some((e) => e.releaseDate);
+      const sorted = hasDates
+        ? eps.slice().sort((a, b) => +new Date(a.releaseDate || 0) - +new Date(b.releaseDate || 0))
+        : eps.slice().reverse(); // newest-first source order → oldest-first
+      if (!sortAsc) sorted.reverse();
+
+      const q = session().filter.trim().toLowerCase();
+      const filtered = q
+        ? sorted.filter((e) => (e.trackName || '').toLowerCase().includes(q))
+        : sorted.slice();
+
+      const trackId = session().currentTrackId;
+      const currentIndex = trackId != null
+        ? filtered.findIndex((e) => String(e.trackId) === trackId)
+        : -1;
+
+      patch({
+        meta: resolved.meta,
+        limited: resolved.limited,
+        episodes: sorted,
+        filtered,
+        currentIndex,
+        sortAsc,
+        status: okStatus(sorted.length, resolved.limited),
+      });
+
+      if (painted) return; // refresh under an already-visible list — done above
+      painted = true;
+      audio.playbackRate = S.defaultSpeed;
+
+      const lastId = getLastPlayed(resolved.meta.id);
+      if (lastId) {
+        const idx = filtered.findIndex((e) => String(e.trackId) === lastId);
+        if (idx >= 0) playEpisode(idx, false);
+      }
+    };
+
+    void (async () => {
+      const dl = new Set((await listDownloads()).map((d) => d.id));
+      patch({ downloadedIds: dl });
+
+      // Paint the cached copy instantly, then refresh from the network.
+      const cached = await getCachedFeed(feedId);
+      if (cached && !sig.aborted) {
+        try {
+          applyResolved(cached.feed);
+        } catch {
+          /* unusable cache entry — skeleton stays until network */
+        }
+      }
+
+      try {
+        const resolved = await resolveFeed(req, {
+          signal: sig,
+          ytVideoTitle: t('yt_video'),
+          playlistIds: ytPlaylistIds,
+        });
+        clearTimeout(timeout);
+        if (sig.aborted) return;
+        applyResolved(resolved);
+        void putCachedFeed(resolved);
+
+        // Embed fallback may leave title-less items — fill real titles in bg.
+        if (session().isYT && session().episodes.some((e) => e.ytId && !e.trackName)) {
+          void fillEmbedTitles(sig);
+        }
+      } catch (e) {
+        clearTimeout(timeout);
+        const err = e as Error;
+        if (err.name === 'AbortError') return;
+        if (painted) return; // cached list stays usable offline
+        patch({ status: { kind: 'error', message: t('status_err') + (err.message || String(err)) } });
+      }
+    })();
+  }
+
+  /** Background-fill real titles via noembed (embed fallback items). */
+  async function fillEmbedTitles(sig: AbortSignal): Promise<void> {
+    const targets = session().episodes.filter((e) => e.ytId && !e.trackName);
+    if (!targets.length) return;
+    let i = 0;
+    let since = 0;
+    const reRender = (): void => {
+      if (session().isYT && !sig.aborted) bump();
+    };
+    const worker = async (): Promise<void> => {
+      while (i < targets.length) {
+        if (sig.aborted) return;
+        const ep = targets[i++];
+        if (!ep) break;
+        try {
+          const r = await svcJson<{ title?: string }>(
+            'https://noembed.com/embed?url=https://www.youtube.com/watch?v=' +
+              encodeURIComponent(ep.ytId ?? ''),
+            sig,
+            8000,
+          );
+          if (r?.title) {
+            ep.trackName = r.title;
+            if (++since >= 6) {
+              since = 0;
+              reRender();
+            }
+          }
+        } catch {
+          /* title stays a fallback */
+        }
+      }
+    };
+    await Promise.all([worker(), worker(), worker(), worker()]);
+    reRender();
+  }
+
+  // ── playback ─────────────────────────────────────────────────────
+  function playEpisode(idx: number, autoplay = false): void {
+    const s = session();
+    if (idx < 0 || idx >= s.filtered.length) return;
+    const ep = s.filtered[idx];
+    if (!ep) return;
+    const id = String(ep.trackId);
+    const meta = s.meta;
+
+    cancelEmbedRescue();
+    patch({ currentIndex: idx, currentTrackId: id });
+
+    if (s.isYT) {
+      void ytResolveAndPlay(ep, id, autoplay);
+    } else {
+      void startAudioPreferOffline(ep.episodeUrl || '', id, autoplay);
+    }
+
+    setMediaMetadata({
+      title: ep.trackName || '',
+      artist: meta?.artist || '',
+      album: meta?.name || '',
+      artworkUrl: meta ? httpsOnly(meta.art) : '',
+    });
+    nowPlaying.set({
+      title: ep.trackName || t('ep_fallback', idx + 1),
+      feedName: meta?.name || '',
+      art: ep.art || (meta ? httpsOnly(meta.art) : ''),
+    });
+
+    if (meta) setLastPlayed(meta.id, id);
+    bump();
+  }
+
+  /** Play the downloaded copy when one exists, otherwise the stream URL. */
+  async function startAudioPreferOffline(src: string, id: string, autoplay: boolean): Promise<void> {
+    const local = session().downloadedIds.has(id) ? await offlineAudioUrl(id) : null;
+    if (session().currentTrackId !== id) {
+      if (local) URL.revokeObjectURL(local); // user moved on during the lookup
+      return;
+    }
+    startAudio(local ?? src, id, autoplay);
+  }
+
+  function startAudio(src: string, id: string, autoplay: boolean): void {
+    embedStop();
+    setUsingEmbed(false);
+    if (currentBlobUrl && currentBlobUrl !== src) {
+      URL.revokeObjectURL(currentBlobUrl);
+      currentBlobUrl = null;
+    }
+    if (src.startsWith('blob:')) currentBlobUrl = src;
+    audio.src = src;
+    audio.load();
+    const applyPrefs = (): void => {
+      const S = settings();
+      audio.playbackRate = S.defaultSpeed;
+      if (S.resumePos) {
+        const saved = getProgress(id);
+        if (saved > 5 && isFinite(audio.duration) && saved < audio.duration - 2) {
+          audio.currentTime = saved;
+        }
+      }
+    };
+    if (audio.readyState >= 2) applyPrefs();
+    else audio.addEventListener('canplay', applyPrefs, { once: true });
+    if (autoplay) {
+      audio.play().catch(() => {
+        /* autoplay blocked */
+      });
+    }
+  }
+
+  async function ytResolveAndPlay(ep: Episode, id: string, autoplay: boolean): Promise<void> {
+    audio.pause();
+    // Downloaded copy wins — no network resolution needed.
+    if (session().downloadedIds.has(id)) {
+      const local = await offlineAudioUrl(id);
+      if (!session().isYT || session().currentTrackId !== id) {
+        if (local) URL.revokeObjectURL(local);
+        return;
+      }
+      if (local) {
+        startAudio(local, id, autoplay);
+        patch({ status: okStatus(session().episodes.length, session().limited) });
+        return;
+      }
+    }
+    patch({ status: { kind: 'loading', message: t('status_loading') } });
+    let url: string | null = null;
+    try {
+      url = await ytServiceAudioUrl(ep.ytId ?? '', loadAbort?.signal);
+    } catch {
+      url = null;
+    }
+    if (!session().isYT || session().currentTrackId !== id) return; // user moved on
+    if (url) {
+      ep.episodeUrl = url; // real media URL → download works too
+      startAudio(url, id, autoplay);
+      patch({ status: okStatus(session().episodes.length, session().limited) });
+    } else {
+      setUsingEmbed(true);
+      // The iframe can't keep playing on a locked phone — be upfront about it.
+      if (!embedNoticeShown) {
+        embedNoticeShown = true;
+        toast(t('yt_embed_bg'), 'info');
+      }
+      await embedLoadEp(ep, autoplay);
+      // …but keep hunting for a real audio stream in the background: the
+      // instant one resolves we hot-swap to <audio>, which DOES keep playing
+      // with the screen locked (plus lock-screen Media Session controls).
+      scheduleEmbedRescue(ep, id);
+    }
+  }
+
+  // ── embed → audio background rescue ──────────────────────────────
+  let rescueTimer: ReturnType<typeof setTimeout> | null = null;
+  let rescueTry = 0;
+  const RESCUE_DELAYS = [8000, 30000, 60000, 120000, 180000];
+
+  function cancelEmbedRescue(): void {
+    if (rescueTimer) {
+      clearTimeout(rescueTimer);
+      rescueTimer = null;
+    }
+    rescueTry = 0;
+  }
+
+  /** Retry audio resolution while the embed fallback plays; on success swap
+   *  to <audio> at the embed's current position, preserving play state. */
+  function scheduleEmbedRescue(ep: Episode, id: string): void {
+    cancelEmbedRescue();
+    const stillOnEmbed = (): boolean =>
+      session().isYT && session().currentTrackId === id && isUsingEmbed();
+    const attempt = async (): Promise<void> => {
+      rescueTimer = null;
+      if (!stillOnEmbed()) return;
+      let url: string | null = null;
+      try {
+        url = await ytServiceAudioUrl(ep.ytId ?? '', loadAbort?.signal);
+      } catch {
+        url = null;
+      }
+      if (!stillOnEmbed()) return;
+      if (url) {
+        ep.episodeUrl = url; // real media URL → download works too
+        const pos = pbCurrent();
+        const wasPlaying = !pbPaused();
+        startAudio(url, id, wasPlaying);
+        // Land where the embed was (applyPrefs' saved-progress seek targets
+        // roughly the same second; this exact seek wins on loadedmetadata).
+        const seekBack = (): void => {
+          if (pos > 0 && isFinite(audio.duration) && pos < audio.duration - 2) {
+            audio.currentTime = pos;
+          }
+        };
+        if (audio.readyState >= 1) seekBack();
+        else audio.addEventListener('loadedmetadata', seekBack, { once: true });
+        return;
+      }
+      if (rescueTry < RESCUE_DELAYS.length - 1) {
+        rescueTry++;
+        rescueTimer = setTimeout(() => void attempt(), RESCUE_DELAYS[rescueTry]);
+      }
+    };
+    rescueTimer = setTimeout(() => void attempt(), RESCUE_DELAYS[0]);
+  }
+
+  async function embedLoadEp(ep: Episode, autoplay: boolean): Promise<void> {
+    patch({ status: { kind: 'loading', message: t('status_loading') } });
+    try {
+      await ensureEmbed();
+    } catch {
+      patch({ status: { kind: 'error', message: t('yt_embed_blocked') } });
+      return;
+    }
+    if (!session().isYT || session().currentTrackId !== String(ep.trackId)) return;
+    const S = settings();
+    const savedPos = S.resumePos && getProgress(String(ep.trackId)) > 5 ? getProgress(String(ep.trackId)) : 0;
+    const p = getEmbed();
+    if (!p) return;
+    try {
+      const opts = { videoId: ep.ytId ?? '', startSeconds: savedPos, suggestedQuality: 'small' };
+      if (autoplay) p.loadVideoById(opts);
+      else p.cueVideoById(opts);
+      try {
+        p.setPlaybackQuality('small');
+      } catch {
+        /* older API */
+      }
+      pbSetRate(S.defaultSpeed);
+    } catch {
+      patch({ status: { kind: 'error', message: t('yt_embed_blocked') } });
+      return;
+    }
+    patch({ status: okStatus(session().episodes.length, session().limited) });
+  }
+
+  function togglePlay(): void {
+    const s = session();
+    if (!s.isYT && !audio.src) return;
+    if (s.currentTrackId == null) return;
+    if (pbPaused()) pbPlay();
+    else pbPause();
+  }
+
+  function seekRel(seconds: number): void {
+    const dur = pbDuration();
+    if (!session().isYT && !audio.src) return;
+    if (!Number.isFinite(dur) || !dur) return;
+    pbSeekTo(Math.max(0, Math.min(pbCurrent() + seconds, dur)));
+  }
+
+  function prev(): void {
+    const s = session();
+    if (s.currentIndex > 0) playEpisode(s.currentIndex - 1, !pbPaused());
+  }
+  function next(): void {
+    const s = session();
+    if (s.currentIndex >= 0 && s.currentIndex < s.filtered.length - 1) {
+      playEpisode(s.currentIndex + 1, !pbPaused());
+    }
+  }
+
+  // ── sort & filter ────────────────────────────────────────────────
+  function toggleSort(): void {
+    const s = session();
+    const sortAsc = !s.sortAsc;
+    const episodes = s.episodes.slice().reverse();
+    const filtered = s.filtered.slice().reverse();
+    const currentIndex = s.currentTrackId != null
+      ? filtered.findIndex((e) => String(e.trackId) === s.currentTrackId)
+      : -1;
+    patch({ sortAsc, episodes, filtered, currentIndex });
+  }
+
+  function setFilter(q: string): void {
+    const s = session();
+    const query = q.trim().toLowerCase();
+    const filtered = query
+      ? s.episodes.filter((e) => (e.trackName || '').toLowerCase().includes(query))
+      : s.episodes.slice();
+    const currentIndex = s.currentTrackId != null
+      ? filtered.findIndex((e) => String(e.trackId) === s.currentTrackId)
+      : -1;
+    patch({ filter: q, filtered, currentIndex });
+  }
+
+  // ── queue ────────────────────────────────────────────────────────
+  function toggleQueued(idx: number): void {
+    const ep = session().filtered[idx];
+    if (!ep) return;
+    const id = String(ep.trackId);
+    if (queuePosition(id)) {
+      removeFromQueue(id);
+    } else {
+      enqueue(id);
+      toast(t('queued'));
+    }
+    bump();
+  }
+
+  // ── downloads ────────────────────────────────────────────────────
+  async function downloadToggle(idx: number): Promise<void> {
+    const s = session();
+    const ep = s.filtered[idx];
+    if (!ep) return;
+    const id = String(ep.trackId);
+
+    // Second tap on a downloaded episode removes the offline copy.
+    if (s.downloadedIds.has(id)) {
+      await removeDownload(id);
+      const dl = new Set(session().downloadedIds);
+      dl.delete(id);
+      patch({ downloadedIds: dl });
+      toast(t('dl_removed'));
+      return;
+    }
+
+    const outcome = await downloadOffline(ep, s.meta?.id ?? '', s.isYT);
+    if (outcome === 'ok') {
+      const dl = new Set(session().downloadedIds);
+      dl.add(id);
+      patch({ downloadedIds: dl });
+      toast(t('dl_saved'));
+      return;
+    }
+    if (outcome === 'no-url') {
+      toast(t('dl_not_found'), 'error');
+      bump();
+      return;
+    }
+    // CORS-blocked CDN etc. → legacy browser file download still works.
+    const fb = await downloadEpisode(ep, s.isYT);
+    toast(fb === 'ok' ? t('dl_fallback_file') : t('dl_not_found'), fb === 'ok' ? 'info' : 'error');
+    bump();
+  }
+
+  function episodeTitle(id: string): string {
+    const eps = session().episodes;
+    const i = eps.findIndex((e) => String(e.trackId) === id);
+    const ep = eps[i];
+    return ep ? ep.trackName || t('ep_fallback', i + 1) : '';
+  }
+
+  function retry(): void {
+    const req = session().req;
+    if (req) openFeed(req);
+  }
+
+  function reset(): void {
+    cancelEmbedRescue();
+    audio.pause();
+    if (currentBlobUrl) {
+      audio.removeAttribute('src');
+      URL.revokeObjectURL(currentBlobUrl);
+      currentBlobUrl = null;
+    }
+    nowPlaying.set(null);
+    embedStop();
+    setUsingEmbed(false);
+    loadAbort?.abort();
+    document.body.classList.remove('is-playing');
+    session.set(emptySession());
+  }
+
+  // ── engine wiring ────────────────────────────────────────────────
+  onEngine((e) => {
+    switch (e.type) {
+      case 'play': {
+        document.body.classList.add('is-playing');
+        // Fill title from embed video data when missing (single-video feeds).
+        if (isUsingEmbed()) {
+          try {
+            const s = session();
+            const ep = s.currentIndex >= 0 ? s.filtered[s.currentIndex] : undefined;
+            const d = getEmbed()?.getVideoData?.();
+            if (ep && !ep.trackName && d?.title) {
+              ep.trackName = d.title;
+              const np = nowPlaying();
+              if (np) nowPlaying.set({ ...np, title: d.title });
+              bump();
+            }
+          } catch {
+            /* embed data unavailable */
+          }
+        }
+        break;
+      }
+      case 'pause':
+        document.body.classList.remove('is-playing');
+        break;
+      case 'ended': {
+        const s = session();
+        // Queue wins over plain list order.
+        const nextQueued = dequeueNext(s.currentTrackId ?? undefined);
+        if (nextQueued) {
+          const qi = s.filtered.findIndex((x) => String(x.trackId) === nextQueued);
+          if (qi >= 0) {
+            playEpisode(qi, true);
+            break;
+          }
+        }
+        if (settings().autoNext && s.currentIndex < s.filtered.length - 1) {
+          playEpisode(s.currentIndex + 1, true);
+        }
+        break;
+      }
+      case 'timeupdate': {
+        // Progress persistence only — the visual scrubber is WP-E's job.
+        const s = session();
+        const ep = s.currentIndex >= 0 ? s.filtered[s.currentIndex] : undefined;
+        if (ep && e.current > 5) setProgress(String(ep.trackId), e.current);
+        break;
+      }
+      case 'error':
+        patch({ status: { kind: 'error', message: t('audio_err') } });
+        document.body.classList.remove('is-playing');
+        break;
+    }
+  });
+  onEmbedStateChange(handleEmbedState);
+  onEmbedError(() => patch({ status: { kind: 'error', message: t('yt_embed_blocked') } }));
+
+  // ── global keyboard shortcuts (feed view / Now Playing sheet) ─────
+  document.addEventListener('keydown', (e) => {
+    const target = e.target as HTMLElement;
+    const tag = (target.tagName || '').toLowerCase();
+    if (tag === 'input' || tag === 'select' || tag === 'textarea' || target.isContentEditable) return;
+    const sheetOpen = document.getElementById('npSheet')?.classList.contains('open');
+    if (!document.body.classList.contains('feed-open') && !sheetOpen) return;
+    switch (e.key) {
+      case ' ':
+        e.preventDefault();
+        togglePlay();
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        seekRel(-settings().skipBack);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        seekRel(settings().skipForward);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        prev();
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        next();
+        break;
+    }
+  });
+
+  // Language change → refresh translated status text (list dates/labels are
+  // re-rendered by the views' own currentLang subscription).
+  currentLang.subscribe(() => {
+    const s = session();
+    if (s.status.kind === 'ok') patch({ status: okStatus(s.episodes.length, s.limited) });
+    else if (s.status.kind === 'loading') patch({ status: { kind: 'loading', message: t('status_loading') } });
+  });
+
+  // Settings change → re-emit so lists pick up showDl / row metrics.
+  settings.subscribe(() => {
+    if (session().episodes.length) bump();
+  });
+
+  return {
+    session,
+    openFeed,
+    retry,
+    playEpisode,
+    next,
+    prev,
+    togglePlay,
+    seekRel,
+    toggleSort,
+    setFilter,
+    toggleQueued,
+    downloadToggle,
+    episodeTitle,
+    reset,
+  };
+}
diff --git a/src/ui/queue-panel.ts b/src/ui/queue-panel.ts
deleted file mode 100644
index b0e081c..0000000
--- a/src/ui/queue-panel.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * Queue panel — the visible face of the play queue. Lists queued episodes
- * with keyboard-friendly move/remove buttons; "up next" order wins over the
- * plain list order, so users need to see and edit it.
- */
-
-import { clearQueue, moveInQueue, queue, removeFromQueue } from '../state/queue';
-import { effect } from '../state/signals';
-import { t, currentLang } from '../i18n';
-import { h, icon } from './h';
-import { must } from './shell';
-
-export interface QueuePanel {
-  close(): void;
-  isOpen(): boolean;
-}
-
-export function initQueuePanel(opts: { titleFor(id: string): string }): QueuePanel {
-  const toggleBtn = must<HTMLButtonElement>('queueToggle');
-  const countEl = must('queueCount');
-
-  const listEl = h('div', { className: 'queue-list', attrs: { role: 'list' } });
-  const clearBtn = h('button', {
-    className: 's-btn danger queue-clear',
-    on: { click: () => clearQueue() },
-  });
-  const titleEl = h('h3', { className: 'queue-panel-title', id: 'queuePanelTitle' });
-  const panel = h(
-    'div',
-    {
-      className: 'queue-panel',
-      id: 'queuePanel',
-      attrs: { role: 'region', 'aria-labelledby': 'queuePanelTitle', hidden: '' },
-    },
-    titleEl,
-    listEl,
-    h('div', { className: 'queue-panel-foot' }, clearBtn),
-  );
-  toggleBtn.insertAdjacentElement('afterend', panel);
-
-  function open(): boolean {
-    return !panel.hasAttribute('hidden');
-  }
-  function setOpen(v: boolean): void {
-    panel.toggleAttribute('hidden', !v);
-    toggleBtn.setAttribute('aria-expanded', String(v));
-    if (v) render();
-  }
-
-  function iconBtn(label: string, name: string, onClick: () => void): HTMLButtonElement {
-    const b = h('button', { className: 'queue-act', title: label, on: { click: onClick } }, icon(name));
-    b.setAttribute('aria-label', label);
-    return b;
-  }
-
-  function render(): void {
-    const q = queue();
-    titleEl.textContent = t('queue_title');
-    clearBtn.textContent = t('queue_clear');
-    clearBtn.hidden = q.length === 0;
-    if (!q.length) {
-      listEl.replaceChildren(h('div', { className: 'queue-empty' }, t('queue_empty')));
-      return;
-    }
-    listEl.replaceChildren(
-      ...q.map((id, i) =>
-        h(
-          'div',
-          { className: 'queue-row', attrs: { role: 'listitem' } },
-          h('span', { className: 'queue-pos' }, String(i + 1)),
-          h('span', { className: 'queue-name', title: opts.titleFor(id) }, opts.titleFor(id)),
-          iconBtn(t('queue_move_up'), 'ic-up', () => moveInQueue(id, -1)),
-          iconBtn(t('queue_move_down'), 'ic-down', () => moveInQueue(id, 1)),
-          iconBtn(t('queue_remove'), 'ic-x', () => removeFromQueue(id)),
-        ),
-      ),
-    );
-  }
-
-  // Reactive: queue changes update the badge always, the list when visible.
-  effect(() => {
-    const n = queue().length;
-    void currentLang(); // re-render labels on language change
-    countEl.textContent = n ? String(n) : '';
-    countEl.toggleAttribute('hidden', n === 0);
-    if (open()) render();
-  });
-
-  toggleBtn.addEventListener('click', () => setOpen(!open()));
-  panel.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-      setOpen(false);
-      toggleBtn.focus();
-    }
-  });
-  // Light dismiss: click outside closes.
-  document.addEventListener('click', (e) => {
-    if (open() && !panel.contains(e.target as Node) && !toggleBtn.contains(e.target as Node)) {
-      setOpen(false);
-    }
-  });
-
-  return { close: () => setOpen(false), isOpen: open };
-}
diff --git a/src/ui/router.test.ts b/src/ui/router.test.ts
index aff4d3d..7d8c697 100644
--- a/src/ui/router.test.ts
+++ b/src/ui/router.test.ts
@@ -1,14 +1,18 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { FeedRequest } from '../feeds/types';
-import { initRouter, parseLocation, urlFor } from './router';
+import { initRouter, parseLocation, urlFor, type AppView } from './router';
 
 function setUrl(search: string): void {
   history.replaceState(null, '', '/' + search);
 }
 
 function makeHandlers() {
-  return { showFeed: vi.fn<(req: FeedRequest) => void>(), showHome: vi.fn<() => void>() };
+  return {
+    showFeed: vi.fn<(req: FeedRequest) => void>(),
+    showHome: vi.fn<() => void>(),
+    showView: vi.fn<(view: AppView) => void>(),
+  };
 }
 
 beforeEach(() => {
@@ -57,6 +61,24 @@ describe('parseLocation', () => {
     setUrl('');
     expect(parseLocation()).toEqual({ kind: 'home' });
   });
+
+  it.each(['search', 'library', 'queue', 'settings'] as const)(
+    'parses ?view=%s into a view route',
+    (view) => {
+      setUrl('?view=' + view);
+      expect(parseLocation()).toEqual({ kind: 'view', view });
+    },
+  );
+
+  it('falls back to home for an unknown ?view= value', () => {
+    setUrl('?view=bogus');
+    expect(parseLocation()).toEqual({ kind: 'home' });
+  });
+
+  it('lets feed params win over ?view=', () => {
+    setUrl('?view=library&podcast=1550551126');
+    expect(parseLocation()).toEqual({ kind: 'feed', req: { kind: 'itunes', id: '1550551126' } });
+  });
 });
 
 describe('urlFor', () => {
@@ -75,6 +97,60 @@ describe('urlFor', () => {
   it('maps home to the bare pathname', () => {
     expect(urlFor({ kind: 'home' })).toBe(location.pathname);
   });
+
+  it('round-trips every view through parseLocation', () => {
+    for (const view of ['search', 'library', 'queue', 'settings'] as const) {
+      history.replaceState(null, '', urlFor({ kind: 'view', view }));
+      expect(parseLocation()).toEqual({ kind: 'view', view });
+    }
+  });
+});
+
+describe('viewOpened', () => {
+  it('pushes a history entry and enables back when opening a view from home', () => {
+    const router = initRouter(makeHandlers());
+    const lenBefore = history.length;
+
+    router.viewOpened('library');
+
+    expect(location.search).toBe('?view=library');
+    expect(router.canGoBack()).toBe(true);
+    expect(history.length).toBe(lenBefore + 1);
+  });
+
+  it('replaces (not pushes) on a view→view navigation', () => {
+    setUrl('?view=search');
+    const router = initRouter(makeHandlers());
+    const lenBefore = history.length;
+
+    router.viewOpened('settings');
+
+    expect(location.search).toBe('?view=settings');
+    expect(history.length).toBe(lenBefore);
+    expect(router.canGoBack()).toBe(false);
+  });
+
+  it('replaces without enabling back when push=false (initial deep-link load)', () => {
+    const router = initRouter(makeHandlers());
+    const lenBefore = history.length;
+
+    router.viewOpened('queue', false);
+
+    expect(location.search).toBe('?view=queue');
+    expect(history.length).toBe(lenBefore);
+    expect(router.canGoBack()).toBe(false);
+  });
+
+  it('replaces on a feed→view navigation (one back step still returns home)', () => {
+    setUrl('?podcast=1550551126');
+    const router = initRouter(makeHandlers());
+    const lenBefore = history.length;
+
+    router.viewOpened('library');
+
+    expect(location.search).toBe('?view=library');
+    expect(history.length).toBe(lenBefore);
+  });
 });
 
 describe('feedOpened', () => {
@@ -152,6 +228,16 @@ describe('goHome', () => {
 });
 
 describe('popstate', () => {
+  it('routes to showView with the parsed view when navigating to a ?view= URL', () => {
+    const h = makeHandlers();
+    initRouter(h);
+
+    setUrl('?view=library');
+    window.dispatchEvent(new PopStateEvent('popstate'));
+
+    expect(h.showView).toHaveBeenCalledWith('library');
+  });
+
   it('routes to showFeed with the parsed request when navigating to a feed URL', () => {
     const h = makeHandlers();
     initRouter(h);
diff --git a/src/ui/router.ts b/src/ui/router.ts
index a95c918..a19863e 100644
--- a/src/ui/router.ts
+++ b/src/ui/router.ts
@@ -3,11 +3,19 @@ import { ytFromToken, ytToToken } from '../feeds/input-parse';
 
 /**
  * History integration. Query-param URLs stay the canonical deep-link format
- * (?podcast= / ?rss= / ?yt=) so every legacy link keeps working — but we now
- * push real history entries, so the back button navigates feed → home.
+ * (?podcast= / ?rss= / ?yt= for feeds — every legacy link keeps working — and
+ * ?view= for top-level views). Real history entries, so the back button
+ * navigates feed/view → home.
  */
 
-export type Route = { kind: 'home' } | { kind: 'feed'; req: FeedRequest };
+/** Deep-linkable top-level views (home is the bare pathname). */
+export type AppView = 'search' | 'library' | 'queue' | 'settings';
+const APP_VIEWS: readonly string[] = ['search', 'library', 'queue', 'settings'];
+
+export type Route =
+  | { kind: 'home' }
+  | { kind: 'feed'; req: FeedRequest }
+  | { kind: 'view'; view: AppView };
 
 export function parseLocation(): Route {
   const p = new URLSearchParams(location.search);
@@ -20,11 +28,14 @@ export function parseLocation(): Route {
     const ref = ytFromToken(yt);
     if (ref) return { kind: 'feed', req: { kind: 'yt', info: ref } };
   }
+  const view = p.get('view');
+  if (view && APP_VIEWS.includes(view)) return { kind: 'view', view: view as AppView };
   return { kind: 'home' };
 }
 
 export function urlFor(route: Route): string {
   if (route.kind === 'home') return location.pathname;
+  if (route.kind === 'view') return location.pathname + '?view=' + route.view;
   const req = route.req;
   switch (req.kind) {
     case 'itunes':
@@ -39,6 +50,8 @@ export function urlFor(route: Route): string {
 export interface Router {
   /** Reflect an opened feed in the URL (pushes unless it's the initial load). */
   feedOpened(req: FeedRequest, push?: boolean): void;
+  /** Reflect an opened top-level view in the URL (same push semantics). */
+  viewOpened(view: AppView, push?: boolean): void;
   /** Navigate home programmatically. */
   goHome(): void;
   /** True when history.back() stays inside the app (a home entry exists). */
@@ -48,33 +61,42 @@ export interface Router {
 export function initRouter(handlers: {
   showFeed: (req: FeedRequest) => void;
   showHome: () => void;
+  showView: (view: AppView) => void;
 }): Router {
-  // Deep links land straight on a feed — there is no in-app entry behind us,
-  // so the back button must navigate home instead of leaving the site.
+  // Deep links land straight on a feed/view — there is no in-app entry behind
+  // us, so the back button must navigate home instead of leaving the site.
   let hasHomeBehind = false;
 
   window.addEventListener('popstate', () => {
     const route = parseLocation();
     if (route.kind === 'feed') handlers.showFeed(route.req);
+    else if (route.kind === 'view') handlers.showView(route.view);
     else {
       hasHomeBehind = false;
       handlers.showHome();
     }
   });
 
+  /** Shared push/replace policy: one back step always returns home. */
+  function reflect(url: string, push: boolean): void {
+    if (location.pathname + location.search === url) return;
+    if (push && parseLocation().kind !== 'home') {
+      // feed/view → feed/view: replace, so back always returns home in one step
+      history.replaceState(null, '', url);
+    } else if (push) {
+      history.pushState(null, '', url);
+      hasHomeBehind = true;
+    } else {
+      history.replaceState(null, '', url);
+    }
+  }
+
   return {
     feedOpened(req, push = true) {
-      const url = urlFor({ kind: 'feed', req });
-      if (location.pathname + location.search === url) return;
-      if (push && parseLocation().kind !== 'home') {
-        // feed → feed: replace, so back always returns home in one step
-        history.replaceState(null, '', url);
-      } else if (push) {
-        history.pushState(null, '', url);
-        hasHomeBehind = true;
-      } else {
-        history.replaceState(null, '', url);
-      }
+      reflect(urlFor({ kind: 'feed', req }), push);
+    },
+    viewOpened(view, push = true) {
+      reflect(urlFor({ kind: 'view', view }), push);
     },
     canGoBack: () => hasHomeBehind,
     goHome() {
diff --git a/src/ui/screens/player.ts b/src/ui/screens/player.ts
deleted file mode 100644
index 57098c7..0000000
--- a/src/ui/screens/player.ts
+++ /dev/null
@@ -1,1040 +0,0 @@
-/*
- * NOTE (post-3.1.0 refactor plan): this file is the app's largest module and
- * concentrates feed loading, playback wiring, queue, downloads, waveform and
- * the YouTube-embed fallback. Intended split boundaries, deferred so they
- * don't collide with the 3.1.0 UI changes:
- *   - episode download button state machine  → ui/screens/player-downloads.ts
- *   - embed-fallback + blob-URL lifecycle    → player/source-select.ts
- *   - sort/filter bar                        → ui/screens/player-listbar.ts
- */
-import type { Episode, FeedMeta, FeedRequest, ResolvedFeed } from '../../feeds/types';
-import { resolveFeed } from '../../feeds/resolve';
-import { t, currentLang } from '../../i18n';
-import { fmtDate, fmtDur, fmtTime } from '../../lib/format';
-import { httpsOnly } from '../../lib/safe';
-import {
-  audio,
-  embedStop,
-  handleEmbedState,
-  isUsingEmbed,
-  onEngine,
-  pbCurrent,
-  pbDuration,
-  pbPause,
-  pbPaused,
-  pbPlay,
-  pbSeekTo,
-  pbSetRate,
-  setUsingEmbed,
-} from '../../player/engine';
-import { downloadEpisode } from '../../player/downloads';
-import { downloadOffline, offlineAudioUrl, removeDownload } from '../../player/offline';
-import { getCachedFeed, putCachedFeed, listDownloads } from '../../storage/db';
-import { setMediaMetadata } from '../../player/media-session';
-import { setSleepTimer } from '../../player/sleep-timer';
-import { getLastPlayed, getProgress, setLastPlayed, setProgress } from '../../storage/progress';
-import { isSubscribed, toggleSubscription } from '../../storage/subscriptions';
-import { confirmDialog } from '../confirm';
-import { initQueuePanel } from '../queue-panel';
-import { nowPlaying } from '../../state/now-playing';
-import { clearQueue, dequeueNext, enqueue, queuePosition, removeFromQueue } from '../../state/queue';
-import { settings, setSetting } from '../../state/settings';
-import { ensureEmbed, getEmbed, onEmbedError, onEmbedStateChange, ytPlaylistIds, YT_STATE } from '../../youtube/embed';
-import { ytServiceAudioUrl } from '../../youtube/piped';
-import { svcJson } from '../../feeds/proxy-chain';
-import { h, icon } from '../h';
-import { stateBox } from '../states';
-import { must } from '../shell';
-import { toast } from '../toast';
-import { initWaveform, type WaveformController } from '../waveform';
-
-export interface PlayerScreenDeps {
-  /** Update the address bar for the opened feed (router integration). */
-  onFeedOpened: (req: FeedRequest) => void;
-  onClosed: () => void;
-  /** Back button: in-app history back, or home when we deep-linked in. */
-  onBack: () => void;
-}
-
-export interface PlayerScreen {
-  /**
-   * Open a feed. `moveFocus` defaults to true so user-initiated navigation
-   * lands keyboard focus on the feed title; deep-link cold loads pass false
-   * to avoid stealing focus on first paint.
-   */
-  openFeed(req: FeedRequest, moveFocus?: boolean): void;
-  /** Leave the feed view but keep playback running (mini player takes over). */
-  hide(): void;
-  /** Stop playback and reset session. */
-  reset(): void;
-  isOpen(): boolean;
-  el: HTMLElement;
-}
-
-export function initPlayerScreen(deps: PlayerScreenDeps): PlayerScreen {
-  // ── element cache ────────────────────────────────────────────────
-  const screen = must('playerScreen');
-  const elDot = must('dot');
-  const elStatusText = must('statusText');
-  const elNowTitle = must('nowTitle');
-  const elProgressWrap = must('progressWrap');
-  const elTCur = must('tCur');
-  const elTTot = must('tTot');
-  const elBtnPlay = must<HTMLButtonElement>('btnPlay');
-  const elPlayer = must('pPlayer');
-  const elBtnPrev = must<HTMLButtonElement>('btnPrev');
-  const elBtnNext = must<HTMLButtonElement>('btnNext');
-  const elBtnSkipBack = must<HTMLButtonElement>('btnSkipBack');
-  const elBtnSkipFwd = must<HTMLButtonElement>('btnSkipFwd');
-  const elSpeedSel = must<HTMLSelectElement>('speedSel');
-  const elSleepSel = must<HTMLSelectElement>('sleepSel');
-  const elSortInfo = must('sortInfo');
-  const elSortToggle = must<HTMLButtonElement>('sortToggle');
-  const elEpList = must('epList');
-  const elPEpCount = must('pEpCount');
-  const elLblSkipBack = must('lblSkipBack');
-  const elLblSkipFwd = must('lblSkipFwd');
-  const elFilterInput = must<HTMLInputElement>('filterInput');
-  const elPTitle = must('pTitle');
-  const elPAuthor = must('pAuthor');
-  const elPThumb = must<HTMLImageElement>('pThumb');
-  const elFavBtn = must<HTMLButtonElement>('favBtn');
-  const elShareBtn = must<HTMLButtonElement>('shareBtn');
-  const elBackBtn = must<HTMLButtonElement>('backBtn');
-
-  // ── session state ────────────────────────────────────────────────
-  let episodes: Episode[] = [];
-  let filteredEps: Episode[] = [];
-  let currentIndex = -1;
-  let currentTrackId: string | null = null;
-  let currentMeta: FeedMeta | null = null;
-  let feedIsYT = false;
-  let ytLimited = false;
-  let sortAsc = true;
-  let loadAbort: AbortController | null = null;
-  let animateNextRender = false;
-  let enterTimer: ReturnType<typeof setTimeout> | null = null;
-  let downloadedIds = new Set<string>();
-  let currentBlobUrl: string | null = null;
-  let embedNoticeShown = false;
-  // Set on user-initiated openFeed; consumed once the feed title is on screen.
-  let pendingFocus = false;
-
-  /** Land keyboard focus on the feed title (accessible landing point). */
-  function focusFeedTitle(): void {
-    elPTitle.focus({ preventScroll: false });
-  }
-
-  // ── waveform ─────────────────────────────────────────────────────
-  const wave: WaveformController = initWaveform(
-    {
-      wrap: elProgressWrap,
-      base: must('waveBase'),
-      fill: must('waveFill'),
-      head: must('waveHead'),
-      tip: must('waveTip'),
-    },
-    {
-      seekRel,
-      skipBack: () => settings().skipBack,
-      skipFwd: () => settings().skipForward,
-    },
-  );
-  wave.build('seseri'); // placeholder until the first episode loads
-
-  // ── status strip ─────────────────────────────────────────────────
-  function setStatus(type: 'loading' | 'ok' | 'error', txt: string): void {
-    elDot.className = 'dot ' + type;
-    elStatusText.textContent = txt;
-  }
-  let statusRestore: ReturnType<typeof setTimeout> | null = null;
-  function flashStatus(msg: string): void {
-    setStatus('ok', msg);
-    if (statusRestore) clearTimeout(statusRestore);
-    statusRestore = setTimeout(() => {
-      if (episodes.length) setStatus('ok', okStatusText());
-    }, 3000);
-  }
-  function okStatusText(): string {
-    return t('status_ok', episodes.length) + (ytLimited ? ' · ' + t('yt_limit_note') : '');
-  }
-
-  // ── now-playing title crossfade ──────────────────────────────────
-  let titleTimer: ReturnType<typeof setTimeout> | null = null;
-  function setNowTitle(text: string): void {
-    if (elNowTitle.textContent === text) return;
-    elNowTitle.classList.add('swapping');
-    if (titleTimer) clearTimeout(titleTimer);
-    titleTimer = setTimeout(() => {
-      elNowTitle.textContent = text;
-      elNowTitle.classList.remove('swapping');
-    }, 150);
-  }
-
-  // ── idle / play icon / nav buttons ───────────────────────────────
-  function setPlayerIdle(idle: boolean): void {
-    elPlayer.classList.toggle('idle', idle);
-    elBtnPlay.disabled = idle;
-    elBtnSkipBack.disabled = idle;
-    elBtnSkipFwd.disabled = idle;
-    elProgressWrap.setAttribute('aria-disabled', idle ? 'true' : 'false');
-    if (idle) elProgressWrap.removeAttribute('tabindex');
-    else elProgressWrap.setAttribute('tabindex', '0');
-  }
-  function setPlayIcon(playing: boolean): void {
-    const u = elBtnPlay.querySelector('use');
-    if (u) u.setAttribute('href', playing ? '#ic-pause' : '#ic-play');
-    elBtnPlay.setAttribute('aria-label', playing ? t('pause') : t('play'));
-  }
-  function updateNavButtons(): void {
-    elBtnPrev.disabled = currentIndex <= 0;
-    elBtnNext.disabled = currentIndex < 0 || currentIndex >= filteredEps.length - 1;
-  }
-
-  // ── episode list rendering (typed DOM, no innerHTML with data) ───
-  function render(): void {
-    if (!filteredEps.length) {
-      elEpList.replaceChildren(stateBox('empty', t('ep_not_found')));
-      elEpList.setAttribute('aria-busy', 'false');
-      return;
-    }
-    const S = settings();
-    const frag = document.createDocumentFragment();
-    filteredEps.forEach((ep, i) => {
-      const id = String(ep.trackId);
-      const savedSec = getProgress(id);
-      const hasSaved = S.resumePos && savedSec > 5;
-      const durSec = ep.trackTimeMillis ? ep.trackTimeMillis / 1000 : 0;
-      const pct = durSec && savedSec > 5 ? Math.min(100, (savedSec / durSec) * 100) : 0;
-      const listened = pct >= 96;
-      const active = i === currentIndex;
-
-      const num = h('span', { className: 'ep-num' });
-      if (active) {
-        const eq = h('span', { className: 'ep-eq', attrs: { 'aria-hidden': 'true' } });
-        eq.append(h('i'), h('i'), h('i'));
-        num.append(eq);
-      } else {
-        num.textContent = String(i + 1);
-      }
-
-      const dateDur = h(
-        'div',
-        { className: 'ep-date-dur' },
-        fmtDate(ep.releaseDate),
-        ep.trackTimeMillis ? ' · ' + fmtDur(ep.trackTimeMillis) : '',
-      );
-      if (listened) {
-        dateDur.append(' ', h('span', { className: 'ep-done-badge' }, '✓'));
-      } else if (hasSaved) {
-        dateDur.append(' ', h('span', { className: 'ep-saved-badge' }, t('ep_saved_badge')));
-      }
-
-      const row = h(
-        'div',
-        {
-          className: 'ep-item' + (active ? ' active' : '') + (listened ? ' listened' : ''),
-          role: 'button',
-          tabIndex: 0,
-          dataset: { idx: String(i) },
-          ...(active ? { attrs: { 'aria-current': 'true' } } : {}),
-        },
-        num,
-        h(
-          'div',
-          { className: 'ep-info' },
-          h('div', { className: 'ep-name' }, ep.trackName || t('ep_fallback', i + 1)),
-          dateDur,
-        ),
-      );
-      const actions = h('div', { className: 'ep-actions' });
-      const qPos = queuePosition(id);
-      actions.append(
-        h(
-          'button',
-          {
-            className: 'ep-dl-btn ep-q-btn' + (qPos ? ' queued' : ''),
-            dataset: { idx: String(i), act: 'queue' },
-            attrs: { 'aria-label': t('btn_queue'), title: t('btn_queue') },
-          },
-          qPos ? String(qPos) : icon('ic-queue'),
-        ),
-      );
-      if (S.showDl) {
-        const done = downloadedIds.has(id);
-        actions.append(
-          h(
-            'button',
-            {
-              className: 'ep-dl-btn' + (done ? ' done' : ''),
-              dataset: { idx: String(i), act: 'dl' },
-              attrs: { 'aria-label': t('dl_label') },
-            },
-            done ? '✓' : icon('ic-download'),
-          ),
-        );
-      }
-      row.append(actions);
-      if (pct > 0 && !listened) {
-        row.append(
-          h(
-            'div',
-            { className: 'ep-progress', attrs: { 'aria-hidden': 'true' } },
-            h('i', { style: `width:${pct.toFixed(1)}%` }),
-          ),
-        );
-      }
-      frag.append(row);
-    });
-    elEpList.replaceChildren(frag);
-    elEpList.setAttribute('aria-busy', 'false');
-
-    if (animateNextRender) {
-      animateNextRender = false;
-      elEpList.classList.add('entering');
-      if (enterTimer) clearTimeout(enterTimer);
-      enterTimer = setTimeout(() => elEpList.classList.remove('entering'), 700);
-    }
-    if (currentIndex >= 0) {
-      elEpList.querySelector('.ep-item.active')?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-    }
-  }
-
-  function showSkeleton(rows = 8): void {
-    const list = h('div', { className: 'skeleton-list' });
-    for (let i = 0; i < rows; i++) {
-      list.append(
-        h(
-          'div',
-          { className: 'skeleton-row' },
-          h('span', { className: 'sk sk-num' }),
-          h(
-            'div',
-            { className: 'ep-info' },
-            h('div', { className: 'sk sk-line1' }),
-            h('div', { className: 'sk sk-line2' }),
-          ),
-        ),
-      );
-    }
-    elEpList.setAttribute('aria-busy', 'true');
-    elEpList.replaceChildren(list);
-  }
-
-  function showError(message: string, onRetry?: () => void): void {
-    setStatus('error', t('status_err') + message);
-    elEpList.replaceChildren(stateBox('error', message, { onRetry }));
-    elEpList.setAttribute('aria-busy', 'false');
-    // Load failed before any paint — don't leave focus stranded on <body>
-    // (the row that opened the feed is now display:none).
-    if (pendingFocus) {
-      pendingFocus = false;
-      focusFeedTitle();
-    }
-  }
-
-  // ── feed opening (unified — replaces loadPodcast/loadRss/loadYouTube) ──
-  function feedIdOf(req: FeedRequest): string {
-    switch (req.kind) {
-      case 'itunes':
-        return req.id;
-      case 'rss':
-        return 'rss:' + req.url;
-      case 'yt':
-        return 'yt:' + req.info.type + ':' + req.info.id;
-    }
-  }
-
-  function openFeed(req: FeedRequest, moveFocus = true): void {
-    pendingFocus = moveFocus;
-    // Re-entering the feed that is already loaded (e.g. via the mini player):
-    // just show it — reloading would interrupt playback.
-    if (currentMeta?.id === feedIdOf(req) && episodes.length) {
-      document.body.classList.add('feed-open');
-      deps.onFeedOpened(req);
-      if (pendingFocus) {
-        pendingFocus = false;
-        focusFeedTitle();
-      }
-      return;
-    }
-    loadAbort?.abort();
-    loadAbort = new AbortController();
-    const signal = loadAbort.signal;
-    const timeout = setTimeout(() => loadAbort?.abort(), req.kind === 'itunes' ? 10000 : 25000);
-
-    embedStop();
-    setUsingEmbed(false);
-    feedIsYT = req.kind === 'yt';
-    elPlayer.classList.toggle('yt-mode', feedIsYT);
-    currentMeta = null;
-    currentIndex = -1;
-    currentTrackId = null;
-    episodes = [];
-    filteredEps = [];
-    clearQueue();
-
-    document.body.classList.add('feed-open');
-    screen.classList.remove('screen-enter');
-    void screen.offsetWidth;
-    screen.classList.add('screen-enter');
-
-    setPlayerIdle(true);
-    setStatus('loading', t('status_loading'));
-    showSkeleton();
-    elNowTitle.textContent = t('pick_episode');
-    updateFavBtn();
-    deps.onFeedOpened(req);
-
-    const feedId = feedIdOf(req);
-    let painted = false; // true once a list (cache or network) is on screen
-
-    const applyResolved = (resolved: ResolvedFeed): void => {
-      currentMeta = resolved.meta;
-      ytLimited = resolved.limited;
-      elPTitle.textContent = resolved.meta.name || '—';
-      elPAuthor.textContent = resolved.meta.artist || '';
-      elPThumb.src = httpsOnly(resolved.meta.art);
-      document.title = `${resolved.meta.name || 'Podcast'} – Seseri`;
-      updateFavBtn();
-
-      const eps = resolved.episodes;
-      if (!eps.length) throw new Error(t('ep_not_found'));
-
-      const S = settings();
-      sortAsc = S.defaultSort === 'asc';
-      const hasDates = eps.some((e) => e.releaseDate);
-      episodes = hasDates
-        ? eps.slice().sort((a, b) => +new Date(a.releaseDate || 0) - +new Date(b.releaseDate || 0))
-        : eps.slice().reverse(); // newest-first source order → oldest-first
-      if (!sortAsc) episodes.reverse();
-      elSortInfo.textContent = sortAsc ? t('sort_asc_label') : t('sort_desc_label');
-      const q = elFilterInput.value.trim().toLowerCase();
-      filteredEps = q
-        ? episodes.filter((e) => (e.trackName || '').toLowerCase().includes(q))
-        : episodes.slice();
-      elPEpCount.textContent = String(episodes.length);
-      setStatus('ok', okStatusText());
-
-      if (painted) {
-        // Refresh under an already-visible list — keep the playing episode.
-        currentIndex =
-          currentTrackId != null
-            ? filteredEps.findIndex((e) => String(e.trackId) === currentTrackId)
-            : -1;
-        updateNavButtons();
-        render();
-        return;
-      }
-      painted = true;
-      elSpeedSel.value = String(S.defaultSpeed);
-      audio.playbackRate = S.defaultSpeed;
-      animateNextRender = true;
-      render();
-
-      // Feed title is now real — land focus here for user-initiated opens.
-      if (pendingFocus) {
-        pendingFocus = false;
-        focusFeedTitle();
-      }
-
-      const lastId = getLastPlayed(resolved.meta.id);
-      if (lastId) {
-        const idx = filteredEps.findIndex((e) => String(e.trackId) === lastId);
-        if (idx >= 0) loadEp(idx, false);
-      }
-    };
-
-    void (async () => {
-      downloadedIds = new Set((await listDownloads()).map((d) => d.id));
-
-      // Stale-while-revalidate: paint the cached copy instantly, then refresh.
-      const cached = await getCachedFeed(feedId);
-      if (cached && !signal.aborted) {
-        try {
-          applyResolved(cached.feed);
-        } catch {
-          /* unusable cache entry — skeleton stays until network */
-        }
-      }
-
-      try {
-        const resolved = await resolveFeed(req, {
-          signal,
-          ytVideoTitle: t('yt_video'),
-          playlistIds: ytPlaylistIds,
-        });
-        clearTimeout(timeout);
-        if (signal.aborted) return;
-        applyResolved(resolved);
-        void putCachedFeed(resolved);
-
-        // Embed fallback may leave title-less items — fill real titles in bg
-        if (feedIsYT && episodes.some((e) => e.ytId && !e.trackName)) {
-          void fillEmbedTitles(signal);
-        }
-      } catch (e) {
-        clearTimeout(timeout);
-        const err = e as Error;
-        if (err.name === 'AbortError') return;
-        if (painted) return; // cached list stays usable offline
-        showError(err.message || String(err), () => openFeed(req));
-      }
-    })();
-  }
-
-  /** Background-fill real titles via noembed (embed fallback items). */
-  async function fillEmbedTitles(signal: AbortSignal): Promise<void> {
-    const targets = episodes.filter((e) => e.ytId && !e.trackName);
-    if (!targets.length) return;
-    let i = 0;
-    let since = 0;
-    const reRender = () => {
-      if (feedIsYT && !signal.aborted) render();
-    };
-    const worker = async () => {
-      while (i < targets.length) {
-        if (signal.aborted) return;
-        const ep = targets[i++];
-        if (!ep) break;
-        try {
-          const r = await svcJson<{ title?: string }>(
-            'https://noembed.com/embed?url=https://www.youtube.com/watch?v=' +
-              encodeURIComponent(ep.ytId ?? ''),
-            signal,
-            8000,
-          );
-          if (r?.title) {
-            ep.trackName = r.title;
-            if (++since >= 6) {
-              since = 0;
-              reRender();
-            }
-          }
-        } catch {
-          /* title stays a fallback */
-        }
-      }
-    };
-    await Promise.all([worker(), worker(), worker(), worker()]);
-    reRender();
-  }
-
-  // ── playback ─────────────────────────────────────────────────────
-  function loadEp(idx: number, autoplay: boolean): void {
-    if (idx < 0 || idx >= filteredEps.length) return;
-    currentIndex = idx;
-    const ep = filteredEps[idx];
-    if (!ep) return;
-    const id = String(ep.trackId);
-    currentTrackId = id;
-    const src = ep.episodeUrl || '';
-
-    setPlayerIdle(false);
-    setNowTitle(ep.trackName || t('ep_fallback', idx + 1));
-    wave.build(id);
-    wave.setProgress(0);
-    elTCur.textContent = '0:00';
-    elTTot.textContent = '0:00';
-
-    if (feedIsYT) {
-      void ytResolveAndPlay(ep, id, autoplay);
-    } else {
-      void startAudioPreferOffline(src, id, autoplay);
-    }
-
-    setMediaMetadata({
-      title: ep.trackName || '',
-      artist: elPAuthor.textContent || '',
-      album: elPTitle.textContent || '',
-      artworkUrl: elPThumb.src || '',
-    });
-    nowPlaying.set({
-      title: ep.trackName || t('ep_fallback', idx + 1),
-      feedName: elPTitle.textContent || '',
-      art: ep.art || elPThumb.src || '',
-    });
-
-    elSpeedSel.value = String(settings().defaultSpeed);
-    updateNavButtons();
-    if (currentMeta) setLastPlayed(currentMeta.id, id);
-    render();
-  }
-
-  /** Play the downloaded copy when one exists, otherwise the stream URL. */
-  async function startAudioPreferOffline(src: string, id: string, autoplay: boolean): Promise<void> {
-    const local = downloadedIds.has(id) ? await offlineAudioUrl(id) : null;
-    if (currentTrackId !== id) {
-      if (local) URL.revokeObjectURL(local);
-      return; // user moved on during the cache lookup
-    }
-    startAudio(local ?? src, id, autoplay);
-  }
-
-  function startAudio(src: string, id: string, autoplay: boolean): void {
-    embedStop();
-    setUsingEmbed(false);
-    if (currentBlobUrl && currentBlobUrl !== src) {
-      URL.revokeObjectURL(currentBlobUrl);
-      currentBlobUrl = null;
-    }
-    if (src.startsWith('blob:')) currentBlobUrl = src;
-    audio.src = src;
-    audio.load();
-    const applyPrefs = () => {
-      const S = settings();
-      audio.playbackRate = S.defaultSpeed;
-      if (S.resumePos) {
-        const saved = getProgress(id);
-        if (saved > 5 && isFinite(audio.duration) && saved < audio.duration - 2) {
-          audio.currentTime = saved;
-        }
-      }
-      if (isFinite(audio.duration) && audio.duration) {
-        wave.setProgress((audio.currentTime / audio.duration) * 100);
-        elTCur.textContent = fmtTime(audio.currentTime);
-        elTTot.textContent = fmtTime(audio.duration);
-      }
-    };
-    if (audio.readyState >= 2) applyPrefs();
-    else audio.addEventListener('canplay', applyPrefs, { once: true });
-    if (autoplay) {
-      audio.play().catch(() => {
-        /* autoplay blocked */
-      });
-    }
-  }
-
-  async function ytResolveAndPlay(ep: Episode, id: string, autoplay: boolean): Promise<void> {
-    audio.pause();
-    // Downloaded copy wins — no network resolution needed.
-    if (downloadedIds.has(id)) {
-      const local = await offlineAudioUrl(id);
-      if (!feedIsYT || currentTrackId !== id) {
-        if (local) URL.revokeObjectURL(local);
-        return;
-      }
-      if (local) {
-        startAudio(local, id, autoplay);
-        setStatus('ok', okStatusText());
-        return;
-      }
-    }
-    setStatus('loading', t('status_loading'));
-    let url: string | null = null;
-    try {
-      url = await ytServiceAudioUrl(ep.ytId ?? '', loadAbort?.signal);
-    } catch {
-      url = null;
-    }
-    if (!feedIsYT || currentTrackId !== id) return; // user moved on
-    if (url) {
-      ep.episodeUrl = url; // real media URL → download works too
-      startAudio(url, id, autoplay);
-      setStatus('ok', okStatusText());
-    } else {
-      setUsingEmbed(true);
-      // The iframe can't keep playing on a locked phone — be upfront about it.
-      if (!embedNoticeShown) {
-        embedNoticeShown = true;
-        toast(t('yt_embed_bg'), 'info');
-      }
-      await embedLoadEp(ep, autoplay);
-    }
-  }
-
-  async function embedLoadEp(ep: Episode, autoplay: boolean): Promise<void> {
-    setStatus('loading', t('status_loading'));
-    try {
-      await ensureEmbed();
-    } catch {
-      setStatus('error', t('yt_embed_blocked'));
-      return;
-    }
-    if (!feedIsYT || currentTrackId !== String(ep.trackId)) return;
-    const S = settings();
-    const savedPos = S.resumePos && getProgress(String(ep.trackId)) > 5 ? getProgress(String(ep.trackId)) : 0;
-    const p = getEmbed();
-    if (!p) return;
-    try {
-      const opts = { videoId: ep.ytId ?? '', startSeconds: savedPos, suggestedQuality: 'small' };
-      if (autoplay) p.loadVideoById(opts);
-      else p.cueVideoById(opts);
-      try {
-        p.setPlaybackQuality('small');
-      } catch {
-        /* older API */
-      }
-      pbSetRate(S.defaultSpeed);
-    } catch {
-      setStatus('error', t('yt_embed_blocked'));
-      return;
-    }
-    setStatus('ok', okStatusText());
-  }
-
-  function togglePlay(): void {
-    if (!feedIsYT && !audio.src) return;
-    if (currentTrackId == null) return;
-    if (pbPaused()) pbPlay();
-    else pbPause();
-  }
-
-  function seekRel(s: number): void {
-    const dur = pbDuration();
-    if (!feedIsYT && !audio.src) return;
-    if (!Number.isFinite(dur) || !dur) return;
-    pbSeekTo(Math.max(0, Math.min(pbCurrent() + s, dur)));
-  }
-
-  function prevEp(): void {
-    if (currentIndex > 0) loadEp(currentIndex - 1, !pbPaused());
-  }
-  function nextEp(): void {
-    if (currentIndex >= 0 && currentIndex < filteredEps.length - 1) loadEp(currentIndex + 1, !pbPaused());
-  }
-
-  // ── sort & filter ────────────────────────────────────────────────
-  function toggleSort(): void {
-    sortAsc = !sortAsc;
-    episodes.reverse();
-    filteredEps.reverse();
-    if (currentTrackId != null) {
-      currentIndex = filteredEps.findIndex((e) => String(e.trackId) === currentTrackId);
-    }
-    elSortInfo.textContent = sortAsc ? t('sort_asc_label') : t('sort_desc_label');
-    updateNavButtons();
-    render();
-  }
-
-  let filterTimer: ReturnType<typeof setTimeout> | null = null;
-  function filterEps(): void {
-    if (filterTimer) clearTimeout(filterTimer);
-    filterTimer = setTimeout(() => {
-      const q = elFilterInput.value.trim().toLowerCase();
-      filteredEps = q
-        ? episodes.filter((e) => (e.trackName || '').toLowerCase().includes(q))
-        : episodes.slice();
-      currentIndex =
-        currentTrackId != null
-          ? filteredEps.findIndex((e) => String(e.trackId) === currentTrackId)
-          : -1;
-      updateNavButtons();
-      render();
-    }, 200);
-  }
-
-  // ── favorites / share ────────────────────────────────────────────
-  function updateFavBtn(): void {
-    elFavBtn.classList.toggle('faved', !!(currentMeta && isSubscribed(currentMeta.id)));
-  }
-  function share(): void {
-    if (!currentMeta) return;
-    const id = String(currentMeta.id);
-    const url =
-      location.origin +
-      location.pathname +
-      (id.startsWith('yt:')
-        ? '?yt=' + encodeURIComponent(currentMeta.yt || '')
-        : id.startsWith('rss:')
-          ? '?rss=' + encodeURIComponent(id.slice(4))
-          : '?podcast=' + encodeURIComponent(id));
-    if (navigator.share) {
-      navigator.share({ title: currentMeta.name || 'Podcast', url }).catch(() => {
-        /* user cancelled */
-      });
-      return;
-    }
-    navigator.clipboard
-      ?.writeText(url)
-      .then(() => flashStatus(t('link_copied')))
-      .catch(() => {
-        /* clipboard unavailable */
-      });
-  }
-
-  // ── queue ────────────────────────────────────────────────────────
-  function onQueueToggle(idx: number): void {
-    const ep = filteredEps[idx];
-    if (!ep) return;
-    const id = String(ep.trackId);
-    if (queuePosition(id)) {
-      removeFromQueue(id);
-    } else {
-      enqueue(id);
-      toast(t('queued'));
-    }
-    render();
-  }
-
-  // ── downloads ────────────────────────────────────────────────────
-  async function onDownload(idx: number, btn: HTMLButtonElement): Promise<void> {
-    const ep = filteredEps[idx];
-    if (!ep) return;
-    const id = String(ep.trackId);
-
-    // Second tap on a downloaded episode removes the offline copy.
-    if (downloadedIds.has(id)) {
-      await removeDownload(id);
-      downloadedIds.delete(id);
-      toast(t('dl_removed'));
-      render();
-      return;
-    }
-
-    btn.textContent = '⏳';
-    btn.disabled = true;
-    const outcome = await downloadOffline(ep, currentMeta?.id ?? '', feedIsYT);
-    if (outcome === 'ok') {
-      downloadedIds.add(id);
-      toast(t('dl_saved'));
-      render();
-      return;
-    }
-    if (outcome === 'no-url') {
-      toast(t('dl_not_found'), 'error');
-      render();
-      return;
-    }
-    // CORS-blocked CDN etc. → legacy browser file download still works.
-    const fb = await downloadEpisode(ep, feedIsYT);
-    toast(fb === 'ok' ? t('dl_fallback_file') : t('dl_not_found'), fb === 'ok' ? 'info' : 'error');
-    render();
-  }
-
-  // ── progress persistence + engine events ────────────────────────
-  function updateProgressUI(current: number, duration: number): void {
-    const pct = duration ? (current / duration) * 100 : 0;
-    if (!wave.isScrubbing()) wave.setProgress(pct);
-    elTCur.textContent = fmtTime(current);
-    elTTot.textContent = fmtTime(duration);
-    const ep = currentIndex >= 0 ? filteredEps[currentIndex] : undefined;
-    if (ep && current > 5) setProgress(String(ep.trackId), current);
-  }
-
-  onEngine((e) => {
-    switch (e.type) {
-      case 'play':
-        setPlayIcon(true);
-        elPlayer.classList.add('playing');
-        document.body.classList.add('is-playing');
-        // Fill title from embed video data when missing (single-video feeds)
-        if (isUsingEmbed()) {
-          try {
-            const ep = currentIndex >= 0 ? filteredEps[currentIndex] : undefined;
-            const d = getEmbed()?.getVideoData?.();
-            if (ep && !ep.trackName && d?.title) {
-              ep.trackName = d.title;
-              setNowTitle(d.title);
-              render();
-            }
-          } catch {
-            /* embed data unavailable */
-          }
-        }
-        break;
-      case 'pause':
-        setPlayIcon(false);
-        elPlayer.classList.remove('playing');
-        document.body.classList.remove('is-playing');
-        break;
-      case 'ended': {
-        // Queue wins over plain list order
-        const nextQueued = dequeueNext(currentTrackId ?? undefined);
-        if (nextQueued) {
-          const qi = filteredEps.findIndex((x) => String(x.trackId) === nextQueued);
-          if (qi >= 0) {
-            loadEp(qi, true);
-            break;
-          }
-        }
-        if (settings().autoNext && currentIndex < filteredEps.length - 1) {
-          loadEp(currentIndex + 1, true);
-        }
-        break;
-      }
-      case 'timeupdate':
-        updateProgressUI(e.current, e.duration);
-        break;
-      case 'error':
-        setStatus('error', t('audio_err'));
-        setPlayIcon(false);
-        elPlayer.classList.remove('playing');
-        document.body.classList.remove('is-playing');
-        break;
-    }
-  });
-  onEmbedStateChange(handleEmbedState);
-  onEmbedError(() => setStatus('error', t('yt_embed_blocked')));
-
-  // Also route ENDED from embed into auto-next via engine 'ended' (already
-  // emitted by handleEmbedState), and PLAYING fills titles via 'play' above.
-  void YT_STATE;
-
-  // ── event wiring (no inline handlers) ───────────────────────────
-  elEpList.addEventListener('click', (e) => {
-    const target = e.target as HTMLElement;
-    const actBtn = target.closest<HTMLButtonElement>('.ep-dl-btn');
-    if (actBtn) {
-      e.stopPropagation();
-      const idx = parseInt(actBtn.dataset.idx ?? '-1');
-      if (actBtn.dataset.act === 'queue') onQueueToggle(idx);
-      else void onDownload(idx, actBtn);
-      return;
-    }
-    const row = target.closest<HTMLElement>('.ep-item[data-idx]');
-    if (row) loadEp(parseInt(row.dataset.idx ?? '-1'), true);
-  });
-  elEpList.addEventListener('keydown', (e) => {
-    if (e.key !== 'Enter' && e.key !== ' ') return;
-    const row = (e.target as HTMLElement).closest<HTMLElement>('.ep-item[data-idx]');
-    if (row) {
-      e.preventDefault();
-      e.stopPropagation();
-      loadEp(parseInt(row.dataset.idx ?? '-1'), true);
-    }
-  });
-
-  elBtnPlay.addEventListener('click', togglePlay);
-  elBtnPrev.addEventListener('click', prevEp);
-  elBtnNext.addEventListener('click', nextEp);
-  elBtnSkipBack.addEventListener('click', () => seekRel(-settings().skipBack));
-  elBtnSkipFwd.addEventListener('click', () => seekRel(settings().skipForward));
-  elSortToggle.addEventListener('click', toggleSort);
-  elFilterInput.addEventListener('input', filterEps);
-  elFavBtn.addEventListener('click', () => {
-    if (!currentMeta) return;
-    if (isSubscribed(currentMeta.id)) {
-      // Unsubscribing loses the star + list placement — confirm first.
-      void confirmDialog('confirm_unsubscribe').then((ok) => {
-        if (ok && currentMeta) {
-          toggleSubscription(currentMeta);
-          updateFavBtn();
-        }
-      });
-    } else {
-      toggleSubscription(currentMeta);
-      updateFavBtn();
-    }
-  });
-  elShareBtn.addEventListener('click', share);
-  elBackBtn.addEventListener('click', () => deps.onBack());
-
-  elSpeedSel.addEventListener('change', () => {
-    const speed = parseFloat(elSpeedSel.value) || 1;
-    setSetting('defaultSpeed', speed);
-    pbSetRate(speed);
-  });
-  elSleepSel.addEventListener('change', () => {
-    const min = parseInt(elSleepSel.value) || 0;
-    elSleepSel.classList.toggle('active', min > 0);
-    if (min > 0) flashStatus(t('sleep_set', min));
-    setSleepTimer(min, () => {
-      elSleepSel.value = '0';
-      elSleepSel.classList.remove('active');
-      flashStatus(t('sleep_done'));
-    });
-  });
-
-  // Global keyboard shortcuts (player screen only)
-  document.addEventListener('keydown', (e) => {
-    const target = e.target as HTMLElement;
-    const tag = (target.tagName || '').toLowerCase();
-    if (tag === 'input' || tag === 'select' || tag === 'textarea' || target.isContentEditable) return;
-    if (!document.body.classList.contains('feed-open')) return;
-    switch (e.key) {
-      case ' ':
-        e.preventDefault();
-        togglePlay();
-        break;
-      case 'ArrowLeft':
-        e.preventDefault();
-        seekRel(-settings().skipBack);
-        break;
-      case 'ArrowRight':
-        e.preventDefault();
-        seekRel(settings().skipForward);
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        prevEp();
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        nextEp();
-        break;
-    }
-  });
-
-  // Language change → re-render list dates/durations + dynamic labels
-  currentLang.subscribe(() => {
-    if (elBtnPlay) setPlayIcon(!pbPaused() && currentTrackId != null);
-    elSortInfo.textContent = sortAsc ? t('sort_asc_label') : t('sort_desc_label');
-    if (currentTrackId == null) elNowTitle.textContent = t('pick_episode');
-    if (episodes.length) render();
-  });
-
-  // Settings change → skip labels + dl button visibility
-  settings.subscribe((S) => {
-    elLblSkipBack.textContent = String(S.skipBack);
-    elLblSkipFwd.textContent = String(S.skipForward);
-    if (episodes.length) render();
-  });
-
-  function hide(): void {
-    document.title = 'Seseri';
-    document.body.classList.remove('feed-open');
-    deps.onClosed();
-  }
-
-  function reset(): void {
-    audio.pause();
-    if (currentBlobUrl) {
-      audio.removeAttribute('src');
-      URL.revokeObjectURL(currentBlobUrl);
-      currentBlobUrl = null;
-    }
-    nowPlaying.set(null);
-    embedStop();
-    setUsingEmbed(false);
-    feedIsYT = false;
-    loadAbort?.abort();
-    episodes = [];
-    filteredEps = [];
-    currentIndex = -1;
-    currentTrackId = null;
-    currentMeta = null;
-    document.title = 'Seseri';
-    elNowTitle.textContent = t('pick_episode');
-    wave.setProgress(0);
-    elTCur.textContent = '0:00';
-    elTTot.textContent = '0:00';
-    setPlayIcon(false);
-    elFilterInput.value = '';
-    document.body.classList.remove('feed-open');
-    deps.onClosed();
-  }
-
-  // ── queue panel ──────────────────────────────────────────────────
-  const queuePanel = initQueuePanel({
-    titleFor(id) {
-      const i = episodes.findIndex((e) => String(e.trackId) === id);
-      const ep = episodes[i];
-      return ep ? ep.trackName || t('ep_fallback', i + 1) : '';
-    },
-  });
-
-  return {
-    openFeed,
-    hide: () => {
-      queuePanel.close();
-      hide();
-    },
-    reset: () => {
-      queuePanel.close();
-      reset();
-    },
-    isOpen: () => document.body.classList.contains('feed-open'),
-    el: screen,
-  };
-}
diff --git a/src/ui/screens/settings.ts b/src/ui/screens/settings.ts
deleted file mode 100644
index 8b6103c..0000000
--- a/src/ui/screens/settings.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-import { applyLang, isLangCode } from '../../i18n';
-import { clearAllDownloads, storageInfo } from '../../player/offline';
-import { clearProgress, saveProgressNow } from '../../storage/progress';
-import { local } from '../../storage/local';
-import { exportOpml, parseOpml } from '../../storage/opml';
-import { subscriptions, toggleSubscription, isSubscribed } from '../../storage/subscriptions';
-import { toast } from '../toast';
-import { confirmDialog } from '../confirm';
-import { settings, setSetting, type Settings, type SortDir, type ThemeName } from '../../state/settings';
-import { pbSetRate } from '../../player/engine';
-import { t } from '../../i18n';
-import { applyAccent, applyTheme } from '../theme';
-import { must } from '../shell';
-
-export interface SettingsPanel {
-  open(): void;
-  close(): void;
-  isOpen(): boolean;
-}
-
-export function initSettingsPanel(opts: { onDataCleared: () => void }): SettingsPanel {
-  const panel = must<HTMLDialogElement>('settingsPanel');
-
-  const sSpeed = must<HTMLSelectElement>('s_defaultSpeed');
-  const sSkipBack = must<HTMLSelectElement>('s_skipBack');
-  const sSkipFwd = must<HTMLSelectElement>('s_skipForward');
-  const sAutoNext = must<HTMLInputElement>('s_autoNext');
-  const sResume = must<HTMLInputElement>('s_resumePos');
-  const sFontSize = must<HTMLSelectElement>('s_fontSize');
-  const sRowHeight = must<HTMLSelectElement>('s_rowHeight');
-  const sTheme = must<HTMLSelectElement>('s_theme');
-  const sSort = must<HTMLSelectElement>('s_defaultSort');
-  const sShowDl = must<HTMLInputElement>('s_showDl');
-  const sLang = must<HTMLSelectElement>('s_lang');
-
-  function syncInputs(S: Settings): void {
-    sSpeed.value = String(S.defaultSpeed);
-    sSkipBack.value = String(S.skipBack);
-    sSkipFwd.value = String(S.skipForward);
-    sAutoNext.checked = S.autoNext;
-    sResume.checked = S.resumePos;
-    sFontSize.value = S.fontSize;
-    sRowHeight.value = S.rowHeight;
-    sTheme.value = S.theme;
-    sSort.value = S.defaultSort;
-    sShowDl.checked = S.showDl;
-    sLang.value = S.lang;
-    document.querySelectorAll<HTMLElement>('.s-color-swatch').forEach((sw) => {
-      sw.classList.toggle('active', sw.dataset.color === S.accentColor);
-    });
-  }
-
-  function applySide(S: Settings): void {
-    document.documentElement.style.setProperty('--player-font-size', S.fontSize);
-    document.documentElement.style.setProperty('--list-row-height', S.rowHeight);
-  }
-
-  function fmtBytes(n: number): string {
-    if (n >= 1e9) return (n / 1e9).toFixed(1) + ' GB';
-    if (n >= 1e6) return (n / 1e6).toFixed(1) + ' MB';
-    if (n >= 1e3) return (n / 1e3).toFixed(0) + ' KB';
-    return n + ' B';
-  }
-
-  async function refreshStorageUsage(): Promise<void> {
-    const el = must('storageUsage');
-    const info = await storageInfo();
-    el.textContent =
-      t('storage_usage', fmtBytes(info.usageBytes), fmtBytes(info.quotaBytes)) +
-      (info.downloadCount ? ` · ${info.downloadCount} ⤓ ${fmtBytes(info.downloadBytes)}` : '');
-  }
-
-  // Native <dialog>: modal focus trap + Esc for free; the slide animation is
-  // driven by the .open class, so close() waits for the transition to finish.
-  function open(): void {
-    if (panel.open) return;
-    syncInputs(settings());
-    panel.showModal();
-    requestAnimationFrame(() => panel.classList.add('open'));
-    document.body.classList.add('settings-open');
-    void refreshStorageUsage();
-  }
-  function close(): void {
-    if (!panel.open) return;
-    panel.classList.remove('open');
-    document.body.classList.remove('settings-open');
-    setTimeout(() => panel.close(), 440);
-  }
-
-  // ── wiring ───────────────────────────────────────────────────────
-  sSpeed.addEventListener('change', () => {
-    const v = parseFloat(sSpeed.value) || 1;
-    setSetting('defaultSpeed', v);
-    pbSetRate(v);
-  });
-  sSkipBack.addEventListener('change', () => setSetting('skipBack', parseInt(sSkipBack.value) || 15));
-  sSkipFwd.addEventListener('change', () => setSetting('skipForward', parseInt(sSkipFwd.value) || 30));
-  sAutoNext.addEventListener('change', () => setSetting('autoNext', sAutoNext.checked));
-  sResume.addEventListener('change', () => setSetting('resumePos', sResume.checked));
-  sFontSize.addEventListener('change', () => {
-    setSetting('fontSize', sFontSize.value);
-    applySide(settings());
-  });
-  sRowHeight.addEventListener('change', () => {
-    setSetting('rowHeight', sRowHeight.value);
-    applySide(settings());
-  });
-  sTheme.addEventListener('change', () => {
-    setSetting('theme', sTheme.value as ThemeName);
-    applyTheme(settings().theme);
-  });
-  sSort.addEventListener('change', () => setSetting('defaultSort', sSort.value as SortDir));
-  sShowDl.addEventListener('change', () => setSetting('showDl', sShowDl.checked));
-  sLang.addEventListener('change', () => {
-    if (isLangCode(sLang.value)) {
-      setSetting('lang', sLang.value);
-      applyLang(sLang.value);
-    }
-  });
-
-  const swatches = must('colorSwatches');
-  swatches.addEventListener('click', (e) => {
-    const sw = (e.target as HTMLElement).closest<HTMLElement>('.s-color-swatch');
-    if (!sw?.dataset.color) return;
-    document.querySelectorAll('.s-color-swatch').forEach((s) => s.classList.remove('active'));
-    sw.classList.add('active');
-    setSetting('accentColor', sw.dataset.color);
-    applyAccent(sw.dataset.color);
-  });
-  swatches.addEventListener('keydown', (e) => {
-    if (e.key !== 'Enter' && e.key !== ' ') return;
-    const sw = (e.target as HTMLElement).closest<HTMLElement>('.s-color-swatch');
-    if (sw) {
-      e.preventDefault();
-      sw.click();
-    }
-  });
-
-  // ── data section ─────────────────────────────────────────────────
-  function saveFile(name: string, mime: string, content: string): void {
-    const a = document.createElement('a');
-    a.href = URL.createObjectURL(new Blob([content], { type: mime }));
-    a.download = name;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    setTimeout(() => URL.revokeObjectURL(a.href), 5000);
-  }
-
-  must('btnOpmlExport').addEventListener('click', () => {
-    saveFile('seseri-subscriptions.opml', 'text/x-opml', exportOpml(subscriptions()));
-    toast(t('toast_opml_exported'));
-  });
-
-  const opmlFile = must<HTMLInputElement>('opmlFile');
-  must('btnOpmlImport').addEventListener('click', () => opmlFile.click());
-  opmlFile.addEventListener('change', () => {
-    const f = opmlFile.files?.[0];
-    opmlFile.value = '';
-    if (!f) return;
-    void f.text().then((xml) => {
-      try {
-        const entries = parseOpml(xml);
-        let added = 0;
-        for (const e of entries) {
-          if (!isSubscribed(e.id)) {
-            toggleSubscription({ id: e.id, name: e.name, artist: '', art: '' });
-            added++;
-          }
-        }
-        toast(t('opml_imported', added));
-      } catch {
-        toast(t('opml_invalid'), 'error');
-      }
-    });
-  });
-
-  must('btnJsonExport').addEventListener('click', () => {
-    const dump: Record<string, unknown> = { exportedAt: new Date().toISOString() };
-    for (const key of ['pp_settings', 'pp_favs', 'pp_prog']) {
-      dump[key] = local.get(key, null);
-    }
-    saveFile('seseri-backup.json', 'application/json', JSON.stringify(dump, null, 2));
-    toast(t('toast_json_exported'));
-  });
-
-  must('btnClearDownloads').addEventListener('click', () => {
-    void confirmDialog('confirm_clear_downloads').then((ok) => {
-      if (!ok) return;
-      void clearAllDownloads().then(() => {
-        toast(t('dl_removed'));
-        void refreshStorageUsage();
-      });
-    });
-  });
-
-  must('btnClearProgress').addEventListener('click', () => {
-    void confirmDialog('confirm_clear_progress').then((ok) => {
-      if (!ok) return;
-      clearProgress();
-      opts.onDataCleared();
-    });
-  });
-  must('btnClearAll').addEventListener('click', () => {
-    void confirmDialog('confirm_clear_all').then((ok) => {
-      if (!ok) return;
-      saveProgressNow();
-      local.clear();
-      location.reload();
-    });
-  });
-
-  must('settingsClose').addEventListener('click', close);
-  // Clicks on the ::backdrop land outside the panel's box
-  panel.addEventListener('click', (e) => {
-    const r = panel.getBoundingClientRect();
-    if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) {
-      close();
-    }
-  });
-  panel.addEventListener('cancel', (e) => {
-    e.preventDefault(); // Esc: run the animated close instead of snapping shut
-    close();
-  });
-
-  // First paint of side-effect settings
-  applySide(settings());
-
-  return { open, close, isOpen: () => panel.open };
-}
diff --git a/src/ui/shell.ts b/src/ui/shell.ts
index 83af2f2..7f91c99 100644
--- a/src/ui/shell.ts
+++ b/src/ui/shell.ts
@@ -1,350 +1,93 @@
 /**
- * Static app shell — ported verbatim from the legacy <body> with every inline
- * handler removed (events are wired in the screen controllers). This is
- * constant markup with no interpolated data, so innerHTML is safe here.
+ * Static app shell — the "Sinyal" frame: navigation (bottom tab bar on mobile,
+ * left sidebar on desktop), one <section> mount point per view, the persistent
+ * mini-player dock and the Now Playing sheet host. View modules render their
+ * own content into their section; this file owns only the frame.
+ *
+ * Constant markup with no interpolated data, so innerHTML is safe here.
+ * Fallback strings are Turkish (default lang); bindI18nDom localizes them.
  */
 
-const ICON_SPRITE = `
-<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
-  <symbol id="ic-star" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></symbol>
-  <symbol id="ic-share" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></symbol>
-  <symbol id="ic-settings" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></symbol>
-  <symbol id="ic-play" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4"/></symbol>
-  <symbol id="ic-pause" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></symbol>
-  <symbol id="ic-prev" viewBox="0 0 24 24"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></symbol>
-  <symbol id="ic-next" viewBox="0 0 24 24"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></symbol>
-  <symbol id="ic-rewind" viewBox="0 0 24 24"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></symbol>
-  <symbol id="ic-forward" viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></symbol>
-  <symbol id="ic-download" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></symbol>
-  <symbol id="ic-sort" viewBox="0 0 24 24"><polyline points="21 16 17 20 13 16"/><line x1="17" y1="20" x2="17" y2="4"/><polyline points="3 8 7 4 11 8"/><line x1="7" y1="4" x2="7" y2="20"/></symbol>
-  <symbol id="ic-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></symbol>
-  <symbol id="ic-arrow-right" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></symbol>
-  <symbol id="ic-back" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></symbol>
-  <symbol id="ic-queue" viewBox="0 0 24 24"><line x1="3" y1="6" x2="13" y2="6"/><line x1="3" y1="12" x2="13" y2="12"/><line x1="3" y1="18" x2="9" y2="18"/><line x1="18" y1="9" x2="18" y2="15"/><line x1="15" y1="12" x2="21" y2="12"/></symbol>
-  <symbol id="ic-up" viewBox="0 0 24 24"><polyline points="6 14 12 8 18 14"/></symbol>
-  <symbol id="ic-down" viewBox="0 0 24 24"><polyline points="6 10 12 16 18 10"/></symbol>
-  <symbol id="ic-x" viewBox="0 0 24 24"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></symbol>
-</svg>`;
+import { ICON_SPRITE, BRAND_MARK } from './icons';
 
-const LANG_OPTIONS = `
-      <option value="tr">🇹🇷 TR</option>
-      <option value="en">🇬🇧 EN</option>
-      <option value="de">🇩🇪 DE</option>
-      <option value="fr">🇫🇷 FR</option>
-      <option value="es">🇪🇸 ES</option>
-      <option value="ar">🇸🇦 AR</option>
-      <option value="ja">🇯🇵 JA</option>
-      <option value="ru">🇷🇺 RU</option>`;
-
-const SEARCH_SCREEN = `
-<div id="searchScreen">
-  <div class="search-screen-topbar">
-    <select class="lang-select" id="homeLangSel" aria-label="Dil seçimi" data-i18n-aria="lang_select_label">${LANG_OPTIONS}
-    </select>
-  </div>
-
-  <div class="brand">
-    <div class="brand-logo" aria-hidden="true">
-      <svg viewBox="0 0 512 512">
-        <path class="s-mark" pathLength="100"
-          d="M 334 184 A 78 78 0 1 0 256 262 A 78 78 0 1 1 178 340"
-          fill="none" stroke="currentColor" stroke-width="60" stroke-linecap="round"/>
-      </svg>
-    </div>
-    <h1 class="brand-name" aria-label="Seseri">Seseri</h1>
-  </div>
-
-  <div class="search-wrap">
-    <div class="search-row">
-      <input class="search-input" id="searchInput" type="text"
-        placeholder="Podcast adı, Apple Podcasts veya YouTube linki..." data-i18n-ph="search_placeholder" />
-      <button class="search-btn" id="searchBtn" data-i18n="btn_search">Ara →</button>
-    </div>
-  </div>
-
-  <div class="results-list" id="resultsList" aria-live="polite"></div>
-</div>`;
-
-const PLAYER_SCREEN = `
-<div id="playerScreen">
-  <div class="p-header">
-    <button class="p-back" id="backBtn" data-i18n="btn_back">← Geri</button>
-    <img class="p-thumb" id="pThumb" alt="" loading="lazy" decoding="async">
-    <div class="p-meta">
-      <div class="p-title" id="pTitle" tabindex="-1">—</div>
-      <div class="p-author" id="pAuthor">—</div>
-    </div>
-    <div class="p-epcount"><strong id="pEpCount">—</strong><span id="pEpUnit" data-i18n="ep_count_unit">bölüm</span></div>
-    <button class="settings-btn" id="favBtn" data-i18n-title="fav_btn" data-i18n-aria="fav_btn" title="Abonelik ekle/çıkar" aria-label="Abonelik"><svg class="icon" aria-hidden="true"><use href="#ic-star"/></svg></button>
-    <button class="settings-btn" id="shareBtn" data-i18n-title="share_btn" data-i18n-aria="share_btn" title="Linki paylaş" aria-label="Paylaş"><svg class="icon" aria-hidden="true"><use href="#ic-share"/></svg></button>
-    <button class="settings-btn" id="settingsBtn" data-i18n-title="settings_title" data-i18n-aria="settings_title" title="Ayarlar" aria-label="Ayarlar"><svg class="icon" aria-hidden="true"><use href="#ic-settings"/></svg></button>
-  </div>
-
-  <div class="p-status" aria-live="polite">
-    <div class="dot loading" id="dot"></div>
-    <span class="p-status-text" id="statusText" data-i18n="status_loading">Yükleniyor...</span>
+const NAV = `
+<nav class="app-nav" id="appNav" aria-label="Seseri">
+  <div class="nav-brand">
+    <span class="nav-brand-logo" aria-hidden="true">${BRAND_MARK}</span>
+    <span class="nav-brand-name wm">Seseri</span>
   </div>
+  <ul class="nav-items">
+    <li><button class="nav-item" id="navHome" data-view="home" aria-current="page">
+      <svg class="icon" aria-hidden="true"><use href="#ic-home"/></svg>
+      <span data-i18n="nav_home">Ana Sayfa</span>
+      <span class="nav-dot" aria-hidden="true"></span>
+    </button></li>
+    <li><button class="nav-item" id="navSearch" data-view="search">
+      <svg class="icon" aria-hidden="true"><use href="#ic-search"/></svg>
+      <span data-i18n="nav_search">Ara</span>
+      <span class="nav-dot" aria-hidden="true"></span>
+    </button></li>
+    <li><button class="nav-item" id="navLibrary" data-view="library">
+      <svg class="icon" aria-hidden="true"><use href="#ic-library"/></svg>
+      <span data-i18n="nav_library">Kütüphane</span>
+      <span class="nav-dot" aria-hidden="true"></span>
+    </button></li>
+    <li class="nav-spring" aria-hidden="true"></li>
+    <li><button class="nav-item" id="navSettings" data-view="settings">
+      <svg class="icon" aria-hidden="true"><use href="#ic-settings"/></svg>
+      <span data-i18n="nav_settings">Ayarlar</span>
+      <span class="nav-dot" aria-hidden="true"></span>
+    </button></li>
+  </ul>
+</nav>`;
+
+const MAIN = `
+<main class="app-main" id="appMain">
+  <section class="view" id="view-home" hidden tabindex="-1" data-i18n-aria="nav_home" aria-label="Ana Sayfa"></section>
+  <section class="view" id="view-search" hidden tabindex="-1" data-i18n-aria="nav_search" aria-label="Ara"></section>
+  <section class="view" id="view-library" hidden tabindex="-1" data-i18n-aria="nav_library" aria-label="Kütüphane"></section>
+  <section class="view" id="view-podcast" hidden tabindex="-1"></section>
+  <section class="view" id="view-queue" hidden tabindex="-1" data-i18n-aria="queue_title" aria-label="Çalma kuyruğu"></section>
+  <section class="view" id="view-settings" hidden tabindex="-1" data-i18n-aria="nav_settings" aria-label="Ayarlar"></section>
+</main>`;
 
-  <div class="p-player" id="pPlayer">
-    <div class="p-now-head">
-      <span class="now-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
-      <div class="p-now-label" data-i18n="now_playing">ŞU AN ÇALIYOR</div>
-    </div>
-    <div class="p-now-title" id="nowTitle" data-i18n="pick_episode">Bir bölüm seçin</div>
-    <div class="yt-frame" id="ytFrame"><div id="ytHost"></div></div>
-    <div class="wave" id="progressWrap" role="slider" tabindex="0"
-         aria-label="Konum" data-i18n-aria="seek_label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
-      <div class="wave-layer wave-base" id="waveBase"></div>
-      <div class="wave-layer wave-fill" id="waveFill"></div>
-      <div class="wave-head" id="waveHead"></div>
-      <div class="wave-tip" id="waveTip">0:00</div>
-    </div>
-    <div class="time-row">
-      <span id="tCur">0:00</span>
-      <span id="tTot">0:00</span>
-    </div>
-    <div class="controls">
-      <button class="ctrl-btn" id="btnPrev" disabled><svg class="icon" aria-hidden="true"><use href="#ic-prev"/></svg> <span data-i18n="btn_prev">Önceki</span></button>
-      <button class="ctrl-btn ctrl-skip" id="btnSkipBack"><svg class="icon" aria-hidden="true"><use href="#ic-rewind"/></svg> <span id="lblSkipBack">15</span></button>
-      <button class="play-btn" id="btnPlay" aria-label="Oynat"><svg class="icon icon-fill" aria-hidden="true"><use href="#ic-play"/></svg></button>
-      <button class="ctrl-btn ctrl-skip" id="btnSkipFwd"><svg class="icon" aria-hidden="true"><use href="#ic-forward"/></svg> <span id="lblSkipFwd">30</span></button>
-      <button class="ctrl-btn" id="btnNext" disabled><span data-i18n="btn_next">Sonraki</span> <svg class="icon" aria-hidden="true"><use href="#ic-next"/></svg></button>
-      <span class="spacer"></span>
-      <span class="sel-wrap sleep-wrap">
-        <svg class="icon sel-ic" aria-hidden="true"><use href="#ic-moon"/></svg>
-        <select class="seri-select sleep-select" id="sleepSel" data-i18n-title="sleep_timer" data-i18n-aria="sleep_timer" title="Uyku zamanlayıcısı (dk)">
-          <option value="0" selected>—</option>
-          <option value="15">15</option>
-          <option value="30">30</option>
-          <option value="60">60</option>
-        </select>
-      </span>
-      <span class="sel-wrap">
-        <select class="seri-select speed-select" id="speedSel" data-i18n-title="speed_label" data-i18n-aria="speed_label" title="Hız" aria-label="Hız">
-          <option value="0.5">0.5×</option>
-          <option value="0.75">0.75×</option>
-          <option value="1" selected>1×</option>
-          <option value="1.25">1.25×</option>
-          <option value="1.5">1.5×</option>
-          <option value="1.75">1.75×</option>
-          <option value="2">2×</option>
-          <option value="2.5">2.5×</option>
-        </select>
-      </span>
-    </div>
+const MINI_PLAYER = `
+<div class="mini-player" id="miniPlayer">
+  <div class="mini-signal" id="miniSignal" aria-hidden="true"></div>
+  <div class="mini-progress-track" id="miniScrub" role="slider" tabindex="0"
+       data-i18n-aria="seek_label" aria-label="Konum" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+    <div class="mini-progress" id="miniProgress"></div>
   </div>
-
-  <div class="sort-bar">
-    <div class="sort-left">
-      <button class="sort-toggle" id="sortToggle"><svg class="icon" aria-hidden="true"><use href="#ic-sort"/></svg> <span data-i18n="btn_sort">Sıra</span></button>
-      <span class="sort-info" id="sortInfo" data-i18n="sort_asc">Eskiden → Yeniye</span>
-      <button class="sort-toggle queue-toggle" id="queueToggle" aria-expanded="false"
-        title="Kuyruk" data-i18n-title="queue_title" data-i18n-aria="queue_title" aria-label="Kuyruk"
-        ><svg class="icon" aria-hidden="true"><use href="#ic-queue"/></svg><span class="queue-count" id="queueCount" hidden></span></button>
+  <div class="mini-main" id="miniMain" role="button" tabindex="0" data-i18n-aria="np_open" aria-label="Oynatıcıyı aç">
+    <img class="mini-art" id="miniArt" alt="" loading="lazy" decoding="async">
+    <div class="mini-info">
+      <div class="mini-title" id="miniTitle">—</div>
+      <div class="mini-feed" id="miniFeed"></div>
     </div>
-    <input class="search-filter" id="filterInput" type="text"
-      placeholder="Bölüm ara..." data-i18n-ph="filter_placeholder" />
   </div>
-
-  <div class="ep-list" id="epList">
-    <div class="empty-state" data-i18n="loading_eps">Yükleniyor...</div>
+  <div class="mini-controls">
+    <button class="icon-btn mini-tp mini-wide" id="miniPrev" data-i18n-aria="btn_prev" aria-label="Önceki" disabled><svg class="icon" aria-hidden="true"><use href="#ic-prev"/></svg></button>
+    <button class="icon-btn mini-tp mini-skip" id="miniBack" data-i18n-aria="s_skip_back" aria-label="Geri Atla"><svg class="icon" aria-hidden="true"><use href="#ic-rewind"/></svg><span class="mini-skip-n" id="miniLblBack">15</span></button>
+    <button class="mini-play" id="miniPlay" data-i18n-aria="play" aria-label="Oynat"><svg class="icon icon-fill" aria-hidden="true"><use href="#ic-play"/></svg></button>
+    <button class="icon-btn mini-tp mini-skip" id="miniFwd" data-i18n-aria="s_skip_fwd" aria-label="İleri Atla"><svg class="icon" aria-hidden="true"><use href="#ic-forward"/></svg><span class="mini-skip-n" id="miniLblFwd">30</span></button>
+    <button class="icon-btn mini-tp mini-wide" id="miniNext" data-i18n-aria="btn_next" aria-label="Sonraki" disabled><svg class="icon" aria-hidden="true"><use href="#ic-next"/></svg></button>
   </div>
-</div>`;
-
-const MINI_PLAYER = `
-<div class="mini-player" id="miniPlayer" role="button" tabindex="0" data-i18n-aria="now_playing" aria-label="Şu an çalıyor">
-  <div class="mini-progress-track"><div class="mini-progress" id="miniProgress"></div></div>
-  <img class="mini-art" id="miniArt" alt="" loading="lazy" decoding="async">
-  <div class="mini-info">
-    <div class="mini-title" id="miniTitle">—</div>
-    <div class="mini-feed" id="miniFeed"></div>
+  <div class="mini-secondary">
+    <span class="mini-sec-ctl mini-wide2">
+      <svg class="icon" aria-hidden="true"><use href="#ic-moon"/></svg>
+      <select class="seri-select mini-sel" id="miniSleep" data-i18n-aria="sleep_timer" aria-label="Uyku zamanlayıcısı (dk)"></select>
+    </span>
+    <select class="seri-select mini-sel mini-speed mini-wide2" id="miniSpeed" data-i18n-aria="speed_label" aria-label="Oynatma hızı"></select>
+    <button class="icon-btn mini-tp mini-expand" id="miniExpand" data-i18n-aria="np_open" aria-label="Oynatıcıyı aç"><svg class="icon" aria-hidden="true"><use href="#ic-up"/></svg></button>
   </div>
-  <button class="mini-play" id="miniPlay" aria-label="Oynat"><svg class="icon icon-fill" aria-hidden="true"><use href="#ic-play"/></svg></button>
 </div>`;
 
-const SETTINGS_PANEL = `
-<dialog class="settings-panel" id="settingsPanel" aria-labelledby="settingsTitle">
-  <div class="settings-header">
-    <span class="settings-title"><svg class="icon" aria-hidden="true"><use href="#ic-settings"/></svg> <span id="settingsTitle" data-i18n="settings_heading">Ayarlar</span></span>
-    <button class="settings-close" id="settingsClose" data-i18n-aria="close" aria-label="Kapat">×</button>
-  </div>
-  <div class="settings-body">
-
-    <div>
-      <div class="s-section-title" data-i18n="s_playback">Oynatma</div>
-
-      <div class="s-row">
-        <div>
-          <div class="s-label" data-i18n="s_default_speed">Varsayılan Hız</div>
-          <div class="s-sublabel" data-i18n="s_speed_sub">Bölümler arası korunur</div>
-        </div>
-        <select class="s-select" id="s_defaultSpeed">
-          <option value="0.5">0.5×</option>
-          <option value="0.75">0.75×</option>
-          <option value="1" selected>1×</option>
-          <option value="1.25">1.25×</option>
-          <option value="1.5">1.5×</option>
-          <option value="1.75">1.75×</option>
-          <option value="2">2×</option>
-          <option value="2.5">2.5×</option>
-        </select>
-      </div>
-
-      <div class="s-row">
-        <div><div class="s-label" data-i18n="s_skip_back">Geri Atla (saniye)</div></div>
-        <select class="s-select" id="s_skipBack">
-          <option value="5">5s</option>
-          <option value="10">10s</option>
-          <option value="15" selected>15s</option>
-          <option value="30">30s</option>
-          <option value="60">60s</option>
-        </select>
-      </div>
-
-      <div class="s-row">
-        <div><div class="s-label" data-i18n="s_skip_fwd">İleri Atla (saniye)</div></div>
-        <select class="s-select" id="s_skipForward">
-          <option value="10">10s</option>
-          <option value="15">15s</option>
-          <option value="30" selected>30s</option>
-          <option value="45">45s</option>
-          <option value="60">60s</option>
-          <option value="90">90s</option>
-        </select>
-      </div>
-
-      <div class="s-row">
-        <div><div class="s-label" data-i18n="s_auto_next">Otomatik Sonraki Bölüm</div></div>
-        <label class="s-toggle">
-          <input type="checkbox" id="s_autoNext" checked>
-          <span class="s-toggle-track"></span>
-        </label>
-      </div>
-
-      <div class="s-row">
-        <div><div class="s-label" data-i18n="s_resume">Kaldığım Yerden Devam</div></div>
-        <label class="s-toggle">
-          <input type="checkbox" id="s_resumePos" checked>
-          <span class="s-toggle-track"></span>
-        </label>
-      </div>
-    </div>
-
-    <hr class="s-divider">
-
-    <div>
-      <div class="s-section-title" data-i18n="s_appearance">Görünüm</div>
-
-      <div class="s-row">
-        <div><div class="s-label" data-i18n="s_accent">Vurgu Rengi</div></div>
-      </div>
-      <div class="s-color-row" id="colorSwatches">
-        <div class="s-color-swatch active" style="background:#8b7cf6" data-color="#8b7cf6" role="button" tabindex="0" aria-label="Violet"></div>
-        <div class="s-color-swatch" style="background:#5b8af5" data-color="#5b8af5" role="button" tabindex="0" aria-label="Blue"></div>
-        <div class="s-color-swatch" style="background:#43d49a" data-color="#43d49a" role="button" tabindex="0" aria-label="Green"></div>
-        <div class="s-color-swatch" style="background:#f06a6a" data-color="#f06a6a" role="button" tabindex="0" aria-label="Red"></div>
-        <div class="s-color-swatch" style="background:#e6bb4f" data-color="#e6bb4f" role="button" tabindex="0" aria-label="Amber"></div>
-        <div class="s-color-swatch" style="background:#f5845b" data-color="#f5845b" role="button" tabindex="0" aria-label="Coral"></div>
-        <div class="s-color-swatch" style="background:#34d8e0" data-color="#34d8e0" role="button" tabindex="0" aria-label="Cyan"></div>
-      </div>
-
-      <div style="margin-top:16px">
-        <div class="s-row">
-          <div><div class="s-label" data-i18n="s_font_size">Yazı Boyutu</div></div>
-          <select class="s-select" id="s_fontSize">
-            <option value="11px" data-i18n="size_small">Küçük</option>
-            <option value="13px" selected data-i18n="size_normal">Normal</option>
-            <option value="15px" data-i18n="size_large">Büyük</option>
-            <option value="17px" data-i18n="size_xlarge">Çok Büyük</option>
-          </select>
-        </div>
-
-        <div class="s-row">
-          <div><div class="s-label" data-i18n="s_row_height">Liste Satır Yüksekliği</div></div>
-          <select class="s-select" id="s_rowHeight">
-            <option value="42px" data-i18n="row_compact">Sıkı</option>
-            <option value="54px" selected data-i18n="size_normal">Normal</option>
-            <option value="66px" data-i18n="row_spacious">Geniş</option>
-          </select>
-        </div>
-
-        <div class="s-row">
-          <div><div class="s-label" data-i18n="s_theme_label">Karanlık / Açık Tema</div></div>
-          <select class="s-select" id="s_theme">
-            <option value="auto" selected data-i18n="theme_auto">Otomatik (sistem)</option>
-            <option value="dark" data-i18n="theme_dark">Karanlık</option>
-            <option value="light" data-i18n="theme_light">Açık</option>
-            <option value="oled" data-i18n="theme_oled">OLED Siyah</option>
-          </select>
-        </div>
-      </div>
-    </div>
-
-    <hr class="s-divider">
-
-    <div>
-      <div class="s-section-title" data-i18n="s_list">Liste</div>
-
-      <div class="s-row">
-        <div><div class="s-label" data-i18n="s_default_sort">Varsayılan Sıralama</div></div>
-        <select class="s-select" id="s_defaultSort">
-          <option value="asc" selected data-i18n="sort_asc">Eskiden → Yeniye</option>
-          <option value="desc" data-i18n="sort_desc">Yeniden → Eskiye</option>
-        </select>
-      </div>
-
-      <div class="s-row">
-        <div><div class="s-label" data-i18n="s_show_dl">İndirme Butonu Göster</div></div>
-        <label class="s-toggle">
-          <input type="checkbox" id="s_showDl" checked>
-          <span class="s-toggle-track"></span>
-        </label>
-      </div>
-    </div>
-
-    <hr class="s-divider">
-
-    <div>
-      <div class="s-section-title" data-i18n="s_lang_title">Dil / Language</div>
-      <div class="s-row">
-        <div><div class="s-label" data-i18n="s_lang_label">Arayüz Dili</div></div>
-        <select class="s-select" id="s_lang">
-          <option value="tr">🇹🇷 Türkçe</option>
-          <option value="en">🇬🇧 English</option>
-          <option value="de">🇩🇪 Deutsch</option>
-          <option value="fr">🇫🇷 Français</option>
-          <option value="es">🇪🇸 Español</option>
-          <option value="ar">🇸🇦 العربية</option>
-          <option value="ja">🇯🇵 日本語</option>
-          <option value="ru">🇷🇺 Русский</option>
-        </select>
-      </div>
-    </div>
-
-    <hr class="s-divider">
-
-    <div>
-      <div class="s-section-title" data-i18n="s_data">Veri</div>
-      <div class="s-row">
-        <div><div class="s-label" data-i18n="s_storage">Depolama</div></div>
-        <span class="s-sublabel" id="storageUsage">—</span>
-      </div>
-      <div style="display:flex;flex-direction:column;gap:8px">
-        <button class="s-btn" id="btnOpmlExport" data-i18n="btn_opml_export">OPML Dışa Aktar</button>
-        <button class="s-btn" id="btnOpmlImport" data-i18n="btn_opml_import">OPML İçe Aktar</button>
-        <button class="s-btn" id="btnJsonExport" data-i18n="btn_json_export">JSON Yedeği İndir</button>
-        <button class="s-btn danger" id="btnClearDownloads" data-i18n="btn_clear_downloads">🗑 İndirilenleri Sil</button>
-        <button class="s-btn danger" id="btnClearProgress" data-i18n="btn_clear_progress">🗑 Tüm İlerlemeyi Sıfırla</button>
-        <button class="s-btn danger" id="btnClearAll" data-i18n="btn_clear_all">🗑 Tüm Verileri Temizle</button>
-        <input type="file" id="opmlFile" accept=".opml,.xml,text/xml,application/xml" hidden>
-      </div>
-    </div>
-
-  </div>
-</dialog>`;
+const NP_SHEET = `
+<div class="np-sheet" id="npSheet" hidden role="dialog" aria-modal="false" data-i18n-aria="now_playing" aria-label="Şu an çalıyor"></div>`;
 
 export function renderShell(app: HTMLElement): void {
-  app.innerHTML = ICON_SPRITE + SEARCH_SCREEN + PLAYER_SCREEN + MINI_PLAYER + SETTINGS_PANEL;
+  app.innerHTML =
+    ICON_SPRITE + '<div class="app-frame">' + NAV + MAIN + '</div>' + MINI_PLAYER + NP_SHEET;
 }
 
 /** getElementById that must succeed (shell markup is static). */
diff --git a/src/ui/theme.ts b/src/ui/theme.ts
index 25301fd..4498efe 100644
--- a/src/ui/theme.ts
+++ b/src/ui/theme.ts
@@ -3,17 +3,50 @@ import { settings } from '../state/settings';
 
 type ResolvedTheme = Exclude<ThemeName, 'auto'>;
 
+/** "Sinyal" surfaces — dark values MUST equal the tokens.css :root defaults
+ *  (theme.test.ts guards the parity so there is no pre-hydration flash). */
 const THEME_VALUES: Record<ResolvedTheme, string[]> = {
   //       --bg       --bg2      --surface  --surface2 --border   --border2  --text     --text2    --text3
-  dark: ['#0b0c11', '#101117', '#15161e', '#1c1e28', '#23252f', '#30333f', '#edeff7', '#9aa0b8', '#5d6280'],
-  oled: ['#000000', '#08080a', '#0e0e12', '#16161c', '#202027', '#2c2c36', '#f2f2f6', '#8a8a99', '#46465a'],
-  // --text3 #62687c: ≥4.5:1 on --bg/--surface (WCAG AA for the small mono labels)
-  light: ['#f4f5f8', '#ecedf2', '#ffffff', '#f7f8fb', '#e7e9f0', '#d3d7e1', '#14161d', '#4c5165', '#62687c'],
+  // "Kor" — ember charcoal. Text ramp tuned for readability: --text2 ~10:1,
+  // --text3 ~5.7:1 on --bg (small mono labels stay comfortably above AA).
+  dark: ['#171310', '#1e1915', '#262019', '#302822', '#3e342a', '#4e4234', '#f6f1e7', '#cabfae', '#9a8d76'],
+  // "Gece" — true black, same warm ramp lifted for OLED (text3 ~6.4:1).
+  oled: ['#000000', '#0d0b09', '#171310', '#211b15', '#2e261e', '#3f3529', '#f8f3e9', '#c6bbaa', '#998c74'],
+  // --text3 #6b6150: ≥4.5:1 on --bg/--surface (WCAG AA for the small mono labels)
+  light: ['#f6f4f0', '#edeae4', '#ffffff', '#faf8f4', '#e5e0d6', '#d2cabc', '#1d1914', '#59503f', '#6b6150'],
 };
 const THEME_KEYS = [
   '--bg', '--bg2', '--surface', '--surface2', '--border', '--border2', '--text', '--text2', '--text3',
 ];
 
+/** The user-pickable accent set — amber "dial glow" is the identity default. */
+export const ACCENT_SWATCHES: ReadonlyArray<{ hex: string; name: string }> = [
+  { hex: '#f2a33c', name: 'Amber' },
+  { hex: '#e07a4f', name: 'Copper' },
+  { hex: '#e0584f', name: 'Signal Red' },
+  { hex: '#58b283', name: 'Moss' },
+  { hex: '#3fa8a0', name: 'Teal' },
+  { hex: '#5c8fd6', name: 'Sky' },
+  { hex: '#a98fd6', name: 'Lilac' },
+];
+
+/** Pre-4.0 saved accents → their nearest Sinyal equivalent (UI-only remap, so
+ *  the frozen settings storage keeps its legacy value untouched). */
+const LEGACY_ACCENT_MAP: Record<string, string> = {
+  '#8b7cf6': '#f2a33c', // violet (old default) → amber (new default)
+  '#5b8af5': '#5c8fd6', // blue → sky
+  '#43d49a': '#58b283', // green → moss
+  '#f06a6a': '#e0584f', // red → signal red
+  '#e6bb4f': '#f2a33c', // amber → amber
+  '#f5845b': '#e07a4f', // coral → copper
+  '#34d8e0': '#3fa8a0', // cyan → teal
+};
+
+/** Resolve a stored accent (possibly pre-4.0) to the hex actually painted. */
+export function normalizeAccent(stored: string): string {
+  return LEGACY_ACCENT_MAP[stored.toLowerCase()] ?? stored;
+}
+
 const prefersLight =
   typeof matchMedia === 'function' ? matchMedia('(prefers-color-scheme: light)') : null;
 
@@ -42,7 +75,8 @@ export function applyTheme(theme: ThemeName): void {
   applyAccent(settings().accentColor);
 }
 
-export function applyAccent(c: string): void {
+export function applyAccent(stored: string): void {
+  const c = normalizeAccent(stored);
   const r = parseInt(c.slice(1, 3), 16);
   const g = parseInt(c.slice(3, 5), 16);
   const b = parseInt(c.slice(5, 7), 16);
@@ -66,7 +100,7 @@ export function applyAccent(c: string): void {
     '--accent-soft',
     `rgba(${r},${g},${b},${resolveTheme(settings().theme) === 'light' ? 0.14 : 0.1})`,
   );
-  // Black text on light/yellow-ish accents, white otherwise (WCAG-ish luma)
+  // Warm ink on light/amber-ish accents, white otherwise (WCAG-ish luma)
   const luma = 0.299 * r + 0.587 * g + 0.114 * b;
-  root.style.setProperty('--accent-text', luma > 170 ? '#15171f' : '#ffffff');
+  root.style.setProperty('--accent-text', luma > 170 ? '#1a1510' : '#ffffff');
 }
diff --git a/src/ui/views.ts b/src/ui/views.ts
new file mode 100644
index 0000000..85c251a
--- /dev/null
+++ b/src/ui/views.ts
@@ -0,0 +1,82 @@
+/**
+ * View registry — one shell, class/hidden-switched views. Each view module
+ * registers itself once; showView() handles visibility, the enter animation,
+ * body state classes and keyboard-focus hand-off.
+ */
+
+import { must } from './shell';
+
+export type ViewName = 'home' | 'search' | 'library' | 'podcast' | 'queue' | 'settings';
+
+export interface View {
+  name: ViewName;
+  /** The static `#view-…` section this view rendered itself into. */
+  el: HTMLElement;
+  /** Called after the view becomes visible. */
+  onShow?(): void;
+  /** Called before the view is hidden. */
+  onHide?(): void;
+  /** Preferred keyboard landing point when navigation moves focus. */
+  focusTarget?(): HTMLElement | null;
+}
+
+const views = new Map<ViewName, View>();
+const changeListeners = new Set<(name: ViewName) => void>();
+let current: ViewName | null = null;
+
+export function viewEl(name: ViewName): HTMLElement {
+  return must('view-' + name);
+}
+
+export function registerView(view: View): void {
+  views.set(view.name, view);
+}
+
+export function currentView(): ViewName | null {
+  return current;
+}
+
+/** Subscribe to view changes (nav active state, analytics-free). */
+export function onViewChange(fn: (name: ViewName) => void): () => void {
+  changeListeners.add(fn);
+  return () => changeListeners.delete(fn);
+}
+
+export interface ShowOptions {
+  /** Move keyboard focus into the view (default true — pass false on cold deep links). */
+  focus?: boolean;
+}
+
+export function showView(name: ViewName, opts: ShowOptions = {}): void {
+  const next = views.get(name);
+  if (!next) throw new Error(`view "${name}" not registered`);
+  if (current === name) {
+    next.onShow?.();
+    return;
+  }
+  const prev = current ? views.get(current) : null;
+  if (prev) {
+    prev.onHide?.();
+    prev.el.hidden = true;
+  }
+  current = name;
+
+  // Body state: views style against data-view; feed-open keeps the legacy
+  // playback-shortcut / layout contract for the podcast view.
+  document.body.dataset.view = name;
+  document.body.classList.toggle('feed-open', name === 'podcast');
+
+  next.el.hidden = false;
+  next.el.classList.remove('view-enter');
+  void next.el.offsetWidth; // restart the enter animation
+  next.el.classList.add('view-enter');
+  next.el.scrollTop = 0;
+  next.onShow?.();
+
+  if (opts.focus !== false) {
+    const target = next.focusTarget?.() ?? next.el;
+    target.focus({ preventScroll: true });
+  }
+
+  for (const fn of [...changeListeners]) fn(name);
+}
diff --git a/src/ui/views/home.ts b/src/ui/views/home.ts
new file mode 100644
index 0000000..118694b
--- /dev/null
+++ b/src/ui/views/home.ts
@@ -0,0 +1,185 @@
+/**
+ * Home view — compact brand header, a "Devam Et" (continue-listening) rail and
+ * a "Aboneliklerim" (subscriptions) grid. Falls back to an inviting empty state.
+ * Read-only data comes from src/ui/data/continue-listening.ts.
+ */
+
+import type { FeedRequest, Subscription } from '../../feeds/types';
+import { registerView, viewEl, type View } from '../views';
+import { h } from '../h';
+import { t, currentLang } from '../../i18n';
+import { httpsOnly } from '../../lib/safe';
+import { fmtTime } from '../../lib/format';
+import { BRAND_MARK } from '../icons';
+import { createLangMenu } from '../lang-menu';
+import { subscriptions } from '../../storage/subscriptions';
+import {
+  continueListening,
+  requestFromSubscription,
+  type ContinueItem,
+} from '../data/continue-listening';
+
+export interface HomeViewDeps {
+  openFeed(req: FeedRequest): void;
+}
+
+export interface HomeView extends View {
+  /** Re-render dynamic content (continue rows / subscriptions). */
+  refresh(): void;
+}
+
+export function initHomeView(deps: HomeViewDeps): HomeView {
+  const el = viewEl('home');
+  el.innerHTML = `
+    <div class="view-inner home">
+      <header class="home-brand">
+        <div class="home-brand-id">
+          <span class="home-brand-mark" aria-hidden="true">${BRAND_MARK}</span>
+          <div class="home-brand-text">
+            <h1 class="home-wordmark wm" tabindex="-1">Seseri</h1>
+            <p class="home-tagline" data-i18n="home_tagline">Ücretsiz, hesapsız podcast çalar</p>
+          </div>
+        </div>
+        <div class="home-lang" id="homeLangSel"></div>
+      </header>
+      <div class="home-sections"></div>
+    </div>`;
+
+  el.querySelector('.home-lang')?.append(createLangMenu({ compact: true }));
+
+  const heading = el.querySelector<HTMLElement>('.home-wordmark')!;
+  const sectionsEl = el.querySelector<HTMLElement>('.home-sections')!;
+  let renderToken = 0;
+
+  /** Wire pointer + keyboard activation onto a role="button" element. */
+  function activate(node: HTMLElement, onOpen: () => void): void {
+    node.addEventListener('click', onOpen);
+    node.addEventListener('keydown', (e) => {
+      if (e.key !== 'Enter' && e.key !== ' ') return;
+      e.preventDefault();
+      onOpen();
+    });
+  }
+
+  function sectionLabel(key: 'home_continue' | 'favs_title'): HTMLElement {
+    return h('div', { className: 'search-hint', dataset: { i18n: key } }, t(key));
+  }
+
+  /** Artwork img, or a calm placeholder tile when the feed has no art. */
+  function artOrTile(className: string, art: string): HTMLElement {
+    const src = httpsOnly(art);
+    if (!src) return h('div', { className });
+    return h('img', {
+      className,
+      src,
+      alt: '',
+      attrs: { loading: 'lazy', decoding: 'async' },
+    });
+  }
+
+  function continueRow(item: ContinueItem): HTMLElement {
+    const row = h(
+      'div',
+      { className: 'row home-row', role: 'button', tabIndex: 0, dataset: { homeRow: '1' } },
+      artOrTile('row-art', item.episode.art || item.feed.art),
+      h(
+        'div',
+        { className: 'row-info' },
+        h('div', { className: 'row-name' }, item.episode.trackName || '—'),
+        h('div', { className: 'row-sub' }, item.feed.name || item.feed.artist || ''),
+      ),
+      h('div', { className: 'row-meta' }, fmtTime(item.positionSec)),
+    );
+    activate(row, () => deps.openFeed(item.req));
+
+    const bar = h(
+      'div',
+      { className: 'home-progress' },
+      h('div', { className: 'home-progress-fill', style: `inline-size:${item.percent}%` }),
+    );
+    return h('div', { className: 'home-continue-item' }, row, bar);
+  }
+
+  function subTile(sub: Subscription): HTMLElement | null {
+    const req = requestFromSubscription(sub);
+    if (!req) return null;
+    const tile = h(
+      'div',
+      {
+        className: 'home-sub',
+        role: 'button',
+        tabIndex: 0,
+        dataset: { homeRow: '1' },
+        title: sub.name || sub.artist || '',
+      },
+      artOrTile('home-sub-art', sub.art),
+      h('div', { className: 'home-sub-name' }, sub.name || sub.artist || '—'),
+    );
+    activate(tile, () => deps.openFeed(req));
+    return tile;
+  }
+
+  async function render(): Promise<void> {
+    const token = ++renderToken;
+    const subs = subscriptions();
+    const items = await continueListening();
+    if (token !== renderToken) return; // superseded by a newer render
+
+    const nodes: Node[] = [];
+
+    if (items.length) {
+      nodes.push(sectionLabel('home_continue'));
+      for (const item of items) nodes.push(continueRow(item));
+    }
+
+    if (subs.length) {
+      nodes.push(sectionLabel('favs_title'));
+      const grid = h('div', { className: 'home-subs' });
+      for (const sub of subs) {
+        const tile = subTile(sub);
+        if (tile) grid.append(tile);
+      }
+      nodes.push(grid);
+    }
+
+    if (!items.length && !subs.length) {
+      nodes.push(
+        h(
+          'div',
+          { className: 'empty-state' },
+          h('div', { dataset: { i18n: 'home_empty' } }, t('home_empty')),
+          h(
+            'div',
+            { className: 'empty-state-hint', dataset: { i18n: 'home_empty_hint' } },
+            t('home_empty_hint'),
+          ),
+        ),
+      );
+    }
+
+    sectionsEl.replaceChildren(...nodes);
+  }
+
+  // Rebuild when subscriptions change or the language switches (localizes the
+  // dynamically-built section labels / empty-state text).
+  subscriptions.subscribe(() => void render());
+  currentLang.subscribe(() => void render());
+
+  const view: HomeView = {
+    name: 'home',
+    el,
+    refresh() {
+      void render();
+    },
+    onShow() {
+      this.refresh();
+    },
+    focusTarget() {
+      const row = el.querySelector<HTMLElement>('[data-home-row]');
+      if (row) return row;
+      return heading.offsetParent !== null ? heading : null;
+    },
+  };
+  registerView(view);
+  return view;
+}
diff --git a/src/ui/views/library.ts b/src/ui/views/library.ts
new file mode 100644
index 0000000..4f00f65
--- /dev/null
+++ b/src/ui/views/library.ts
@@ -0,0 +1,246 @@
+/**
+ * Library view — two tabs: subscriptions / downloads.
+ * Subscriptions come from the storage/subscriptions signal (live); downloads
+ * from storage/db (async, refreshed on every onShow). Removing a download also
+ * evicts its cached audio via player/offline.removeDownload.
+ */
+
+import type { FeedRequest, Subscription } from '../../feeds/types';
+import type { DownloadRecord } from '../../storage/db';
+import { httpsOnly } from '../../lib/safe';
+import { fmtBytes, fmtDate } from '../../lib/format';
+import { currentLang, t } from '../../i18n';
+import { removeSubscription, subscriptions } from '../../storage/subscriptions';
+import { listDownloads } from '../../storage/db';
+import { removeDownload, storageInfo, type StorageInfo } from '../../player/offline';
+import { requestFromSubscription } from '../data/continue-listening';
+import { confirmDialog } from '../confirm';
+import { toast } from '../toast';
+import { h, icon } from '../h';
+import { registerView, viewEl, type View } from '../views';
+
+export interface LibraryViewDeps {
+  openFeed(req: FeedRequest): void;
+}
+
+type TabName = 'subs' | 'downloads';
+
+/** Remembered across shows for the session (module lives as long as the app). */
+let activeTab: TabName = 'subs';
+
+export function initLibraryView(deps: LibraryViewDeps): View {
+  const el = viewEl('library');
+  el.innerHTML = `
+    <div class="view-inner">
+      <h1 class="view-title" data-i18n="nav_library">Kütüphane</h1>
+      <div class="tabs" role="tablist" data-i18n-aria="nav_library">
+        <button type="button" class="tab" role="tab" id="lib-tab-subs"
+          aria-controls="lib-panel-subs" data-i18n="lib_tab_subs">Abonelikler</button>
+        <button type="button" class="tab" role="tab" id="lib-tab-downloads"
+          aria-controls="lib-panel-downloads" data-i18n="lib_tab_downloads">İndirilenler</button>
+      </div>
+      <div class="lib-panel" role="tabpanel" id="lib-panel-subs" aria-labelledby="lib-tab-subs"></div>
+      <div class="lib-panel" role="tabpanel" id="lib-panel-downloads" aria-labelledby="lib-tab-downloads" hidden></div>
+    </div>`;
+
+  const subsTab = el.querySelector<HTMLButtonElement>('#lib-tab-subs')!;
+  const dlTab = el.querySelector<HTMLButtonElement>('#lib-tab-downloads')!;
+  const subsPanel = el.querySelector<HTMLDivElement>('#lib-panel-subs')!;
+  const dlPanel = el.querySelector<HTMLDivElement>('#lib-panel-downloads')!;
+  const tabs = [subsTab, dlTab];
+
+  // ── tab state ────────────────────────────────────────────────────
+  function selectTab(name: TabName, focus = false): void {
+    activeTab = name;
+    for (const [tabEl, tabName] of [
+      [subsTab, 'subs'],
+      [dlTab, 'downloads'],
+    ] as const) {
+      const on = tabName === name;
+      tabEl.setAttribute('aria-selected', String(on));
+      tabEl.tabIndex = on ? 0 : -1;
+    }
+    subsPanel.hidden = name !== 'subs';
+    dlPanel.hidden = name !== 'downloads';
+    if (focus) (name === 'subs' ? subsTab : dlTab).focus();
+  }
+
+  function onTabKey(e: KeyboardEvent, idx: number): void {
+    const rtl = document.documentElement.getAttribute('dir') === 'rtl';
+    let next: number;
+    if (e.key === 'ArrowRight') next = rtl ? idx - 1 : idx + 1;
+    else if (e.key === 'ArrowLeft') next = rtl ? idx + 1 : idx - 1;
+    else if (e.key === 'Home') next = 0;
+    else if (e.key === 'End') next = tabs.length - 1;
+    else return;
+    e.preventDefault();
+    next = (next + tabs.length) % tabs.length;
+    selectTab(next === 0 ? 'subs' : 'downloads', true);
+  }
+
+  subsTab.addEventListener('click', () => selectTab('subs'));
+  dlTab.addEventListener('click', () => selectTab('downloads'));
+  tabs.forEach((tabEl, i) => tabEl.addEventListener('keydown', (e) => onTabKey(e, i)));
+
+  // ── subscriptions tab ────────────────────────────────────────────
+  function subRow(f: Subscription) {
+    const art = httpsOnly(f.art);
+    const star = h('button', {
+      className: 'icon-btn faved',
+      type: 'button',
+      title: t('fav_btn'),
+      attrs: { 'aria-label': t('fav_btn') },
+      on: {
+        click: async (e) => {
+          e.stopPropagation();
+          if (await confirmDialog('confirm_unsubscribe')) removeSubscription(f.id);
+          // the subscriptions signal drives the re-render (see subscribe below)
+        },
+      },
+    }, icon('ic-star'));
+
+    const activate = (): void => {
+      const req = requestFromSubscription(f);
+      if (req) deps.openFeed(req);
+    };
+
+    return h(
+      'div',
+      {
+        className: 'row',
+        role: 'button',
+        tabIndex: 0,
+        on: {
+          click: activate,
+          keydown: (e) => {
+            if (e.target !== e.currentTarget) return;
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              activate();
+            }
+          },
+        },
+      },
+      art
+        ? h('img', { className: 'row-art', src: art, alt: '' })
+        : h('div', { className: 'row-art' }),
+      h(
+        'div',
+        { className: 'row-info' },
+        h('div', { className: 'row-name' }, f.name),
+        f.artist ? h('div', { className: 'row-sub' }, f.artist) : null,
+      ),
+      star,
+    );
+  }
+
+  function renderSubs(): void {
+    const list = subscriptions();
+    subsPanel.replaceChildren();
+    if (list.length === 0) {
+      subsPanel.append(
+        h(
+          'div',
+          { className: 'empty-state' },
+          h('div', {}, t('lib_empty_subs')),
+          h('div', { className: 'empty-state-hint' }, t('lib_empty_subs_hint')),
+        ),
+      );
+      return;
+    }
+    for (const f of list) subsPanel.append(subRow(f));
+  }
+
+  // ── downloads tab ────────────────────────────────────────────────
+  let dlRecords: DownloadRecord[] = [];
+  let dlStorage: StorageInfo | null = null;
+
+  function dlRow(rec: DownloadRecord) {
+    const trash = h('button', {
+      className: 'icon-btn',
+      type: 'button',
+      title: t('lib_delete_download'),
+      attrs: { 'aria-label': t('lib_delete_download') },
+      on: {
+        click: async () => {
+          await removeDownload(rec.id);
+          await refreshDownloads();
+          toast(t('dl_removed'));
+        },
+      },
+    }, icon('ic-trash'));
+
+    return h(
+      'div',
+      { className: 'row lib-dl-row' },
+      h('div', { className: 'row-art lib-dl-icon' }, icon('ic-download')),
+      h(
+        'div',
+        { className: 'row-info' },
+        h('div', { className: 'row-name' }, rec.title),
+        h(
+          'div',
+          { className: 'row-sub' },
+          fmtBytes(rec.bytes) + ' · ' + fmtDate(new Date(rec.addedAt).toISOString()),
+        ),
+      ),
+      trash,
+    );
+  }
+
+  function renderDownloads(): void {
+    dlPanel.replaceChildren();
+    if (dlRecords.length === 0) {
+      dlPanel.append(h('div', { className: 'empty-state' }, t('lib_empty_downloads')));
+      return;
+    }
+    const totalBytes = dlRecords.reduce((a, d) => a + d.bytes, 0);
+    dlPanel.append(
+      h(
+        'div',
+        { className: 'lib-dl-summary' },
+        t('lib_dl_total', dlRecords.length, fmtBytes(totalBytes)),
+      ),
+    );
+    if (dlStorage && dlStorage.quotaBytes > 0) {
+      dlPanel.append(
+        h(
+          'div',
+          { className: 'lib-dl-usage' },
+          t('storage_usage', fmtBytes(dlStorage.usageBytes), fmtBytes(dlStorage.quotaBytes)),
+        ),
+      );
+    }
+    for (const rec of dlRecords) dlPanel.append(dlRow(rec));
+  }
+
+  async function refreshDownloads(): Promise<void> {
+    const [recs, info] = await Promise.all([listDownloads(), storageInfo()]);
+    dlRecords = recs.sort((a, b) => b.addedAt - a.addedAt);
+    dlStorage = info;
+    renderDownloads();
+  }
+
+  // ── live updates ─────────────────────────────────────────────────
+  subscriptions.subscribe(() => renderSubs());
+  currentLang.subscribe(() => {
+    renderSubs();
+    renderDownloads();
+  });
+
+  selectTab(activeTab);
+  renderSubs();
+
+  const view: View = {
+    name: 'library',
+    el,
+    focusTarget: () => (activeTab === 'subs' ? subsTab : dlTab),
+    onShow() {
+      selectTab(activeTab);
+      renderSubs();
+      void refreshDownloads();
+    },
+  };
+  registerView(view);
+  return view;
+}
diff --git a/src/ui/views/now-playing.ts b/src/ui/views/now-playing.ts
new file mode 100644
index 0000000..fa2697c
--- /dev/null
+++ b/src/ui/views/now-playing.ts
@@ -0,0 +1,340 @@
+/**
+ * Now Playing sheet — full-screen on mobile, floating panel on desktop.
+ * Hero: the signature frequency-line scrubber (waveform.ts). Transport,
+ * skip, speed, sleep timer and queue access live here.
+ * Sheet chrome (open/close animation) lives in overlays.css; the inner
+ * content is styled in views/now-playing.css + the shared signal-line.css.
+ * Not a history entry (v1 decision) — Escape/close dismisses.
+ */
+
+import { currentLang, t } from '../../i18n';
+import { fmtTime } from '../../lib/format';
+import { httpsOnly } from '../../lib/safe';
+import { isUsingEmbed, onEngine, pbSetRate } from '../../player/engine';
+import { setSleepTimer } from '../../player/sleep-timer';
+import { nowPlaying, type NowPlaying } from '../../state/now-playing';
+import { queue } from '../../state/queue';
+import { setSetting, settings, type Settings } from '../../state/settings';
+import type { PlaybackController, PlaybackSession } from '../playback-controller';
+import { must } from '../shell';
+import { toast } from '../toast';
+import { initWaveform, type WaveformController } from '../waveform';
+
+export interface NowPlayingDeps {
+  playback: PlaybackController;
+  /** Navigate to the queue view. */
+  openQueue(): void;
+}
+
+export interface NowPlayingSheet {
+  open(): void;
+  close(): void;
+  isOpen(): boolean;
+  el: HTMLElement;
+}
+
+const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5];
+const SLEEPS = [0, 15, 30, 60];
+/** Matches the sheet transition (--d-slow) so we re-hide only after it ends. */
+const CLOSE_MS = 420;
+
+export function initNowPlaying(deps: NowPlayingDeps): NowPlayingSheet {
+  const { playback } = deps;
+  const el = must('npSheet');
+
+  el.innerHTML = `
+    <div class="np-inner">
+      <header class="np-top">
+        <button class="icon-btn np-close" id="npClose" data-i18n-aria="np_close" aria-label="Oynatıcıyı kapat"><svg class="icon" aria-hidden="true"><use href="#ic-chevron-down"/></svg></button>
+        <span class="np-feed" id="npFeed"></span>
+      </header>
+
+      <div class="np-player" id="npPlayer">
+        <div class="np-stage">
+          <img class="np-art" id="npArt" alt="" decoding="async">
+          <div class="yt-frame" id="ytFrame"><div id="ytHost"></div></div>
+        </div>
+
+        <div class="np-controls">
+        <h1 class="np-title" id="nowTitle">Bir bölüm seçin</h1>
+
+        <div class="signal-scrub" id="progressWrap" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-i18n-aria="seek_label" aria-label="Konum">
+          <div class="signal-layers">
+            <div class="signal-base" id="waveBase" aria-hidden="true"></div>
+            <div class="signal-fill" id="waveFill" aria-hidden="true"></div>
+            <div class="signal-baseline" aria-hidden="true"></div>
+            <div class="signal-head" id="waveHead" aria-hidden="true"></div>
+            <div class="signal-tip" id="waveTip" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <div class="np-times">
+          <span class="np-time" id="tCur">0:00</span>
+          <span class="np-time" id="tTot">0:00</span>
+        </div>
+
+        <div class="np-transport">
+          <button class="icon-btn np-tp" id="btnPrev" data-i18n-aria="btn_prev" aria-label="Önceki"><svg class="icon" aria-hidden="true"><use href="#ic-prev"/></svg></button>
+          <button class="icon-btn np-tp np-skip" id="btnSkipBack" data-i18n-aria="s_skip_back" aria-label="Geri Atla"><svg class="icon" aria-hidden="true"><use href="#ic-rewind"/></svg><span class="np-skip-n" id="lblSkipBack">15</span></button>
+          <button class="np-play" id="btnPlay" data-i18n-aria="play" aria-label="Oynat"><svg class="icon icon-fill" aria-hidden="true"><use href="#ic-play"/></svg></button>
+          <button class="icon-btn np-tp np-skip" id="btnSkipFwd" data-i18n-aria="s_skip_fwd" aria-label="İleri Atla"><svg class="icon" aria-hidden="true"><use href="#ic-forward"/></svg><span class="np-skip-n" id="lblSkipFwd">30</span></button>
+          <button class="icon-btn np-tp" id="btnNext" data-i18n-aria="btn_next" aria-label="Sonraki"><svg class="icon" aria-hidden="true"><use href="#ic-next"/></svg></button>
+        </div>
+
+        <div class="np-secondary">
+          <label class="np-sec-ctl">
+            <svg class="icon" aria-hidden="true"><use href="#ic-moon"/></svg>
+            <select class="seri-select np-sel" id="sleepSel" data-i18n-aria="sleep_timer" aria-label="Uyku zamanlayıcısı (dk)"></select>
+          </label>
+          <label class="np-sec-ctl">
+            <span class="np-sec-glyph" aria-hidden="true">×</span>
+            <select class="seri-select np-sel" id="speedSel" data-i18n-aria="speed_label" aria-label="Oynatma hızı"></select>
+          </label>
+          <button class="icon-btn np-queue" id="queueToggle" data-i18n-aria="queue_title" aria-label="Çalma kuyruğu"><svg class="icon" aria-hidden="true"><use href="#ic-queue"/></svg><span class="np-queue-badge" id="queueCount" aria-hidden="true">0</span></button>
+        </div>
+        </div>
+      </div>
+    </div>`;
+
+  // ── element cache ────────────────────────────────────────────────
+  const player = must('npPlayer');
+  const art = must<HTMLImageElement>('npArt');
+  const feedEl = must('npFeed');
+  const titleEl = must('nowTitle');
+  const elTCur = must('tCur');
+  const elTTot = must('tTot');
+  const btnPlay = must<HTMLButtonElement>('btnPlay');
+  const btnPrev = must<HTMLButtonElement>('btnPrev');
+  const btnNext = must<HTMLButtonElement>('btnNext');
+  const btnSkipBack = must<HTMLButtonElement>('btnSkipBack');
+  const btnSkipFwd = must<HTMLButtonElement>('btnSkipFwd');
+  const lblSkipBack = must('lblSkipBack');
+  const lblSkipFwd = must('lblSkipFwd');
+  const speedSel = must<HTMLSelectElement>('speedSel');
+  const sleepSel = must<HTMLSelectElement>('sleepSel');
+  const queueBtn = must<HTMLButtonElement>('queueToggle');
+  const queueCount = must('queueCount');
+
+  // ── waveform / frequency line ────────────────────────────────────
+  const wave: WaveformController = initWaveform(
+    {
+      wrap: must('progressWrap'),
+      base: must('waveBase'),
+      fill: must('waveFill'),
+      head: must('waveHead'),
+      tip: must('waveTip'),
+    },
+    {
+      seekRel: (s) => playback.seekRel(s),
+      skipBack: () => settings().skipBack,
+      skipFwd: () => settings().skipForward,
+    },
+  );
+  wave.build('seseri'); // placeholder line until the first episode loads
+
+  // ── select options ───────────────────────────────────────────────
+  for (const v of SPEEDS) {
+    const o = document.createElement('option');
+    o.value = String(v);
+    o.textContent = v + '×';
+    speedSel.appendChild(o);
+  }
+  function buildSleepOptions(): void {
+    const cur = sleepSel.value || '0';
+    sleepSel.replaceChildren();
+    for (const n of SLEEPS) {
+      const o = document.createElement('option');
+      o.value = String(n);
+      o.textContent = n === 0 ? '—' : n + ' ' + t('dur_m');
+      sleepSel.appendChild(o);
+    }
+    sleepSel.value = cur;
+  }
+  buildSleepOptions();
+
+  // ── play icon / title crossfade ──────────────────────────────────
+  let playing = false;
+  function setPlayIcon(isPlaying: boolean): void {
+    const u = btnPlay.querySelector('use');
+    if (u) u.setAttribute('href', isPlaying ? '#ic-pause' : '#ic-play');
+    btnPlay.setAttribute('aria-label', isPlaying ? t('pause') : t('play'));
+  }
+
+  let titleTimer: ReturnType<typeof setTimeout> | null = null;
+  function setNowTitle(text: string): void {
+    if (titleEl.textContent === text) return;
+    titleEl.classList.add('swapping');
+    if (titleTimer) clearTimeout(titleTimer);
+    titleTimer = setTimeout(() => {
+      titleEl.textContent = text;
+      titleEl.classList.remove('swapping');
+    }, 150);
+  }
+
+  function updateQueueCount(n: number): void {
+    queueCount.textContent = String(n);
+    queueBtn.classList.toggle('has-queue', n > 0);
+  }
+
+  /** Show the embedded video frame only when a track actually falls back to it. */
+  function updateYtMode(): void {
+    player.classList.toggle('yt-mode', playback.session().isYT && isUsingEmbed());
+  }
+
+  // ── session → title, waveform, nav buttons, yt-mode ──────────────
+  let lastTrackId: string | null | undefined;
+  function applySession(s: PlaybackSession): void {
+    const ep = s.currentIndex >= 0 ? s.filtered[s.currentIndex] : undefined;
+    setNowTitle(ep ? ep.trackName || t('ep_fallback', s.currentIndex + 1) : t('pick_episode'));
+
+    if (s.currentTrackId !== lastTrackId) {
+      lastTrackId = s.currentTrackId;
+      wave.build(s.currentTrackId || 'seseri');
+      wave.setProgress(0);
+      if (s.currentIndex < 0) {
+        elTCur.textContent = '0:00';
+        elTTot.textContent = '0:00';
+      }
+    }
+
+    btnPrev.disabled = s.currentIndex <= 0;
+    btnNext.disabled = s.currentIndex < 0 || s.currentIndex >= s.filtered.length - 1;
+    updateYtMode();
+  }
+  playback.session.subscribe(applySession);
+  applySession(playback.session());
+
+  // ── now-playing → artwork + feed name ────────────────────────────
+  function applyNow(now: NowPlaying | null): void {
+    const src = now ? httpsOnly(now.art) : '';
+    feedEl.textContent = now?.feedName ?? '';
+    if (src) {
+      art.src = src;
+      art.style.display = '';
+    } else {
+      art.removeAttribute('src');
+      art.style.display = 'none';
+    }
+    // Artless feeds: collapse the stage so the title doesn't float in a void
+    // (yt-mode CSS re-shows the stage for the embedded video).
+    player.classList.toggle('no-art', !src);
+  }
+  nowPlaying.subscribe(applyNow);
+  applyNow(nowPlaying());
+
+  // ── queue badge ──────────────────────────────────────────────────
+  queue.subscribe((q) => updateQueueCount(q.length));
+  updateQueueCount(queue().length);
+
+  // ── engine events ────────────────────────────────────────────────
+  onEngine((e) => {
+    switch (e.type) {
+      case 'play':
+        playing = true;
+        setPlayIcon(true);
+        player.classList.add('playing');
+        updateYtMode();
+        break;
+      case 'pause':
+      case 'error':
+        playing = false;
+        setPlayIcon(false);
+        player.classList.remove('playing');
+        break;
+      case 'timeupdate':
+        if (!wave.isScrubbing()) wave.setProgress(e.duration ? (e.current / e.duration) * 100 : 0);
+        elTCur.textContent = fmtTime(e.current);
+        elTTot.textContent = fmtTime(e.duration);
+        break;
+    }
+  });
+
+  // ── transport wiring ─────────────────────────────────────────────
+  btnPlay.addEventListener('click', () => playback.togglePlay());
+  btnPrev.addEventListener('click', () => playback.prev());
+  btnNext.addEventListener('click', () => playback.next());
+  btnSkipBack.addEventListener('click', () => playback.seekRel(-settings().skipBack));
+  btnSkipFwd.addEventListener('click', () => playback.seekRel(settings().skipForward));
+  queueBtn.addEventListener('click', () => deps.openQueue());
+
+  speedSel.addEventListener('change', () => {
+    const speed = parseFloat(speedSel.value) || 1;
+    setSetting('defaultSpeed', speed);
+    pbSetRate(speed);
+  });
+  sleepSel.addEventListener('change', () => {
+    const min = parseInt(sleepSel.value) || 0;
+    sleepSel.classList.toggle('active', min > 0);
+    // Mirror into the mini bar's select so both surfaces show the same timer.
+    const miniSel = document.getElementById('miniSleep') as HTMLSelectElement | null;
+    if (miniSel) {
+      miniSel.value = sleepSel.value;
+      miniSel.classList.toggle('active', min > 0);
+    }
+    if (min > 0) toast(t('sleep_set', min));
+    setSleepTimer(min, () => {
+      sleepSel.value = '0';
+      sleepSel.classList.remove('active');
+      if (miniSel) {
+        miniSel.value = '0';
+        miniSel.classList.remove('active');
+      }
+      toast(t('sleep_done'));
+    });
+  });
+
+  // ── settings → skip labels + speed value ─────────────────────────
+  function applySettings(s: Settings): void {
+    lblSkipBack.textContent = String(s.skipBack);
+    lblSkipFwd.textContent = String(s.skipForward);
+    speedSel.value = String(s.defaultSpeed);
+  }
+  settings.subscribe(applySettings);
+  applySettings(settings());
+
+  // ── language → dynamic labels ────────────────────────────────────
+  currentLang.subscribe(() => {
+    setPlayIcon(playing);
+    buildSleepOptions();
+    const s = playback.session();
+    if (s.currentIndex < 0) titleEl.textContent = t('pick_episode');
+  });
+
+  // ── open / close ─────────────────────────────────────────────────
+  let lastFocus: HTMLElement | null = null;
+  let hideTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function open(): void {
+    if (isOpen()) return;
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+    lastFocus = document.activeElement as HTMLElement | null;
+    el.hidden = false;
+    void el.offsetWidth;
+    el.classList.add('open');
+    must('npClose').focus();
+  }
+  function close(): void {
+    if (!isOpen()) return;
+    el.classList.remove('open');
+    if (hideTimer) clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => {
+      el.hidden = true;
+      hideTimer = null;
+    }, CLOSE_MS);
+    lastFocus?.focus({ preventScroll: true });
+    lastFocus = null;
+  }
+  function isOpen(): boolean {
+    return !el.hidden;
+  }
+
+  must('npClose').addEventListener('click', close);
+  el.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') close();
+  });
+
+  return { open, close, isOpen, el };
+}
diff --git a/src/ui/views/podcast.ts b/src/ui/views/podcast.ts
new file mode 100644
index 0000000..4340ec1
--- /dev/null
+++ b/src/ui/views/podcast.ts
@@ -0,0 +1,362 @@
+/**
+ * Podcast detail view — feed header (art, title, subscribe/share), status
+ * strip, sort/filter bar, episode list. Playback state lives in the
+ * playback-controller; this view renders playback.session reactively.
+ * Ported from `git show ed59840:src/ui/screens/player.ts` (list/header half),
+ * re-skinned onto the "Sinyal" design system.
+ * Element IDs kept for the smoke-test contract: backBtn, pThumb, pTitle,
+ * pAuthor, pEpCount, favBtn, shareBtn, dot, statusText, sortToggle, sortInfo,
+ * filterInput, epList.
+ */
+
+import type { PlaybackController, PlaybackSession } from '../playback-controller';
+import { registerView, viewEl, type View } from '../views';
+import { h, icon } from '../h';
+import { stateBox } from '../states';
+import { fmtDate, fmtDur } from '../../lib/format';
+import { httpsOnly } from '../../lib/safe';
+import { t } from '../../i18n';
+import { getProgress } from '../../storage/progress';
+import { queuePosition } from '../../state/queue';
+import { settings } from '../../state/settings';
+import { isSubscribed, toggleSubscription } from '../../storage/subscriptions';
+import { confirmDialog } from '../confirm';
+import { toast } from '../toast';
+
+export interface PodcastViewDeps {
+  playback: PlaybackController;
+  /** Back button: in-app history back, or home when we deep-linked in. */
+  onBack(): void;
+  /** Open the full-screen Now Playing sheet (mobile flow). */
+  openNowPlaying(): void;
+}
+
+export interface PodcastView extends View {
+  /** Land keyboard focus on the feed title (accessible landing point). */
+  focusTitle(): void;
+}
+
+export function initPodcastView(deps: PodcastViewDeps): PodcastView {
+  const { playback } = deps;
+  const el = viewEl('podcast');
+  el.innerHTML = `
+    <div class="view-inner p-inner">
+      <div class="p-header">
+        <button class="icon-btn p-back" id="backBtn" data-i18n-aria="btn_back" aria-label="Geri"><svg class="icon icon-flip" aria-hidden="true"><use href="#ic-back"/></svg></button>
+        <img class="p-art" id="pThumb" alt="" loading="lazy" decoding="async" />
+        <div class="p-meta">
+          <h1 class="p-title" id="pTitle" tabindex="-1">—</h1>
+          <div class="p-author" id="pAuthor"></div>
+          <div class="p-count"><span id="pEpCount">0</span> <span data-i18n="ep_count_unit">bölüm</span></div>
+        </div>
+        <div class="p-header-actions">
+          <button class="icon-btn p-fav" id="favBtn" data-i18n-aria="fav_btn" aria-label="Abonelik ekle/çıkar"><svg class="icon icon-fill" aria-hidden="true"><use href="#ic-star"/></svg></button>
+          <button class="icon-btn p-share" id="shareBtn" data-i18n-aria="share_btn" aria-label="Linki paylaş"><svg class="icon" aria-hidden="true"><use href="#ic-share"/></svg></button>
+        </div>
+      </div>
+      <div class="p-status" aria-live="polite">
+        <span class="dot" id="dot" aria-hidden="true"></span>
+        <span class="p-status-text" id="statusText"></span>
+      </div>
+      <div class="p-listbar">
+        <button class="p-sort" id="sortToggle" data-i18n-aria="btn_sort" aria-label="Sıra">
+          <svg class="icon" aria-hidden="true"><use href="#ic-sort"/></svg>
+          <span data-i18n="btn_sort">Sıra</span>
+        </button>
+        <span class="p-sort-info" id="sortInfo"></span>
+        <input class="text-input p-filter" id="filterInput" type="text" placeholder="Bölüm ara..." data-i18n-ph="filter_placeholder" />
+      </div>
+      <div class="ep-list" id="epList" role="list"></div>
+    </div>`;
+
+  const q = <T extends HTMLElement = HTMLElement>(id: string): T =>
+    el.querySelector<T>('#' + id) as T;
+
+  const titleEl = q('pTitle');
+  const authorEl = q('pAuthor');
+  const thumbEl = q<HTMLImageElement>('pThumb');
+  const countEl = q('pEpCount');
+  const favBtn = q<HTMLButtonElement>('favBtn');
+  const shareBtn = q<HTMLButtonElement>('shareBtn');
+  const dotEl = q('dot');
+  const statusTextEl = q('statusText');
+  const sortToggle = q<HTMLButtonElement>('sortToggle');
+  const sortInfoEl = q('sortInfo');
+  const filterInput = q<HTMLInputElement>('filterInput');
+  const epList = q('epList');
+
+  // ── episode list rendering ───────────────────────────────────────
+  function skeleton(rows = 8): HTMLElement {
+    const list = h('div', { className: 'skeleton-list' });
+    for (let i = 0; i < rows; i++) {
+      list.append(
+        h(
+          'div',
+          { className: 'skeleton-row' },
+          h('span', { className: 'sk sk-num' }),
+          h(
+            'div',
+            { className: 'ep-info' },
+            h('div', { className: 'sk sk-line1' }),
+            h('div', { className: 'sk sk-line2' }),
+          ),
+        ),
+      );
+    }
+    return list;
+  }
+
+  function episodeRow(ep: PlaybackSession['filtered'][number], i: number, s: PlaybackSession): HTMLElement {
+    const S = settings();
+    const id = String(ep.trackId);
+    const savedSec = getProgress(id);
+    const hasSaved = S.resumePos && savedSec > 5;
+    const durSec = ep.trackTimeMillis ? ep.trackTimeMillis / 1000 : 0;
+    const pct = durSec && savedSec > 5 ? Math.min(100, (savedSec / durSec) * 100) : 0;
+    const listened = pct >= 96;
+    const active = i === s.currentIndex;
+
+    const num = h('span', { className: 'ep-num' });
+    if (active) {
+      const eq = h('span', { className: 'ep-eq', attrs: { 'aria-hidden': 'true' } });
+      eq.append(h('i'), h('i'), h('i'));
+      num.append(eq);
+    } else {
+      num.textContent = String(i + 1);
+    }
+
+    const dateDur = h(
+      'div',
+      { className: 'ep-date-dur' },
+      fmtDate(ep.releaseDate),
+      ep.trackTimeMillis ? ' · ' + fmtDur(ep.trackTimeMillis) : '',
+    );
+    if (listened) {
+      dateDur.append(' ', h('span', { className: 'ep-done-badge badge badge-done' }, '✓'));
+    } else if (hasSaved) {
+      dateDur.append(' ', h('span', { className: 'ep-saved-badge badge' }, t('ep_saved_badge')));
+    }
+
+    const row = h(
+      'div',
+      {
+        className: 'ep-item' + (active ? ' active' : '') + (listened ? ' listened' : ''),
+        role: 'listitem',
+        tabIndex: 0,
+        dataset: { idx: String(i) },
+        ...(active ? { attrs: { 'aria-current': 'true' } } : {}),
+      },
+      num,
+      h(
+        'div',
+        { className: 'ep-info' },
+        h('div', { className: 'ep-name' }, ep.trackName || t('ep_fallback', i + 1)),
+        dateDur,
+      ),
+    );
+
+    const actions = h('div', { className: 'ep-actions' });
+    const qPos = queuePosition(id);
+    actions.append(
+      h(
+        'button',
+        {
+          className: 'ep-act ep-q-btn icon-btn' + (qPos ? ' queued' : ''),
+          dataset: { idx: String(i), act: 'queue' },
+          attrs: { 'aria-label': t('btn_queue'), title: t('btn_queue') },
+        },
+        qPos ? h('span', { className: 'ep-q-pos' }, String(qPos)) : icon('ic-queue'),
+      ),
+    );
+    if (S.showDl) {
+      const done = s.downloadedIds.has(id);
+      actions.append(
+        h(
+          'button',
+          {
+            className: 'ep-act ep-dl-btn icon-btn' + (done ? ' done' : ''),
+            dataset: { idx: String(i), act: 'dl' },
+            attrs: { 'aria-label': t('dl_label'), title: t('dl_label') },
+          },
+          done ? '✓' : icon('ic-download'),
+        ),
+      );
+    }
+    row.append(actions);
+
+    if (pct > 0 && !listened) {
+      row.append(
+        h(
+          'div',
+          { className: 'ep-progress', attrs: { 'aria-hidden': 'true' } },
+          h('i', { style: `inline-size:${pct.toFixed(1)}%` }),
+        ),
+      );
+    }
+    return row;
+  }
+
+  function renderList(s: PlaybackSession): void {
+    const loading = s.status.kind === 'loading';
+    if (!s.filtered.length) {
+      if (loading) {
+        epList.replaceChildren(skeleton());
+        epList.setAttribute('aria-busy', 'true');
+        return;
+      }
+      epList.setAttribute('aria-busy', 'false');
+      if (s.status.kind === 'error') {
+        epList.replaceChildren(
+          stateBox('error', s.status.message || t('ep_not_found'), { onRetry: () => playback.retry() }),
+        );
+      } else {
+        epList.replaceChildren(stateBox('empty', t('ep_not_found')));
+      }
+      return;
+    }
+    const frag = document.createDocumentFragment();
+    s.filtered.forEach((ep, i) => frag.append(episodeRow(ep, i, s)));
+    epList.replaceChildren(frag);
+    epList.setAttribute('aria-busy', 'false');
+
+    if (s.currentIndex >= 0) {
+      epList.querySelector('.ep-item.active')?.scrollIntoView({ block: 'nearest' });
+    }
+  }
+
+  // ── reactive header + status render ──────────────────────────────
+  function render(s: PlaybackSession): void {
+    const meta = s.meta;
+    titleEl.textContent = meta?.name || '—';
+    authorEl.textContent = meta?.artist || '';
+    const art = meta?.art ? httpsOnly(meta.art) : '';
+    if (art) thumbEl.src = art;
+    else thumbEl.removeAttribute('src');
+    thumbEl.classList.toggle('has-art', !!art);
+    countEl.textContent = String(s.episodes.length);
+    favBtn.classList.toggle('faved', !!(meta && isSubscribed(meta.id)));
+
+    dotEl.className = 'dot ' + s.status.kind;
+    statusTextEl.textContent = s.status.message;
+
+    sortInfoEl.textContent = s.sortAsc ? t('sort_asc_label') : t('sort_desc_label');
+
+    // Sticky filter — sync the input unless the user is mid-edit.
+    if (document.activeElement !== filterInput && filterInput.value !== s.filter) {
+      filterInput.value = s.filter;
+    }
+
+    if (!el.hidden && meta) document.title = `${meta.name} – Seseri`;
+
+    renderList(s);
+  }
+
+  // ── event wiring ─────────────────────────────────────────────────
+  q<HTMLButtonElement>('backBtn').addEventListener('click', () => deps.onBack());
+
+  sortToggle.addEventListener('click', () => playback.toggleSort());
+
+  let filterTimer: ReturnType<typeof setTimeout> | null = null;
+  filterInput.addEventListener('input', () => {
+    if (filterTimer) clearTimeout(filterTimer);
+    const value = filterInput.value;
+    filterTimer = setTimeout(() => playback.setFilter(value), 200);
+  });
+
+  favBtn.addEventListener('click', () => {
+    const meta = playback.session().meta;
+    if (!meta) return;
+    if (isSubscribed(meta.id)) {
+      // Unsubscribing loses the star + list placement — confirm first.
+      void confirmDialog('confirm_unsubscribe').then((ok) => {
+        const m = playback.session().meta;
+        if (ok && m) {
+          toggleSubscription(m);
+          favBtn.classList.toggle('faved', isSubscribed(m.id));
+        }
+      });
+    } else {
+      toggleSubscription(meta);
+      favBtn.classList.toggle('faved', isSubscribed(meta.id));
+    }
+  });
+
+  shareBtn.addEventListener('click', () => {
+    const meta = playback.session().meta;
+    if (!meta) return;
+    const id = String(meta.id);
+    const url =
+      location.origin +
+      location.pathname +
+      (id.startsWith('yt:')
+        ? '?yt=' + encodeURIComponent(meta.yt || '')
+        : id.startsWith('rss:')
+          ? '?rss=' + encodeURIComponent(id.slice(4))
+          : '?podcast=' + encodeURIComponent(id));
+    if (navigator.share) {
+      navigator.share({ title: meta.name || 'Podcast', url }).catch(() => {
+        /* user cancelled */
+      });
+      return;
+    }
+    navigator.clipboard
+      ?.writeText(url)
+      .then(() => toast(t('link_copied')))
+      .catch(() => {
+        /* clipboard unavailable */
+      });
+  });
+
+  // Episode list — event delegation (no per-row listeners).
+  epList.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement;
+    const actBtn = target.closest<HTMLButtonElement>('.ep-act');
+    if (actBtn) {
+      e.stopPropagation();
+      const idx = parseInt(actBtn.dataset.idx ?? '-1', 10);
+      if (actBtn.dataset.act === 'queue') {
+        playback.toggleQueued(idx);
+      } else {
+        actBtn.textContent = '⏳';
+        actBtn.disabled = true;
+        void playback.downloadToggle(idx);
+      }
+      return;
+    }
+    const row = target.closest<HTMLElement>('.ep-item[data-idx]');
+    if (row) activateRow(parseInt(row.dataset.idx ?? '-1', 10));
+  });
+  epList.addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    const target = e.target as HTMLElement;
+    if (target.closest('.ep-act')) return; // let the button handle its own keys
+    const row = target.closest<HTMLElement>('.ep-item[data-idx]');
+    if (row) {
+      e.preventDefault();
+      activateRow(parseInt(row.dataset.idx ?? '-1', 10));
+    }
+  });
+
+  /** Clicking the already-active row opens the full player; else load+play. */
+  function activateRow(idx: number): void {
+    if (idx < 0) return;
+    if (idx === playback.session().currentIndex) deps.openNowPlaying();
+    else playback.playEpisode(idx, true);
+  }
+
+  // ── reactivity ───────────────────────────────────────────────────
+  playback.session.subscribe(render);
+  render(playback.session());
+
+  const view: PodcastView = {
+    name: 'podcast',
+    el,
+    focusTarget: () => titleEl,
+    focusTitle: () => titleEl.focus({ preventScroll: false }),
+    onShow() {
+      render(playback.session());
+    },
+  };
+  registerView(view);
+  return view;
+}
diff --git a/src/ui/views/queue.ts b/src/ui/views/queue.ts
new file mode 100644
index 0000000..aa8e066
--- /dev/null
+++ b/src/ui/views/queue.ts
@@ -0,0 +1,73 @@
+/**
+ * Queue view — the visible face of the up-next queue: ordered rows with
+ * keyboard-friendly move/remove controls. Ported from the retired dropdown
+ * panel (`ed59840:src/ui/queue-panel.ts`) into a full page view.
+ */
+
+import { clearQueue, moveInQueue, queue, removeFromQueue } from '../../state/queue';
+import { effect } from '../../state/signals';
+import { t, currentLang } from '../../i18n';
+import type { PlaybackController } from '../playback-controller';
+import { registerView, viewEl, type View } from '../views';
+import { h, icon } from '../h';
+
+export interface QueueViewDeps {
+  playback: PlaybackController;
+}
+
+export function initQueueView(deps: QueueViewDeps): View {
+  const el = viewEl('queue');
+  el.innerHTML = `
+    <div class="view-inner queue-inner">
+      <h1 class="view-title" data-i18n="queue_title">Çalma kuyruğu</h1>
+    </div>`;
+  const inner = el.querySelector<HTMLElement>('.queue-inner')!;
+
+  const listEl = h('div', { className: 'queue-list', attrs: { role: 'list' } });
+  const emptyEl = h('div', { className: 'empty-state' });
+  const clearBtn = h('button', {
+    className: 's-btn danger queue-clear',
+    on: { click: () => clearQueue() },
+  });
+  inner.append(emptyEl, listEl, h('div', { className: 'queue-foot' }, clearBtn));
+
+  function iconBtn(label: string, name: string, onClick: () => void): HTMLButtonElement {
+    const b = h('button', { className: 'icon-btn', title: label, on: { click: onClick } }, icon(name));
+    b.setAttribute('aria-label', label);
+    return b;
+  }
+
+  function render(): void {
+    const q = queue();
+    clearBtn.textContent = t('queue_clear');
+    clearBtn.hidden = q.length === 0;
+    emptyEl.textContent = t('queue_empty');
+    emptyEl.hidden = q.length !== 0;
+
+    listEl.replaceChildren(
+      ...q.map((id, i) => {
+        const title = deps.playback.episodeTitle(id);
+        return h(
+          'div',
+          { className: 'queue-row', attrs: { role: 'listitem' } },
+          h('span', { className: 'queue-pos' }, String(i + 1)),
+          h('span', { className: 'queue-name', title }, title),
+          iconBtn(t('queue_move_up'), 'ic-up', () => moveInQueue(id, -1)),
+          iconBtn(t('queue_move_down'), 'ic-down', () => moveInQueue(id, 1)),
+          iconBtn(t('queue_remove'), 'ic-x', () => removeFromQueue(id)),
+        );
+      }),
+    );
+  }
+
+  // Reactive: re-render on queue mutation and on language change.
+  effect(() => {
+    void queue();
+    void currentLang();
+    render();
+  });
+
+  const view: View = { name: 'queue', el };
+  registerView(view);
+  return view;
+}
diff --git a/src/ui/screens/search.ts b/src/ui/views/search.ts
similarity index 55%
rename from src/ui/screens/search.ts
rename to src/ui/views/search.ts
index 9e2c819..001ce06 100644
--- a/src/ui/screens/search.ts
+++ b/src/ui/views/search.ts
@@ -1,116 +1,96 @@
-import type { FeedRequest, Subscription } from '../../feeds/types';
+/**
+ * Search view — iTunes search + URL/RSS/YouTube paste, progressive dual-source
+ * results. Ported from `git show ed59840:src/ui/screens/search.ts`, re-skinned
+ * onto the "Sinyal" design system. Favorites moved to Home/Library, so the
+ * legacy fav rendering + unfav row variant + language selector are gone.
+ * Element IDs kept for the smoke-test contract: searchInput, searchBtn,
+ * resultsList.
+ */
+
+import type { FeedRequest } from '../../feeds/types';
 import { searchPodcasts } from '../../feeds/itunes';
 import { ytServiceSearch, type YtSearchItem } from '../../youtube/piped';
 import { fmtDur } from '../../lib/format';
-import { parseDirectInput, ytFromToken } from '../../feeds/input-parse';
-import { t, applyLang, isLangCode } from '../../i18n';
+import { parseDirectInput } from '../../feeds/input-parse';
+import { t } from '../../i18n';
 import { httpsOnly } from '../../lib/safe';
-import { setSetting, settings } from '../../state/settings';
-import { removeSubscription, subscriptions } from '../../storage/subscriptions';
-import { h, icon } from '../h';
+import { h } from '../h';
 import { stateBox } from '../states';
 import { must } from '../shell';
+import { registerView, viewEl, type View } from '../views';
 
-export interface SearchScreenDeps {
-  openFeed: (req: FeedRequest) => void;
+export interface SearchViewDeps {
+  openFeed(req: FeedRequest): void;
 }
 
-export interface SearchScreen {
-  el: HTMLElement;
-  show(): void;
-  renderFavs(): void;
+export interface SearchView extends View {
   focusInput(): void;
-  /**
-   * Return keyboard focus to the home screen after navigating back from a feed.
-   * Restores the result/fav row the user activated (if still on screen),
-   * otherwise falls back to the search input.
-   */
+  /** Return keyboard focus to the row/input that opened a feed (back nav). */
   restoreFocus(): void;
 }
 
-/** Convert a legacy subscription id into a feed request. */
-export function requestFromSubscription(sub: Subscription): FeedRequest | null {
-  const s = String(sub.id);
-  if (s.startsWith('yt:')) {
-    const p = s.split(':'); // yt:<type>:<id>
-    const type = p[1];
-    const id = p.slice(2).join(':');
-    if ((type === 'playlist' || type === 'channel' || type === 'video') && id) {
-      return { kind: 'yt', info: { type, id } };
-    }
-    // Older entries may carry the token instead
-    const ref = sub.yt ? ytFromToken(sub.yt) : null;
-    return ref ? { kind: 'yt', info: ref } : null;
-  }
-  if (s.startsWith('rss:')) return { kind: 'rss', url: s.slice(4) };
-  return { kind: 'itunes', id: s };
-}
+export function initSearchView(deps: SearchViewDeps): SearchView {
+  const el = viewEl('search');
+  el.innerHTML = `
+    <div class="view-inner search-inner">
+      <h1 class="view-title search-title" data-i18n="nav_search">Ara</h1>
+      <div class="search-row">
+        <input class="text-input search-input" id="searchInput" type="text"
+          placeholder="Podcast adı, Apple Podcasts veya YouTube linki..." data-i18n-ph="search_placeholder" />
+        <button class="btn btn-primary search-btn" id="searchBtn" data-i18n="btn_search">Ara →</button>
+      </div>
+      <div class="results-list" id="resultsList" aria-live="polite"></div>
+    </div>`;
 
-export function initSearchScreen(deps: SearchScreenDeps): SearchScreen {
-  const screen = must('searchScreen');
   const input = must<HTMLInputElement>('searchInput');
   const btn = must<HTMLButtonElement>('searchBtn');
   const list = must('resultsList');
-  const homeLangSel = must<HTMLSelectElement>('homeLangSel');
 
   let searchAbort: AbortController | null = null;
-  let hasSearchResults = false;
   // The row the user activated to open a feed — restored on back navigation.
   let lastFocusedRow: HTMLElement | null = null;
 
+  /** Artwork img with a calm placeholder fallback (missing art / dead CDN). */
+  function rowArt(art: string): HTMLElement {
+    const src = httpsOnly(art);
+    if (!src) return h('div', { className: 'row-art' });
+    const img = h('img', {
+      className: 'row-art',
+      src,
+      alt: '',
+      attrs: { loading: 'lazy', decoding: 'async' },
+    });
+    img.addEventListener('error', () => img.replaceWith(h('div', { className: 'row-art' })), {
+      once: true,
+    });
+    return img;
+  }
+
   function resultRow(opts: {
     art: string;
     name: string;
     author: string;
     count?: string;
     onOpen: () => void;
-    onRemove?: () => void;
   }): HTMLElement {
-    const info = h(
-      'div',
-      { className: 'result-info' },
-      h('div', { className: 'result-name' }, opts.name || '—'),
-      h('div', { className: 'result-author' }, opts.author || ''),
-    );
-    if (opts.count) info.append(h('div', { className: 'result-count' }, opts.count));
-
     const row = h(
       'div',
-      { className: 'result-item', role: 'button', tabIndex: 0 },
-      h('img', {
-        className: 'result-thumb',
-        src: httpsOnly(opts.art),
-        alt: '',
-        attrs: { loading: 'lazy', decoding: 'async' },
-      }),
-      info,
+      { className: 'row', role: 'button', tabIndex: 0 },
+      rowArt(opts.art),
+      h(
+        'div',
+        { className: 'row-info' },
+        h('div', { className: 'row-name' }, opts.name || '—'),
+        h('div', { className: 'row-sub' }, opts.author || ''),
+      ),
+      opts.count ? h('div', { className: 'row-meta' }, opts.count) : null,
     );
-    if (opts.onRemove) {
-      const rm = h(
-        'button',
-        {
-          className: 'ep-dl-btn unfav',
-          title: t('fav_btn'),
-          attrs: { 'aria-label': t('fav_btn'), 'data-unfav': '1' },
-        },
-        icon('ic-star', 'icon-fill'),
-      );
-      row.append(rm);
-    } else {
-      row.append(h('div', { className: 'result-arrow' }, '›'));
-    }
-    row.addEventListener('click', (e) => {
-      if (opts.onRemove && (e.target as HTMLElement).closest('[data-unfav]')) {
-        e.stopPropagation();
-        opts.onRemove();
-        return;
-      }
+    row.addEventListener('click', () => {
       lastFocusedRow = row;
       opts.onOpen();
     });
     row.addEventListener('keydown', (e) => {
       if (e.key !== 'Enter' && e.key !== ' ') return;
-      if (e.target !== row) return; // let the unfav button keep its native keys
       e.preventDefault();
       lastFocusedRow = row;
       opts.onOpen();
@@ -118,6 +98,29 @@ export function initSearchScreen(deps: SearchScreenDeps): SearchScreen {
     return row;
   }
 
+  function ytRow(y: YtSearchItem): HTMLElement {
+    const count =
+      y.kind === 'video'
+        ? fmtDur(y.extra * 1000)
+        : y.kind === 'playlist' && y.extra
+          ? `${y.extra} ${t('ep_count_unit')}`
+          : '';
+    // Piped instances proxy thumbnails through themselves and are often dead —
+    // for videos the official CDN is deterministic from the id and reliable.
+    const art = y.kind === 'video' ? `https://i.ytimg.com/vi/${y.id}/mqdefault.jpg` : y.thumb;
+    return resultRow({
+      art,
+      name: y.title,
+      author: y.author || 'YouTube',
+      ...(count ? { count } : {}),
+      onOpen: () =>
+        deps.openFeed({
+          kind: 'yt',
+          info: { type: y.kind === 'video' ? 'video' : y.kind, id: y.id },
+        }),
+    });
+  }
+
   async function doSearch(): Promise<void> {
     const raw = input.value.trim();
     if (!raw) return;
@@ -191,7 +194,6 @@ export function initSearchScreen(deps: SearchScreenDeps): SearchScreen {
               }),
             );
           }
-          hasSearchResults = true;
         }
       })
       .catch((e: Error) => {
@@ -208,7 +210,6 @@ export function initSearchScreen(deps: SearchScreenDeps): SearchScreen {
         searching.remove();
         ytBox.append(h('div', { className: 'search-hint' }, t('sec_youtube')));
         for (const y of ytItems.slice(0, 8)) ytBox.append(ytRow(y));
-        hasSearchResults = true;
       })
       .catch(() => {
         /* YouTube side is best-effort */
@@ -219,79 +220,15 @@ export function initSearchScreen(deps: SearchScreenDeps): SearchScreen {
       });
   }
 
-  function ytRow(y: YtSearchItem): HTMLElement {
-    const count =
-      y.kind === 'video'
-        ? fmtDur(y.extra * 1000)
-        : y.kind === 'playlist' && y.extra
-          ? `${y.extra} ${t('ep_count_unit')}`
-          : '';
-    return resultRow({
-      art: y.thumb,
-      name: y.title,
-      author: y.author || 'YouTube',
-      ...(count ? { count } : {}),
-      onOpen: () =>
-        deps.openFeed({
-          kind: 'yt',
-          info: { type: y.kind === 'video' ? 'video' : y.kind, id: y.id },
-        }),
-    });
-  }
-
-  function renderFavs(): void {
-    const favs = subscriptions();
-    list.replaceChildren();
-    if (!favs.length) return;
-    const head = h('div', { className: 'search-hint' });
-    const star = icon('ic-star', 'icon-fill');
-    star.setAttribute('style', 'width:12px;height:12px;vertical-align:-1px;color:var(--accent)');
-    head.append(star, ' ' + t('favs_title'));
-    list.append(head);
-    for (const f of favs) {
-      list.append(
-        resultRow({
-          art: f.art,
-          name: f.name,
-          author: f.artist,
-          onOpen: () => {
-            const req = requestFromSubscription(f);
-            if (req) deps.openFeed(req);
-          },
-          onRemove: () => {
-            removeSubscription(f.id);
-            renderFavs();
-          },
-        }),
-      );
-    }
-  }
-
-  // Events
   input.addEventListener('keydown', (e) => {
     if (e.key === 'Enter') void doSearch();
   });
   btn.addEventListener('click', () => void doSearch());
-  homeLangSel.addEventListener('change', () => {
-    const lang = homeLangSel.value;
-    if (isLangCode(lang)) {
-      setSetting('lang', lang);
-      applyLang(lang);
-    }
-  });
-  settings.subscribe((S) => {
-    homeLangSel.value = S.lang;
-  });
 
-  return {
-    el: screen,
-    show() {
-      screen.classList.remove('screen-enter');
-      void screen.offsetWidth;
-      screen.classList.add('screen-enter');
-      if (!hasSearchResults) renderFavs();
-    },
-    renderFavs,
+  const view: SearchView = {
+    name: 'search',
+    el,
+    focusTarget: () => input,
     focusInput: () => input.focus(),
     restoreFocus() {
       if (lastFocusedRow?.isConnected) lastFocusedRow.focus({ preventScroll: false });
@@ -299,4 +236,6 @@ export function initSearchScreen(deps: SearchScreenDeps): SearchScreen {
       lastFocusedRow = null;
     },
   };
+  registerView(view);
+  return view;
 }
diff --git a/src/ui/views/settings.ts b/src/ui/views/settings.ts
new file mode 100644
index 0000000..f174e29
--- /dev/null
+++ b/src/ui/views/settings.ts
@@ -0,0 +1,377 @@
+/**
+ * Settings view — playback, appearance (theme + dynamic accent swatches from
+ * theme.ts ACCENT_SWATCHES), list, language, data sections. Ported from the
+ * retired <dialog> panel: markup `ed59840:src/ui/shell.ts` (SETTINGS_PANEL) +
+ * logic `ed59840:src/ui/screens/settings.ts`, now a plain page view.
+ *
+ * Keeps the legacy element IDs and data-i18n keys, keeps writing the
+ * --player-font-size / --list-row-height side-effect tokens on documentElement.
+ */
+
+import { t } from '../../i18n';
+import { createLangMenu } from '../lang-menu';
+import { clearAllDownloads, storageInfo } from '../../player/offline';
+import { clearProgress, saveProgressNow } from '../../storage/progress';
+import { local } from '../../storage/local';
+import { exportOpml, parseOpml } from '../../storage/opml';
+import { subscriptions, toggleSubscription, isSubscribed } from '../../storage/subscriptions';
+import { pbSetRate } from '../../player/engine';
+import { settings, setSetting, type Settings, type SortDir, type ThemeName } from '../../state/settings';
+import { fmtBytes } from '../../lib/format';
+import { toast } from '../toast';
+import { confirmDialog } from '../confirm';
+import { ACCENT_SWATCHES, normalizeAccent, applyAccent, applyTheme } from '../theme';
+import { registerView, viewEl, type View } from '../views';
+import { h } from '../h';
+
+export interface SettingsViewDeps {
+  onDataCleared(): void;
+}
+
+const MARKUP = `
+<div class="view-inner settings-inner">
+  <h1 class="view-title" data-i18n="settings_heading">Ayarlar</h1>
+
+  <section class="s-section">
+    <div class="s-section-title" data-i18n="s_playback">Oynatma</div>
+
+    <div class="s-row">
+      <div>
+        <div class="s-label" data-i18n="s_default_speed">Varsayılan Hız</div>
+        <div class="s-sublabel" data-i18n="s_speed_sub">Bölümler arası korunur</div>
+      </div>
+      <select class="s-select" id="s_defaultSpeed">
+        <option value="0.5">0.5×</option>
+        <option value="0.75">0.75×</option>
+        <option value="1" selected>1×</option>
+        <option value="1.25">1.25×</option>
+        <option value="1.5">1.5×</option>
+        <option value="1.75">1.75×</option>
+        <option value="2">2×</option>
+        <option value="2.5">2.5×</option>
+      </select>
+    </div>
+
+    <div class="s-row">
+      <div><div class="s-label" data-i18n="s_skip_back">Geri Atla (saniye)</div></div>
+      <select class="s-select" id="s_skipBack">
+        <option value="5">5s</option>
+        <option value="10">10s</option>
+        <option value="15" selected>15s</option>
+        <option value="30">30s</option>
+        <option value="60">60s</option>
+      </select>
+    </div>
+
+    <div class="s-row">
+      <div><div class="s-label" data-i18n="s_skip_fwd">İleri Atla (saniye)</div></div>
+      <select class="s-select" id="s_skipForward">
+        <option value="10">10s</option>
+        <option value="15">15s</option>
+        <option value="30" selected>30s</option>
+        <option value="45">45s</option>
+        <option value="60">60s</option>
+        <option value="90">90s</option>
+      </select>
+    </div>
+
+    <div class="s-row">
+      <div><div class="s-label" data-i18n="s_auto_next">Otomatik Sonraki Bölüm</div></div>
+      <label class="s-toggle">
+        <input type="checkbox" id="s_autoNext" checked>
+        <span class="s-toggle-track"></span>
+      </label>
+    </div>
+
+    <div class="s-row">
+      <div><div class="s-label" data-i18n="s_resume">Kaldığım Yerden Devam</div></div>
+      <label class="s-toggle">
+        <input type="checkbox" id="s_resumePos" checked>
+        <span class="s-toggle-track"></span>
+      </label>
+    </div>
+  </section>
+
+  <section class="s-section">
+    <div class="s-section-title" data-i18n="s_appearance">Görünüm</div>
+
+    <div class="s-row">
+      <div><div class="s-label" data-i18n="s_accent">Vurgu Rengi</div></div>
+    </div>
+    <div class="s-color-row" id="colorSwatches"></div>
+
+    <div class="s-row">
+      <div><div class="s-label" data-i18n="s_font_size">Yazı Boyutu</div></div>
+      <select class="s-select" id="s_fontSize">
+        <option value="11px" data-i18n="size_small">Küçük</option>
+        <option value="13px" selected data-i18n="size_normal">Normal</option>
+        <option value="15px" data-i18n="size_large">Büyük</option>
+        <option value="17px" data-i18n="size_xlarge">Çok Büyük</option>
+      </select>
+    </div>
+
+    <div class="s-row">
+      <div><div class="s-label" data-i18n="s_row_height">Liste Satır Yüksekliği</div></div>
+      <select class="s-select" id="s_rowHeight">
+        <option value="42px" data-i18n="row_compact">Sıkı</option>
+        <option value="54px" selected data-i18n="size_normal">Normal</option>
+        <option value="66px" data-i18n="row_spacious">Geniş</option>
+      </select>
+    </div>
+
+    <div class="s-row">
+      <div><div class="s-label" data-i18n="s_theme_label">Karanlık / Açık Tema</div></div>
+      <select class="s-select" id="s_theme">
+        <option value="auto" selected data-i18n="theme_auto">Otomatik (sistem)</option>
+        <option value="dark" data-i18n="theme_dark">Karanlık</option>
+        <option value="light" data-i18n="theme_light">Açık</option>
+        <option value="oled" data-i18n="theme_oled">OLED Siyah</option>
+      </select>
+    </div>
+  </section>
+
+  <section class="s-section">
+    <div class="s-section-title" data-i18n="s_list">Liste</div>
+
+    <div class="s-row">
+      <div><div class="s-label" data-i18n="s_default_sort">Varsayılan Sıralama</div></div>
+      <select class="s-select" id="s_defaultSort">
+        <option value="asc" selected data-i18n="sort_asc">Eskiden → Yeniye</option>
+        <option value="desc" data-i18n="sort_desc">Yeniden → Eskiye</option>
+      </select>
+    </div>
+
+    <div class="s-row">
+      <div><div class="s-label" data-i18n="s_show_dl">İndirme Butonu Göster</div></div>
+      <label class="s-toggle">
+        <input type="checkbox" id="s_showDl" checked>
+        <span class="s-toggle-track"></span>
+      </label>
+    </div>
+  </section>
+
+  <section class="s-section">
+    <div class="s-section-title" data-i18n="s_lang_title">Dil / Language</div>
+    <div class="s-row">
+      <div><div class="s-label" data-i18n="s_lang_label">Arayüz Dili</div></div>
+      <div id="s_lang"></div>
+    </div>
+  </section>
+
+  <section class="s-section">
+    <div class="s-section-title" data-i18n="s_data">Veri</div>
+    <div class="s-row">
+      <div><div class="s-label" data-i18n="s_storage">Depolama</div></div>
+      <span class="s-sublabel" id="storageUsage">—</span>
+    </div>
+    <div class="s-data-btns">
+      <button class="s-btn" id="btnOpmlExport" data-i18n="btn_opml_export">OPML Dışa Aktar</button>
+      <button class="s-btn" id="btnOpmlImport" data-i18n="btn_opml_import">OPML İçe Aktar</button>
+      <button class="s-btn" id="btnJsonExport" data-i18n="btn_json_export">JSON Yedeği İndir</button>
+      <button class="s-btn danger" id="btnClearDownloads" data-i18n="btn_clear_downloads">🗑 İndirilenleri Sil</button>
+      <button class="s-btn danger" id="btnClearProgress" data-i18n="btn_clear_progress">🗑 Tüm İlerlemeyi Sıfırla</button>
+      <button class="s-btn danger" id="btnClearAll" data-i18n="btn_clear_all">🗑 Tüm Verileri Temizle</button>
+      <input type="file" id="opmlFile" accept=".opml,.xml,text/xml,application/xml" hidden>
+    </div>
+  </section>
+</div>`;
+
+export function initSettingsView(deps: SettingsViewDeps): View {
+  const el = viewEl('settings');
+  el.innerHTML = MARKUP;
+
+  const pick = <T extends HTMLElement>(id: string): T => {
+    const node = el.querySelector<T>('#' + id);
+    if (!node) throw new Error(`#${id} missing from settings view`);
+    return node;
+  };
+
+  const sSpeed = pick<HTMLSelectElement>('s_defaultSpeed');
+  const sSkipBack = pick<HTMLSelectElement>('s_skipBack');
+  const sSkipFwd = pick<HTMLSelectElement>('s_skipForward');
+  const sAutoNext = pick<HTMLInputElement>('s_autoNext');
+  const sResume = pick<HTMLInputElement>('s_resumePos');
+  const sFontSize = pick<HTMLSelectElement>('s_fontSize');
+  const sRowHeight = pick<HTMLSelectElement>('s_rowHeight');
+  const sTheme = pick<HTMLSelectElement>('s_theme');
+  const sSort = pick<HTMLSelectElement>('s_defaultSort');
+  const sShowDl = pick<HTMLInputElement>('s_showDl');
+  // Language: the shared flag listbox (native <option> can't render flags)
+  pick<HTMLDivElement>('s_lang').append(createLangMenu());
+  const swatchWrap = pick<HTMLDivElement>('colorSwatches');
+  const storageUsageEl = pick<HTMLSpanElement>('storageUsage');
+
+  // ── accent swatches (now dynamic from ACCENT_SWATCHES) ───────────
+  const swatches = ACCENT_SWATCHES.map(({ hex, name }) => {
+    const sw = h('div', {
+      className: 's-color-swatch',
+      style: `background:${hex}`,
+      attrs: { role: 'button', tabindex: '0', 'aria-label': name },
+      dataset: { color: hex },
+    });
+    const choose = (): void => {
+      setSetting('accentColor', hex);
+      applyAccent(hex);
+      updateSwatchActive();
+    };
+    sw.addEventListener('click', choose);
+    sw.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        choose();
+      }
+    });
+    return sw;
+  });
+  swatchWrap.append(...swatches);
+
+  function updateSwatchActive(): void {
+    const active = normalizeAccent(settings().accentColor);
+    for (const sw of swatches) {
+      sw.classList.toggle('active', sw.dataset.color === active);
+      sw.setAttribute('aria-pressed', String(sw.dataset.color === active));
+    }
+  }
+
+  // ── input <-> settings sync ──────────────────────────────────────
+  function syncInputs(S: Settings): void {
+    sSpeed.value = String(S.defaultSpeed);
+    sSkipBack.value = String(S.skipBack);
+    sSkipFwd.value = String(S.skipForward);
+    sAutoNext.checked = S.autoNext;
+    sResume.checked = S.resumePos;
+    sFontSize.value = S.fontSize;
+    sRowHeight.value = S.rowHeight;
+    sTheme.value = S.theme;
+    sSort.value = S.defaultSort;
+    sShowDl.checked = S.showDl;
+    updateSwatchActive();
+  }
+
+  function applySide(S: Settings): void {
+    document.documentElement.style.setProperty('--player-font-size', S.fontSize);
+    document.documentElement.style.setProperty('--list-row-height', S.rowHeight);
+  }
+
+  async function refreshStorageUsage(): Promise<void> {
+    const info = await storageInfo();
+    storageUsageEl.textContent =
+      t('storage_usage', fmtBytes(info.usageBytes), fmtBytes(info.quotaBytes)) +
+      (info.downloadCount ? ` · ${info.downloadCount} ⤓ ${fmtBytes(info.downloadBytes)}` : '');
+  }
+
+  // ── wiring ───────────────────────────────────────────────────────
+  sSpeed.addEventListener('change', () => {
+    const v = parseFloat(sSpeed.value) || 1;
+    setSetting('defaultSpeed', v);
+    pbSetRate(v);
+  });
+  sSkipBack.addEventListener('change', () => setSetting('skipBack', parseInt(sSkipBack.value) || 15));
+  sSkipFwd.addEventListener('change', () => setSetting('skipForward', parseInt(sSkipFwd.value) || 30));
+  sAutoNext.addEventListener('change', () => setSetting('autoNext', sAutoNext.checked));
+  sResume.addEventListener('change', () => setSetting('resumePos', sResume.checked));
+  sFontSize.addEventListener('change', () => {
+    setSetting('fontSize', sFontSize.value);
+    applySide(settings());
+  });
+  sRowHeight.addEventListener('change', () => {
+    setSetting('rowHeight', sRowHeight.value);
+    applySide(settings());
+  });
+  sTheme.addEventListener('change', () => {
+    setSetting('theme', sTheme.value as ThemeName);
+    applyTheme(settings().theme);
+  });
+  sSort.addEventListener('change', () => setSetting('defaultSort', sSort.value as SortDir));
+  sShowDl.addEventListener('change', () => setSetting('showDl', sShowDl.checked));
+
+  // ── data section ─────────────────────────────────────────────────
+  function saveFile(name: string, mime: string, content: string): void {
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(new Blob([content], { type: mime }));
+    a.download = name;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(a.href), 5000);
+  }
+
+  pick('btnOpmlExport').addEventListener('click', () => {
+    saveFile('seseri-subscriptions.opml', 'text/x-opml', exportOpml(subscriptions()));
+    toast(t('toast_opml_exported'));
+  });
+
+  const opmlFile = pick<HTMLInputElement>('opmlFile');
+  pick('btnOpmlImport').addEventListener('click', () => opmlFile.click());
+  opmlFile.addEventListener('change', () => {
+    const f = opmlFile.files?.[0];
+    opmlFile.value = '';
+    if (!f) return;
+    void f.text().then((xml) => {
+      try {
+        const entries = parseOpml(xml);
+        let added = 0;
+        for (const e of entries) {
+          if (!isSubscribed(e.id)) {
+            toggleSubscription({ id: e.id, name: e.name, artist: '', art: '' });
+            added++;
+          }
+        }
+        toast(t('opml_imported', added));
+      } catch {
+        toast(t('opml_invalid'), 'error');
+      }
+    });
+  });
+
+  pick('btnJsonExport').addEventListener('click', () => {
+    const dump: Record<string, unknown> = { exportedAt: new Date().toISOString() };
+    for (const key of ['pp_settings', 'pp_favs', 'pp_prog']) {
+      dump[key] = local.get(key, null);
+    }
+    saveFile('seseri-backup.json', 'application/json', JSON.stringify(dump, null, 2));
+    toast(t('toast_json_exported'));
+  });
+
+  pick('btnClearDownloads').addEventListener('click', () => {
+    void confirmDialog('confirm_clear_downloads').then((ok) => {
+      if (!ok) return;
+      void clearAllDownloads().then(() => {
+        toast(t('dl_removed'));
+        void refreshStorageUsage();
+      });
+    });
+  });
+
+  pick('btnClearProgress').addEventListener('click', () => {
+    void confirmDialog('confirm_clear_progress').then((ok) => {
+      if (!ok) return;
+      clearProgress();
+      deps.onDataCleared();
+    });
+  });
+
+  pick('btnClearAll').addEventListener('click', () => {
+    void confirmDialog('confirm_clear_all').then((ok) => {
+      if (!ok) return;
+      saveProgressNow();
+      local.clear();
+      location.reload();
+    });
+  });
+
+  // ── init ─────────────────────────────────────────────────────────
+  syncInputs(settings());
+  applySide(settings());
+  settings.subscribe((S) => syncInputs(S));
+
+  const view: View = {
+    name: 'settings',
+    el,
+    onShow() {
+      void refreshStorageUsage();
+    },
+  };
+  registerView(view);
+  return view;
+}
diff --git a/src/youtube/resolver.ts b/src/youtube/resolver.ts
index 2b5e28e..8e53927 100644
--- a/src/youtube/resolver.ts
+++ b/src/youtube/resolver.ts
@@ -21,7 +21,9 @@ function epFromItem(it: YtItem): Episode {
     episodeUrl: '',
     trackTimeMillis: (it.durationSec || 0) * 1000,
     ytId: it.videoId,
-    art: it.thumb || thumbOf(it.videoId),
+    // The official CDN is deterministic from the id; Piped/Invidious thumbs
+    // are proxied through instances that frequently go dark.
+    art: thumbOf(it.videoId),
   };
 }
 
@@ -97,7 +99,7 @@ export async function resolveYouTube(
           episodeUrl: '',
           trackTimeMillis: 0,
           ytId: id,
-          art: it?.thumb || thumbOf(id),
+          art: thumbOf(id),
         };
       };
       if (fullIds && fullIds.length > parsed.items.length) {