Refactor: Radio topbar layout + fix soundboard connection modal

- Radio: Move controls from bottom bar to topbar above globe
  (guild/channel selectors, now playing, volume, connection, stop)
- Radio: Theme selector moved inline into topbar-right
- Radio: Globe now fills remaining space below topbar
- Soundboard: Fix connection modal not opening when voiceStats is null
  (modal now renders with '---' values when no voice data available)
- Both: Modal condition changed from `showConnModal && voiceStats` to
  just `showConnModal`, handling null voiceStats gracefully

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

web/src/plugins/radio/RadioTab.tsx

@@ -431,151 +431,12 @@ export default function RadioTab({ data }: { data: any }) {
   return (
     <div className="radio-container" data-theme={theme}>
 
-      {/* ── Globe ── */}
-      <div className="radio-globe" ref={containerRef} />
+      {/* ═══ TOPBAR ═══ */}
+      <header className="radio-topbar">
+        <div className="radio-topbar-left">
+          <span className="radio-topbar-logo">{'\u{1F30D}'}</span>
+          <span className="radio-topbar-title">World Radio</span>
 
-      {/* ── Theme Selector ── */}
-      <div className="radio-theme">
-        {THEMES.map(t => (
-          <div
-            key={t.id}
-            className={`radio-theme-dot ${theme === t.id ? 'active' : ''}`}
-            style={{ background: t.color }}
-            title={t.label}
-            onClick={() => setTheme(t.id)}
-          />
-        ))}
-      </div>
-
-      {/* ── Search ── */}
-      <div className="radio-search">
-        <div className="radio-search-wrap">
-          <span className="radio-search-icon">{'\u{1F50D}'}</span>
-          <input
-            className="radio-search-input"
-            type="text"
-            placeholder="Sender oder Stadt suchen..."
-            value={searchQuery}
-            onChange={e => handleSearch(e.target.value)}
-            onFocus={() => { if (searchResults.length) setSearchOpen(true); }}
-          />
-          {searchQuery && (
-            <button className="radio-search-clear" onClick={() => { setSearchQuery(''); setSearchResults([]); setSearchOpen(false); }}>{'\u2715'}</button>
-          )}
-        </div>
-        {searchOpen && searchResults.length > 0 && (
-          <div className="radio-search-results">
-            {searchResults.slice(0, 12).map(hit => (
-              <button key={hit.id + hit.url} className="radio-search-result" onClick={() => handleSearchResultClick(hit)}>
-                <span className="radio-search-result-icon">
-                  {hit.type === 'channel' ? '\u{1F4FB}' : hit.type === 'place' ? '\u{1F4CD}' : '\u{1F30D}'}
-                </span>
-                <div className="radio-search-result-text">
-                  <span className="radio-search-result-title">{hit.title}</span>
-                  <span className="radio-search-result-sub">{hit.subtitle}</span>
-                </div>
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* ── Favorites toggle ── */}
-      <button
-        className={`radio-fab ${showFavorites ? 'active' : ''}`}
-        onClick={() => { setShowFavorites(!showFavorites); if (!showFavorites) setSelectedPlace(null); }}
-        title="Favoriten"
-      >
-        {'\u2B50'}{favorites.length > 0 && <span className="radio-fab-badge">{favorites.length}</span>}
-      </button>
-
-      {/* ── Side Panel: Favorites ── */}
-      {showFavorites && (
-        <div className="radio-panel open">
-          <div className="radio-panel-header">
-            <h3>{'\u2B50'} Favoriten</h3>
-            <button className="radio-panel-close" onClick={() => setShowFavorites(false)}>{'\u2715'}</button>
-          </div>
-          <div className="radio-panel-body">
-            {favorites.length === 0 ? (
-              <div className="radio-panel-empty">Noch keine Favoriten</div>
-            ) : (
-              favorites.map(fav => (
-                <div key={fav.stationId} className={`radio-station ${currentPlaying?.stationId === fav.stationId ? 'playing' : ''}`}>
-                  <div className="radio-station-info">
-                    <span className="radio-station-name">{fav.stationName}</span>
-                    <span className="radio-station-loc">{fav.placeName}, {fav.country}</span>
-                  </div>
-                  <div className="radio-station-btns">
-                    <button
-                      className="radio-btn-play"
-                      onClick={() => handlePlay(fav.stationId, fav.stationName, fav.placeName, fav.country)}
-                      disabled={!selectedChannel || playingLoading}
-                    >{'\u25B6'}</button>
-                    <button className="radio-btn-fav active" onClick={() => toggleFavorite(fav.stationId, fav.stationName)}>{'\u2605'}</button>
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* ── Side Panel: Stations at place ── */}
-      {selectedPlace && !showFavorites && (
-        <div className="radio-panel open">
-          <div className="radio-panel-header">
-            <div>
-              <h3>{selectedPlace.title}</h3>
-              <span className="radio-panel-sub">{selectedPlace.country}</span>
-            </div>
-            <button className="radio-panel-close" onClick={() => setSelectedPlace(null)}>{'\u2715'}</button>
-          </div>
-          <div className="radio-panel-body">
-            {stationsLoading ? (
-              <div className="radio-panel-loading">
-                <div className="radio-spinner" />
-                Sender werden geladen...
-              </div>
-            ) : stations.length === 0 ? (
-              <div className="radio-panel-empty">Keine Sender gefunden</div>
-            ) : (
-              stations.map(s => (
-                <div key={s.id} className={`radio-station ${currentPlaying?.stationId === s.id ? 'playing' : ''}`}>
-                  <div className="radio-station-info">
-                    <span className="radio-station-name">{s.title}</span>
-                    {currentPlaying?.stationId === s.id && (
-                      <span className="radio-station-live">
-                        <span className="radio-eq"><span /><span /><span /></span>
-                        Live
-                      </span>
-                    )}
-                  </div>
-                  <div className="radio-station-btns">
-                    {currentPlaying?.stationId === s.id ? (
-                      <button className="radio-btn-stop" onClick={handleStop}>{'\u23F9'}</button>
-                    ) : (
-                      <button
-                        className="radio-btn-play"
-                        onClick={() => handlePlay(s.id, s.title)}
-                        disabled={!selectedChannel || playingLoading}
-                      >{'\u25B6'}</button>
-                    )}
-                    <button
-                      className={`radio-btn-fav ${isFavorite(s.id) ? 'active' : ''}`}
-                      onClick={() => toggleFavorite(s.id, s.title)}
-                    >{isFavorite(s.id) ? '\u2605' : '\u2606'}</button>
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* ── Bottom Bar ── */}
-      <div className={`radio-bar ${currentPlaying ? 'has-playing' : ''}`}>
-        <div className="radio-bar-channel">
           {guilds.length > 1 && (
             <select className="radio-sel" value={selectedGuild} onChange={e => {
               setSelectedGuild(e.target.value);
@@ -595,44 +456,192 @@ export default function RadioTab({ data }: { data: any }) {
         </div>
 
         {currentPlaying && (
-          <div className="radio-np">
+          <div className="radio-topbar-np">
             <div className="radio-eq radio-eq-np"><span /><span /><span /></div>
             <div className="radio-np-info">
               <span className="radio-np-name">{currentPlaying.stationName}</span>
               <span className="radio-np-loc">{currentPlaying.placeName}{currentPlaying.country ? `, ${currentPlaying.country}` : ''}</span>
             </div>
-            <div className="radio-volume">
-              <span className="radio-volume-icon">{volume === 0 ? '\u{1F507}' : volume < 0.4 ? '\u{1F509}' : '\u{1F50A}'}</span>
-              <input
-                type="range"
-                className="radio-volume-slider"
-                min={0} max={1} step={0.01}
-                value={volume}
-                onChange={e => handleVolume(Number(e.target.value))}
-              />
-              <span className="radio-volume-val">{Math.round(volume * 100)}%</span>
-            </div>
-            <span className="radio-np-ch">{'\u{1F50A}'} {currentPlaying.channelName}</span>
-            <div className="radio-conn" onClick={() => setShowConnModal(true)} title="Verbindungsdetails">
-              <span className="radio-conn-dot" />
-              Verbunden
-              {voiceStats?.voicePing != null && (
-                <span className="radio-conn-ping">{voiceStats.voicePing}ms</span>
-              )}
-            </div>
-            <button className="radio-btn-stop" onClick={handleStop}>{'\u23F9'} Stop</button>
           </div>
         )}
-      </div>
 
-      {/* ── Places counter ── */}
-      <div className="radio-counter">
-        {'\u{1F4FB}'} {places.length.toLocaleString('de-DE')} Sender weltweit
+        <div className="radio-topbar-right">
+          {currentPlaying && (
+            <>
+              <div className="radio-volume">
+                <span className="radio-volume-icon">{volume === 0 ? '\u{1F507}' : volume < 0.4 ? '\u{1F509}' : '\u{1F50A}'}</span>
+                <input
+                  type="range"
+                  className="radio-volume-slider"
+                  min={0} max={1} step={0.01}
+                  value={volume}
+                  onChange={e => handleVolume(Number(e.target.value))}
+                />
+                <span className="radio-volume-val">{Math.round(volume * 100)}%</span>
+              </div>
+              <div className="radio-conn" onClick={() => setShowConnModal(true)} title="Verbindungsdetails">
+                <span className="radio-conn-dot" />
+                Verbunden
+                {voiceStats?.voicePing != null && (
+                  <span className="radio-conn-ping">{voiceStats.voicePing}ms</span>
+                )}
+              </div>
+              <button className="radio-topbar-stop" onClick={handleStop}>{'\u23F9'} Stop</button>
+            </>
+          )}
+          <div className="radio-theme-inline">
+            {THEMES.map(t => (
+              <div
+                key={t.id}
+                className={`radio-theme-dot ${theme === t.id ? 'active' : ''}`}
+                style={{ background: t.color }}
+                title={t.label}
+                onClick={() => setTheme(t.id)}
+              />
+            ))}
+          </div>
+        </div>
+      </header>
+
+      {/* ═══ GLOBE AREA ═══ */}
+      <div className="radio-globe-wrap">
+        <div className="radio-globe" ref={containerRef} />
+
+        {/* ── Search ── */}
+        <div className="radio-search">
+          <div className="radio-search-wrap">
+            <span className="radio-search-icon">{'\u{1F50D}'}</span>
+            <input
+              className="radio-search-input"
+              type="text"
+              placeholder="Sender oder Stadt suchen..."
+              value={searchQuery}
+              onChange={e => handleSearch(e.target.value)}
+              onFocus={() => { if (searchResults.length) setSearchOpen(true); }}
+            />
+            {searchQuery && (
+              <button className="radio-search-clear" onClick={() => { setSearchQuery(''); setSearchResults([]); setSearchOpen(false); }}>{'\u2715'}</button>
+            )}
+          </div>
+          {searchOpen && searchResults.length > 0 && (
+            <div className="radio-search-results">
+              {searchResults.slice(0, 12).map(hit => (
+                <button key={hit.id + hit.url} className="radio-search-result" onClick={() => handleSearchResultClick(hit)}>
+                  <span className="radio-search-result-icon">
+                    {hit.type === 'channel' ? '\u{1F4FB}' : hit.type === 'place' ? '\u{1F4CD}' : '\u{1F30D}'}
+                  </span>
+                  <div className="radio-search-result-text">
+                    <span className="radio-search-result-title">{hit.title}</span>
+                    <span className="radio-search-result-sub">{hit.subtitle}</span>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* ── Favorites toggle ── */}
+        <button
+          className={`radio-fab ${showFavorites ? 'active' : ''}`}
+          onClick={() => { setShowFavorites(!showFavorites); if (!showFavorites) setSelectedPlace(null); }}
+          title="Favoriten"
+        >
+          {'\u2B50'}{favorites.length > 0 && <span className="radio-fab-badge">{favorites.length}</span>}
+        </button>
+
+        {/* ── Side Panel: Favorites ── */}
+        {showFavorites && (
+          <div className="radio-panel open">
+            <div className="radio-panel-header">
+              <h3>{'\u2B50'} Favoriten</h3>
+              <button className="radio-panel-close" onClick={() => setShowFavorites(false)}>{'\u2715'}</button>
+            </div>
+            <div className="radio-panel-body">
+              {favorites.length === 0 ? (
+                <div className="radio-panel-empty">Noch keine Favoriten</div>
+              ) : (
+                favorites.map(fav => (
+                  <div key={fav.stationId} className={`radio-station ${currentPlaying?.stationId === fav.stationId ? 'playing' : ''}`}>
+                    <div className="radio-station-info">
+                      <span className="radio-station-name">{fav.stationName}</span>
+                      <span className="radio-station-loc">{fav.placeName}, {fav.country}</span>
+                    </div>
+                    <div className="radio-station-btns">
+                      <button
+                        className="radio-btn-play"
+                        onClick={() => handlePlay(fav.stationId, fav.stationName, fav.placeName, fav.country)}
+                        disabled={!selectedChannel || playingLoading}
+                      >{'\u25B6'}</button>
+                      <button className="radio-btn-fav active" onClick={() => toggleFavorite(fav.stationId, fav.stationName)}>{'\u2605'}</button>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* ── Side Panel: Stations at place ── */}
+        {selectedPlace && !showFavorites && (
+          <div className="radio-panel open">
+            <div className="radio-panel-header">
+              <div>
+                <h3>{selectedPlace.title}</h3>
+                <span className="radio-panel-sub">{selectedPlace.country}</span>
+              </div>
+              <button className="radio-panel-close" onClick={() => setSelectedPlace(null)}>{'\u2715'}</button>
+            </div>
+            <div className="radio-panel-body">
+              {stationsLoading ? (
+                <div className="radio-panel-loading">
+                  <div className="radio-spinner" />
+                  Sender werden geladen...
+                </div>
+              ) : stations.length === 0 ? (
+                <div className="radio-panel-empty">Keine Sender gefunden</div>
+              ) : (
+                stations.map(s => (
+                  <div key={s.id} className={`radio-station ${currentPlaying?.stationId === s.id ? 'playing' : ''}`}>
+                    <div className="radio-station-info">
+                      <span className="radio-station-name">{s.title}</span>
+                      {currentPlaying?.stationId === s.id && (
+                        <span className="radio-station-live">
+                          <span className="radio-eq"><span /><span /><span /></span>
+                          Live
+                        </span>
+                      )}
+                    </div>
+                    <div className="radio-station-btns">
+                      {currentPlaying?.stationId === s.id ? (
+                        <button className="radio-btn-stop" onClick={handleStop}>{'\u23F9'}</button>
+                      ) : (
+                        <button
+                          className="radio-btn-play"
+                          onClick={() => handlePlay(s.id, s.title)}
+                          disabled={!selectedChannel || playingLoading}
+                        >{'\u25B6'}</button>
+                      )}
+                      <button
+                        className={`radio-btn-fav ${isFavorite(s.id) ? 'active' : ''}`}
+                        onClick={() => toggleFavorite(s.id, s.title)}
+                      >{isFavorite(s.id) ? '\u2605' : '\u2606'}</button>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* ── Places counter ── */}
+        <div className="radio-counter">
+          {'\u{1F4FB}'} {places.length.toLocaleString('de-DE')} Sender weltweit
+        </div>
       </div>
 
       {/* ── Connection Details Modal ── */}
-      {showConnModal && voiceStats && (() => {
-        const uptimeSec = voiceStats.connectedSince
+      {showConnModal && (() => {
+        const uptimeSec = voiceStats?.connectedSince
           ? Math.floor((Date.now() - new Date(voiceStats.connectedSince).getTime()) / 1000)
           : 0;
         const h = Math.floor(uptimeSec / 3600);
@@ -657,30 +666,30 @@ export default function RadioTab({ data }: { data: any }) {
                 <div className="radio-modal-stat">
                   <span className="radio-modal-label">Voice Ping</span>
                   <span className="radio-modal-value">
-                    <span className="radio-modal-dot" style={{ background: pingColor(voiceStats.voicePing) }} />
-                    {voiceStats.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
+                    <span className="radio-modal-dot" style={{ background: pingColor(voiceStats?.voicePing ?? null) }} />
+                    {voiceStats?.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
                   </span>
                 </div>
                 <div className="radio-modal-stat">
                   <span className="radio-modal-label">Gateway Ping</span>
                   <span className="radio-modal-value">
-                    <span className="radio-modal-dot" style={{ background: pingColor(voiceStats.gatewayPing) }} />
-                    {voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
+                    <span className="radio-modal-dot" style={{ background: pingColor(voiceStats?.gatewayPing ?? null) }} />
+                    {voiceStats && voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
                   </span>
                 </div>
                 <div className="radio-modal-stat">
                   <span className="radio-modal-label">Status</span>
-                  <span className="radio-modal-value" style={{ color: voiceStats.status === 'ready' ? 'var(--success)' : '#f0a830' }}>
-                    {voiceStats.status === 'ready' ? 'Verbunden' : voiceStats.status}
+                  <span className="radio-modal-value" style={{ color: voiceStats?.status === 'ready' ? 'var(--success)' : '#f0a830' }}>
+                    {voiceStats?.status === 'ready' ? 'Verbunden' : voiceStats?.status ?? 'Warte auf Verbindung'}
                   </span>
                 </div>
                 <div className="radio-modal-stat">
                   <span className="radio-modal-label">Kanal</span>
-                  <span className="radio-modal-value">{voiceStats.channelName || '---'}</span>
+                  <span className="radio-modal-value">{voiceStats?.channelName || '---'}</span>
                 </div>
                 <div className="radio-modal-stat">
                   <span className="radio-modal-label">Verbunden seit</span>
-                  <span className="radio-modal-value">{uptimeStr}</span>
+                  <span className="radio-modal-value">{uptimeStr || '---'}</span>
                 </div>
               </div>
             </div>

web/src/plugins/soundboard/SoundboardTab.tsx

@@ -1238,8 +1238,8 @@ export default function SoundboardTab({ data }: SoundboardTabProps) {
       )}
 
       {/* ═══ CONNECTION MODAL ═══ */}
-      {showConnModal && voiceStats && (() => {
-        const uptimeSec = voiceStats.connectedSince
+      {showConnModal && (() => {
+        const uptimeSec = voiceStats?.connectedSince
           ? Math.floor((Date.now() - new Date(voiceStats.connectedSince).getTime()) / 1000)
           : 0;
         const h = Math.floor(uptimeSec / 3600);
@@ -1266,30 +1266,30 @@ export default function SoundboardTab({ data }: SoundboardTabProps) {
                 <div className="conn-stat">
                   <span className="conn-stat-label">Voice Ping</span>
                   <span className="conn-stat-value">
-                    <span className="conn-ping-dot" style={{background: pingColor(voiceStats.voicePing)}} />
-                    {voiceStats.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
+                    <span className="conn-ping-dot" style={{background: pingColor(voiceStats?.voicePing ?? null)}} />
+                    {voiceStats?.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
                   </span>
                 </div>
                 <div className="conn-stat">
                   <span className="conn-stat-label">Gateway Ping</span>
                   <span className="conn-stat-value">
-                    <span className="conn-ping-dot" style={{background: pingColor(voiceStats.gatewayPing)}} />
-                    {voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
+                    <span className="conn-ping-dot" style={{background: pingColor(voiceStats?.gatewayPing ?? null)}} />
+                    {voiceStats && voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
                   </span>
                 </div>
                 <div className="conn-stat">
                   <span className="conn-stat-label">Status</span>
-                  <span className="conn-stat-value" style={{color: voiceStats.status === 'ready' ? 'var(--green)' : '#f0a830'}}>
-                    {voiceStats.status === 'ready' ? 'Verbunden' : voiceStats.status}
+                  <span className="conn-stat-value" style={{color: voiceStats?.status === 'ready' ? 'var(--green)' : '#f0a830'}}>
+                    {voiceStats?.status === 'ready' ? 'Verbunden' : voiceStats?.status ?? 'Warte auf Verbindung'}
                   </span>
                 </div>
                 <div className="conn-stat">
                   <span className="conn-stat-label">Kanal</span>
-                  <span className="conn-stat-value">{voiceStats.channelName || '---'}</span>
+                  <span className="conn-stat-value">{voiceStats?.channelName || '---'}</span>
                 </div>
                 <div className="conn-stat">
                   <span className="conn-stat-label">Verbunden seit</span>
-                  <span className="conn-stat-value">{uptimeStr}</span>
+                  <span className="conn-stat-value">{uptimeStr || '---'}</span>
                 </div>
               </div>
             </div>

web/src/styles.css

@@ -354,7 +354,8 @@ html, body {
    ══════════════════════════════════════════════ */
 
 .radio-container {
-  position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -416,6 +417,88 @@ html, body {
 }
 
 /* ── Globe ── */
+/* ── Radio Topbar ── */
+.radio-topbar {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  height: 52px;
+  background: var(--bg-secondary, #2b2d31);
+  border-bottom: 1px solid rgba(0, 0, 0, .24);
+  z-index: 10;
+  flex-shrink: 0;
+  gap: 16px;
+}
+
+.radio-topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.radio-topbar-logo {
+  font-size: 20px;
+}
+
+.radio-topbar-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-normal);
+  letter-spacing: -.02em;
+}
+
+.radio-topbar-np {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  justify-content: center;
+}
+
+.radio-topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.radio-topbar-stop {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--danger);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  padding: 6px 14px;
+  font-size: 13px;
+  font-family: var(--font);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+  flex-shrink: 0;
+}
+
+.radio-topbar-stop:hover {
+  background: #c63639;
+}
+
+.radio-theme-inline {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 4px;
+}
+
+/* ── Globe Wrapper ── */
+.radio-globe-wrap {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+}
+
 .radio-globe {
   width: 100%;
   height: 100%;
@@ -819,29 +902,6 @@ html, body {
   50% { transform: scaleY(1); }
 }
 
-/* ── Bottom Bar ── */
-.radio-bar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 20;
-  background: rgba(30, 31, 34, 0.95);
-  backdrop-filter: blur(16px);
-  border-top: 1px solid var(--border);
-  padding: 10px 16px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
-}
-
-.radio-bar-channel {
-  display: flex;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
 .radio-sel {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
@@ -859,15 +919,6 @@ html, body {
   border-color: var(--accent);
 }
 
-/* ── Now Playing ── */
-.radio-np {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-  min-width: 0;
-}
-
 .radio-eq-np {
   flex-shrink: 0;
 }
@@ -897,21 +948,6 @@ html, body {
   text-overflow: ellipsis;
 }
 
-.radio-np-ch {
-  font-size: 12px;
-  color: var(--text-faint);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.radio-bar .radio-btn-stop {
-  width: auto;
-  border-radius: var(--radius);
-  padding: 6px 14px;
-  font-size: 13px;
-  gap: 4px;
-  flex-shrink: 0;
-}
 
 /* ── Volume Slider ── */
 .radio-volume {
@@ -968,22 +1004,6 @@ html, body {
   text-align: right;
 }
 
-/* ── Theme Selector ── */
-.radio-theme {
-  position: absolute;
-  top: 16px;
-  right: 72px;
-  z-index: 25;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 10px;
-  border-radius: 20px;
-  background: rgba(30, 31, 34, 0.85);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--border);
-}
-
 .radio-theme-dot {
   width: 16px;
   height: 16px;
@@ -1005,7 +1025,7 @@ html, body {
 /* ── Station count ── */
 .radio-counter {
   position: absolute;
-  bottom: 70px;
+  bottom: 16px;
   left: 16px;
   z-index: 10;
   font-size: 12px;
@@ -1049,30 +1069,28 @@ html, body {
     left: calc(50% - 24px);
   }
 
-  .radio-bar {
-    flex-wrap: wrap;
-    padding: 8px 12px;
+  .radio-topbar {
+    padding: 0 12px;
     gap: 8px;
   }
 
+  .radio-topbar-title {
+    display: none;
+  }
+
   .radio-sel {
     max-width: 140px;
     font-size: 12px;
   }
-
-  .radio-counter {
-    bottom: 62px;
-    left: 12px;
-  }
 }
 
 @media (max-width: 480px) {
-  .radio-np-ch {
+  .radio-topbar-np {
     display: none;
   }
 
-  .radio-bar-channel {
-    flex-wrap: wrap;
+  .radio-volume {
+    display: none;
   }
 
   .radio-sel {