Redesign UI with Vuetify and improve configuration

Major changes:
- Full UI redesign with Vuetify 3 (dark theme, modern components)
- Sidebar navigation with gradient logo
- Redesigned player controls with Material Design icons
- New room cards, track lists, and filter UI with chips
- Modern auth pages with centered cards

Configuration improvements:
- Centralized all settings in root .env file
- Removed redundant backend/.env and frontend/.env files
- Increased file upload limit to 100MB (nginx + backend)
- Added build args for Vite environment variables
- Frontend now uses relative paths (better for domain deployment)

UI Components updated:
- App.vue: v-navigation-drawer with sidebar
- MiniPlayer: v-footer with modern controls
- Queue: v-list with styled items
- RoomView: improved filters with clickable chips
- All views: Vuetify cards, buttons, text fields

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

frontend/src/views/LoginView.vue

@@ -1,25 +1,76 @@
 <template>
   <div class="auth-page">
-    <div class="auth-card card">
-      <h2>Вход</h2>
-      <form @submit.prevent="handleLogin">
-        <div class="form-group">
-          <label>Имя пользователя</label>
-          <input type="text" v-model="username" required />
+    <v-card class="auth-card" elevation="8">
+      <div class="auth-header">
+        <v-avatar size="64" color="primary" class="mb-4">
+          <v-icon size="40">mdi-music-circle</v-icon>
+        </v-avatar>
+        <h2 class="auth-title">Добро пожаловать</h2>
+        <p class="auth-subtitle">Войдите в свой аккаунт EnigFM</p>
+      </div>
+
+      <v-card-text class="pt-8">
+        <v-form @submit.prevent="handleLogin">
+          <v-text-field
+            v-model="username"
+            label="Имя пользователя"
+            prepend-inner-icon="mdi-account"
+            variant="outlined"
+            required
+            :disabled="loading"
+            autofocus
+            class="mb-2"
+          />
+
+          <v-text-field
+            v-model="password"
+            label="Пароль"
+            prepend-inner-icon="mdi-lock"
+            type="password"
+            variant="outlined"
+            required
+            :disabled="loading"
+            class="mb-2"
+          />
+
+          <v-alert
+            v-if="error"
+            type="error"
+            variant="tonal"
+            class="mb-4"
+            closable
+            @click:close="error = ''"
+          >
+            {{ error }}
+          </v-alert>
+
+          <v-btn
+            type="submit"
+            color="primary"
+            size="large"
+            block
+            :loading="loading"
+            class="mb-4"
+          >
+            Войти
+          </v-btn>
+        </v-form>
+
+        <v-divider class="my-6" />
+
+        <div class="text-center">
+          <span class="text-medium-emphasis">Нет аккаунта?</span>
+          <v-btn
+            to="/register"
+            variant="text"
+            color="primary"
+            class="ml-2"
+          >
+            Зарегистрироваться
+          </v-btn>
         </div>
-        <div class="form-group">
-          <label>Пароль</label>
-          <input type="password" v-model="password" required />
-        </div>
-        <p v-if="error" class="error-message">{{ error }}</p>
-        <button type="submit" class="btn-primary" :disabled="loading">
-          {{ loading ? 'Вход...' : 'Войти' }}
-        </button>
-      </form>
-      <p class="auth-link">
-        Нет аккаунта? <router-link to="/register">Зарегистрироваться</router-link>
-      </p>
-    </div>
+      </v-card-text>
+    </v-card>
   </div>
 </template>
 
@@ -56,27 +107,30 @@ async function handleLogin() {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: calc(100vh - 100px);
+  min-height: 100vh;
+  padding: 20px;
 }
 
 .auth-card {
   width: 100%;
-  max-width: 400px;
+  max-width: 450px;
+  background: rgba(21, 25, 50, 0.95) !important;
+  border: 1px solid rgba(255, 255, 255, 0.12);
 }
 
-.auth-card h2 {
-  margin-bottom: 24px;
+.auth-header {
   text-align: center;
+  padding: 40px 40px 0;
 }
 
-.auth-card button {
-  width: 100%;
-  margin-top: 8px;
+.auth-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 8px;
 }
 
-.auth-link {
-  text-align: center;
-  margin-top: 16px;
-  color: #aaa;
+.auth-subtitle {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 15px;
 }
 </style>