Index: src/views/partials/search-styles.ejs
===================================================================
--- src/views/partials/search-styles.ejs	(revision fd8faf581c665d69b41dd6f5262d74bf432c0e1b)
+++ src/views/partials/search-styles.ejs	(revision fd8faf581c665d69b41dd6f5262d74bf432c0e1b)
@@ -0,0 +1,70 @@
+<%#
+  De opmaak van het zoeken: het vlak (balk + vak) en wat erin staat. Staat in
+  de topnav, dus op elke pagina: de overlay kan overal open, en de pagina
+  /search gebruikt precies dezelfde regels.
+%>
+<style>
+  /* ── Het vlak: de balk bovenaan, het vak neemt de rest ───────────────────
+     Boven de tabbalk (1050) en de mini-speler (1000), onder een open blad
+     (1100). De vorige overlay lag op 200 en schoof op een telefoon onder de
+     tabbalk, zodat het onderste stuk resultaten wegviel. */
+  .search-surface { position: fixed; inset: 0; z-index: 1060; display: flex; flex-direction: column;
+    background: var(--paper); color: var(--ink); }
+  .search-surface[hidden] { display: none; }
+  .search-bar { flex: 0 0 auto; padding: .75rem 0; padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
+    border-bottom: 1px solid var(--rule);
+    background: color-mix(in srgb, var(--paper) 94%, var(--ink) 6%); }
+  .search-bar-form { display: flex; align-items: center; gap: .5rem; max-width: 760px; margin: 0 auto; padding: 0 1rem; box-sizing: border-box; }
+  .search-bar-form input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: .7rem 1rem; box-sizing: border-box;
+    border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); color: var(--ink);
+    font-family: var(--font-ui, inherit); font-size: 1rem; }
+  .search-bar-form input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
+  .search-bar-btn { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
+    border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft, var(--ink)); cursor: pointer;
+    text-decoration: none; -webkit-tap-highlight-color: transparent; }
+  .search-bar-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
+  .search-bar-btn svg { width: 22px; height: 22px; }
+  /* De goot aan beide kanten houdt de kolom op dezelfde lijn als de balk: een
+     scrollbalk alleen rechts schuift de resultaten anders een stukje naar links. */
+  .search-box { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
+    scrollbar-gutter: stable both-edges; }
+  .search-box-inner { max-width: 760px; margin: 0 auto; padding: .5rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
+  .search-box-inner:empty { display: none; }
+  /* Zolang het vlak open is, scrolt de pagina eronder niet mee. */
+  html.search-open, html.search-open body { overflow: hidden; }
+
+  /* ── Wat er in het vak staat ─────────────────────────────────────────── */
+  .sr-section { margin: 1rem 0 0; }
+  .sr-title { margin: 0 0 .35rem; padding: 0 .25rem; font: 700 .72rem/1.4 var(--font-ui, inherit);
+    text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft, var(--ink-muted)); }
+  .sr-list { list-style: none; margin: 0; padding: 0; }
+  .sr-item { display: flex; flex-direction: column; gap: .1rem; min-height: 44px; padding: .6rem .6rem; border-radius: 10px;
+    color: var(--ink); text-decoration: none; box-sizing: border-box; }
+  .sr-item:hover, .sr-item:focus-visible { background: var(--paper-2); }
+  .sr-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .sr-item-row { flex-direction: row; align-items: center; justify-content: space-between; }
+  .sr-item-title { font-weight: 600; overflow-wrap: anywhere; }
+  .sr-item:hover .sr-item-title { color: var(--accent); }
+  .sr-item-meta { font-size: .82rem; color: var(--ink-soft, var(--ink-muted)); }
+  .sr-item-snippet { font-size: .9rem; line-height: 1.5; color: var(--ink-soft); overflow: hidden;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+  .sr-item-snippet mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; padding: 0 .15em; border-radius: 3px; }
+  .sr-tracks { display: flex; flex-direction: column; gap: .15rem; }
+  .sr-track.post-audio-track { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .45rem .6rem; border-radius: 10px; }
+  .sr-track-cover { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 6px; background: var(--paper-2) center / cover; }
+  .sr-track .pat-info { flex: 1; min-width: 0; }
+  .sr-track .pat-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .sr-track .pat-artist { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .sr-track-link { flex: 0 0 auto; font-size: .82rem; color: var(--accent); text-decoration: none; white-space: nowrap; }
+  .sr-track-link:hover { text-decoration: underline; }
+  .sr-note { margin: .25rem 0; padding: .7rem .8rem; border-radius: 10px; font-size: .9rem; line-height: 1.5;
+    background: var(--paper-2); color: var(--ink-soft, var(--ink-muted)); }
+  .sr-empty { margin: 3rem 0; text-align: center; color: var(--ink-soft, var(--ink-muted)); }
+  .sr-loading { display: flex; align-items: center; gap: 10px; padding: 1rem .6rem; color: var(--ink-soft, var(--ink-muted)); font-size: .9rem; }
+  .sr-loading::before { content: ''; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%;
+    border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent);
+    animation: sr-spin .8s linear infinite; }
+  @keyframes sr-spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .sr-loading::before { animation: none; } }
+  .sr-section .rp-card { margin-top: .25rem; }
+</style>