优化移动显示

public/css/style.css

@@ -1165,4 +1165,67 @@ header p {
     .control-seek {
         min-width: 220px;
     }
+
+    /* Mobile specific top bar */
+    .user-controls {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background: var(--panel-bg);
+        backdrop-filter: blur(16px);
+        -webkit-backdrop-filter: blur(16px);
+        z-index: 1000;
+        border-bottom: 1px solid var(--panel-border);
+        padding: 0.75rem 1rem;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: nowrap;
+        gap: 0.5rem;
+        overflow-x: auto;
+    }
+
+    .user-controls label {
+        font-size: 0.85rem;
+        white-space: nowrap;
+    }
+    
+    #theme-selector {
+        padding: 0.25rem 0.4rem;
+        font-size: 0.8rem;
+    }
+
+    .user-controls .banner-actions,
+    .user-controls .user-info {
+        flex-shrink: 0;
+    }
+
+    .user-controls .action-btn {
+        padding: 0.4rem 0.7rem;
+        font-size: 0.8rem;
+    }
+
+    .container {
+        padding-top: 5rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    .top-banner {
+        margin-top: 1rem;
+        border: none;
+        background: transparent;
+        padding: 0;
+        margin-bottom: 0.5rem;
+    }
+    
+    .banner-title {
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid var(--panel-border);
+        border-radius: 12px;
+        padding: 1rem;
+        width: 100%;
+        text-align: center;
+    }
 }