feat: Player & Menu Styles

DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor

@@ -14,14 +14,6 @@
                    Color="Color.Primary"
                    Disabled="!CanPlay"
                    OnToggle="@TogglePlayPause"/>
-    @if (!Fixed || HasPrevious || HasNext)
-    {
-        <MudIconButton Icon="@Icons.Material.Filled.SkipNext"
-                       Color="Color.Primary"
-                       Size="Size.Large"
-                       OnClick="@SkipNext"
-                       Disabled="!HasNext"/>
-    }
     @if (!Fixed)
     {
         <MudIconButton Icon="@Icons.Material.Filled.Stop"
@@ -30,4 +22,12 @@
                        OnClick="@Stop"
                        Disabled="!IsLoaded"/>
     }
+    @if (!Fixed || HasPrevious || HasNext)
+    {
+        <MudIconButton Icon="@Icons.Material.Filled.SkipNext"
+                       Color="Color.Primary"
+                       Size="Size.Large"
+                       OnClick="@SkipNext"
+                       Disabled="!HasNext"/>
+    }
 </MudStack>

DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor

@@ -23,6 +23,8 @@
     @* Queue toggle: a second row between the transport controls and the timestamp (§3.1 placement —
        "below the control buttons, to the left of the timestamps"). Shown only when a queue is loaded,
        mirroring the skip-affordance gating, so an empty/single-track player is byte-for-byte unchanged. *@
+    <MudStack Row AlignItems="AlignItems.Center">
+        <TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
         @if (ShowQueueButton)
         {
             <MudTooltip Text="Queue">
@@ -35,5 +37,5 @@
                                Class="@($"deepdrft-queue-toggle{(QueueOpen ? " deepdrft-queue-toggle-active" : "")}")"/>
             </MudTooltip>
         }
-    <TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
+    </MudStack>
 </MudStack>

DeepDrftPublic.Client/Layout/DeepDrftMenu.razor

@@ -3,7 +3,7 @@
 @using DeepDrftPublic.Client.Services
 
 @* Desktop Menu *@
-<div class="d-none d-sm-flex">
+<div class="d-none d-md-flex">
     <nav class="@NavClass">
         <MudStack Row AlignItems="AlignItems.Center">
             <a class="dd-nav-brand" href="/">
@@ -48,7 +48,7 @@
 </div>
 
 @* Mobile Menu *@
-<div class="d-flex d-sm-none">
+<div class="d-flex d-md-none">
     <nav class="@NavClass">
         <MudStack Row AlignItems="AlignItems.Center">
             <a class="dd-nav-brand" href="/">