From 233e9c891acafe8de77a332e7a3c3a827319a588 Mon Sep 17 00:00:00 2001
From: Mars <3361409208a@gmail.com>
Date: Tue, 23 Jun 2026 16:21:40 +0800
Subject: [PATCH] =?UTF-8?q?style(player):=20theme-3=20=E7=8E=BB=E7=92=83?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E4=B8=8E=E8=AE=A4=E8=AF=81=E9=A1=B5=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 认证页减轻背景遮罩，玻璃表单与渐变登录按钮

- 全局 glass 卡片：半透明底+中性描边，珊瑚色仅用于 auth-card

- 登录提示/确认弹窗、注单/钱包/首页等卡片统一风格

- 消息列表移除外边框与未读圆点，保留未读标签
---
 apps/player/src/components/BetHistoryCard.vue |   9 +-
 apps/player/src/components/BetStatsPanel.vue  |   5 +-
 apps/player/src/components/ConfirmDialog.vue  |  20 +--
 .../src/components/LeagueAccordionItem.vue    |   5 +-
 .../src/components/LoginPromptModal.vue       |  96 +++++------
 apps/player/src/components/MatchBetCard.vue   |   5 +-
 .../src/components/MessageListPanel.vue       |  14 --
 .../src/components/WalletStatsPanel.vue       |   5 +-
 apps/player/src/styles.css                    | 155 ++++++++++++++++--
 apps/player/src/views/CashbackRecordsView.vue |   5 +-
 apps/player/src/views/ForgotPasswordView.vue  |  52 ++----
 apps/player/src/views/HomeView.vue            |  10 +-
 apps/player/src/views/LoginView.vue           |  39 +----
 apps/player/src/views/ProfileView.vue         |   4 +-
 apps/player/src/views/RechargeHistoryView.vue |   5 +-
 apps/player/src/views/RegisterView.vue        |  54 ++----
 apps/player/src/views/WalletDetailView.vue    |   2 +-
 apps/player/src/views/WalletView.vue          |   2 +-
 18 files changed, 246 insertions(+), 241 deletions(-)

diff --git a/apps/player/src/components/BetHistoryCard.vue b/apps/player/src/components/BetHistoryCard.vue
index fc1a031..1dd90e4 100644
--- a/apps/player/src/components/BetHistoryCard.vue
+++ b/apps/player/src/components/BetHistoryCard.vue
@@ -149,19 +149,16 @@ function goDetail() {
   align-items: center;
   gap: 10px;
   padding: 14px 16px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   margin-bottom: 8px;
   cursor: pointer;
-  transition: background 0.15s, box-shadow 0.15s;
+  transition: transform 0.15s, box-shadow 0.15s;
   -webkit-tap-highlight-color: transparent;
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .bet-card:active {
-  background: var(--bg-hover);
+  transform: scale(0.99);
 }
 
 .card-body {
diff --git a/apps/player/src/components/BetStatsPanel.vue b/apps/player/src/components/BetStatsPanel.vue
index 2d7c215..36bcee0 100644
--- a/apps/player/src/components/BetStatsPanel.vue
+++ b/apps/player/src/components/BetStatsPanel.vue
@@ -79,12 +79,9 @@ const stats = computed(() => {
 
 <style scoped>
 .stats-panel {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   padding: 14px 12px 10px;
   margin-bottom: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .stats-row {
diff --git a/apps/player/src/components/ConfirmDialog.vue b/apps/player/src/components/ConfirmDialog.vue
index 7a196b0..0975b5a 100644
--- a/apps/player/src/components/ConfirmDialog.vue
+++ b/apps/player/src/components/ConfirmDialog.vue
@@ -51,7 +51,7 @@ function onConfirm() {
         @click.self="close"
       >
         <div
-          class="confirm-modal"
+          class="confirm-modal glass-card"
           role="alertdialog"
           aria-modal="true"
           :aria-labelledby="title ? 'confirm-dialog-title' : undefined"
@@ -95,26 +95,22 @@ function onConfirm() {
   justify-content: center;
   padding: 20px;
   padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
-  background: rgba(0, 0, 0, 0.72);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
+  background: rgba(15, 32, 39, 0.42);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 .confirm-modal {
   width: 100%;
   max-width: 340px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
   padding: 22px 18px 16px;
-  box-shadow: var(--shadow-lg);
 }
 
 .confirm-title {
   margin: 0 0 10px;
   font-size: 17px;
   font-weight: 800;
-  color: var(--primary);
+  color: var(--primary-light);
   text-align: center;
   line-height: 1.35;
 }
@@ -149,19 +145,21 @@ function onConfirm() {
 
 .confirm-btn.cancel {
   border: 1px solid var(--border);
-  background: transparent;
-  color: var(--text-muted);
+  background: rgba(15, 32, 39, 0.45);
+  color: var(--text-secondary);
 }
 
 .confirm-btn.confirm {
   border: none;
   background: var(--gradient-primary);
   color: #FFFFFF;
+  box-shadow: 0 4px 14px rgba(231, 111, 81, 0.35);
 }
 
 .confirm-btn.confirm.danger {
   background: var(--danger);
   color: #fff;
+  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
 }
 
 .confirm-fade-enter-active,
diff --git a/apps/player/src/components/LeagueAccordionItem.vue b/apps/player/src/components/LeagueAccordionItem.vue
index 8baf9ea..feed9f6 100644
--- a/apps/player/src/components/LeagueAccordionItem.vue
+++ b/apps/player/src/components/LeagueAccordionItem.vue
@@ -89,11 +89,8 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
   position: relative;
   isolation: isolate;
   margin-bottom: 10px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-card);
+  border-radius: var(--radius-lg);
   overflow: hidden;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
 
 .league-row {
diff --git a/apps/player/src/components/LoginPromptModal.vue b/apps/player/src/components/LoginPromptModal.vue
index 1733e9d..7e3079a 100644
--- a/apps/player/src/components/LoginPromptModal.vue
+++ b/apps/player/src/components/LoginPromptModal.vue
@@ -26,7 +26,7 @@ function continueBrowsing() {
   <Teleport to="body">
     <Transition name="fade">
       <div v-if="auth.loginPromptVisible" class="login-overlay" @click.self="continueBrowsing">
-        <div class="login-modal">
+        <div class="login-modal auth-card">
           <button type="button" class="close-btn" :aria-label="t('auth.continue_browsing')" @click="continueBrowsing">
             ✕
           </button>
@@ -34,7 +34,7 @@ function continueBrowsing() {
           <p class="login-hint">{{ t('auth.login_hint') }}</p>
 
           <div class="login-actions">
-            <button type="button" class="login-submit" @click="goLogin">
+            <button type="button" class="login-submit btn-primary" @click="goLogin">
               {{ t('auth.go_login') }}
             </button>
             <button type="button" class="login-secondary" @click="continueBrowsing">
@@ -55,52 +55,54 @@ function continueBrowsing() {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
+  padding: 20px;
+  background: rgba(15, 32, 39, 0.42);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 .login-modal {
   position: relative;
-  width: 90%;
-  max-width: 360px;
-  background: var(--bg-card-elevated);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 28px 24px 24px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), var(--shadow-glow);
+  width: 100%;
+  max-width: 340px;
+  padding: 28px 22px 22px;
 }
 
 .close-btn {
   position: absolute;
-  top: 12px;
-  right: 14px;
+  top: 10px;
+  right: 12px;
   background: none;
   border: none;
-  color: var(--text-muted);
-  font-size: 18px;
+  color: var(--text-dim);
+  font-size: 17px;
   cursor: pointer;
-  padding: 4px;
+  padding: 6px;
   line-height: 1;
+  border-radius: 6px;
+  transition: color 0.2s, background 0.2s;
 }
 
-.close-btn:hover {
-  color: var(--text);
+.close-btn:active {
+  color: var(--primary-light);
+  background: rgba(244, 162, 97, 0.1);
 }
 
 .login-title {
-  font-size: 18px;
+  font-size: 19px;
   font-weight: 800;
-  color: var(--primary);
-  margin: 0 0 6px;
+  color: var(--primary-light);
+  margin: 0 0 8px;
   text-align: center;
+  letter-spacing: 0.02em;
 }
 
 .login-hint {
-  font-size: 12px;
-  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--text-secondary);
   text-align: center;
-  margin: 0 0 24px;
+  margin: 0 0 22px;
 }
 
 .login-actions {
@@ -110,46 +112,48 @@ function continueBrowsing() {
 }
 
 .login-submit {
-  padding: 12px;
-  border-radius: 8px;
-  border: none;
-  background: var(--gradient-primary);
-  color: #FFFFFF;
+  min-height: 46px;
   font-size: 15px;
-  font-weight: 800;
-  cursor: pointer;
-  min-height: 44px;
-  transition: opacity 0.2s;
-}
-
-.login-submit:active {
-  opacity: 0.85;
 }
 
 .login-secondary {
-  padding: 10px;
-  border-radius: 8px;
+  padding: 11px 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid var(--border);
-  background: transparent;
-  color: var(--text-muted);
+  background: rgba(15, 32, 39, 0.45);
+  color: var(--text-secondary);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
-  min-height: 40px;
-  transition: color 0.2s, border-color 0.2s;
+  min-height: 42px;
+  backdrop-filter: blur(8px);
+  transition: color 0.2s, border-color 0.2s, background 0.2s;
 }
 
 .login-secondary:active {
   color: var(--text);
-  border-color: var(--primary);
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.06);
 }
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.25s ease;
+  transition: opacity 0.22s ease;
 }
+
+.fade-enter-active .login-modal,
+.fade-leave-active .login-modal {
+  transition: transform 0.22s ease, opacity 0.22s ease;
+}
+
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
 }
+
+.fade-enter-from .login-modal,
+.fade-leave-to .login-modal {
+  opacity: 0;
+  transform: scale(0.96) translateY(8px);
+}
 </style>
diff --git a/apps/player/src/components/MatchBetCard.vue b/apps/player/src/components/MatchBetCard.vue
index 17578c9..da3bb7d 100644
--- a/apps/player/src/components/MatchBetCard.vue
+++ b/apps/player/src/components/MatchBetCard.vue
@@ -130,9 +130,7 @@ const liveScoreText = computed(() => {
 <style scoped>
 .match-card {
   position: relative;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   padding: 8px 6px 8px;
   display: flex;
   flex-direction: column;
@@ -141,7 +139,6 @@ const liveScoreText = computed(() => {
   min-width: 0;
   overflow: hidden;
   cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transition: transform 0.15s, box-shadow 0.15s;
 }
 
diff --git a/apps/player/src/components/MessageListPanel.vue b/apps/player/src/components/MessageListPanel.vue
index 30f7a51..36818ab 100644
--- a/apps/player/src/components/MessageListPanel.vue
+++ b/apps/player/src/components/MessageListPanel.vue
@@ -124,7 +124,6 @@ onActivated(tryLoad);
           :class="{ unread: !item.isRead }"
         >
           <button type="button" class="row-body" @click="openDetail(item.id)">
-            <span class="row-dot" aria-hidden="true" />
             <span class="row-main">
               <span class="title-row">
                 <span class="title">{{ messageTitle(item) }}</span>
@@ -233,19 +232,6 @@ onActivated(tryLoad);
   font-weight: 700;
 }
 
-.row-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: transparent;
-  flex-shrink: 0;
-}
-
-.list-row.unread .row-dot {
-  background: var(--primary);
-  box-shadow: var(--shadow-glow);
-}
-
 .row-main {
   flex: 1;
   min-width: 0;
diff --git a/apps/player/src/components/WalletStatsPanel.vue b/apps/player/src/components/WalletStatsPanel.vue
index 82fa161..8243996 100644
--- a/apps/player/src/components/WalletStatsPanel.vue
+++ b/apps/player/src/components/WalletStatsPanel.vue
@@ -78,12 +78,9 @@ const stats = computed(() => {
 
 <style scoped>
 .wallet-stats-panel {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   padding: 12px;
   margin-bottom: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .stats-row {
diff --git a/apps/player/src/styles.css b/apps/player/src/styles.css
index 1d4cb98..32f4090 100644
--- a/apps/player/src/styles.css
+++ b/apps/player/src/styles.css
@@ -19,10 +19,14 @@
   --neutral: #8FA3AD;
 
   --bg-body: #0F2027;
-  --bg-card: #203A43;
-  --bg-card-elevated: #2C5364;
-  --bg-hover: #345E70;
-  --bg-elevated: #2C5364;
+  --glass-bg: rgba(22, 45, 54, 0.82);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-border-accent: rgba(244, 162, 97, 0.32);
+  --glass-glow: 0 0 20px rgba(0, 0, 0, 0.18);
+  --bg-card: var(--glass-bg);
+  --bg-card-elevated: rgba(28, 55, 66, 0.88);
+  --bg-hover: rgba(44, 83, 100, 0.55);
+  --bg-elevated: rgba(28, 55, 66, 0.88);
   --bg-input: #162D36;
   --captcha-canvas-bg: #162D36;
   --captcha-char: #F4A261;
@@ -47,9 +51,9 @@
   --radius-sm: 8px;
   --radius-lg: 16px;
 
-  --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
-  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
-  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
+  --shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.38);
+  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);
   --shadow-glow: 0 0 20px rgba(244, 162, 97, 0.2);
   --shadow-glow-accent: 0 0 20px rgba(231, 111, 81, 0.2);
 }
@@ -159,18 +163,60 @@ input:-webkit-autofill:active {
   color: var(--primary-light) !important;
 }
 
-/* ── Card frame ── */
+/* ── Card frame (glass) ── */
+.glass-card,
+.card,
 .ps-gold-frame {
   position: relative;
-  border: 1px solid var(--border) !important;
-  border-radius: var(--radius);
-  background: var(--bg-card) !important;
-  box-shadow: var(--shadow);
-  backdrop-filter: blur(12px);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
 }
+
 .ps-gold-frame::before,
 .ps-gold-frame::after { display: none; }
 
+/* Common list / panel surfaces */
+.bet-card,
+.order-card,
+.list-card,
+.match-card,
+.option-card,
+.my-bet-card,
+.score-card,
+.success-card,
+.avatar-card,
+.form-card,
+.wallet-stats-panel,
+.bet-stats-panel,
+.stats-panel,
+.confirm-modal,
+.qa-item,
+.qe-item,
+.league-block,
+.tx-list.glass-card,
+.drawer,
+.slip-item,
+.hero,
+.section,
+.recharge-section,
+.panel-card {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--shadow-md);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+
+.tx-list.glass-card {
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
 .ps-gold-input {
   background: var(--bg-input) !important;
   border: 1px solid var(--border) !important;
@@ -219,12 +265,8 @@ input:-webkit-autofill:active {
 
 /* ── Card ── */
 .card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
   padding: 16px;
   margin-bottom: 12px;
-  box-shadow: var(--shadow);
 }
 
 /* ── Section title ── */
@@ -251,3 +293,82 @@ input:-webkit-autofill:active {
   font-weight: 600;
   font-size: 14px;
 }
+
+/* ── Auth pages (login / register / forgot) ── */
+.auth-page::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    transparent 32%,
+    rgba(15, 32, 39, 0.25) 58%,
+    rgba(15, 32, 39, 0.72) 100%
+  );
+}
+
+.auth-page::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: linear-gradient(165deg, rgba(244, 162, 97, 0.14) 0%, transparent 42%);
+}
+
+.auth-card {
+  background: var(--glass-bg) !important;
+  border: 1px solid var(--glass-border-accent) !important;
+  border-radius: var(--radius-lg) !important;
+  box-shadow: var(--shadow-lg), 0 0 28px rgba(244, 162, 97, 0.1) !important;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.auth-card label {
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+
+.auth-card .field-input {
+  background: rgba(15, 32, 39, 0.55);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.auth-card .field-input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.18);
+}
+
+.auth-card .btn-login {
+  background: var(--gradient-primary);
+  border: none;
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(231, 111, 81, 0.38);
+}
+
+.auth-card .btn-login:active:not(:disabled) {
+  opacity: 0.92;
+  transform: scale(0.985);
+}
+
+.auth-card .btn-secondary {
+  background: rgba(15, 32, 39, 0.5);
+  border-color: var(--border);
+  color: var(--primary-light);
+}
+
+.auth-page .btn-skip-light {
+  border-color: var(--border);
+  background: rgba(22, 45, 54, 0.45);
+  backdrop-filter: blur(8px);
+  color: var(--text-secondary);
+}
+
+.auth-page .btn-skip-light:active {
+  border-color: var(--primary);
+  color: var(--primary-light);
+}
diff --git a/apps/player/src/views/CashbackRecordsView.vue b/apps/player/src/views/CashbackRecordsView.vue
index d23b5c7..5e2ae9f 100644
--- a/apps/player/src/views/CashbackRecordsView.vue
+++ b/apps/player/src/views/CashbackRecordsView.vue
@@ -273,11 +273,8 @@ const pullIndicatorStyle = () => ({
 }
 
 .list-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   overflow: hidden;
-  box-shadow: var(--shadow);
 }
 
 .record-row {
diff --git a/apps/player/src/views/ForgotPasswordView.vue b/apps/player/src/views/ForgotPasswordView.vue
index a390e3b..7622f3c 100644
--- a/apps/player/src/views/ForgotPasswordView.vue
+++ b/apps/player/src/views/ForgotPasswordView.vue
@@ -98,11 +98,11 @@ function goLogin() {
 </script>
 
 <template>
-  <div class="login-page" :style="{ backgroundImage: `url(${loginBg})` }">
+  <div class="login-page auth-page" :style="{ backgroundImage: `url(${loginBg})` }">
     <div class="login-lang">
       <LocaleSwitcher compact />
     </div>
-    <form @submit.prevent="submit" class="login-form ps-gold-frame">
+    <form @submit.prevent="submit" class="login-form ps-gold-frame auth-card">
       <h2 class="form-title">{{ t('auth.forgot_password_title') }}</h2>
 
       <div class="field">
@@ -169,7 +169,7 @@ function goLogin() {
 
       <p v-if="fieldError()" class="error">{{ fieldError() }}</p>
 
-      <button type="submit" class="btn-login btn-gold-outline" :disabled="loading">
+      <button type="submit" class="btn-login btn-primary" :disabled="loading">
         {{ t('auth.reset_password_btn') }}
       </button>
       <button type="button" class="btn-skip" @click="goLogin">
@@ -203,22 +203,6 @@ function goLogin() {
   background-repeat: no-repeat;
 }
 
-.login-page::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: rgba(15, 32, 39, 0.7);
-  z-index: 0;
-}
-
-.login-page::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(160deg, rgba(244, 162, 97, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
-  z-index: 0;
-}
-
 .login-form {
   position: relative;
   z-index: 1;
@@ -226,20 +210,17 @@ function goLogin() {
   max-width: 320px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 20px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  gap: 10px;
+  padding: 22px 20px;
 }
 
 .form-title {
-  margin: 0 0 2px;
-  font-size: 16px;
+  margin: 0 0 4px;
+  font-size: 17px;
   font-weight: 800;
-  color: var(--text);
+  color: var(--primary-light);
   text-align: center;
+  letter-spacing: 0.02em;
 }
 
 .field {
@@ -249,32 +230,25 @@ function goLogin() {
 }
 
 label {
-  font-size: 10px;
-  color: var(--text-muted);
+  font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.03em;
 }
 
 .field-input {
   width: 100%;
-  height: 36px;
-  padding: 0 10px;
+  height: 40px;
+  padding: 0 12px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   background: var(--bg-input);
   color: var(--text);
   font-size: 14px;
   font-family: inherit;
 }
 
-.field-input::placeholder {
-  color: rgba(148, 163, 184, 0.6);
-}
-
 .field-input:focus {
   outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
 }
 
 .inline-row {
diff --git a/apps/player/src/views/HomeView.vue b/apps/player/src/views/HomeView.vue
index bdc2801..624bd2f 100644
--- a/apps/player/src/views/HomeView.vue
+++ b/apps/player/src/views/HomeView.vue
@@ -199,12 +199,9 @@ function formatKickoff(startTime: string) {
   align-items: center;
   gap: 6px;
   padding: 12px 4px 10px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-lg);
   min-width: 0;
   overflow: hidden;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  box-shadow: var(--shadow);
   cursor: pointer;
   transition: transform 0.15s, box-shadow 0.15s;
 }
@@ -300,10 +297,7 @@ function formatKickoff(startTime: string) {
   margin-bottom: 8px;
   padding: 10px 12px;
   min-height: 60px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  box-shadow: var(--shadow);
-  background: var(--bg-card);
+  border-radius: var(--radius-lg);
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
   overflow: hidden;
diff --git a/apps/player/src/views/LoginView.vue b/apps/player/src/views/LoginView.vue
index 9792f3a..af7413b 100644
--- a/apps/player/src/views/LoginView.vue
+++ b/apps/player/src/views/LoginView.vue
@@ -85,11 +85,11 @@ function goRegister() {
 </script>
 
 <template>
-  <div class="login-page" :style="{ backgroundImage: `url(${loginBg})` }">
+  <div class="login-page auth-page" :style="{ backgroundImage: `url(${loginBg})` }">
     <div class="login-lang">
       <LocaleSwitcher compact />
     </div>
-    <form @submit.prevent="submit" class="login-form ps-gold-frame">
+    <form @submit.prevent="submit" class="login-form ps-gold-frame auth-card">
       <div v-if="loginMode === 'account'" class="field">
         <label>{{ t('auth.username') }}</label>
         <input
@@ -133,7 +133,7 @@ function goRegister() {
       <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">
+      <button type="submit" class="btn-login btn-primary" :disabled="loading">
         {{ t('auth.login') }}
       </button>
       <button type="button" class="btn-skip" @click="goRegister">
@@ -170,22 +170,6 @@ function goRegister() {
   background-repeat: no-repeat;
 }
 
-.login-page::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: rgba(15, 32, 39, 0.7);
-  z-index: 0;
-}
-
-.login-page::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(160deg, rgba(244, 162, 97, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
-  z-index: 0;
-}
-
 .login-form {
   position: relative;
   z-index: 1;
@@ -193,12 +177,8 @@ function goRegister() {
   max-width: 320px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 20px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  gap: 10px;
+  padding: 22px 20px;
 }
 
 .field {
@@ -209,10 +189,10 @@ function goRegister() {
 
 .field-input {
   width: 100%;
-  height: 36px;
-  padding: 0 10px;
+  height: 40px;
+  padding: 0 12px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   background: var(--bg-input);
   color: var(--text);
   font-size: 14px;
@@ -221,8 +201,6 @@ function goRegister() {
 
 .field-input:focus {
   outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
 }
 
 .inline-row {
@@ -238,7 +216,6 @@ function goRegister() {
 
 label {
   font-size: 11px;
-  color: var(--text-muted);
   font-weight: 600;
   letter-spacing: 0.04em;
 }
diff --git a/apps/player/src/views/ProfileView.vue b/apps/player/src/views/ProfileView.vue
index f05af15..0d55060 100644
--- a/apps/player/src/views/ProfileView.vue
+++ b/apps/player/src/views/ProfileView.vue
@@ -541,9 +541,7 @@ const balanceAmountClass = computed(() => {
   align-items: center;
   gap: 10px;
   padding: 12px 10px;
-  border-radius: var(--radius-sm);
-  background: var(--bg-card);
-  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
   text-decoration: none;
   cursor: pointer;
   transition: transform 0.15s, box-shadow 0.15s;
diff --git a/apps/player/src/views/RechargeHistoryView.vue b/apps/player/src/views/RechargeHistoryView.vue
index d3430fd..9043ee7 100644
--- a/apps/player/src/views/RechargeHistoryView.vue
+++ b/apps/player/src/views/RechargeHistoryView.vue
@@ -420,15 +420,12 @@ function auditStepCount(order: DepositOrder) {
 
 .order-list { display: flex; flex-direction: column; gap: 12px; }
 .order-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 16px;
   position: relative;
   overflow: hidden;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
-  box-shadow: var(--shadow);
 }
 .order-card:active {
   opacity: 0.92;
diff --git a/apps/player/src/views/RegisterView.vue b/apps/player/src/views/RegisterView.vue
index c7f36b2..d334007 100644
--- a/apps/player/src/views/RegisterView.vue
+++ b/apps/player/src/views/RegisterView.vue
@@ -101,11 +101,11 @@ const fieldError = () => {
 </script>
 
 <template>
-  <div class="login-page" :style="{ backgroundImage: `url(${loginBg})` }">
+  <div class="login-page auth-page" :style="{ backgroundImage: `url(${loginBg})` }">
     <div class="login-lang">
       <LocaleSwitcher compact />
     </div>
-    <form @submit.prevent="submit" class="login-form ps-gold-frame" :class="{ 'is-busy': loading }">
+    <form @submit.prevent="submit" class="login-form ps-gold-frame auth-card" :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>
@@ -188,7 +188,7 @@ const fieldError = () => {
 
       <button
         type="submit"
-        class="btn-login btn-gold-outline"
+        class="btn-login btn-primary"
         :class="{ 'is-loading': loading }"
         :disabled="loading"
         :aria-busy="loading"
@@ -233,22 +233,6 @@ const fieldError = () => {
   background-repeat: no-repeat;
 }
 
-.login-page::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: rgba(15, 32, 39, 0.7);
-  z-index: 0;
-}
-
-.login-page::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(160deg, rgba(244, 162, 97, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
-  z-index: 0;
-}
-
 .login-form {
   position: relative;
   z-index: 1;
@@ -256,12 +240,8 @@ const fieldError = () => {
   max-width: 320px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 20px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  gap: 10px;
+  padding: 22px 20px;
 }
 
 .login-form.is-busy {
@@ -278,7 +258,7 @@ const fieldError = () => {
   justify-content: center;
   gap: 10px;
   border-radius: inherit;
-  background: rgba(15, 32, 39, 0.85);
+  background: rgba(22, 45, 54, 0.88);
   backdrop-filter: blur(4px);
   pointer-events: all;
 }
@@ -299,11 +279,12 @@ const fieldError = () => {
 }
 
 .form-title {
-  margin: 0 0 2px;
-  font-size: 16px;
+  margin: 0 0 4px;
+  font-size: 17px;
   font-weight: 800;
-  color: var(--text);
+  color: var(--primary-light);
   text-align: center;
+  letter-spacing: 0.02em;
 }
 
 .field {
@@ -317,8 +298,7 @@ const fieldError = () => {
 }
 
 label {
-  font-size: 10px;
-  color: var(--text-muted);
+  font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.03em;
 }
@@ -331,24 +311,18 @@ label {
 
 .field-input {
   width: 100%;
-  height: 36px;
-  padding: 0 10px;
+  height: 40px;
+  padding: 0 12px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   background: var(--bg-input);
   color: var(--text);
   font-size: 14px;
   font-family: inherit;
 }
 
-.field-input::placeholder {
-  color: rgba(148, 163, 184, 0.6);
-}
-
 .field-input:focus {
   outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
 }
 
 .inline-row {
diff --git a/apps/player/src/views/WalletDetailView.vue b/apps/player/src/views/WalletDetailView.vue
index 1895d9f..9f72f80 100644
--- a/apps/player/src/views/WalletDetailView.vue
+++ b/apps/player/src/views/WalletDetailView.vue
@@ -187,7 +187,7 @@ const pullIndicatorStyle = () => ({
         </button>
       </div>
 
-      <div v-if="items.length" class="tx-list">
+      <div v-if="items.length" class="tx-list glass-card">
         <button
           v-for="tx in items"
           :key="tx.transactionId"
diff --git a/apps/player/src/views/WalletView.vue b/apps/player/src/views/WalletView.vue
index 0a12d8d..ce23f89 100644
--- a/apps/player/src/views/WalletView.vue
+++ b/apps/player/src/views/WalletView.vue
@@ -110,7 +110,7 @@ const pullIndicatorStyle = () => ({
         >{{ t('wallet.view_all') }} &#x203A;</button>
       </div>
 
-      <div v-if="items.length" class="tx-list">
+      <div v-if="items.length" class="tx-list glass-card">
         <button
           v-for="tx in items"
           :key="tx.transactionId"