diff --git a/apps/player/src/assets/images/zt2.webp b/apps/player/src/assets/images/zt2.webp
index 88ee600..96350dd 100644
Binary files a/apps/player/src/assets/images/zt2.webp and b/apps/player/src/assets/images/zt2.webp differ
diff --git a/apps/player/src/views/ForgotPasswordView.vue b/apps/player/src/views/ForgotPasswordView.vue
index 9e4aedb..ebfe727 100644
--- a/apps/player/src/views/ForgotPasswordView.vue
+++ b/apps/player/src/views/ForgotPasswordView.vue
@@ -102,7 +102,8 @@ function goLogin() {
     <div class="login-lang">
       <LocaleSwitcher compact />
     </div>
-    <form @submit.prevent="submit" class="login-form ps-gold-frame">
+    <div class="login-stack">
+      <form @submit.prevent="submit" class="login-form ps-gold-frame">
       <h2 class="form-title">{{ t('auth.forgot_password_title') }}</h2>
 
       <div class="field">
@@ -111,7 +112,7 @@ function goLogin() {
           <PhoneCountrySelect v-model="countryIso" />
           <input
             v-model="phone"
-            class="field-input"
+            class="field-input ps-gold-input"
             type="tel"
             required
             autocomplete="tel-national"
@@ -125,7 +126,7 @@ function goLogin() {
         <div class="inline-row">
           <input
             v-model="smsCode"
-            class="field-input"
+            class="field-input ps-gold-input"
             inputmode="numeric"
             maxlength="6"
             autocomplete="one-time-code"
@@ -146,7 +147,7 @@ function goLogin() {
         <label>{{ t('auth.password') }}</label>
         <input
           v-model="password"
-          class="field-input"
+          class="field-input ps-gold-input"
           type="password"
           required
           autocomplete="new-password"
@@ -159,7 +160,7 @@ function goLogin() {
         <label>{{ t('auth.confirm_password') }}</label>
         <input
           v-model="confirmPassword"
-          class="field-input"
+          class="field-input ps-gold-input"
           type="password"
           required
           autocomplete="new-password"
@@ -175,7 +176,8 @@ function goLogin() {
       <button type="button" class="btn-skip" @click="goLogin">
         {{ t('auth.back_to_login') }}
       </button>
-    </form>
+      </form>
+    </div>
   </div>
 </template>
 
@@ -184,7 +186,7 @@ function goLogin() {
   position: absolute;
   top: max(12px, env(safe-area-inset-top));
   right: 16px;
-  z-index: 2;
+  z-index: 10;
 }
 
 .login-page {
@@ -197,30 +199,32 @@ function goLogin() {
   align-items: center;
   justify-content: flex-end;
   padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
-  background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
+  background-color: var(--bg-body);
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
 }
 
-.login-form {
+.login-stack {
+  position: relative;
+  z-index: 1;
   width: 100%;
   max-width: 320px;
+}
+
+.login-form {
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 20px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  padding: 14px;
 }
 
 .form-title {
   margin: 0 0 2px;
   font-size: 16px;
   font-weight: 800;
-  color: #1A1A2E;
+  color: var(--text);
   text-align: center;
 }
 
@@ -232,7 +236,7 @@ function goLogin() {
 
 label {
   font-size: 10px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   letter-spacing: 0.03em;
 }
@@ -241,22 +245,21 @@ label {
   width: 100%;
   height: 36px;
   padding: 0 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  background: #FFFFFF;
-  color: #1A1A2E;
+  background: var(--bg-input);
+  color: var(--text);
   font-size: 14px;
   font-family: inherit;
 }
 
 .field-input::placeholder {
-  color: rgba(107, 114, 128, 0.6);
+  color: rgba(0, 0, 0, 0.35);
 }
 
 .field-input:focus {
   outline: none;
-  border-color: #0066CC;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
+  border-color: var(--border-gold-soft);
 }
 
 .inline-row {
@@ -274,16 +277,22 @@ label {
   flex-shrink: 0;
   height: 36px;
   padding: 0 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  background: #F5F7FA;
-  color: #003D6B;
+  background: var(--bg-card);
+  color: var(--text);
   font-size: 11px;
   font-weight: 600;
   white-space: nowrap;
   cursor: pointer;
 }
 
+.btn-secondary:not(:disabled):active {
+  border-color: var(--primary);
+  background: var(--surface-accent);
+  color: var(--text);
+}
+
 .btn-secondary:disabled {
   opacity: 0.45;
   cursor: not-allowed;
@@ -307,19 +316,19 @@ label {
   padding: 8px 14px;
   border: none;
   background: transparent;
-  color: #003D6B;
+  color: var(--primary);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
 }
 
 .btn-skip:active {
-  color: #005B9F;
+  color: var(--primary-dark);
 }
 
 .error {
   margin: 0;
-  color: #DC2626;
+  color: var(--danger);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.3;
diff --git a/apps/player/src/views/LoginView.vue b/apps/player/src/views/LoginView.vue
index 6935bb3..267d876 100644
--- a/apps/player/src/views/LoginView.vue
+++ b/apps/player/src/views/LoginView.vue
@@ -89,12 +89,32 @@ function goRegister() {
     <div class="login-lang">
       <LocaleSwitcher compact />
     </div>
-    <form @submit.prevent="submit" class="login-form ps-gold-frame">
+    <div class="login-stack">
+      <form @submit.prevent="submit" class="login-form ps-gold-frame">
+      <div class="auth-tabs">
+        <button
+          type="button"
+          class="auth-tab"
+          :class="{ active: loginMode === 'account' }"
+          @click="switchLoginMode('account')"
+        >
+          {{ t('auth.login_by_account') }}
+        </button>
+        <button
+          type="button"
+          class="auth-tab"
+          :class="{ active: loginMode === 'phone' }"
+          @click="switchLoginMode('phone')"
+        >
+          {{ t('auth.login_by_phone') }}
+        </button>
+      </div>
+
       <div v-if="loginMode === 'account'" class="field">
         <label>{{ t('auth.username') }}</label>
         <input
           v-model="account"
-          class="field-input"
+          class="field-input ps-gold-input"
           required
           autocomplete="username"
           maxlength="32"
@@ -108,7 +128,7 @@ function goRegister() {
           <PhoneCountrySelect v-model="countryIso" />
           <input
             v-model="phone"
-            class="field-input"
+            class="field-input ps-gold-input"
             type="tel"
             required
             autocomplete="tel-national"
@@ -119,30 +139,29 @@ function goRegister() {
 
       <div class="field">
         <label>{{ t('auth.password') }}</label>
-        <input v-model="password" class="field-input" type="password" required autocomplete="current-password" />
+        <input v-model="password" class="field-input ps-gold-input" type="password" required autocomplete="current-password" />
       </div>
 
       <button type="button" class="btn-forgot" @click="goForgotPassword">
         {{ t('auth.forgot_password') }}
       </button>
 
-      <button type="button" class="btn-mode-switch" @click="switchLoginMode(loginMode === 'account' ? 'phone' : 'account')">
-        {{ loginMode === 'account' ? t('auth.login_by_phone') : t('auth.login_by_account') }}
-      </button>
-
       <RobotVerify ref="captchaRef" />
       <p v-if="resetSuccess" class="success">{{ t('auth.reset_success') }}</p>
       <p v-if="error" class="error">{{ error }}</p>
       <button type="submit" class="btn-login btn-gold-outline" :disabled="loading">
         {{ t('auth.login') }}
       </button>
-      <button type="button" class="btn-skip" @click="goRegister">
-        {{ t('auth.go_register') }}
-      </button>
-    </form>
-    <button type="button" class="btn-skip-light" @click="continueBrowsing">
-      {{ t('auth.continue_browsing') }}
-    </button>
+      </form>
+      <div class="login-actions">
+        <button type="button" class="btn-skip" @click="goRegister">
+          {{ t('auth.go_register') }}
+        </button>
+        <button type="button" class="btn-skip-light" @click="continueBrowsing">
+          {{ t('auth.continue_browsing') }}
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -151,7 +170,7 @@ function goRegister() {
   position: absolute;
   top: max(12px, env(safe-area-inset-top));
   right: 16px;
-  z-index: 2;
+  z-index: 10;
 }
 
 .login-page {
@@ -163,24 +182,67 @@ function goRegister() {
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
-  padding: 34vh 20px calc(15vh + max(28px, env(safe-area-inset-bottom)));
-  background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
+  padding: 34vh 20px max(20px, env(safe-area-inset-bottom));
+  background-color: var(--bg-body);
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
 }
 
-.login-form {
+.login-stack {
+  position: relative;
+  z-index: 1;
   width: 100%;
   max-width: 320px;
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 20px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.login-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+}
+
+.login-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 0 14px 4px;
+}
+
+.auth-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 4px;
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-body);
+  border: 1px solid var(--border);
+}
+
+.auth-tab {
+  flex: 1;
+  min-height: 34px;
+  padding: 0 8px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.auth-tab.active {
+  border-color: var(--primary);
+  color: var(--text);
+  background: var(--surface-accent);
 }
 
 .field {
@@ -193,18 +255,17 @@ function goRegister() {
   width: 100%;
   height: 36px;
   padding: 0 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  background: #FFFFFF;
-  color: #1A1A2E;
+  background: var(--bg-input);
+  color: var(--text);
   font-size: 14px;
   font-family: inherit;
 }
 
 .field-input:focus {
   outline: none;
-  border-color: #0066CC;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
+  border-color: var(--border-gold-soft);
 }
 
 .inline-row {
@@ -220,41 +281,25 @@ function goRegister() {
 
 label {
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   letter-spacing: 0.04em;
 }
 
-.btn-mode-switch {
-  align-self: flex-start;
-  margin: -2px 0 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: #005B9F;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
 .btn-forgot {
   align-self: flex-end;
   margin: -4px 0 0;
   padding: 0;
   border: none;
   background: transparent;
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
 }
 
 .btn-forgot:active {
-  color: #003D6B;
-}
-
-.btn-mode-switch:active {
-  color: #003D6B;
+  color: var(--text);
 }
 
 .btn-login {
@@ -272,48 +317,45 @@ label {
 }
 
 .btn-skip {
-  margin-top: 2px;
-  padding: 8px 14px;
+  padding: 6px 14px;
   border: none;
   background: transparent;
-  color: #003D6B;
+  color: var(--primary);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
+  text-align: center;
 }
 
 .btn-skip:active {
-  color: #005B9F;
+  color: var(--primary-dark);
 }
 
 .btn-skip-light {
-  position: absolute;
-  bottom: calc(20px + env(safe-area-inset-bottom));
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 8px 16px;
+  padding: 6px 16px;
   border: none;
   background: transparent;
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 13px;
   font-weight: 400;
   cursor: pointer;
   white-space: nowrap;
+  text-align: center;
 }
 
 .btn-skip-light:active {
-  color: #003D6B;
+  color: var(--text);
 }
 
 .error {
-  color: #DC2626;
+  color: var(--danger);
   font-size: 13px;
   font-weight: 600;
 }
 
 .success {
   margin: 0;
-  color: #059669;
+  color: var(--success);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.4;
diff --git a/apps/player/src/views/RegisterView.vue b/apps/player/src/views/RegisterView.vue
index be86c6c..7f2950e 100644
--- a/apps/player/src/views/RegisterView.vue
+++ b/apps/player/src/views/RegisterView.vue
@@ -105,7 +105,8 @@ const fieldError = () => {
     <div class="login-lang">
       <LocaleSwitcher compact />
     </div>
-    <form @submit.prevent="submit" class="login-form ps-gold-frame" :class="{ 'is-busy': loading }">
+    <div class="login-stack">
+      <form @submit.prevent="submit" class="login-form ps-gold-frame" :class="{ 'is-busy': loading }">
       <div v-if="loading" class="form-busy-overlay" aria-hidden="true">
         <GoldSpinner :size="40" :active="true" />
         <p class="form-busy-text">{{ t('auth.registering') }}</p>
@@ -116,7 +117,7 @@ const fieldError = () => {
         <label>{{ t('auth.username') }}</label>
         <input
           v-model="account"
-          class="field-input"
+          class="field-input ps-gold-input"
           required
           autocomplete="username"
           maxlength="32"
@@ -132,7 +133,7 @@ const fieldError = () => {
           <PhoneCountrySelect v-model="countryIso" />
           <input
             v-model="phone"
-            class="field-input"
+            class="field-input ps-gold-input"
             type="tel"
             required
             autocomplete="tel-national"
@@ -147,7 +148,7 @@ const fieldError = () => {
         <div class="inline-row">
           <input
             v-model="smsCode"
-            class="field-input"
+            class="field-input ps-gold-input"
             inputmode="numeric"
             maxlength="6"
             autocomplete="one-time-code"
@@ -171,17 +172,17 @@ const fieldError = () => {
 
       <div class="field">
         <label>{{ t('auth.password') }}</label>
-        <input v-model="password" class="field-input" type="password" required autocomplete="new-password" minlength="8" :disabled="loading" />
+        <input v-model="password" class="field-input ps-gold-input" type="password" required autocomplete="new-password" minlength="8" :disabled="loading" />
       </div>
 
       <div class="field">
         <label>{{ t('auth.confirm_password') }}</label>
-        <input v-model="confirmPassword" class="field-input" type="password" required autocomplete="new-password" minlength="8" :disabled="loading" />
+        <input v-model="confirmPassword" class="field-input ps-gold-input" type="password" required autocomplete="new-password" minlength="8" :disabled="loading" />
       </div>
 
       <div class="field field-optional">
         <label>{{ t('auth.invite_code') }} <span class="optional-tag">{{ t('auth.optional') }}</span></label>
-        <input v-model="inviteCode" class="field-input" autocomplete="off" :disabled="loading" />
+        <input v-model="inviteCode" class="field-input ps-gold-input" autocomplete="off" :disabled="loading" />
       </div>
 
       <p v-if="fieldError()" class="error">{{ fieldError() }}</p>
@@ -199,13 +200,16 @@ const fieldError = () => {
         </span>
         <span v-else>{{ t('auth.register_btn') }}</span>
       </button>
-      <button type="button" class="btn-skip" :disabled="loading" @click="goLogin">
-        {{ t('auth.have_account') }}
-      </button>
-    </form>
-    <button type="button" class="btn-skip-light" @click="continueBrowsing">
-      {{ t('auth.continue_browsing') }}
-    </button>
+      </form>
+      <div class="login-actions">
+        <button type="button" class="btn-skip" :disabled="loading" @click="goLogin">
+          {{ t('auth.have_account') }}
+        </button>
+        <button type="button" class="btn-skip-light" :disabled="loading" @click="continueBrowsing">
+          {{ t('auth.continue_browsing') }}
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -214,7 +218,7 @@ const fieldError = () => {
   position: absolute;
   top: max(12px, env(safe-area-inset-top));
   right: 16px;
-  z-index: 2;
+  z-index: 10;
 }
 
 .login-page {
@@ -226,25 +230,38 @@ const fieldError = () => {
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
-  padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
-  background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
+  padding: 30vh 16px max(20px, env(safe-area-inset-bottom));
+  background-color: var(--bg-body);
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
 }
 
-.login-form {
+.login-stack {
   position: relative;
+  z-index: 1;
   width: 100%;
   max-width: 320px;
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 20px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.login-form {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+}
+
+.login-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 0 14px 4px;
 }
 
 .login-form.is-busy {
@@ -261,8 +278,8 @@ const fieldError = () => {
   justify-content: center;
   gap: 10px;
   border-radius: inherit;
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(2px);
+  background: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(4px);
   pointer-events: all;
 }
 
@@ -270,7 +287,7 @@ const fieldError = () => {
   margin: 0;
   font-size: 13px;
   font-weight: 700;
-  color: #003D6B;
+  color: var(--primary);
   letter-spacing: 0.04em;
 }
 
@@ -285,7 +302,7 @@ const fieldError = () => {
   margin: 0 0 2px;
   font-size: 16px;
   font-weight: 800;
-  color: #1A1A2E;
+  color: var(--text);
   text-align: center;
 }
 
@@ -301,7 +318,7 @@ const fieldError = () => {
 
 label {
   font-size: 10px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   letter-spacing: 0.03em;
 }
@@ -309,29 +326,28 @@ label {
 .optional-tag {
   font-size: 10px;
   font-weight: 500;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .field-input {
   width: 100%;
   height: 36px;
   padding: 0 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  background: #FFFFFF;
-  color: #1A1A2E;
+  background: var(--bg-input);
+  color: var(--text);
   font-size: 14px;
   font-family: inherit;
 }
 
 .field-input::placeholder {
-  color: rgba(107, 114, 128, 0.6);
+  color: rgba(0, 0, 0, 0.35);
 }
 
 .field-input:focus {
   outline: none;
-  border-color: #0066CC;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
+  border-color: var(--border-gold-soft);
 }
 
 .inline-row {
@@ -349,16 +365,23 @@ label {
   flex-shrink: 0;
   height: 36px;
   padding: 0 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  background: #F5F7FA;
-  color: #003D6B;
+  background: var(--bg-card);
+  color: var(--text);
   font-size: 11px;
   font-weight: 600;
   white-space: nowrap;
   cursor: pointer;
 }
 
+.btn-secondary:not(:disabled).active,
+.btn-secondary:active:not(:disabled) {
+  border-color: var(--primary);
+  background: var(--surface-accent);
+  color: var(--text);
+}
+
 .btn-secondary:disabled {
   opacity: 0.45;
   cursor: not-allowed;
@@ -382,42 +405,39 @@ label {
 }
 
 .btn-skip {
-  margin-top: 2px;
-  padding: 8px 14px;
+  padding: 6px 14px;
   border: none;
   background: transparent;
-  color: #003D6B;
+  color: var(--primary);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
+  text-align: center;
 }
 
 .btn-skip:active {
-  color: #005B9F;
+  color: var(--primary-dark);
 }
 
 .btn-skip-light {
-  position: absolute;
-  bottom: calc(20px + env(safe-area-inset-bottom));
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 8px 16px;
+  padding: 6px 16px;
   border: none;
   background: transparent;
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 13px;
   font-weight: 400;
   cursor: pointer;
   white-space: nowrap;
+  text-align: center;
 }
 
 .btn-skip-light:active {
-  color: #003D6B;
+  color: var(--text);
 }
 
 .error {
   margin: 0;
-  color: #DC2626;
+  color: var(--danger);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.3;