ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(player): theme-2 认证页 zt2 背景与表单样式优化

Browse Source 
- 登录/注册/找回密码使用 zt2.webp，移除暗色渐变遮罩

- 表单标题、标签、链接改为深蓝/灰色，适配 Pinnacle 浅色主题

- 更新 zt2.webp 资源文件
This commit is contained in:
Mars
2026-06-23 15:56:13 +08:00
parent 6ba541c133
commit f9d68d94ce
4 changed files with 210 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
apps/player/src/assets/images/zt2.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 256 KiB

65
apps/player/src/views/ForgotPasswordView.vue
View File

@@ -102,7 +102,8 @@ function goLogin() {
<div class="login-lang"> <div class="login-lang">
<LocaleSwitcher compact /> <LocaleSwitcher compact />
</div> </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> <h2 class="form-title">{{ t('auth.forgot_password_title') }}</h2>
<div class="field"> <div class="field">
@@ -111,7 +112,7 @@ function goLogin() {
<PhoneCountrySelect v-model="countryIso" /> <PhoneCountrySelect v-model="countryIso" />
<input <input
v-model="phone" v-model="phone"
class="field-input" class="field-input ps-gold-input"
type="tel" type="tel"
required required
autocomplete="tel-national" autocomplete="tel-national"
@@ -125,7 +126,7 @@ function goLogin() {
<div class="inline-row"> <div class="inline-row">
<input <input
v-model="smsCode" v-model="smsCode"
class="field-input" class="field-input ps-gold-input"
inputmode="numeric" inputmode="numeric"
maxlength="6" maxlength="6"
autocomplete="one-time-code" autocomplete="one-time-code"
@@ -146,7 +147,7 @@ function goLogin() {
<label>{{ t('auth.password') }}</label> <label>{{ t('auth.password') }}</label>
<input <input
v-model="password" v-model="password"
class="field-input" class="field-input ps-gold-input"
type="password" type="password"
required required
autocomplete="new-password" autocomplete="new-password"
@@ -159,7 +160,7 @@ function goLogin() {
<label>{{ t('auth.confirm_password') }}</label> <label>{{ t('auth.confirm_password') }}</label>
<input <input
v-model="confirmPassword" v-model="confirmPassword"
class="field-input" class="field-input ps-gold-input"
type="password" type="password"
required required
autocomplete="new-password" autocomplete="new-password"
@@ -175,7 +176,8 @@ function goLogin() {
<button type="button" class="btn-skip" @click="goLogin"> <button type="button" class="btn-skip" @click="goLogin">
{{ t('auth.back_to_login') }} {{ t('auth.back_to_login') }}
</button> </button>
</form> </form>
</div>
</div> </div>
</template> </template>
@@ -184,7 +186,7 @@ function goLogin() {
position: absolute; position: absolute;
top: max(12px, env(safe-area-inset-top)); top: max(12px, env(safe-area-inset-top));
right: 16px; right: 16px;
z-index: 2; z-index: 10;
} }
.login-page { .login-page {
@@ -197,30 +199,32 @@ function goLogin() {
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom))); 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-size: cover;
background-position: center top; background-position: center top;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.login-form { .login-stack {
position: relative;
z-index: 1;
width: 100%; width: 100%;
max-width: 320px; max-width: 320px;
}
.login-form {
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
padding: 20px; padding: 14px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
} }
.form-title { .form-title {
margin: 0 0 2px; margin: 0 0 2px;
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 800;
color: #1A1A2E; color: var(--text);
text-align: center; text-align: center;
} }
@@ -232,7 +236,7 @@ function goLogin() {
label { label {
font-size: 10px; font-size: 10px;
color: #6B7280; color: var(--text-muted);
font-weight: 600; font-weight: 600;
letter-spacing: 0.03em; letter-spacing: 0.03em;
} }
@@ -241,22 +245,21 @@ label {
width: 100%; width: 100%;
height: 36px; height: 36px;
padding: 0 10px; padding: 0 10px;
border: 1px solid #E5E7EB; border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
background: #FFFFFF; background: var(--bg-input);
color: #1A1A2E; color: var(--text);
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
} }
.field-input::placeholder { .field-input::placeholder {
color: rgba(107, 114, 128, 0.6); color: rgba(0, 0, 0, 0.35);
} }
.field-input:focus { .field-input:focus {
outline: none; outline: none;
border-color: #0066CC; border-color: var(--border-gold-soft);
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
} }
.inline-row { .inline-row {
@@ -274,16 +277,22 @@ label {
flex-shrink: 0; flex-shrink: 0;
height: 36px; height: 36px;
padding: 0 10px; padding: 0 10px;
border: 1px solid #E5E7EB; border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
background: #F5F7FA; background: var(--bg-card);
color: #003D6B; color: var(--text);
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
.btn-secondary:not(:disabled):active {
border-color: var(--primary);
background: var(--surface-accent);
color: var(--text);
}
.btn-secondary:disabled { .btn-secondary:disabled {
opacity: 0.45; opacity: 0.45;
cursor: not-allowed; cursor: not-allowed;
@@ -307,19 +316,19 @@ label {
padding: 8px 14px; padding: 8px 14px;
border: none; border: none;
background: transparent; background: transparent;
color: #003D6B; color: var(--primary);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
} }
.btn-skip:active { .btn-skip:active {
color: #005B9F; color: var(--primary-dark);
} }
.error { .error {
margin: 0; margin: 0;
color: #DC2626; color: var(--danger);
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;

164
apps/player/src/views/LoginView.vue
View File

@@ -89,12 +89,32 @@ function goRegister() {
<div class="login-lang"> <div class="login-lang">
<LocaleSwitcher compact /> <LocaleSwitcher compact />
</div> </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"> <div v-if="loginMode === 'account'" class="field">
<label>{{ t('auth.username') }}</label> <label>{{ t('auth.username') }}</label>
<input <input
v-model="account" v-model="account"
class="field-input" class="field-input ps-gold-input"
required required
autocomplete="username" autocomplete="username"
maxlength="32" maxlength="32"
@@ -108,7 +128,7 @@ function goRegister() {
<PhoneCountrySelect v-model="countryIso" /> <PhoneCountrySelect v-model="countryIso" />
<input <input
v-model="phone" v-model="phone"
class="field-input" class="field-input ps-gold-input"
type="tel" type="tel"
required required
autocomplete="tel-national" autocomplete="tel-national"
@@ -119,30 +139,29 @@ function goRegister() {
<div class="field"> <div class="field">
<label>{{ t('auth.password') }}</label> <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> </div>
<button type="button" class="btn-forgot" @click="goForgotPassword"> <button type="button" class="btn-forgot" @click="goForgotPassword">
{{ t('auth.forgot_password') }} {{ t('auth.forgot_password') }}
</button> </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" /> <RobotVerify ref="captchaRef" />
<p v-if="resetSuccess" class="success">{{ t('auth.reset_success') }}</p> <p v-if="resetSuccess" class="success">{{ t('auth.reset_success') }}</p>
<p v-if="error" class="error">{{ error }}</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-gold-outline" :disabled="loading">
{{ t('auth.login') }} {{ t('auth.login') }}
</button> </button>
<button type="button" class="btn-skip" @click="goRegister"> </form>
{{ t('auth.go_register') }} <div class="login-actions">
</button> <button type="button" class="btn-skip" @click="goRegister">
</form> {{ t('auth.go_register') }}
<button type="button" class="btn-skip-light" @click="continueBrowsing"> </button>
{{ t('auth.continue_browsing') }} <button type="button" class="btn-skip-light" @click="continueBrowsing">
</button> {{ t('auth.continue_browsing') }}
</button>
</div>
</div>
</div> </div>
</template> </template>
@@ -151,7 +170,7 @@ function goRegister() {
position: absolute; position: absolute;
top: max(12px, env(safe-area-inset-top)); top: max(12px, env(safe-area-inset-top));
right: 16px; right: 16px;
z-index: 2; z-index: 10;
} }
.login-page { .login-page {
@@ -163,24 +182,67 @@ function goRegister() {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding: 34vh 20px calc(15vh + max(28px, env(safe-area-inset-bottom))); padding: 34vh 20px 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-size: cover;
background-position: center top; background-position: center top;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.login-form { .login-stack {
position: relative;
z-index: 1;
width: 100%; width: 100%;
max-width: 320px; max-width: 320px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
padding: 20px; }
background: #FFFFFF;
border: 1px solid #E5E7EB; .login-form {
border-radius: 8px; width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); 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 { .field {
@@ -193,18 +255,17 @@ function goRegister() {
width: 100%; width: 100%;
height: 36px; height: 36px;
padding: 0 10px; padding: 0 10px;
border: 1px solid #E5E7EB; border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
background: #FFFFFF; background: var(--bg-input);
color: #1A1A2E; color: var(--text);
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
} }
.field-input:focus { .field-input:focus {
outline: none; outline: none;
border-color: #0066CC; border-color: var(--border-gold-soft);
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
} }
.inline-row { .inline-row {
@@ -220,41 +281,25 @@ function goRegister() {
label { label {
font-size: 11px; font-size: 11px;
color: #6B7280; color: var(--text-muted);
font-weight: 600; font-weight: 600;
letter-spacing: 0.04em; 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 { .btn-forgot {
align-self: flex-end; align-self: flex-end;
margin: -4px 0 0; margin: -4px 0 0;
padding: 0; padding: 0;
border: none; border: none;
background: transparent; background: transparent;
color: #6B7280; color: var(--text-muted);
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
} }
.btn-forgot:active { .btn-forgot:active {
color: #003D6B; color: var(--text);
}
.btn-mode-switch:active {
color: #003D6B;
} }
.btn-login { .btn-login {
@@ -272,48 +317,45 @@ label {
} }
.btn-skip { .btn-skip {
margin-top: 2px; padding: 6px 14px;
padding: 8px 14px;
border: none; border: none;
background: transparent; background: transparent;
color: #003D6B; color: var(--primary);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
text-align: center;
} }
.btn-skip:active { .btn-skip:active {
color: #005B9F; color: var(--primary-dark);
} }
.btn-skip-light { .btn-skip-light {
position: absolute; padding: 6px 16px;
bottom: calc(20px + env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
padding: 8px 16px;
border: none; border: none;
background: transparent; background: transparent;
color: #6B7280; color: var(--text-muted);
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
text-align: center;
} }
.btn-skip-light:active { .btn-skip-light:active {
color: #003D6B; color: var(--text);
} }
.error { .error {
color: #DC2626; color: var(--danger);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
} }
.success { .success {
margin: 0; margin: 0;
color: #059669; color: var(--success);
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 1.4;

120
apps/player/src/views/RegisterView.vue
View File

@@ -105,7 +105,8 @@ const fieldError = () => {
<div class="login-lang"> <div class="login-lang">
<LocaleSwitcher compact /> <LocaleSwitcher compact />
</div> </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"> <div v-if="loading" class="form-busy-overlay" aria-hidden="true">
<GoldSpinner :size="40" :active="true" /> <GoldSpinner :size="40" :active="true" />
<p class="form-busy-text">{{ t('auth.registering') }}</p> <p class="form-busy-text">{{ t('auth.registering') }}</p>
@@ -116,7 +117,7 @@ const fieldError = () => {
<label>{{ t('auth.username') }}</label> <label>{{ t('auth.username') }}</label>
<input <input
v-model="account" v-model="account"
class="field-input" class="field-input ps-gold-input"
required required
autocomplete="username" autocomplete="username"
maxlength="32" maxlength="32"
@@ -132,7 +133,7 @@ const fieldError = () => {
<PhoneCountrySelect v-model="countryIso" /> <PhoneCountrySelect v-model="countryIso" />
<input <input
v-model="phone" v-model="phone"
class="field-input" class="field-input ps-gold-input"
type="tel" type="tel"
required required
autocomplete="tel-national" autocomplete="tel-national"
@@ -147,7 +148,7 @@ const fieldError = () => {
<div class="inline-row"> <div class="inline-row">
<input <input
v-model="smsCode" v-model="smsCode"
class="field-input" class="field-input ps-gold-input"
inputmode="numeric" inputmode="numeric"
maxlength="6" maxlength="6"
autocomplete="one-time-code" autocomplete="one-time-code"
@@ -171,17 +172,17 @@ const fieldError = () => {
<div class="field"> <div class="field">
<label>{{ t('auth.password') }}</label> <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>
<div class="field"> <div class="field">
<label>{{ t('auth.confirm_password') }}</label> <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>
<div class="field field-optional"> <div class="field field-optional">
<label>{{ t('auth.invite_code') }} <span class="optional-tag">{{ t('auth.optional') }}</span></label> <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> </div>
<p v-if="fieldError()" class="error">{{ fieldError() }}</p> <p v-if="fieldError()" class="error">{{ fieldError() }}</p>
@@ -199,13 +200,16 @@ const fieldError = () => {
</span> </span>
<span v-else>{{ t('auth.register_btn') }}</span> <span v-else>{{ t('auth.register_btn') }}</span>
</button> </button>
<button type="button" class="btn-skip" :disabled="loading" @click="goLogin"> </form>
{{ t('auth.have_account') }} <div class="login-actions">
</button> <button type="button" class="btn-skip" :disabled="loading" @click="goLogin">
</form> {{ t('auth.have_account') }}
<button type="button" class="btn-skip-light" @click="continueBrowsing"> </button>
{{ t('auth.continue_browsing') }} <button type="button" class="btn-skip-light" :disabled="loading" @click="continueBrowsing">
</button> {{ t('auth.continue_browsing') }}
</button>
</div>
</div>
</div> </div>
</template> </template>
@@ -214,7 +218,7 @@ const fieldError = () => {
position: absolute; position: absolute;
top: max(12px, env(safe-area-inset-top)); top: max(12px, env(safe-area-inset-top));
right: 16px; right: 16px;
z-index: 2; z-index: 10;
} }
.login-page { .login-page {
@@ -226,25 +230,38 @@ const fieldError = () => {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom))); padding: 30vh 16px 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-size: cover;
background-position: center top; background-position: center top;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.login-form { .login-stack {
position: relative; position: relative;
z-index: 1;
width: 100%; width: 100%;
max-width: 320px; max-width: 320px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
padding: 20px; }
background: #FFFFFF;
border: 1px solid #E5E7EB; .login-form {
border-radius: 8px; position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); 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 { .login-form.is-busy {
@@ -261,8 +278,8 @@ const fieldError = () => {
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
border-radius: inherit; border-radius: inherit;
background: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(2px); backdrop-filter: blur(4px);
pointer-events: all; pointer-events: all;
} }
@@ -270,7 +287,7 @@ const fieldError = () => {
margin: 0; margin: 0;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #003D6B; color: var(--primary);
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
@@ -285,7 +302,7 @@ const fieldError = () => {
margin: 0 0 2px; margin: 0 0 2px;
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 800;
color: #1A1A2E; color: var(--text);
text-align: center; text-align: center;
} }
@@ -301,7 +318,7 @@ const fieldError = () => {
label { label {
font-size: 10px; font-size: 10px;
color: #6B7280; color: var(--text-muted);
font-weight: 600; font-weight: 600;
letter-spacing: 0.03em; letter-spacing: 0.03em;
} }
@@ -309,29 +326,28 @@ label {
.optional-tag { .optional-tag {
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
color: #6B7280; color: var(--text-muted);
} }
.field-input { .field-input {
width: 100%; width: 100%;
height: 36px; height: 36px;
padding: 0 10px; padding: 0 10px;
border: 1px solid #E5E7EB; border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
background: #FFFFFF; background: var(--bg-input);
color: #1A1A2E; color: var(--text);
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
} }
.field-input::placeholder { .field-input::placeholder {
color: rgba(107, 114, 128, 0.6); color: rgba(0, 0, 0, 0.35);
} }
.field-input:focus { .field-input:focus {
outline: none; outline: none;
border-color: #0066CC; border-color: var(--border-gold-soft);
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
} }
.inline-row { .inline-row {
@@ -349,16 +365,23 @@ label {
flex-shrink: 0; flex-shrink: 0;
height: 36px; height: 36px;
padding: 0 10px; padding: 0 10px;
border: 1px solid #E5E7EB; border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
background: #F5F7FA; background: var(--bg-card);
color: #003D6B; color: var(--text);
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
cursor: pointer; 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 { .btn-secondary:disabled {
opacity: 0.45; opacity: 0.45;
cursor: not-allowed; cursor: not-allowed;
@@ -382,42 +405,39 @@ label {
} }
.btn-skip { .btn-skip {
margin-top: 2px; padding: 6px 14px;
padding: 8px 14px;
border: none; border: none;
background: transparent; background: transparent;
color: #003D6B; color: var(--primary);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
text-align: center;
} }
.btn-skip:active { .btn-skip:active {
color: #005B9F; color: var(--primary-dark);
} }
.btn-skip-light { .btn-skip-light {
position: absolute; padding: 6px 16px;
bottom: calc(20px + env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
padding: 8px 16px;
border: none; border: none;
background: transparent; background: transparent;
color: #6B7280; color: var(--text-muted);
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
text-align: center;
} }
.btn-skip-light:active { .btn-skip-light:active {
color: #003D6B; color: var(--text);
} }
.error { .error {
margin: 0; margin: 0;
color: #DC2626; color: var(--danger);
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;