From 6bbfaf46251ff5bb1e9151f6b3a1a1f9752be8f5 Mon Sep 17 00:00:00 2001
From: casper <casper@noreply.git.backend-3.com>
Date: Wed, 9 Sep 2026 06:30:07 +0000
Subject: [PATCH] Upload files to "static"

---
 static/index.html |  349 +++++++++++++++
 static/styles.css | 1030 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 1379 insertions(+)
 create mode 100644 static/index.html
 create mode 100644 static/styles.css

diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..bb6c77e
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="theme-color" content="#101010" />
+    <title>s1ne</title>
+    <link rel="stylesheet" href="/static/styles.css" />
+  </head>
+
+  <body>
+    <main class="page page-home" id="pageRoot">
+      <div class="view-tabs">
+        <button id="backButton" class="tab-button" type="button" hidden>back</button>
+
+        <button
+          id="favoritesTab"
+          class="tab-button icon-tab-button"
+          type="button"
+          aria-label="favorites"
+          title="favorites"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path
+              d="m5.825 21l2.325-7.6L2 9h7.6L12 1l2.4 8H22l-6.15 4.4l2.325 7.6L12 16.3z"
+            />
+          </svg>
+        </button>
+
+        <button
+          id="playlistsTab"
+          class="tab-button icon-tab-button"
+          type="button"
+          aria-label="playlists"
+          title="playlists"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path
+              d="M3 16v-2h8v2zm0-4v-2h12v2zm0-4V6h12v2zm13 13v-8l6 4z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div style="padding-bottom:3px;padding-top:3px;"></div>
+      <section id="searchHero" class="search-hero" aria-label="search">
+        <div class="search-hero-inner">
+          <form id="searchForm" class="search-form search-form-hero">
+            <input
+              id="searchInput"
+              class="search-input"
+              type="search"
+              placeholder=""
+              autocomplete="off"
+              autofocus
+            />
+          </form>
+        </div>
+      </section>
+
+      <div id="status" class="status" aria-live="polite" style="opacity:0.1;"></div>
+      <div id="playlistHeader" class="playlist-header" hidden>
+      <div id="playlistTitle" class="playlist-title"></div>
+  <div class="playlist-header-actions">
+    <button id="playlistMoveUpButton" type="button" hidden>↑</button>
+    <button id="playlistMoveDownButton" type="button" hidden>↓</button>
+    <button id="playlistRemoveButton" type="button" hidden>×</button>
+  </div>
+</div>
+      <section id="resultsSection" class="results-section results-section-home">
+        <table class="results-table">
+          <thead>
+            <tr>
+              <th class="col-index">#</th>
+              <th class="col-title">title</th>
+              <th class="col-channel">channel</th>
+              <th class="col-duration">length</th>
+              <th class="col-meta">views</th>
+              <th class="col-play"></th>
+              <th class="col-download"></th>
+              <th class="col-fav"></th>
+              <th class="col-playlist"></th>
+            </tr>
+          </thead>
+
+          <tbody id="resultsBody">
+            <tr>
+              <td colspan="9" class="empty">no results</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div id="scrollSentinel" class="scroll-sentinel"></div>
+      </section>
+
+      <section id="queuePanel" class="queue-panel" style="background:transparent;opacity:0;display:none;" hidden>
+        <div class="queue-panel-header">
+          <strong>up next</strong>
+          <div class="queue-panel-actions">
+            <select id="queueModeSelect" aria-label="upcoming tracks">
+              <option value="queue">queue</option>
+              <option value="recommendations">recommendations</option>
+            </select>
+            <button id="queueRefreshButton" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+             <path fill="#f2f2f2" d="M4.654 19.346v-1H7.75l-1.054-1.042q-1.148-1.148-1.672-2.49q-.524-1.34-.524-2.724q0-2.41 1.374-4.361T9.5 4.942v1.062q-1.82.765-2.91 2.424t-1.09 3.66q0 1.222.464 2.37q.463 1.15 1.44 2.127l1.019 1.019v-3.027h1v4.77zm9.846-.288v-1.062q1.82-.765 2.91-2.424t1.09-3.66q0-1.222-.463-2.37q-.464-1.15-1.44-2.126l-1.02-1.02v3.027h-1v-4.77h4.77v1H16.25l1.054 1.043q1.148 1.148 1.672 2.49q.524 1.341.524 2.726q0 2.41-1.374 4.36T14.5 19.058"/></svg></button>
+          </div>
+        </div>
+
+        <div id="queueList" style="display:none;opacity:0;" class="queue-list"></div>
+      </section>
+    </main>
+
+    <footer id="playerBar" class="player hidden">
+      <div class="now-playing">
+        <div id="playerTitle">∴s1neヅ★‣</div>
+        <div id="playerMeta" class="muted">choose a track</div>
+      </div>
+
+      <div class="player-controls">
+        <button
+          id="prevTrackButton"
+          class="queue-control-button icon-control-button"
+          type="button"
+          aria-label="previous track"
+          title="previous track"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M6 5h2v14H6zm3.5 7L19 5v14z" />
+          </svg>
+        </button>
+
+        <button
+          id="playPauseButton"
+          class="queue-control-button icon-control-button primary-control play-button"
+          type="button"
+          aria-label="play"
+          title="play"
+        >
+          <svg class="play-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M8 5v14l11-7z" />
+          </svg>
+
+          <svg class="pause-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M7 5h4v14H7zm6 0h4v14h-4z" />
+          </svg>
+        </button>
+
+        <button
+          id="nextTrackButton"
+          class="queue-control-button icon-control-button"
+          type="button"
+          aria-label="next"
+          title="next"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="m5 5 9.5 7L5 19zm11 0h2v14h-2z" />
+          </svg>
+        </button>
+
+        <input
+          id="seekBar"
+          class="player-seek"
+          type="range"
+          min="0"
+          max="100"
+          value="0"
+          step="0.1"
+          aria-label="seek through track"
+        />
+
+        <span id="currentTime">0:00</span>
+        <span aria-hidden="true">-</span>
+        <span id="duration">0:00</span>
+
+        <input
+          id="volumeSlider"
+          class="player-volume"
+          type="range"
+          min="0"
+          max="100"
+          value="100"
+          step="1"
+          aria-label="volume"
+        />
+
+        <button
+          id="autoplayButton"
+          class="queue-control-button icon-control-button mode-control"
+          type="button"
+          aria-label="autoplay enabled"
+          aria-pressed="true"
+          title="autoplay on"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M7 5v14l10-7z" />
+            <path d="M18 3h2v6h-2zM16 5h6v2h-6z" />
+          </svg>
+          <span class="control-indicator" aria-hidden="true"></span>
+        </button>
+
+        <button
+          id="shuffleButton"
+          class="queue-control-button icon-control-button mode-control"
+          type="button"
+          aria-label="shuffle disabled"
+          aria-pressed="false"
+          title="shuffle off"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path
+              d="M16 3h5v5h-2V6.4l-3.7 3.7-1.4-1.4L17.6 5H16zM4 6h3.2c1.7 0 3.3.8 4.3 2.2l5 6.9c.6.8 1.5 1.3 2.5 1.3h2v2h-2c-1.7 0-3.3-.8-4.3-2.2l-5-6.9C9.1 8.5 8.2 8 7.2 8H4zm0 10.4h3.2c1 0 1.9-.5 2.5-1.3l1.2-1.7 1.2 1.7-1 1.3c-.9 1.3-2.4 2-3.9 2H4zM19 14h2v5h-5v-2h1.6l-1.7-1.7 1.2-1.7L19 15.5z"
+            />
+          </svg>
+          <span class="control-indicator" aria-hidden="true"></span>
+        </button>
+
+        <button
+          id="loopButton"
+          class="queue-control-button icon-control-button mode-control"
+          type="button"
+          aria-label="loop disabled"
+          aria-pressed="false"
+          title="loop off"
+        >
+          <svg class="loop-all-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path
+              d="M17 2l4 4-4 4V7H7a3 3 0 0 0-3 3v1H2v-1a5 5 0 0 1 5-5h10zM7 22l-4-4 4-4v3h10a3 3 0 0 0 3-3v-1h2v1a5 5 0 0 1-5 5H7z"
+            />
+          </svg>
+
+          <svg class="loop-one-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path
+              d="M17 2l4 4-4 4V7H7a3 3 0 0 0-3 3v1H2v-1a5 5 0 0 1 5-5h10zM7 22l-4-4 4-4v3h10a3 3 0 0 0 3-3v-1h2v1a5 5 0 0 1-5 5H7z"
+            />
+            <path class="loop-one-number" d="M11 9h2v7h-2v-5h-1V9z" />
+          </svg>
+
+          <span class="control-indicator" aria-hidden="true"></span>
+        </button>
+
+        <div id="seekThemePicker" class="seek-theme-picker">
+          <button
+            id="seekThemeButton"
+            class="queue-control-button icon-control-button theme-picker-button"
+            type="button"
+            aria-label="seek bar color"
+            aria-haspopup="listbox"
+            aria-expanded="false"
+            title="seek bar color"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path
+                fill="currentColor"
+                d="M8.94 16.56c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12L8.32.7a.996.996 0 1 0-1.41 1.41l1.68 1.68l-5.15 5.15a1.49 1.49 0 0 0 0 2.12zM10 5.21L14.79 10H5.21zM19 17c1.1 0 2-.9 2-2c0-1.33-2-3.5-2-3.5s-2 2.17-2 3.5c0 1.1.9 2 2 2m1 3H4c-1.1 0-2 .9-2 2s.9 2 2 2h16c1.1 0 2-.9 2-2s-.9-2-2-2"
+              />
+            </svg>
+          </button>
+
+          <div
+            id="seekThemeMenu"
+            class="seek-theme-menu"
+            role="listbox"
+            aria-label="seek bar color"
+            hidden
+          >
+            <button
+              class="seek-theme-option"
+              type="button"
+              role="option"
+              data-seek-theme="stone"
+              data-seek-color="#817567"
+            >
+              <span class="seek-color-swatch" style="--swatch:#817567"></span>
+              stone
+            </button>
+
+            <button
+              class="seek-theme-option"
+              type="button"
+              role="option"
+              data-seek-theme="blue"
+              data-seek-color="#6fa8dc"
+            >
+              <span class="seek-color-swatch" style="--swatch:#6fa8dc"></span>
+              sky
+            </button>
+
+            <button
+              class="seek-theme-option"
+              type="button"
+              role="option"
+              data-seek-theme="green"
+              data-seek-color="#78b88b"
+            >
+              <span class="seek-color-swatch" style="--swatch:#78b88b"></span>
+              grass
+            </button>
+
+            <button
+              class="seek-theme-option"
+              type="button"
+              role="option"
+              data-seek-theme="amber"
+              data-seek-color="#d4a857"
+            >
+              <span class="seek-color-swatch" style="--swatch:#d4a857"></span>
+              gold
+            </button>
+
+            <button
+              class="seek-theme-option"
+              type="button"
+              role="option"
+              data-seek-theme="rose"
+              data-seek-color="#c97b84"
+            >
+              <span class="seek-color-swatch" style="--swatch:#c97b84"></span>
+              rose
+            </button>
+
+            <button
+              class="seek-theme-option"
+              type="button"
+              role="option"
+              data-seek-theme="violet"
+              data-seek-color="#a78bd4"
+            >
+              <span class="seek-color-swatch" style="--swatch:#a78bd4"></span>
+              lavender
+            </button>
+          </div>
+        </div>
+
+        <audio id="audioPlayer" preload="metadata"></audio>
+      </div>
+    </footer>
+
+    <script src="/static/app.js"></script>
+  </body>
+</html>
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..c6a7892
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,1030 @@
+:root{
+  --bg:#000;
+  --surface:#131213;
+  --surface-2:#232323;
+  --surface-hover:#010010;
+  --text:#f2f2f2;
+  --text-strong:#f5f5f5;
+  --muted:#c9c9c9;
+  --border:#707070;
+  --border-strong:#808080;
+  --focus:#817567;
+  --seek-accent:#817567;
+  --page-max:975px;
+  --player-height:95px;
+}
+
+*{
+  box-sizing:border-box;
+  border-radius:0!important;
+}
+
+html,
+body{
+  margin:0;
+  min-height:100%;
+  background:var(--bg);
+}
+
+body{
+  min-height:100vh;
+  color:var(--text);
+  font-family:"Courier New",Courier,monospace;
+  font-size:13px;
+  line-height:1.2;
+}
+
+button,
+input,
+audio{
+  font-family:inherit;
+}
+
+button{
+  cursor:pointer;
+}
+
+.page{
+  width:min(var(--page-max),calc(100% - 32px));
+  min-height:100vh;
+  max-height:100vh;
+  margin:0 auto;
+  padding:32px 0 calc(var(--player-height) + 56px);
+}
+
+.page.page-home{
+  display:flex;
+  flex-direction:column;
+}
+
+.view-tabs{
+  display:flex;
+  gap:8px;
+  margin-bottom:13px;
+}
+
+.tab-button{
+  padding:6px 10px;
+  border:0;
+  background:transparent;
+  color:var(--text);
+}
+
+.tab-button.active{
+   background:color-mix(in srgb,var(--seek-accent) 11%,transparent);
+}
+
+.icon-tab-button{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:34px;
+  height:30px;
+  padding:4px;
+}
+
+.icon-tab-button svg{
+  width:20px;
+  height:20px;
+  fill:currentColor;
+}
+
+.search-hero{
+  display:flex;
+  flex:1;
+  align-items:center;
+  justify-content:center;
+  min-height:calc(100vh - 220px);
+}
+
+.search-hero.is-compact{
+  min-height:0;
+}
+
+.search-hero-inner{
+  width:100%;
+  max-width:780px;
+}
+
+.page-home .search-form-hero{
+  transform:translateY(-4vh);
+}
+
+.search-input{
+  width:100%;
+  height:40px;
+  padding:8px 10px;
+  border:1px solid #ffffff22;
+  outline:none;
+  background:transparent;
+  color:var(--text);
+  font-size:13px;
+  margin-bottom:3px;
+  margin-top:3px;
+}
+
+.search-input:focus{
+  border-color:color-mix(in srgb,var(--seek-accent) 45%,transparent);
+  outline-offset:2px;
+}
+
+.status{
+  display:flex;
+  align-items:center;
+  min-height:26px;
+  color:var(--muted);
+}
+
+.results-section{
+  width:100%;
+  overflow:auto;
+}
+
+.results-section-home{
+  display:none;
+}
+
+.results-section-active{
+  display:block;
+  max-height:min(72vh,755px);
+}
+
+.results-table{
+  width:100%;
+  min-width:900px;
+  border-collapse:collapse;
+  table-layout:fixed;
+}
+button .play-button:hover{
+  border-color:#fff!important;
+  border:1px solid #fff!important;
+}
+.results-table thead th{
+  position:sticky;
+  top:0;
+  z-index:2;
+  background:var(--bg);
+}
+
+.results-table th,
+.results-table td{
+  padding:6px 7px;
+  text-align:left;
+  vertical-align:top;
+}
+
+.results-table th{
+  color:var(--muted);
+  font-weight:400;
+}
+
+.results-table tr:hover td{
+    background:color-mix(in srgb,var(--seek-accent) 12%,transparent);
+}
+
+.col-index{
+  width:36px;
+}
+
+.col-channel{
+  width:190px;
+}
+
+.col-duration{
+  width:67px;
+}
+
+.col-meta{
+  width:67px;
+}
+
+.col-play{
+  width:67px;
+  text-align:center!important;
+}
+
+.col-download{
+  width:33px;
+  padding-right:2px!important;
+  padding-left:2px!important;
+  text-align:center!important;
+}
+
+.col-fav{
+  width:33px;
+  padding-right:2px!important;
+  padding-left:2px!important;
+  text-align:center!important;
+}
+
+.col-playlist{
+  width:33px;
+  padding-right:2px!important;
+  padding-left:2px!important;
+  text-align:center!important;
+  white-space:nowrap;
+}
+
+.col-title,
+.col-channel{
+  overflow:hidden;
+}
+
+.empty{
+  padding:16px 8px!important;
+  color:var(--muted);
+}
+
+.link-button{
+  padding:0;
+  border:0;
+  background:transparent;
+  color:var(--text);
+  font-size:13px;
+  text-align:left;
+}
+
+.link-button:hover{
+  color:#f7f7f7;
+  text-decoration:underline;
+}
+
+.title-button{
+  display:inline-block;
+  max-width:100%;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.result-meta{
+  display:flex;
+  flex-wrap:wrap;
+  gap:6px;
+}
+
+.badge{
+  display:inline-block;
+  padding:4px 5px;
+  border:1px solid var(--border-strong);
+  background:rgba(9,5,11,0.07);
+  color:var(--text);
+  font-size:11px;
+  padding-left:-1px;
+  padding-right:-1px;
+}
+
+.badge.live{
+  border-color:#b15f5f;
+  background:#2a1717;
+  color:#ffd0d0;
+}
+
+.star-button,
+.download-button{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+  min-width:22px;
+  min-height:22px;
+  padding:0;
+  border:0;
+  background:transparent;
+  color:var(--muted);
+}
+
+.star-button{
+  font-size:19px;
+}
+
+.star-button.favorited{
+  color:#ffd96b;
+}
+
+.download-button svg{
+  width:17px;
+  height:17px;
+  fill:currentColor;
+}
+
+.download-button:hover{
+  color:var(--seek-accent);
+}
+
+.playlist-action-button{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  min-width:18px;
+  height:20px;
+  margin:0 1px;
+  padding:0 3px;
+  border:0;
+  background:transparent;
+  color:var(--text);
+  font-size:15px;
+}
+
+.playlist-action-button:hover{
+  background:var(--surface-2);
+}
+
+.player{
+  position:fixed;
+  right:0;
+  bottom:0;
+  left:0;
+  z-index:100;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  min-height:var(--player-height);
+  gap:.44rem;
+  padding:.65rem 1rem;
+  border-top:1px solid #02020233;
+  background:rgba(7,6,9,.55);
+}
+
+.player.hidden{
+  display:none;
+}
+
+.now-playing{
+  width:100%;
+  max-width:900px;
+  min-width:0;
+  text-align:center;
+}
+
+#playerTitle,
+#playerMeta{
+  width:100%;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+#playerTitle{
+  font-weight:600;
+}
+
+#playerMeta{
+  margin-top:.18rem;
+  color:var(--muted);
+  font-size:.78rem;
+}
+
+.player-controls{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+  max-width:1200px;
+  gap:.4rem;
+  margin-bottom:2px;
+}
+
+.queue-control-button{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  min-width:2.2rem;
+  height:2rem;
+  padding:0 .7rem;
+  border:1px solid var(--border);
+  background:rgba(255,255,255,.03);
+  color:var(--text);
+}
+
+.queue-control-button:hover{
+  background:rgba(255,255,255,.08);
+}
+
+.queue-control-button:disabled{
+  color:#555;
+  opacity:.45;
+}
+
+.queue-control-button.active{
+  border-color:var(--seek-accent);
+  color:var(--seek-accent);
+}
+
+.icon-control-button{
+  position:relative;
+  width:2.25rem;
+  min-width:2.25rem;
+  padding:0;
+}
+
+.play-button:hover{
+  border-color:#fff;
+}
+
+.icon-control-button svg{
+  width:17px;
+  height:17px;
+  fill:currentColor;
+}
+
+.primary-control{
+  width:2.5rem;
+  min-width:2.5rem;
+  height:2.25rem;
+  border-color:var(--text);
+}
+
+.primary-control .pause-icon{
+  display:none;
+}
+
+.primary-control.is-playing .play-icon{
+  display:none;
+}
+
+.primary-control.is-playing .play-icon:hover{
+  border-color:#fff;
+}
+.primary-control.is-playing .pause-icon{
+  display:block;
+}
+
+
+
+.mode-control.inactive{
+  border-color:#555;
+  color:#777;
+  opacity:.72;
+}
+
+.control-indicator{
+  position:absolute;
+  right:3px;
+  bottom:3px;
+  width:4px;
+  height:4px;
+  border:1px solid currentColor;
+}
+
+.mode-control.active .control-indicator{
+  border-color:var(--seek-accent);
+  background:var(--seek-accent);
+}
+
+.loop-one-icon{
+  display:none!important;
+}
+button .primary-icon:hover{
+  border-color:#fff;
+}
+
+#loopButton.loop-one .loop-all-icon{
+  display:none;
+}
+
+#loopButton.loop-one .loop-one-icon{
+  display:block!important;
+}
+
+.loop-one-number{
+  fill:var(--bg);
+  stroke:var(--seek-accent);
+  stroke-width:.45;
+}
+
+.player-seek{
+  flex:1;
+  min-width:133px;
+  height:20px;
+  margin:0;
+  appearance:none;
+  background:transparent;
+}
+
+.player-seek::-webkit-slider-runnable-track{
+  height:3px;
+  background:linear-gradient(
+    to right,
+    var(--seek-accent) 0,
+    var(--seek-accent) var(--progress,0%),
+    rgba(255,255,255,.14) var(--progress,0%),
+    rgba(255,255,255,.14) 100%
+  );
+}
+
+.player-seek::-webkit-slider-thumb{
+  width:12px;
+  height:12px;
+  margin-top:-4px;
+  appearance:none;
+  border:1px solid var(--border);
+  border-radius:50%!important;
+  background:var(--seek-accent);
+}
+
+.player-seek::-moz-range-track{
+  height:3px;
+  background:rgba(255,255,255,.14);
+}
+
+.player-seek::-moz-range-progress{
+  height:3px;
+  background:var(--seek-accent);
+}
+
+.player-seek::-moz-range-thumb{
+  width:12px;
+  height:12px;
+  border:1px solid var(--border);
+  border-radius:50%!important;
+  background:var(--seek-accent);
+}
+
+#currentTime,
+#duration{
+  width:3.5rem;
+  color:var(--muted);
+  font-size:.78rem;
+  text-align:center;
+}
+
+.player-volume{
+  width:95px;
+  height:20px;
+  appearance:none;
+  background:transparent;
+  padding-right:3px;
+  padding-left:3px;
+}
+
+.player-volume::-webkit-slider-runnable-track{
+  height:3px;
+  background:rgba(255,255,255,.1);
+}
+
+.player-volume::-webkit-slider-thumb{
+  width:12px;
+  height:12px;
+  margin-top:-4px;
+  appearance:none;
+  border:1px solid var(--border);
+  border-radius:50%!important;
+  background:var(--seek-accent);
+}
+
+.player-volume::-moz-range-track{
+  height:3px;
+  background:rgba(255,255,255,.1);
+}
+
+.player-volume::-moz-range-thumb{
+  width:12px;
+  height:12px;
+  border:1px solid var(--border);
+  border-radius:50%!important;
+  background:var(--seek-accent);
+}
+
+.seek-theme-picker{
+  position:relative;
+}
+
+.theme-picker-button{
+  color:var(--seek-accent);
+}
+
+.seek-theme-menu{
+  position:absolute;
+  right:0;
+  bottom:calc(100% + 7px);
+  z-index:220;
+  min-width:111px;
+  padding:4px;
+  border:1px solid var(--border-strong);
+  background:var(--surface);
+}
+
+.seek-theme-menu[hidden]{
+  display:none;
+}
+
+.seek-theme-option{
+  display:flex;
+  align-items:center;
+  width:100%;
+  gap:7px;
+  min-height:30px;
+  padding:5px 7px;
+  border:0;
+  background:transparent;
+  color:var(--text);
+  text-align:left;
+}
+
+.seek-theme-option:hover,
+.seek-theme-option[aria-selected="true"]{
+  background:var(--surface-hover);
+}
+
+.seek-color-swatch{
+  width:11px;
+  height:11px;
+  border:1px solid rgba(255,255,255,.7);
+  background:var(--swatch);
+}
+
+.scroll-sentinel{
+  display:flex;
+  align-items:center;
+  min-height:42px;
+  padding:10px 8px;
+  color:var(--muted);
+}
+
+.scroll-sentinel:empty{
+  display:none;
+}
+
+.scroll-sentinel.loading::after,
+tr.loading-row td::after{
+  display:inline-block;
+  width:1ch;
+  content:"";
+  animation:loading-dots 1s steps(4,end) infinite;
+}
+
+tr.loading-row td::before{
+  content:"> ";
+}
+
+@keyframes loading-dots{
+  0%{content:""}
+  25%{content:"."}
+  50%{content:".."}
+  75%,100%{content:"..."}
+}
+
+.queue-panel{
+  width:min(1000px,calc(100% - 22px));
+  margin:18px auto;
+  border:0px solid var(--border-strong);
+  background:var(--bg);
+}
+
+.queue-panel-header{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:12px;
+  padding:10px 12px;
+  border-bottom:1px solid rgba(120,120,120,.3);
+}
+
+.queue-panel-actions{
+  display:flex;
+  gap:8px;
+}
+
+.queue-panel-actions select,
+.queue-panel-actions button{
+  padding:5px 7px;
+  border:1px solid var(--border-strong);
+  background:transparent;
+  color:var(--text);
+  font:inherit;
+  font-size:12px;
+}
+
+.queue-list{
+  display:flex;
+  flex-direction:column;
+  max-height:260px;
+  overflow:auto;
+}
+
+.queue-item{
+  display:flex;
+  align-items:flex-start;
+  gap:10px;
+  width:100%;
+  padding:9px 12px;
+  border:0;
+  border-bottom:0px solid rgba(120,120,120,.2);
+  background:transparent;
+  color:var(--text);
+  text-align:left;
+}
+
+.queue-item:hover{
+  background:var(--surface-hover);
+}
+
+.queue-item-index{
+  width:24px;
+  color:var(--muted);
+}
+
+.queue-item-main{
+  display:flex;
+  flex-direction:column;
+  min-width:0;
+}
+
+.queue-item-title,
+.queue-item-meta{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.queue-item-meta{
+  color:var(--muted);
+  font-size:11px;
+}
+
+.queue-empty{
+  padding:14px 12px;
+  color:var(--muted);
+}
+
+#audioPlayer{
+  display:none;
+}
+
+
+@media (max-width:700px){
+  :root{
+    --player-height:164px;
+  }
+
+  .page{
+    width:100%;
+    padding:18px 10px calc(var(--player-height) + 36px);
+  }
+
+  .search-hero{
+    min-height:calc(100vh - 250px);
+  }
+
+  .search-input{
+    height:42px;
+    font-size:16px;
+  }
+
+  .results-section-active{
+    max-height:min(54dvh,620px);
+    overflow-x:hidden;
+  }
+
+  .results-table{
+    min-width:0;
+  }
+
+  .results-table th,
+  .results-table td{
+    padding:8px 4px;
+  }
+
+  .results-table td:nth-child(3),
+  .results-table th:nth-child(3),
+  .results-table td:nth-child(5),
+  .results-table th:nth-child(5){
+    display:none;
+  }
+
+  .col-index{ width:28px; }
+  .col-duration{ width:46px; }
+  .col-play{ width:42px; }
+  .col-download{ width:30px; }
+  .col-fav{ width:28px; }
+  .col-playlist{ width:52px; }
+
+  .title-button{
+    display:-webkit-box;
+    overflow:hidden;
+    white-space:normal;
+    -webkit-box-orient:vertical;
+    -webkit-line-clamp:2;
+  }
+
+  .player{
+    padding:.56rem .56rem;
+    overflow:hidden;
+  }
+
+  .player-controls{
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    flex-wrap:wrap;
+    gap:.35rem;
+    width:100%;
+    min-width:0;
+  }
+
+  .queue-control-button{
+    min-width:2.05rem;
+    height:1.95rem;
+    padding:0 .55rem;
+    flex:0 0 auto;
+  }
+
+  .icon-control-button{
+    width:2.05rem;
+    min-width:2.05rem;
+  }
+
+  .primary-control{
+    width:2.25rem;
+    min-width:2.25rem;
+    height:2.05rem;
+  }
+
+  .icon-control-button svg{
+    width:15px;
+    height:15px;
+  }
+
+  .player-volume{
+    display:none !important;
+  }
+
+  #currentTime,
+  #duration{
+    flex:0 0 auto;
+    width:2.85rem;
+    min-width:2.85rem;
+    font-size:.72rem;
+    text-align:center;
+  }
+
+  .seek-theme-picker{
+    flex:0 0 auto;
+    white-space:nowrap;
+  }
+
+  .theme-picker-button{
+    min-width:2rem;
+    height:1.95rem;
+    padding:0 .4rem;
+  }
+
+  .player-seek{
+    order:999;
+    flex:0 0 100%;
+    width:100%;
+    min-width:100%;
+    max-width:100%;
+    height:28px;
+    margin:0;
+  }
+
+  .queue-panel{
+    width:calc(100% - 20px);
+  }
+
+  .queue-panel-header{
+    flex-direction:column;
+    align-items:flex-start;
+  }
+
+  .queue-panel-actions{
+    width:100%;
+  }
+
+  .queue-panel-actions select,
+  .queue-panel-actions button{
+    min-height:40px;
+  }
+}
+
+@media (max-width:420px){
+  :root{
+    --player-height:156px;
+  }
+
+  .page{
+    padding:14px 8px calc(var(--player-height) + 30px);
+  }
+
+  .player{
+    padding:.5rem .42rem;
+    gap:.32rem;
+  }
+
+  .player-controls{
+    gap:.22rem;
+  }
+
+  .queue-control-button{
+    min-width:1.85rem;
+    height:1.8rem;
+    padding:0 .38rem;
+  }
+
+  .icon-control-button{
+    width:1.85rem;
+    min-width:1.85rem;
+  }
+
+  .primary-control{
+    width:2rem;
+    min-width:2rem;
+    height:1.9rem;
+  }
+
+  .icon-control-button svg{
+    width:14px;
+    height:14px;
+  }
+
+  #currentTime,
+  #duration{
+    width:2.35rem;
+    min-width:2.35rem;
+    font-size:.66rem;
+  }
+
+  .theme-picker-button{
+    min-width:1.8rem;
+    height:1.8rem;
+    padding:0 .28rem;
+  }
+
+  .player-seek{
+    height:26px;
+  }
+
+  #playerTitle{
+    font-size:.86rem;
+  }
+
+  #playerMeta{
+    font-size:.68rem;
+  }
+}
+
+.drag-handle{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  min-width:18px;
+  margin-right:8px;
+  color:var(--muted);
+  cursor:grab;
+  user-select:none;
+}
+
+.drag-handle:active{
+  cursor:grabbing;
+}
+
+.results-table tr.dragging td{
+  opacity:.45;
+}
+
+.results-table tr.drag-over td{
+  background:color-mix(in srgb,var(--seek-accent) 12%,transparent);
+}
+/* keep title cell on one line */
+.results-table td.col-title {
+  white-space: nowrap;
+}
+
+/* make the title button shrink safely instead of wrapping */
+.results-table td.col-title .title-button {
+  display: inline-block;
+  max-width: calc(100% - 24px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+/* keep drag handle visible and clickable */
+.results-table td.col-title .drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  margin-right: 8px;
+  flex: 0 0 auto;
+  cursor: grab;
+  user-select: none;
+  vertical-align: middle;
+}
+
+.results-table td.col-title .drag-handle:active {
+  cursor: grabbing;
+}
+
+.results-table tr.dragging {
+  opacity: 0.6;
+}
+
+.results-table tr.drag-over {
+  outline: 1px solid rgba(255, 255, 255, 0.2);
+  outline-offset: -1px;
+}