@seaverse/auth-sdk 0.3.7 → 0.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +224 -11
- package/dist/auth-modal.css +1 -1
- package/dist/index.cjs +148 -33
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +73 -2
- package/dist/index.js +148 -33
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,9 +11,6 @@ SeaVerse Backend API 客户端 SDK - 提供完整的认证、容器管理、技
|
|
|
11
11
|
- 🌐 **OAuth登录** - Google、Discord、GitHub 第三方登录
|
|
12
12
|
- 🎨 **登录UI组件** - 开箱即用的精美登录弹窗
|
|
13
13
|
- ✨ **Toast 通知** - 现代化玻璃态提示,CSS 自动注入
|
|
14
|
-
- 📦 **容器管理** - Container 注册、心跳、状态查询
|
|
15
|
-
- 🛍️ **技能市场** - Marketplace Skills 浏览、安装、卸载
|
|
16
|
-
- 🗣️ **语音服务** - Speech Token 获取
|
|
17
14
|
- 🌍 **多环境支持** - Production、Staging、Development、Local
|
|
18
15
|
- ⚡ **TypeScript** - 完整的类型定义
|
|
19
16
|
- 🔧 **认证集成** - 内置Auth、Hooks系统支持
|
|
@@ -97,7 +94,222 @@ const health = await client.getHealth();
|
|
|
97
94
|
console.log('Health:', health);
|
|
98
95
|
```
|
|
99
96
|
|
|
100
|
-
### 2.
|
|
97
|
+
### 2. Iframe 场景下的 Token 获取
|
|
98
|
+
|
|
99
|
+
当你的应用被嵌入到 iframe 中时,可以使用 `getIframeToken()` 方法从父页面获取认证 token。这对于第三方登录重定向场景特别有用。
|
|
100
|
+
|
|
101
|
+
#### 子页面 (iframe 内) 使用方式
|
|
102
|
+
|
|
103
|
+
```typescript
|
|
104
|
+
import { SeaVerseBackendAPIClient } from '@seaverse/auth-sdk';
|
|
105
|
+
|
|
106
|
+
const client = new SeaVerseBackendAPIClient({
|
|
107
|
+
appId: 'your app id',
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
// 在 iframe 中请求父页面的 token
|
|
111
|
+
try {
|
|
112
|
+
const token = await client.getIframeToken({
|
|
113
|
+
timeout: 10000 // 可选,默认 30 秒
|
|
114
|
+
});
|
|
115
|
+
|
|
116
|
+
// 设置 token 到 client
|
|
117
|
+
client.setToken(token);
|
|
118
|
+
localStorage.setItem('token', token);
|
|
119
|
+
|
|
120
|
+
console.log('成功从父页面获取 token');
|
|
121
|
+
|
|
122
|
+
// 现在可以使用需要认证的 API
|
|
123
|
+
const user = await client.getCurrentUser();
|
|
124
|
+
console.log('当前用户:', user);
|
|
125
|
+
} catch (error) {
|
|
126
|
+
console.error('获取 token 失败:', error);
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
#### 父页面监听并响应 token 请求
|
|
131
|
+
|
|
132
|
+
```typescript
|
|
133
|
+
// 父页面需要监听来自 iframe 的 token 请求
|
|
134
|
+
window.addEventListener('message', (event) => {
|
|
135
|
+
// 检查消息类型
|
|
136
|
+
if (event.data.type === 'seaverse:get_token') {
|
|
137
|
+
const requestId = event.data.requestId;
|
|
138
|
+
|
|
139
|
+
// 获取你的 token (从 localStorage、API 等)
|
|
140
|
+
const token = localStorage.getItem('token');
|
|
141
|
+
|
|
142
|
+
if (token) {
|
|
143
|
+
// 发送 token 给 iframe
|
|
144
|
+
event.source.postMessage({
|
|
145
|
+
type: 'seaverse:token',
|
|
146
|
+
requestId: requestId,
|
|
147
|
+
payload: {
|
|
148
|
+
accessToken: token,
|
|
149
|
+
expiresIn: 3600,
|
|
150
|
+
},
|
|
151
|
+
}, '*');
|
|
152
|
+
} else {
|
|
153
|
+
// 发送错误消息
|
|
154
|
+
event.source.postMessage({
|
|
155
|
+
type: 'seaverse:token_error',
|
|
156
|
+
requestId: requestId,
|
|
157
|
+
error: 'No token available',
|
|
158
|
+
}, '*');
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
});
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
#### 完整的 iframe 登录流程示例
|
|
165
|
+
|
|
166
|
+
```typescript
|
|
167
|
+
// 子页面 (iframe)
|
|
168
|
+
import { SeaVerseBackendAPIClient } from '@seaverse/auth-sdk';
|
|
169
|
+
|
|
170
|
+
const client = new SeaVerseBackendAPIClient({
|
|
171
|
+
appId: 'your app id',
|
|
172
|
+
});
|
|
173
|
+
|
|
174
|
+
async function initIframeApp() {
|
|
175
|
+
try {
|
|
176
|
+
// 1. 尝试从父页面获取 token
|
|
177
|
+
const token = await client.getIframeToken();
|
|
178
|
+
client.setToken(token);
|
|
179
|
+
localStorage.setItem('token', token);
|
|
180
|
+
|
|
181
|
+
// 2. 验证 token 并获取用户信息
|
|
182
|
+
const user = await client.getCurrentUser();
|
|
183
|
+
console.log('已登录:', user);
|
|
184
|
+
|
|
185
|
+
// 3. 继续应用逻辑
|
|
186
|
+
startApp(user);
|
|
187
|
+
} catch (error) {
|
|
188
|
+
// 4. 如果获取失败,通知父页面需要登录
|
|
189
|
+
window.parent.postMessage({
|
|
190
|
+
type: 'seaverse:need_login',
|
|
191
|
+
}, '*');
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
initIframeApp();
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
```typescript
|
|
199
|
+
// 父页面
|
|
200
|
+
window.addEventListener('message', (event) => {
|
|
201
|
+
// 处理 token 请求
|
|
202
|
+
if (event.data.type === 'seaverse:get_token') {
|
|
203
|
+
const requestId = event.data.requestId;
|
|
204
|
+
const token = localStorage.getItem('token');
|
|
205
|
+
|
|
206
|
+
if (token) {
|
|
207
|
+
event.source.postMessage({
|
|
208
|
+
type: 'seaverse:token',
|
|
209
|
+
requestId: requestId,
|
|
210
|
+
payload: {
|
|
211
|
+
accessToken: token,
|
|
212
|
+
expiresIn: 3600,
|
|
213
|
+
},
|
|
214
|
+
}, '*');
|
|
215
|
+
} else {
|
|
216
|
+
// 如果没有 token,唤起登录
|
|
217
|
+
showLoginModal();
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
// 处理需要登录的消息
|
|
222
|
+
if (event.data.type === 'seaverse:need_login') {
|
|
223
|
+
showLoginModal();
|
|
224
|
+
}
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
// 登录成功后,通知 iframe
|
|
228
|
+
function onLoginSuccess(newToken) {
|
|
229
|
+
const iframe = document.querySelector('iframe');
|
|
230
|
+
iframe.contentWindow.postMessage({
|
|
231
|
+
type: 'seaverse:token',
|
|
232
|
+
requestId: 'auto', // 自动登录时可以使用固定 ID
|
|
233
|
+
payload: {
|
|
234
|
+
accessToken: newToken,
|
|
235
|
+
expiresIn: 3600,
|
|
236
|
+
},
|
|
237
|
+
}, '*');
|
|
238
|
+
}
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
#### TypeScript 类型定义
|
|
242
|
+
|
|
243
|
+
SDK 提供了完整的 TypeScript 类型支持:
|
|
244
|
+
|
|
245
|
+
```typescript
|
|
246
|
+
import type {
|
|
247
|
+
IframeTokenRequestMessage,
|
|
248
|
+
IframeTokenResponseMessage,
|
|
249
|
+
IframeTokenErrorMessage,
|
|
250
|
+
} from '@seaverse/auth-sdk';
|
|
251
|
+
|
|
252
|
+
// Token 请求消息
|
|
253
|
+
const request: IframeTokenRequestMessage = {
|
|
254
|
+
type: 'seaverse:get_token',
|
|
255
|
+
requestId: 'unique-id',
|
|
256
|
+
};
|
|
257
|
+
|
|
258
|
+
// Token 响应消息
|
|
259
|
+
const response: IframeTokenResponseMessage = {
|
|
260
|
+
type: 'seaverse:token',
|
|
261
|
+
requestId: 'unique-id',
|
|
262
|
+
payload: {
|
|
263
|
+
accessToken: 'jwt-token',
|
|
264
|
+
expiresIn: 3600,
|
|
265
|
+
},
|
|
266
|
+
};
|
|
267
|
+
|
|
268
|
+
// 错误消息
|
|
269
|
+
const error: IframeTokenErrorMessage = {
|
|
270
|
+
type: 'seaverse:token_error',
|
|
271
|
+
requestId: 'unique-id',
|
|
272
|
+
error: 'Token not available',
|
|
273
|
+
};
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
#### 安全注意事项
|
|
277
|
+
|
|
278
|
+
1. **使用特定 origin**: 在生产环境中,建议使用特定的 origin 而不是 `'*'`:
|
|
279
|
+
```typescript
|
|
280
|
+
// 父页面
|
|
281
|
+
const ALLOWED_ORIGIN = 'https://your-iframe-domain.com';
|
|
282
|
+
event.source.postMessage(message, ALLOWED_ORIGIN);
|
|
283
|
+
|
|
284
|
+
// 子页面发送时也可以指定
|
|
285
|
+
window.parent.postMessage(message, 'https://parent-domain.com');
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
2. **验证消息来源**: 在处理 postMessage 时验证 origin:
|
|
289
|
+
```typescript
|
|
290
|
+
window.addEventListener('message', (event) => {
|
|
291
|
+
// 验证来源
|
|
292
|
+
if (event.origin !== 'https://trusted-domain.com') {
|
|
293
|
+
return;
|
|
294
|
+
}
|
|
295
|
+
// 处理消息...
|
|
296
|
+
});
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
3. **Token 过期处理**: 记得处理 token 过期的情况:
|
|
300
|
+
```typescript
|
|
301
|
+
try {
|
|
302
|
+
const user = await client.getCurrentUser();
|
|
303
|
+
} catch (error) {
|
|
304
|
+
if (error.response?.status === 401) {
|
|
305
|
+
// Token 过期,重新获取
|
|
306
|
+
const newToken = await client.getIframeToken();
|
|
307
|
+
client.setToken(newToken);
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
### 3. 用户认证
|
|
101
313
|
|
|
102
314
|
```typescript
|
|
103
315
|
// 注册新用户
|
|
@@ -153,7 +365,7 @@ await client.resetPassword({
|
|
|
153
365
|
});
|
|
154
366
|
```
|
|
155
367
|
|
|
156
|
-
###
|
|
368
|
+
### 4. OAuth 第三方登录 (Backend Proxy Mode)
|
|
157
369
|
|
|
158
370
|
SDK 使用 Backend Proxy Mode,Client Secret 永不暴露给前端,安全性更高。
|
|
159
371
|
|
|
@@ -223,7 +435,7 @@ await client.unlinkDiscord();
|
|
|
223
435
|
await client.unlinkGithub();
|
|
224
436
|
```
|
|
225
437
|
|
|
226
|
-
###
|
|
438
|
+
### 5. 使用登录UI组件
|
|
227
439
|
|
|
228
440
|
SDK 提供精美的登录弹窗组件,支持深色和浅色两种主题:
|
|
229
441
|
|
|
@@ -439,7 +651,7 @@ if (token) {
|
|
|
439
651
|
}
|
|
440
652
|
```
|
|
441
653
|
|
|
442
|
-
###
|
|
654
|
+
### 6. 容器管理
|
|
443
655
|
|
|
444
656
|
```typescript
|
|
445
657
|
// 列出所有容器
|
|
@@ -474,7 +686,7 @@ await client.unregisterContainer({
|
|
|
474
686
|
const stats = await client.getContainerStats();
|
|
475
687
|
```
|
|
476
688
|
|
|
477
|
-
###
|
|
689
|
+
### 7. 技能市场
|
|
478
690
|
|
|
479
691
|
```typescript
|
|
480
692
|
// 列出市场技能
|
|
@@ -503,7 +715,7 @@ await client.uninstallSkill({
|
|
|
503
715
|
});
|
|
504
716
|
```
|
|
505
717
|
|
|
506
|
-
###
|
|
718
|
+
### 8. 邀请码管理
|
|
507
719
|
|
|
508
720
|
```typescript
|
|
509
721
|
// 申请邀请码(当用户没有邀请码时)
|
|
@@ -553,7 +765,7 @@ const usages = await client.getInviteUsages('inv_abc123', {
|
|
|
553
765
|
console.log('使用记录:', usages.data.usages);
|
|
554
766
|
```
|
|
555
767
|
|
|
556
|
-
###
|
|
768
|
+
### 9. 邮箱验证与邀请码绑定
|
|
557
769
|
|
|
558
770
|
#### 邮箱验证(自动登录)
|
|
559
771
|
|
|
@@ -737,7 +949,7 @@ const inviteCodeInfo = AuthModal.handleInviteCodeRequired(
|
|
|
737
949
|
);
|
|
738
950
|
```
|
|
739
951
|
|
|
740
|
-
###
|
|
952
|
+
### 10. 其他功能
|
|
741
953
|
|
|
742
954
|
```typescript
|
|
743
955
|
// 获取API Service Token
|
|
@@ -940,6 +1152,7 @@ SDK支持以下环境:
|
|
|
940
1152
|
| `forgotPassword()` | `{ email, frontend_url? }` | `SuccessResponse` | 忘记密码,frontend_url 默认为 window.location.href |
|
|
941
1153
|
| `resetPassword()` | `{ token, new_password }` | `SuccessResponse` | 重置密码 |
|
|
942
1154
|
| `setToken()` | `token: string` | `void` | 设置认证 token(OAuth 登录后使用) |
|
|
1155
|
+
| `getIframeToken()` | `{ timeout? }` | `Promise<string>` | 从父页面获取 token(仅 iframe 场景),timeout 默认 30000ms |
|
|
943
1156
|
| `getApiServiceToken()` | - | `ApiServiceTokenResponse` | 获取API Token |
|
|
944
1157
|
|
|
945
1158
|
#### 注册流程说明
|
package/dist/auth-modal.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--font-display:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--color-neon-green:#10b981;--color-text-primary:#fff;--color-text-secondary:#a1a1aa;--color-text-tertiary:#71717a;--gradient-neon:linear-gradient(135deg,#10b981,#06b6d4)}.auth-modal{align-items:center;animation:modalFadeIn .3s ease-out;display:flex;inset:0;justify-content:center;overflow:hidden;padding:20px;position:fixed;z-index:9999}.auth-modal.hidden{display:none}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.auth-modal-backdrop{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(0,0,0,.85);inset:0;position:absolute}.auth-modal-content{animation:modalSlideUp .4s cubic-bezier(.4,0,.2,1);background:#0d0d0d;border:1px solid hsla(0,0%,100%,.08);border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,.8);display:grid;grid-template-columns:1fr 1fr;max-height:90vh;max-width:900px;overflow:hidden;position:relative;transition:max-width .3s ease;width:100%;z-index:10}.auth-modal-content:has(#loginForm:not(.hidden)){grid-template-columns:1fr auto;max-width:none;width:auto}.auth-modal-content:has(#loginForm:not(.hidden)) .auth-modal-right{min-width:0;width:auto}.auth-modal-content:has(#authMessage:not(.hidden)){grid-template-columns:1fr;max-width:480px}.auth-modal-content:has(#authMessage:not(.hidden)) .auth-modal-left{display:none}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.auth-modal-left{background:#000;border-right:1px solid hsla(0,0%,100%,.05);display:flex;flex-direction:column;overflow:hidden;padding:32px;position:relative}.auth-modal-left:before{animation:meshRotate 20s linear infinite;background:radial-gradient(at 0 0,rgba(99,102,241,.3) 0,transparent 50%),radial-gradient(at 50% 0,rgba(139,92,246,.3) 0,transparent 50%),radial-gradient(at 100% 0,rgba(236,72,153,.3) 0,transparent 50%),radial-gradient(at 0 50%,rgba(16,185,129,.3) 0,transparent 50%),radial-gradient(at 100% 50%,rgba(244,63,94,.3) 0,transparent 50%),radial-gradient(at 0 100%,rgba(236,72,153,.3) 0,transparent 50%),radial-gradient(at 100% 100%,rgba(139,92,246,.3) 0,transparent 50%);content:"";filter:blur(80px);height:200%;inset:-50%;opacity:.6;position:absolute;width:200%}@keyframes meshRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.auth-modal-left:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.65' numOctaves='3' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.05'/%3E%3C/svg%3E");content:"";inset:0;mix-blend-mode:overlay;opacity:.4;pointer-events:none;position:absolute}.auth-modal-logo{align-items:center;display:flex;gap:10px;position:relative;z-index:10}.auth-modal-logo .logo-icon{filter:drop-shadow(0 0 10px rgba(16,185,129,.3));height:28px;width:28px}.auth-modal-logo .logo-text{color:#fff;font-family:var(--font-display);font-size:18px;font-weight:700;text-shadow:0 0 20px rgba(0,0,0,.5)}.auth-modal-decoration{inset:0;overflow:hidden;pointer-events:none;position:absolute}.auth-modal-decoration .glow-orb-1{animation:breathe 8s ease-in-out infinite;background:radial-gradient(circle,hsla(0,0%,100%,.05) 0,transparent 70%);border-radius:50%;filter:blur(60px);height:400px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:400px}@keyframes breathe{0%,to{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.2)}}.auth-modal-decoration .glow-orb-2{animation:breathe 10s ease-in-out infinite;animation-delay:2s;background:radial-gradient(circle,rgba(139,92,246,.08) 0,transparent 70%);border-radius:50%;filter:blur(50px);height:300px;pointer-events:none;position:absolute;right:-10%;top:20%;width:300px}.auth-modal-branding{margin-bottom:48px;margin-top:auto;position:relative;z-index:10}.auth-modal-branding .branding-title{color:#fff;font-family:var(--font-display);font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:12px;text-shadow:0 2px 10px rgba(0,0,0,.3)}.auth-modal-branding .branding-subtitle{color:hsla(0,0%,100%,.8);font-size:14px;line-height:1.6;max-width:260px}.auth-modal-right{background:#121212;display:flex;flex-direction:column;max-height:90vh;overflow-y:auto;padding:56px 48px 42px;position:relative}.auth-modal-right::-webkit-scrollbar{width:6px}.auth-modal-right::-webkit-scrollbar-track{background:transparent}.auth-modal-right::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.1);border-radius:3px}.auth-modal-close{align-items:center;background:transparent;border:none;border-radius:8px;color:hsla(0,0%,100%,.5);cursor:pointer;display:flex;height:36px;justify-content:center;position:absolute;right:16px;top:16px;transition:all .2s ease;width:36px;z-index:20}.auth-modal-close:hover{background:hsla(0,0%,100%,.1);color:#fff}.auth-form-view{animation:formFadeIn .3s ease-out}#loginForm .form-input{width:360px}@keyframes formFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.auth-form-view.hidden{display:none}.auth-form-header{margin-bottom:28px;text-align:center}.auth-form-title{color:#fff;font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}.auth-form-subtitle{color:var(--color-text-secondary);font-size:14px}.auth-form{gap:16px}.auth-form,.form-group{display:flex;flex-direction:column}.form-group{gap:6px}.form-label{font-size:12px;font-weight:500;letter-spacing:.02em;opacity:.9;text-transform:uppercase}.form-input,.form-label{color:var(--color-text-primary)}.form-input{background:rgba(30,30,30,.8);border:1px solid hsla(0,0%,100%,.1);border-radius:8px;font-family:var(--font-sans);font-size:14px;height:40px;outline:none;padding:0 14px;transition:all .2s ease;width:100%}.form-input::placeholder{color:hsla(0,0%,100%,.35)}.form-input:hover{border-color:hsla(0,0%,100%,.15)}.form-input:focus{background:rgba(30,30,30,.9);border-color:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,.15)}.form-input:invalid:not(:placeholder-shown){border-color:#ff006e}.form-input[type=textarea],textarea.form-input{font-family:inherit;line-height:1.5;min-height:100px;padding:12px 14px;resize:vertical}.char-count{color:hsla(0,0%,100%,.5);font-size:12px;margin-top:4px;text-align:right}.auth-modal-light .char-count{color:rgba(0,0,0,.4)}.icon-mail{animation:floatIcon 4s ease-in-out infinite;color:#10b981;filter:drop-shadow(0 0 10px rgba(16,185,129,.4));position:relative;z-index:2}.forgot-password-icon:has(.icon-mail) .icon-glow{background:radial-gradient(circle,rgba(16,185,129,.25) 0,rgba(6,182,212,.15) 40%,transparent 70%)}#applyInviteReason{background:hsla(0,0%,8%,.6);min-height:120px;padding:14px 16px;position:relative;transition:all .3s ease}#applyInviteReason:focus{background:hsla(0,0%,8%,.8);border-color:rgba(16,185,129,.5);box-shadow:0 0 0 3px rgba(16,185,129,.15),0 0 20px rgba(16,185,129,.15),inset 0 1px 0 hsla(0,0%,100%,.05)}.form-group:has(#applyInviteReason) .char-count{color:hsla(240,5%,65%,.7);display:block;float:right;font-size:12px;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.02em;margin-top:8px;padding:4px 0;position:relative;text-align:right;transition:all .3s ease}.form-group:has(#applyInviteReason) .char-count:before{background:linear-gradient(90deg,#10b981,#06b6d4);bottom:0;box-shadow:0 0 8px rgba(16,185,129,.5);content:"";height:2px;left:0;position:absolute;transition:width .3s ease,box-shadow .3s ease,background .3s ease;width:var(--progress-width,0)}.form-group:has(#applyInviteReason) .char-count[data-progress=low]{color:rgba(251,191,36,.9)}.form-group:has(#applyInviteReason) .char-count[data-progress=low]:before{background:linear-gradient(90deg,rgba(251,191,36,.8),rgba(251,191,36,.6));box-shadow:0 0 8px rgba(251,191,36,.5)}.form-group:has(#applyInviteReason) .char-count[data-progress=medium]{color:rgba(16,185,129,.9)}.form-group:has(#applyInviteReason) .char-count[data-progress=medium]:before{background:linear-gradient(90deg,#10b981,#06b6d4);box-shadow:0 0 10px rgba(16,185,129,.6)}.form-group:has(#applyInviteReason) .char-count[data-progress=high]{color:rgba(239,68,68,.9)}.form-group:has(#applyInviteReason) .char-count[data-progress=high]:before{background:linear-gradient(90deg,rgba(239,68,68,.8),rgba(239,68,68,.6));box-shadow:0 0 10px rgba(239,68,68,.6)}.auth-modal-light .icon-mail{color:#059669;filter:drop-shadow(0 0 8px rgba(5,150,105,.3))}.auth-modal-light .forgot-password-icon:has(.icon-mail) .icon-glow{background:radial-gradient(circle,rgba(16,185,129,.15) 0,rgba(6,182,212,.1) 40%,transparent 70%)}.auth-modal-light #applyInviteReason{background:hsla(0,0%,100%,.8);border-color:rgba(16,185,129,.2);color:#0a0a0a}.auth-modal-light #applyInviteReason:focus{background:hsla(0,0%,100%,.95);border-color:rgba(16,185,129,.5);box-shadow:0 0 0 3px rgba(16,185,129,.12),0 0 20px rgba(16,185,129,.1),inset 0 1px 0 hsla(0,0%,100%,.8)}.auth-modal-light .form-group:has(#applyInviteReason) .char-count{color:rgba(82,82,91,.8)}.input-with-icon{align-items:center;display:flex;position:relative}.input-with-icon .form-input{padding-right:40px}.input-icon-btn{align-items:center;background:transparent;border:none;border-radius:4px;color:hsla(0,0%,100%,.4);cursor:pointer;display:flex;justify-content:center;padding:6px;position:absolute;right:8px;transition:color .2s ease}.input-icon-btn:hover{background:hsla(0,0%,100%,.05);color:hsla(0,0%,100%,.7)}.input-icon-btn .hidden{display:none}.strength-text{align-items:center;color:var(--color-text-tertiary);display:flex;font-size:12px;font-weight:500;gap:6px;margin-top:4px}.form-group-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.form-group-header .form-label{margin-bottom:0}.forgot-password-link{color:hsla(0,0%,100%,.5);font-size:13px;font-weight:500;position:relative;text-decoration:none;transition:all .25s ease}.forgot-password-link:after{background:#10b981;bottom:-2px;content:"";height:1px;left:0;position:absolute;transition:width .3s ease;width:0}.forgot-password-link:hover{color:#10b981}.forgot-password-link:hover:after{width:100%}.link-primary{color:var(--color-neon-green);font-weight:600;position:relative;text-decoration:none;text-shadow:0 0 10px rgba(0,255,136,.3);transition:all .2s ease}.link-primary:after{background:var(--color-neon-green);bottom:-2px;content:"";height:1px;left:0;position:absolute;transform:scaleX(0);transform-origin:right;transition:transform .3s ease;width:100%}.link-primary:hover{color:#0f8;text-shadow:0 0 20px rgba(0,255,136,.5)}.link-primary:hover:after{transform:scaleX(1);transform-origin:left}.btn-auth-primary{align-items:center;background:var(--gradient-neon);border:none;border-radius:10px;box-shadow:0 4px 12px rgba(16,185,129,.25);color:#000;cursor:pointer;display:flex;font-family:var(--font-sans);font-size:14px;font-weight:600;gap:8px;height:44px;justify-content:center;margin-top:8px;overflow:hidden;padding:0 24px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.btn-auth-primary:before{background:linear-gradient(135deg,transparent,hsla(0,0%,100%,.2) 50%,transparent);content:"";inset:0;opacity:0;position:absolute;transition:opacity .3s ease}.btn-auth-primary:hover{box-shadow:0 8px 20px rgba(16,185,129,.35);transform:translateY(-2px)}.btn-auth-primary:hover:before{opacity:1}.btn-auth-primary:active{box-shadow:0 2px 8px rgba(16,185,129,.25);transform:translateY(0)}.btn-auth-primary:disabled{cursor:not-allowed;opacity:.6;transform:none}.btn-auth-primary .btn-text{position:relative;z-index:2}.btn-auth-primary .btn-loader{align-items:center;display:flex;justify-content:center;position:relative;z-index:2}.btn-auth-primary .btn-loader.hidden{display:none}.spinner{animation:spin .8s linear infinite;fill:none;height:20px;stroke-width:3;width:20px}@keyframes spin{to{transform:rotate(1turn)}}.spinner-track{stroke:rgba(0,0,0,.2)}.spinner-circle{animation:spinDash 1.2s ease-in-out infinite;stroke:#000;stroke-dasharray:50;stroke-dashoffset:50}@keyframes spinDash{0%{stroke-dashoffset:50}50%{stroke-dashoffset:12.5}to{stroke-dashoffset:50}}.forgot-password-icon{align-items:center;display:flex;height:100px;justify-content:center;margin:0 auto 24px;position:relative;width:100px}.forgot-password-icon .icon-glow{animation:pulseGlow 3s ease-in-out infinite;background:radial-gradient(circle,rgba(16,185,129,.25) 0,transparent 70%);border-radius:50%;filter:blur(15px);inset:-10px;position:absolute}@keyframes pulseGlow{0%,to{opacity:.5;transform:scale(.95)}50%{opacity:.8;transform:scale(1.05)}}.forgot-password-icon .icon-lock{animation:floatIcon 4s ease-in-out infinite;color:#10b981;filter:drop-shadow(0 0 10px rgba(16,185,129,.4));position:relative;z-index:2}@keyframes floatIcon{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.btn-forgot-password{align-items:center;display:flex;gap:8px;justify-content:center}.btn-forgot-password .btn-arrow{transition:transform .3s ease}.btn-forgot-password:hover .btn-arrow{transform:translateX(4px)}.auth-footer{margin-top:24px;text-align:center}.forgot-footer{display:flex;justify-content:center}.back-to-login{align-items:center;border-radius:6px;color:var(--color-text-secondary);display:inline-flex;font-size:14px;font-weight:500;gap:8px;padding:8px 12px;text-decoration:none;transition:all .2s ease}.back-to-login:hover{background:rgba(16,185,129,.05);color:var(--color-neon-green)}.back-to-login svg{transition:transform .3s ease}.back-to-login:hover svg{transform:translateX(-4px)}.auth-footer-divider{isolation:isolate;margin-top:32px;padding:28px 20px 0;position:relative;text-align:center}.auth-footer-divider:before{animation:energyFlow 4s ease-in-out infinite;background:linear-gradient(90deg,transparent,rgba(16,185,129,.15) 15%,rgba(16,185,129,.5) 30%,rgba(6,182,212,.6) 50%,rgba(16,185,129,.5) 70%,rgba(16,185,129,.15) 85%,transparent);filter:blur(.5px);height:2px;top:0;width:85%}.auth-footer-divider:after,.auth-footer-divider:before{content:"";left:50%;position:absolute;transform:translateX(-50%)}.auth-footer-divider:after{animation:glowPulse 3s ease-in-out infinite;background:radial-gradient(ellipse at center,rgba(16,185,129,.25) 0,rgba(6,182,212,.15) 40%,transparent 70%);filter:blur(6px);height:8px;opacity:.6;top:-4px;width:70%}@keyframes energyFlow{0%,to{opacity:.7;transform:translateX(-50%) scaleX(1)}50%{opacity:1;transform:translateX(-50%) scaleX(1.02)}}@keyframes glowPulse{0%,to{opacity:.4;transform:translateX(-50%) scaleY(.8)}50%{opacity:.8;transform:translateX(-50%) scaleY(1.2)}}.auth-footer-text{color:hsla(240,5%,65%,.85);font-size:13.5px;font-weight:400;letter-spacing:.02em;line-height:1.6;margin:0;position:relative;z-index:1}.auth-link{background:rgba(16,185,129,.05);border:1px solid rgba(16,185,129,.2);border-radius:6px;color:#10b981;display:inline-block;font-weight:600;isolation:isolate;letter-spacing:.01em;margin-left:6px;padding:6px 14px;position:relative;text-decoration:none;transition:all .4s cubic-bezier(.34,1.56,.64,1)}.auth-link:before{animation:shimmerRotate 3s linear infinite paused;background:linear-gradient(135deg,transparent,rgba(16,185,129,.4) 25%,rgba(6,182,212,.5) 50%,rgba(16,185,129,.4) 75%,transparent);border-radius:6px;content:"";inset:-1px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;padding:1px;position:absolute;transition:opacity .4s ease}@keyframes shimmerRotate{0%{background-position:0 50%}to{background-position:200% 50%}}.auth-link:after{background:linear-gradient(90deg,rgba(16,185,129,.8),rgba(6,182,212,.9),rgba(16,185,129,.8));border-radius:2px;bottom:3px;box-shadow:0 0 8px rgba(16,185,129,.6),0 0 12px rgba(6,182,212,.4);content:"";filter:blur(.5px);height:2px;left:14px;position:absolute;right:14px;transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.auth-link:hover{background:rgba(16,185,129,.12);border-color:rgba(6,182,212,.5);box-shadow:0 4px 20px rgba(16,185,129,.3),0 0 40px rgba(6,182,212,.15),inset 0 1px 0 hsla(0,0%,100%,.1);color:#0fa;text-shadow:0 0 10px rgba(16,185,129,.6),0 0 20px rgba(6,182,212,.4),0 0 30px rgba(16,185,129,.2);transform:translateY(-2px) scale(1.02)}.auth-link:hover:before{animation-play-state:running;opacity:1}.auth-link:hover:after{transform:scaleX(1)}.auth-link:active{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.6);box-shadow:0 2px 12px rgba(16,185,129,.4),inset 0 2px 8px rgba(0,0,0,.2);transform:translateY(0) scale(.98)}.auth-link:focus-visible{border-color:rgba(16,185,129,.8);box-shadow:0 0 0 3px rgba(16,185,129,.3),0 0 20px rgba(16,185,129,.4),inset 0 1px 0 hsla(0,0%,100%,.15);outline:none}@media (max-width:768px){.auth-footer-divider{margin-top:28px;padding-top:24px}.auth-footer-divider:before{width:90%}.auth-footer-text{font-size:13px}.auth-link{margin-left:4px;padding:8px 16px}.auth-link:after{left:16px;right:16px}}.auth-modal-light .auth-footer-divider:before{background:linear-gradient(90deg,transparent,rgba(16,185,129,.2) 15%,rgba(16,185,129,.35) 30%,rgba(6,182,212,.4) 50%,rgba(16,185,129,.35) 70%,rgba(16,185,129,.2) 85%,transparent)}.auth-modal-light .auth-footer-divider:after{background:radial-gradient(ellipse at center,rgba(16,185,129,.15) 0,rgba(6,182,212,.1) 40%,transparent 70%)}.auth-modal-light .auth-footer-text{color:rgba(82,82,91,.9)}.auth-modal-light .auth-link{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.25);color:#059669}.auth-modal-light .auth-link:before{background:linear-gradient(135deg,transparent,rgba(16,185,129,.5) 25%,rgba(6,182,212,.6) 50%,rgba(16,185,129,.5) 75%,transparent)}.auth-modal-light .auth-link:hover{background:rgba(16,185,129,.15);border-color:rgba(6,182,212,.4);box-shadow:0 4px 16px rgba(16,185,129,.25),0 0 30px rgba(6,182,212,.1),inset 0 1px 0 hsla(0,0%,100%,.6);color:#047857;text-shadow:0 0 8px rgba(16,185,129,.4),0 0 16px rgba(6,182,212,.3)}.auth-modal-light .auth-link:active{background:rgba(16,185,129,.22);box-shadow:0 2px 10px rgba(16,185,129,.3),inset 0 2px 6px rgba(0,0,0,.1)}.auth-message-content{align-items:center;display:flex;flex-direction:column;padding:24px;text-align:center}.message-icon{align-items:center;background:rgba(16,185,129,.1);border-radius:50%;color:#10b981;display:flex;height:80px;justify-content:center;margin-bottom:24px;width:80px}.message-icon svg{animation:successPulse 2s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(16,185,129,.3))}@keyframes successPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.message-title{color:#fff;font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:12px}.message-text{color:var(--color-text-secondary);font-size:14px;line-height:1.6;margin-bottom:24px}.divider{align-items:center;color:var(--color-text-tertiary);display:flex;font-size:11px;font-weight:600;gap:12px;letter-spacing:.08em;margin:24px 0 20px;position:relative;text-align:center}.divider:after,.divider:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.1),transparent);content:"";flex:1;height:1px}.social-buttons-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}.btn-social{align-items:center;background:rgba(30,30,30,.8);border:1px solid hsla(0,0%,100%,.1);border-radius:10px;color:var(--color-text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:14px;font-weight:500;gap:10px;height:44px;justify-content:center;margin:0;overflow:hidden;padding:0 16px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1)}.btn-social:before{background:linear-gradient(135deg,transparent,hsla(0,0%,100%,.05) 50%,transparent);content:"";inset:0;opacity:0;position:absolute;transition:opacity .3s ease}.btn-social:hover{background:rgba(40,40,40,.9);border-color:hsla(0,0%,100%,.2);box-shadow:0 4px 12px rgba(0,0,0,.3);transform:translateY(-2px)}.btn-social:hover:before{opacity:1}.btn-social:active{transform:translateY(0)}.btn-social svg{flex-shrink:0;height:20px;width:20px}.btn-social span{position:relative;white-space:nowrap;z-index:2}.btn-social-full{align-items:center;background:rgba(30,30,30,.8);border:1px solid hsla(0,0%,100%,.1);border-radius:10px;color:var(--color-text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:14px;font-weight:500;gap:10px;height:44px;justify-content:center;overflow:hidden;padding:0 16px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);width:100%}.btn-social-full:before{background:linear-gradient(135deg,transparent,hsla(0,0%,100%,.05) 50%,transparent);content:"";inset:0;opacity:0;position:absolute;transition:opacity .3s ease}.btn-social-full:hover{background:rgba(40,40,40,.9);border-color:hsla(0,0%,100%,.2);box-shadow:0 4px 12px rgba(0,0,0,.3);transform:translateY(-2px)}.btn-social-full:hover:before{opacity:1}.btn-social-full:active{transform:translateY(0)}.btn-social-full svg{flex-shrink:0;height:20px;width:20px}.btn-social-full span{position:relative;z-index:2}@media (max-width:768px){.auth-modal-content{border-radius:0;grid-template-columns:1fr;max-height:100vh;max-width:100%}.auth-modal-left{display:none}.auth-modal-right{max-height:100vh;padding:24px}.auth-form-title{font-size:22px}#loginForm .form-input{width:100%}.btn-auth-primary{font-size:15px;height:48px}.social-buttons-grid{gap:10px;grid-template-columns:1fr}.btn-social,.btn-social-full{height:48px}}@media (max-width:480px){.auth-modal{padding:0}.auth-modal-content{border-radius:0;max-height:100vh}.auth-modal-right{padding:20px 16px}.auth-form-header{margin-bottom:20px}}.auth-modal-light .auth-modal-backdrop{backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);background:hsla(0,0%,100%,.75)}.auth-modal-light .auth-modal-content{background:linear-gradient(135deg,#fdfbf7,#f8f6f2);border:1px solid rgba(16,185,129,.1);box-shadow:0 50px 100px rgba(0,0,0,.12),0 20px 40px rgba(0,0,0,.08),inset 0 0 0 1px hsla(0,0%,100%,.9)}.auth-modal-light .auth-modal-left{background:linear-gradient(135deg,#fff,#faf9f7);border-right:1px solid rgba(16,185,129,.08);box-shadow:2px 0 20px rgba(0,0,0,.03),inset 0 0 0 1px rgba(16,185,129,.05)}.auth-modal-light .auth-modal-left:before{background:radial-gradient(at 0 0,rgba(16,185,129,.08) 0,transparent 50%),radial-gradient(at 50% 0,rgba(6,182,212,.06) 0,transparent 50%),radial-gradient(at 100% 0,rgba(16,185,129,.08) 0,transparent 50%),radial-gradient(at 0 50%,rgba(52,211,153,.05) 0,transparent 50%),radial-gradient(at 100% 50%,rgba(6,182,212,.06) 0,transparent 50%),radial-gradient(at 0 100%,rgba(16,185,129,.07) 0,transparent 50%),radial-gradient(at 100% 100%,rgba(52,211,153,.06) 0,transparent 50%);filter:blur(60px);opacity:.9}.auth-modal-light .auth-modal-left:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='4' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.02'/%3E%3C/svg%3E");mix-blend-mode:multiply;opacity:.6}.auth-modal-light .auth-modal-logo .logo-icon{filter:drop-shadow(0 2px 8px rgba(16,185,129,.25))}.auth-modal-light .auth-modal-logo .logo-text{color:#0a0a0a;text-shadow:0 1px 2px rgba(16,185,129,.1)}.auth-modal-light .auth-modal-decoration .glow-orb-1{background:radial-gradient(circle,rgba(16,185,129,.08) 0,transparent 70%);filter:blur(80px)}.auth-modal-light .auth-modal-decoration .glow-orb-2{background:radial-gradient(circle,rgba(6,182,212,.06) 0,transparent 70%);filter:blur(70px)}.auth-modal-light .auth-modal-branding .branding-title{background:linear-gradient(135deg,#0a0a0a,#1a1a1a);-webkit-background-clip:text;color:#0a0a0a;text-shadow:0 2px 12px rgba(16,185,129,.12);-webkit-text-fill-color:transparent;background-clip:text}.auth-modal-light .auth-modal-branding .branding-subtitle{color:rgba(0,0,0,.6)}.auth-modal-light .auth-modal-right{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:hsla(0,0%,100%,.85);box-shadow:-2px 0 20px rgba(0,0,0,.03)}.auth-modal-light .auth-modal-right::-webkit-scrollbar-thumb{background:rgba(16,185,129,.2)}.auth-modal-light .auth-modal-right::-webkit-scrollbar-thumb:hover{background:rgba(16,185,129,.3)}.auth-modal-light .auth-modal-close{color:rgba(0,0,0,.4)}.auth-modal-light .auth-modal-close:hover{background:rgba(16,185,129,.08);color:#0a0a0a}.auth-modal-light .auth-form-title{background:linear-gradient(135deg,#0a0a0a,#2a2a2a);-webkit-background-clip:text;color:#0a0a0a;-webkit-text-fill-color:transparent;background-clip:text}.auth-modal-light .auth-form-subtitle{color:rgba(0,0,0,.5)}.auth-modal-light .form-label{color:#0a0a0a;opacity:.7}.auth-modal-light .form-input{background:hsla(0,0%,100%,.9);border:1.5px solid rgba(0,0,0,.08);box-shadow:0 1px 2px rgba(0,0,0,.02),inset 0 0 0 1px hsla(0,0%,100%,.8);color:#0a0a0a}.auth-modal-light .form-input::placeholder{color:rgba(0,0,0,.3)}.auth-modal-light .form-input:hover{border-color:rgba(16,185,129,.2);box-shadow:0 2px 4px rgba(0,0,0,.03),inset 0 0 0 1px rgba(16,185,129,.05)}.auth-modal-light .form-input:focus{background:#fff;border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.12),0 2px 8px rgba(16,185,129,.08)}.auth-modal-light .form-input:invalid:not(:placeholder-shown){border-color:#ff006e;box-shadow:0 0 0 3px rgba(255,0,110,.1)}.auth-modal-light .input-icon-btn{color:rgba(0,0,0,.4)}.auth-modal-light .input-icon-btn:hover{color:rgba(0,0,0,.7)}.auth-modal-light .forgot-password-link{color:#10b981}.auth-modal-light .forgot-password-link:hover{color:#059669;text-shadow:0 0 8px rgba(16,185,129,.2)}.auth-modal-light .strength-text{color:rgba(0,0,0,.45)}.auth-modal-light .btn-auth-primary{background:linear-gradient(135deg,#10b981,#059669);border:none;box-shadow:0 4px 12px rgba(16,185,129,.25),0 2px 4px rgba(16,185,129,.15),inset 0 0 0 1px hsla(0,0%,100%,.3);color:#fff}.auth-modal-light .btn-auth-primary:hover{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 6px 16px rgba(16,185,129,.3),0 3px 6px rgba(16,185,129,.2),inset 0 0 0 1px hsla(0,0%,100%,.4);transform:translateY(-1px)}.auth-modal-light .btn-auth-primary:active{box-shadow:0 2px 8px rgba(16,185,129,.2),0 1px 3px rgba(16,185,129,.15);transform:translateY(0)}.auth-modal-light .btn-auth-primary:disabled{background:linear-gradient(135deg,rgba(16,185,129,.4),rgba(5,150,105,.4));box-shadow:none}.auth-modal-light .btn-forgot-password{background:linear-gradient(135deg,#10b981,#059669)}.auth-modal-light .btn-forgot-password:hover{background:linear-gradient(135deg,#059669,#047857)}.auth-modal-light .btn-forgot-password .btn-arrow{filter:drop-shadow(0 0 4px rgba(255,255,255,.5))}.auth-modal-light .divider{color:rgba(0,0,0,.35)}.auth-modal-light .divider:after,.auth-modal-light .divider:before{background:linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent)}.auth-modal-light .btn-social,.auth-modal-light .btn-social-full{background:hsla(0,0%,100%,.9);border:1.5px solid rgba(0,0,0,.08);box-shadow:0 2px 4px rgba(0,0,0,.04),inset 0 0 0 1px hsla(0,0%,100%,.8);color:#1a1a1a}.auth-modal-light .btn-social-full:hover,.auth-modal-light .btn-social:hover{background:#fff;border-color:rgba(16,185,129,.2);box-shadow:0 4px 8px rgba(0,0,0,.06),inset 0 0 0 1px rgba(16,185,129,.1);transform:translateY(-1px)}.auth-modal-light .btn-social-full:active,.auth-modal-light .btn-social:active{box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 0 0 1px rgba(0,0,0,.05);transform:translateY(0)}.auth-modal-light .link-primary{color:#10b981}.auth-modal-light .link-primary:hover{color:#059669;text-shadow:0 0 8px rgba(16,185,129,.2)}.auth-modal-light .forgot-password-icon{background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(6,182,212,.06));box-shadow:0 8px 24px rgba(16,185,129,.12),inset 0 0 0 1px rgba(16,185,129,.1)}.auth-modal-light .forgot-password-icon .icon-glow{background:radial-gradient(circle,rgba(16,185,129,.15) 0,transparent 70%)}.auth-modal-light .forgot-password-icon .icon-lock{color:#10b981;filter:drop-shadow(0 2px 8px rgba(16,185,129,.2))}.auth-modal-light .forgot-password-icon .lock-shackle{animation:shakeLock 2s ease-in-out infinite}.auth-modal-light .back-to-login{color:rgba(0,0,0,.6)}.auth-modal-light .back-to-login:hover{color:#10b981}.auth-modal-light .back-to-login svg{color:rgba(0,0,0,.4)}.auth-modal-light .back-to-login:hover svg{color:#10b981}.auth-modal-light .auth-message-content{background:linear-gradient(135deg,rgba(16,185,129,.05),rgba(6,182,212,.03));box-shadow:0 8px 32px rgba(16,185,129,.12),inset 0 0 0 1px rgba(16,185,129,.1)}.auth-modal-light .message-icon{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 24px rgba(16,185,129,.3),0 0 0 4px rgba(16,185,129,.1)}.auth-modal-light .message-icon svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.auth-modal-light .message-title{background:linear-gradient(135deg,#0a0a0a,#2a2a2a);-webkit-background-clip:text;color:#0a0a0a;-webkit-text-fill-color:transparent;background-clip:text}.auth-modal-light .message-text{color:rgba(0,0,0,.6)}
|
|
1
|
+
:root{--font-display:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--color-neon-green:#10b981;--color-text-primary:#fff;--color-text-secondary:#a1a1aa;--color-text-tertiary:#71717a;--gradient-neon:linear-gradient(135deg,#10b981,#06b6d4)}.auth-modal{align-items:center;animation:modalFadeIn .3s ease-out;display:flex;inset:0;justify-content:center;overflow:hidden;padding:20px;position:fixed;z-index:9999}.auth-modal.hidden{display:none}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.auth-modal-backdrop{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(0,0,0,.85);inset:0;position:absolute}.auth-modal-content{animation:modalSlideUp .4s cubic-bezier(.4,0,.2,1);background:#0d0d0d;border:1px solid hsla(0,0%,100%,.08);border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,.8);display:grid;grid-template-columns:1fr 1fr;max-height:90vh;max-width:900px;overflow:hidden;position:relative;transition:max-width .3s ease;width:100%;z-index:10}.auth-modal-content:has(#loginForm:not(.hidden)){grid-template-columns:1fr auto;max-width:none;width:auto}.auth-modal-content:has(#loginForm:not(.hidden)) .auth-modal-right{min-width:0;width:auto}.auth-modal-content:has(#authMessage:not(.hidden)){grid-template-columns:1fr;max-width:480px}.auth-modal-content:has(#authMessage:not(.hidden)) .auth-modal-left{display:none}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.auth-modal-left{background:#000;border-right:1px solid hsla(0,0%,100%,.05);display:flex;flex-direction:column;overflow:hidden;padding:32px;position:relative}.auth-modal-left:before{animation:meshRotate 20s linear infinite;background:radial-gradient(at 0 0,rgba(99,102,241,.3) 0,transparent 50%),radial-gradient(at 50% 0,rgba(139,92,246,.3) 0,transparent 50%),radial-gradient(at 100% 0,rgba(236,72,153,.3) 0,transparent 50%),radial-gradient(at 0 50%,rgba(16,185,129,.3) 0,transparent 50%),radial-gradient(at 100% 50%,rgba(244,63,94,.3) 0,transparent 50%),radial-gradient(at 0 100%,rgba(236,72,153,.3) 0,transparent 50%),radial-gradient(at 100% 100%,rgba(139,92,246,.3) 0,transparent 50%);content:"";filter:blur(80px);height:200%;inset:-50%;opacity:.6;position:absolute;width:200%}@keyframes meshRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.auth-modal-left:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.65' numOctaves='3' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.05'/%3E%3C/svg%3E");content:"";inset:0;mix-blend-mode:overlay;opacity:.4;pointer-events:none;position:absolute}.auth-modal-logo{align-items:center;display:flex;gap:10px;position:relative;z-index:10}.auth-modal-logo .logo-icon{filter:drop-shadow(0 0 10px rgba(16,185,129,.3));height:28px;width:28px}.auth-modal-logo .logo-text{color:#fff;font-family:var(--font-display);font-size:18px;font-weight:700;text-shadow:0 0 20px rgba(0,0,0,.5)}.auth-modal-decoration{inset:0;overflow:hidden;pointer-events:none;position:absolute}.auth-modal-decoration .glow-orb-1{animation:breathe 8s ease-in-out infinite;background:radial-gradient(circle,hsla(0,0%,100%,.05) 0,transparent 70%);border-radius:50%;filter:blur(60px);height:400px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:400px}@keyframes breathe{0%,to{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.2)}}.auth-modal-decoration .glow-orb-2{animation:breathe 10s ease-in-out infinite;animation-delay:2s;background:radial-gradient(circle,rgba(139,92,246,.08) 0,transparent 70%);border-radius:50%;filter:blur(50px);height:300px;pointer-events:none;position:absolute;right:-10%;top:20%;width:300px}.auth-modal-branding{margin-bottom:48px;margin-top:auto;position:relative;z-index:10}.auth-modal-branding .branding-title{color:#fff;font-family:var(--font-display);font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:12px;text-shadow:0 2px 10px rgba(0,0,0,.3)}.auth-modal-branding .branding-subtitle{color:hsla(0,0%,100%,.8);font-size:14px;line-height:1.6;max-width:260px}.auth-modal-right{background:#121212;display:flex;flex-direction:column;max-height:90vh;overflow-y:auto;padding:56px 48px 42px;position:relative}.auth-modal-right::-webkit-scrollbar{width:6px}.auth-modal-right::-webkit-scrollbar-track{background:transparent}.auth-modal-right::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.1);border-radius:3px}.auth-modal-close{align-items:center;background:transparent;border:none;border-radius:8px;color:hsla(0,0%,100%,.5);cursor:pointer;display:flex;height:36px;justify-content:center;position:absolute;right:16px;top:16px;transition:all .2s ease;width:36px;z-index:20}.auth-modal-close:hover{background:hsla(0,0%,100%,.1);color:#fff}.auth-form-view{animation:formFadeIn .3s ease-out}#loginForm .form-input{width:360px}@keyframes formFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.auth-form-view.hidden{display:none}.auth-form-header{margin-bottom:28px;text-align:center}.auth-form-title{color:#fff;font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}.auth-form-subtitle{color:var(--color-text-secondary);font-size:14px}.auth-form{gap:16px}.auth-form,.form-group{display:flex;flex-direction:column}.form-group{gap:6px}.form-label{font-size:12px;font-weight:500;letter-spacing:.02em;opacity:.9;text-transform:uppercase}.form-input,.form-label{color:var(--color-text-primary)}.form-input{background:rgba(30,30,30,.8);border:1px solid hsla(0,0%,100%,.1);border-radius:8px;font-family:var(--font-sans);font-size:14px;height:40px;outline:none;padding:0 14px;transition:all .2s ease;width:100%}.form-input::placeholder{color:hsla(0,0%,100%,.35)}.form-input:hover{border-color:hsla(0,0%,100%,.15)}.form-input:focus{background:rgba(30,30,30,.9);border-color:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,.15)}.form-input:invalid:not(:placeholder-shown){border-color:#ff006e}.form-input[type=textarea],textarea.form-input{font-family:inherit;line-height:1.5;min-height:100px;padding:12px 14px;resize:vertical}.char-count{color:hsla(0,0%,100%,.5);font-size:12px;margin-top:4px;text-align:right}.auth-modal-light .char-count{color:rgba(0,0,0,.4)}.icon-mail{animation:floatIcon 4s ease-in-out infinite;color:#10b981;filter:drop-shadow(0 0 10px rgba(16,185,129,.4));position:relative;z-index:2}.forgot-password-icon:has(.icon-mail) .icon-glow{background:radial-gradient(circle,rgba(16,185,129,.25) 0,rgba(6,182,212,.15) 40%,transparent 70%)}#applyInviteReason{background:hsla(0,0%,8%,.6);min-height:120px;padding:14px 16px;position:relative;transition:all .3s ease}#applyInviteReason:focus{background:hsla(0,0%,8%,.8);border-color:rgba(16,185,129,.5);box-shadow:0 0 0 3px rgba(16,185,129,.15),0 0 20px rgba(16,185,129,.15),inset 0 1px 0 hsla(0,0%,100%,.05)}.form-group:has(#applyInviteReason) .char-count{color:hsla(240,5%,65%,.7);display:block;float:right;font-size:12px;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.02em;margin-top:8px;padding:4px 0;position:relative;text-align:right;transition:all .3s ease}.form-group:has(#applyInviteReason) .char-count:before{background:linear-gradient(90deg,#10b981,#06b6d4);bottom:0;box-shadow:0 0 8px rgba(16,185,129,.5);content:"";height:2px;left:0;position:absolute;transition:width .3s ease,box-shadow .3s ease,background .3s ease;width:var(--progress-width,0)}.form-group:has(#applyInviteReason) .char-count[data-progress=low]{color:rgba(251,191,36,.9)}.form-group:has(#applyInviteReason) .char-count[data-progress=low]:before{background:linear-gradient(90deg,rgba(251,191,36,.8),rgba(251,191,36,.6));box-shadow:0 0 8px rgba(251,191,36,.5)}.form-group:has(#applyInviteReason) .char-count[data-progress=medium]{color:rgba(16,185,129,.9)}.form-group:has(#applyInviteReason) .char-count[data-progress=medium]:before{background:linear-gradient(90deg,#10b981,#06b6d4);box-shadow:0 0 10px rgba(16,185,129,.6)}.form-group:has(#applyInviteReason) .char-count[data-progress=high]{color:rgba(239,68,68,.9)}.form-group:has(#applyInviteReason) .char-count[data-progress=high]:before{background:linear-gradient(90deg,rgba(239,68,68,.8),rgba(239,68,68,.6));box-shadow:0 0 10px rgba(239,68,68,.6)}.auth-modal-light .icon-mail{color:#059669;filter:drop-shadow(0 0 8px rgba(5,150,105,.3))}.auth-modal-light .forgot-password-icon:has(.icon-mail) .icon-glow{background:radial-gradient(circle,rgba(16,185,129,.15) 0,rgba(6,182,212,.1) 40%,transparent 70%)}.auth-modal-light #applyInviteReason{background:hsla(0,0%,100%,.8);border-color:rgba(16,185,129,.2);color:#0a0a0a}.auth-modal-light #applyInviteReason:focus{background:hsla(0,0%,100%,.95);border-color:rgba(16,185,129,.5);box-shadow:0 0 0 3px rgba(16,185,129,.12),0 0 20px rgba(16,185,129,.1),inset 0 1px 0 hsla(0,0%,100%,.8)}.auth-modal-light .form-group:has(#applyInviteReason) .char-count{color:rgba(82,82,91,.8)}.input-with-icon{align-items:center;display:flex;position:relative}.input-with-icon .form-input{padding-right:40px}.input-icon-btn{align-items:center;background:transparent;border:none;border-radius:4px;color:hsla(0,0%,100%,.4);cursor:pointer;display:flex;justify-content:center;padding:6px;position:absolute;right:8px;transition:color .2s ease}.input-icon-btn:hover{background:hsla(0,0%,100%,.05);color:hsla(0,0%,100%,.7)}.input-icon-btn .hidden{display:none}.strength-text{align-items:center;color:var(--color-text-tertiary);display:flex;font-size:12px;font-weight:500;gap:6px;margin-top:4px}.form-group-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.form-group-header .form-label{margin-bottom:0}.forgot-password-link{color:hsla(0,0%,100%,.5);font-size:13px;font-weight:500;position:relative;text-decoration:none;transition:all .25s ease}.forgot-password-link:after{background:#10b981;bottom:-2px;content:"";height:1px;left:0;position:absolute;transition:width .3s ease;width:0}.forgot-password-link:hover{color:#10b981}.forgot-password-link:hover:after{width:100%}.link-primary{color:var(--color-neon-green);font-weight:600;position:relative;text-decoration:none;text-shadow:0 0 10px rgba(0,255,136,.3);transition:all .2s ease}.link-primary:after{background:var(--color-neon-green);bottom:-2px;content:"";height:1px;left:0;position:absolute;transform:scaleX(0);transform-origin:right;transition:transform .3s ease;width:100%}.link-primary:hover{color:#0f8;text-shadow:0 0 20px rgba(0,255,136,.5)}.link-primary:hover:after{transform:scaleX(1);transform-origin:left}.btn-auth-primary{align-items:center;background:var(--gradient-neon);border:none;border-radius:10px;box-shadow:0 4px 12px rgba(16,185,129,.25);color:#000;cursor:pointer;display:flex;font-family:var(--font-sans);font-size:14px;font-weight:600;gap:8px;height:44px;justify-content:center;margin-top:8px;overflow:hidden;padding:0 24px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.btn-auth-primary:before{background:linear-gradient(135deg,transparent,hsla(0,0%,100%,.2) 50%,transparent);content:"";inset:0;opacity:0;position:absolute;transition:opacity .3s ease}.btn-auth-primary:hover{box-shadow:0 8px 20px rgba(16,185,129,.35);transform:translateY(-2px)}.btn-auth-primary:hover:before{opacity:1}.btn-auth-primary:active{box-shadow:0 2px 8px rgba(16,185,129,.25);transform:translateY(0)}.btn-auth-primary:disabled{cursor:not-allowed;opacity:.6;transform:none}.btn-auth-primary .btn-text{position:relative;z-index:2}.btn-auth-primary .btn-loader{align-items:center;display:flex;justify-content:center;position:relative;z-index:2}.btn-auth-primary .btn-loader.hidden{display:none}.spinner{animation:spin .8s linear infinite;fill:none;height:20px;stroke-width:3;width:20px}@keyframes spin{to{transform:rotate(1turn)}}.spinner-track{stroke:rgba(0,0,0,.2)}.spinner-circle{animation:spinDash 1.2s ease-in-out infinite;stroke:#000;stroke-dasharray:50;stroke-dashoffset:50}@keyframes spinDash{0%{stroke-dashoffset:50}50%{stroke-dashoffset:12.5}to{stroke-dashoffset:50}}.invite-code-icon{align-items:center;background:rgba(52,211,153,.1);border-radius:12px;display:flex;height:80px;justify-content:center;margin:0 auto 24px;position:relative;width:80px}.invite-code-icon .icon-glow{animation:pulseGlow 3s ease-in-out infinite;background:radial-gradient(circle,rgba(52,211,153,.2) 0,transparent 70%);border-radius:50%;filter:blur(15px);inset:-10px;position:absolute}.invite-code-icon .icon-star{animation:floatIcon 4s ease-in-out infinite;color:#34d399;filter:drop-shadow(0 0 10px rgba(52,211,153,.4));position:relative;z-index:2}.forgot-password-icon{align-items:center;display:flex;height:100px;justify-content:center;margin:0 auto 24px;position:relative;width:100px}.forgot-password-icon .icon-glow{animation:pulseGlow 3s ease-in-out infinite;background:radial-gradient(circle,rgba(16,185,129,.25) 0,transparent 70%);border-radius:50%;filter:blur(15px);inset:-10px;position:absolute}@keyframes pulseGlow{0%,to{opacity:.5;transform:scale(.95)}50%{opacity:.8;transform:scale(1.05)}}.forgot-password-icon .icon-lock{animation:floatIcon 4s ease-in-out infinite;color:#10b981;filter:drop-shadow(0 0 10px rgba(16,185,129,.4));position:relative;z-index:2}@keyframes floatIcon{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.btn-forgot-password{align-items:center;display:flex;gap:8px;justify-content:center}.btn-forgot-password .btn-arrow{transition:transform .3s ease}.btn-forgot-password:hover .btn-arrow{transform:translateX(4px)}.auth-footer{margin-top:24px;text-align:center}.forgot-footer{display:flex;justify-content:center}.back-to-login{align-items:center;border-radius:6px;color:var(--color-text-secondary);display:inline-flex;font-size:14px;font-weight:500;gap:8px;padding:8px 12px;text-decoration:none;transition:all .2s ease}.back-to-login:hover{background:rgba(16,185,129,.05);color:var(--color-neon-green)}.back-to-login svg{transition:transform .3s ease}.back-to-login:hover svg{transform:translateX(-4px)}.invite-code-divider{align-items:center;color:var(--color-text-tertiary);display:flex;font-size:11px;font-weight:600;gap:12px;letter-spacing:.08em;margin:32px 0 20px;position:relative;text-align:center}.invite-code-divider:after,.invite-code-divider:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.1),transparent);content:"";flex:1;height:1px}.btn-apply-invite{align-items:center;background:rgba(30,30,30,.8);border:1px solid hsla(0,0%,100%,.1);border-radius:10px;color:var(--color-text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:14px;font-weight:500;height:44px;justify-content:center;overflow:hidden;padding:0 24px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);width:100%}.btn-apply-invite:before{background:linear-gradient(135deg,transparent,hsla(0,0%,100%,.05) 50%,transparent);content:"";inset:0;opacity:0;position:absolute;transition:opacity .3s ease}.btn-apply-invite:hover{background:rgba(40,40,40,.9);border-color:hsla(0,0%,100%,.2);box-shadow:0 4px 12px rgba(0,0,0,.3);color:var(--color-text-primary);transform:translateY(-2px)}.btn-apply-invite:hover:before{opacity:1}.btn-apply-invite:active{transform:translateY(0)}.auth-modal-light .invite-code-icon{background:rgba(52,211,153,.08)}.auth-modal-light .invite-code-icon .icon-star{color:#059669;filter:drop-shadow(0 2px 8px rgba(5,150,105,.3))}.auth-modal-light .btn-apply-invite{background:hsla(0,0%,100%,.9);border:1.5px solid rgba(0,0,0,.08);box-shadow:0 2px 4px rgba(0,0,0,.04),inset 0 0 0 1px hsla(0,0%,100%,.8);color:rgba(0,0,0,.6)}.auth-modal-light .btn-apply-invite:hover{background:#fff;border-color:rgba(16,185,129,.2);box-shadow:0 4px 8px rgba(0,0,0,.06),inset 0 0 0 1px rgba(16,185,129,.1);color:#0a0a0a;transform:translateY(-1px)}.auth-modal-light .invite-code-divider{color:rgba(0,0,0,.35)}.auth-modal-light .invite-code-divider:after,.auth-modal-light .invite-code-divider:before{background:linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent)}.auth-footer-divider{isolation:isolate;margin-top:32px;padding:28px 20px 0;position:relative;text-align:center}.auth-footer-divider:before{animation:energyFlow 4s ease-in-out infinite;background:linear-gradient(90deg,transparent,rgba(16,185,129,.15) 15%,rgba(16,185,129,.5) 30%,rgba(6,182,212,.6) 50%,rgba(16,185,129,.5) 70%,rgba(16,185,129,.15) 85%,transparent);filter:blur(.5px);height:2px;top:0;width:85%}.auth-footer-divider:after,.auth-footer-divider:before{content:"";left:50%;position:absolute;transform:translateX(-50%)}.auth-footer-divider:after{animation:glowPulse 3s ease-in-out infinite;background:radial-gradient(ellipse at center,rgba(16,185,129,.25) 0,rgba(6,182,212,.15) 40%,transparent 70%);filter:blur(6px);height:8px;opacity:.6;top:-4px;width:70%}@keyframes energyFlow{0%,to{opacity:.7;transform:translateX(-50%) scaleX(1)}50%{opacity:1;transform:translateX(-50%) scaleX(1.02)}}@keyframes glowPulse{0%,to{opacity:.4;transform:translateX(-50%) scaleY(.8)}50%{opacity:.8;transform:translateX(-50%) scaleY(1.2)}}.auth-footer-text{color:hsla(240,5%,65%,.85);font-size:13.5px;font-weight:400;letter-spacing:.02em;line-height:1.6;margin:0;position:relative;z-index:1}.auth-link{background:rgba(16,185,129,.05);border:1px solid rgba(16,185,129,.2);border-radius:6px;color:#10b981;display:inline-block;font-weight:600;isolation:isolate;letter-spacing:.01em;margin-left:6px;padding:6px 14px;position:relative;text-decoration:none;transition:all .4s cubic-bezier(.34,1.56,.64,1)}.auth-link:before{animation:shimmerRotate 3s linear infinite paused;background:linear-gradient(135deg,transparent,rgba(16,185,129,.4) 25%,rgba(6,182,212,.5) 50%,rgba(16,185,129,.4) 75%,transparent);border-radius:6px;content:"";inset:-1px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;padding:1px;position:absolute;transition:opacity .4s ease}@keyframes shimmerRotate{0%{background-position:0 50%}to{background-position:200% 50%}}.auth-link:after{background:linear-gradient(90deg,rgba(16,185,129,.8),rgba(6,182,212,.9),rgba(16,185,129,.8));border-radius:2px;bottom:3px;box-shadow:0 0 8px rgba(16,185,129,.6),0 0 12px rgba(6,182,212,.4);content:"";filter:blur(.5px);height:2px;left:14px;position:absolute;right:14px;transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.auth-link:hover{background:rgba(16,185,129,.12);border-color:rgba(6,182,212,.5);box-shadow:0 4px 20px rgba(16,185,129,.3),0 0 40px rgba(6,182,212,.15),inset 0 1px 0 hsla(0,0%,100%,.1);color:#0fa;text-shadow:0 0 10px rgba(16,185,129,.6),0 0 20px rgba(6,182,212,.4),0 0 30px rgba(16,185,129,.2);transform:translateY(-2px) scale(1.02)}.auth-link:hover:before{animation-play-state:running;opacity:1}.auth-link:hover:after{transform:scaleX(1)}.auth-link:active{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.6);box-shadow:0 2px 12px rgba(16,185,129,.4),inset 0 2px 8px rgba(0,0,0,.2);transform:translateY(0) scale(.98)}.auth-link:focus-visible{border-color:rgba(16,185,129,.8);box-shadow:0 0 0 3px rgba(16,185,129,.3),0 0 20px rgba(16,185,129,.4),inset 0 1px 0 hsla(0,0%,100%,.15);outline:none}@media (max-width:768px){.auth-footer-divider{margin-top:28px;padding-top:24px}.auth-footer-divider:before{width:90%}.auth-footer-text{font-size:13px}.auth-link{margin-left:4px;padding:8px 16px}.auth-link:after{left:16px;right:16px}}.auth-modal-light .auth-footer-divider:before{background:linear-gradient(90deg,transparent,rgba(16,185,129,.2) 15%,rgba(16,185,129,.35) 30%,rgba(6,182,212,.4) 50%,rgba(16,185,129,.35) 70%,rgba(16,185,129,.2) 85%,transparent)}.auth-modal-light .auth-footer-divider:after{background:radial-gradient(ellipse at center,rgba(16,185,129,.15) 0,rgba(6,182,212,.1) 40%,transparent 70%)}.auth-modal-light .auth-footer-text{color:rgba(82,82,91,.9)}.auth-modal-light .auth-link{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.25);color:#059669}.auth-modal-light .auth-link:before{background:linear-gradient(135deg,transparent,rgba(16,185,129,.5) 25%,rgba(6,182,212,.6) 50%,rgba(16,185,129,.5) 75%,transparent)}.auth-modal-light .auth-link:hover{background:rgba(16,185,129,.15);border-color:rgba(6,182,212,.4);box-shadow:0 4px 16px rgba(16,185,129,.25),0 0 30px rgba(6,182,212,.1),inset 0 1px 0 hsla(0,0%,100%,.6);color:#047857;text-shadow:0 0 8px rgba(16,185,129,.4),0 0 16px rgba(6,182,212,.3)}.auth-modal-light .auth-link:active{background:rgba(16,185,129,.22);box-shadow:0 2px 10px rgba(16,185,129,.3),inset 0 2px 6px rgba(0,0,0,.1)}.auth-message-content{align-items:center;display:flex;flex-direction:column;padding:24px;text-align:center}.message-icon{align-items:center;background:rgba(16,185,129,.1);border-radius:50%;color:#10b981;display:flex;height:80px;justify-content:center;margin-bottom:24px;width:80px}.message-icon svg{animation:successPulse 2s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(16,185,129,.3))}@keyframes successPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.message-title{color:#fff;font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:12px}.message-text{color:var(--color-text-secondary);font-size:14px;line-height:1.6;margin-bottom:24px}.divider{align-items:center;color:var(--color-text-tertiary);display:flex;font-size:11px;font-weight:600;gap:12px;letter-spacing:.08em;margin:24px 0 20px;position:relative;text-align:center}.divider:after,.divider:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.1),transparent);content:"";flex:1;height:1px}.social-buttons-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}.btn-social{align-items:center;background:rgba(30,30,30,.8);border:1px solid hsla(0,0%,100%,.1);border-radius:10px;color:var(--color-text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:14px;font-weight:500;gap:10px;height:44px;justify-content:center;margin:0;overflow:hidden;padding:0 16px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1)}.btn-social:before{background:linear-gradient(135deg,transparent,hsla(0,0%,100%,.05) 50%,transparent);content:"";inset:0;opacity:0;position:absolute;transition:opacity .3s ease}.btn-social:hover{background:rgba(40,40,40,.9);border-color:hsla(0,0%,100%,.2);box-shadow:0 4px 12px rgba(0,0,0,.3);transform:translateY(-2px)}.btn-social:hover:before{opacity:1}.btn-social:active{transform:translateY(0)}.btn-social svg{flex-shrink:0;height:20px;width:20px}.btn-social span{position:relative;white-space:nowrap;z-index:2}.btn-social-full{align-items:center;background:rgba(30,30,30,.8);border:1px solid hsla(0,0%,100%,.1);border-radius:10px;color:var(--color-text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:14px;font-weight:500;gap:10px;height:44px;justify-content:center;overflow:hidden;padding:0 16px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);width:100%}.btn-social-full:before{background:linear-gradient(135deg,transparent,hsla(0,0%,100%,.05) 50%,transparent);content:"";inset:0;opacity:0;position:absolute;transition:opacity .3s ease}.btn-social-full:hover{background:rgba(40,40,40,.9);border-color:hsla(0,0%,100%,.2);box-shadow:0 4px 12px rgba(0,0,0,.3);transform:translateY(-2px)}.btn-social-full:hover:before{opacity:1}.btn-social-full:active{transform:translateY(0)}.btn-social-full svg{flex-shrink:0;height:20px;width:20px}.btn-social-full span{position:relative;z-index:2}@media (max-width:768px){.auth-modal-content{border-radius:0;grid-template-columns:1fr;max-height:100vh;max-width:100%}.auth-modal-left{display:none}.auth-modal-right{max-height:100vh;padding:24px}.auth-form-title{font-size:22px}#loginForm .form-input{width:100%}.btn-auth-primary{font-size:15px;height:48px}.social-buttons-grid{gap:10px;grid-template-columns:1fr}.btn-social,.btn-social-full{height:48px}}@media (max-width:480px){.auth-modal{padding:0}.auth-modal-content{border-radius:0;max-height:100vh}.auth-modal-right{padding:20px 16px}.auth-form-header{margin-bottom:20px}}.auth-modal-light .auth-modal-backdrop{backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);background:hsla(0,0%,100%,.75)}.auth-modal-light .auth-modal-content{background:linear-gradient(135deg,#fdfbf7,#f8f6f2);border:1px solid rgba(16,185,129,.1);box-shadow:0 50px 100px rgba(0,0,0,.12),0 20px 40px rgba(0,0,0,.08),inset 0 0 0 1px hsla(0,0%,100%,.9)}.auth-modal-light .auth-modal-left{background:linear-gradient(135deg,#fff,#faf9f7);border-right:1px solid rgba(16,185,129,.08);box-shadow:2px 0 20px rgba(0,0,0,.03),inset 0 0 0 1px rgba(16,185,129,.05)}.auth-modal-light .auth-modal-left:before{background:radial-gradient(at 0 0,rgba(16,185,129,.08) 0,transparent 50%),radial-gradient(at 50% 0,rgba(6,182,212,.06) 0,transparent 50%),radial-gradient(at 100% 0,rgba(16,185,129,.08) 0,transparent 50%),radial-gradient(at 0 50%,rgba(52,211,153,.05) 0,transparent 50%),radial-gradient(at 100% 50%,rgba(6,182,212,.06) 0,transparent 50%),radial-gradient(at 0 100%,rgba(16,185,129,.07) 0,transparent 50%),radial-gradient(at 100% 100%,rgba(52,211,153,.06) 0,transparent 50%);filter:blur(60px);opacity:.9}.auth-modal-light .auth-modal-left:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='4' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.02'/%3E%3C/svg%3E");mix-blend-mode:multiply;opacity:.6}.auth-modal-light .auth-modal-logo .logo-icon{filter:drop-shadow(0 2px 8px rgba(16,185,129,.25))}.auth-modal-light .auth-modal-logo .logo-text{color:#0a0a0a;text-shadow:0 1px 2px rgba(16,185,129,.1)}.auth-modal-light .auth-modal-decoration .glow-orb-1{background:radial-gradient(circle,rgba(16,185,129,.08) 0,transparent 70%);filter:blur(80px)}.auth-modal-light .auth-modal-decoration .glow-orb-2{background:radial-gradient(circle,rgba(6,182,212,.06) 0,transparent 70%);filter:blur(70px)}.auth-modal-light .auth-modal-branding .branding-title{background:linear-gradient(135deg,#0a0a0a,#1a1a1a);-webkit-background-clip:text;color:#0a0a0a;text-shadow:0 2px 12px rgba(16,185,129,.12);-webkit-text-fill-color:transparent;background-clip:text}.auth-modal-light .auth-modal-branding .branding-subtitle{color:rgba(0,0,0,.6)}.auth-modal-light .auth-modal-right{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:hsla(0,0%,100%,.85);box-shadow:-2px 0 20px rgba(0,0,0,.03)}.auth-modal-light .auth-modal-right::-webkit-scrollbar-thumb{background:rgba(16,185,129,.2)}.auth-modal-light .auth-modal-right::-webkit-scrollbar-thumb:hover{background:rgba(16,185,129,.3)}.auth-modal-light .auth-modal-close{color:rgba(0,0,0,.4)}.auth-modal-light .auth-modal-close:hover{background:rgba(16,185,129,.08);color:#0a0a0a}.auth-modal-light .auth-form-title{background:linear-gradient(135deg,#0a0a0a,#2a2a2a);-webkit-background-clip:text;color:#0a0a0a;-webkit-text-fill-color:transparent;background-clip:text}.auth-modal-light .auth-form-subtitle{color:rgba(0,0,0,.5)}.auth-modal-light .form-label{color:#0a0a0a;opacity:.7}.auth-modal-light .form-input{background:hsla(0,0%,100%,.9);border:1.5px solid rgba(0,0,0,.08);box-shadow:0 1px 2px rgba(0,0,0,.02),inset 0 0 0 1px hsla(0,0%,100%,.8);color:#0a0a0a}.auth-modal-light .form-input::placeholder{color:rgba(0,0,0,.3)}.auth-modal-light .form-input:hover{border-color:rgba(16,185,129,.2);box-shadow:0 2px 4px rgba(0,0,0,.03),inset 0 0 0 1px rgba(16,185,129,.05)}.auth-modal-light .form-input:focus{background:#fff;border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.12),0 2px 8px rgba(16,185,129,.08)}.auth-modal-light .form-input:invalid:not(:placeholder-shown){border-color:#ff006e;box-shadow:0 0 0 3px rgba(255,0,110,.1)}.auth-modal-light .input-icon-btn{color:rgba(0,0,0,.4)}.auth-modal-light .input-icon-btn:hover{color:rgba(0,0,0,.7)}.auth-modal-light .forgot-password-link{color:#10b981}.auth-modal-light .forgot-password-link:hover{color:#059669;text-shadow:0 0 8px rgba(16,185,129,.2)}.auth-modal-light .strength-text{color:rgba(0,0,0,.45)}.auth-modal-light .btn-auth-primary{background:linear-gradient(135deg,#10b981,#059669);border:none;box-shadow:0 4px 12px rgba(16,185,129,.25),0 2px 4px rgba(16,185,129,.15),inset 0 0 0 1px hsla(0,0%,100%,.3);color:#fff}.auth-modal-light .btn-auth-primary:hover{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 6px 16px rgba(16,185,129,.3),0 3px 6px rgba(16,185,129,.2),inset 0 0 0 1px hsla(0,0%,100%,.4);transform:translateY(-1px)}.auth-modal-light .btn-auth-primary:active{box-shadow:0 2px 8px rgba(16,185,129,.2),0 1px 3px rgba(16,185,129,.15);transform:translateY(0)}.auth-modal-light .btn-auth-primary:disabled{background:linear-gradient(135deg,rgba(16,185,129,.4),rgba(5,150,105,.4));box-shadow:none}.auth-modal-light .btn-forgot-password{background:linear-gradient(135deg,#10b981,#059669)}.auth-modal-light .btn-forgot-password:hover{background:linear-gradient(135deg,#059669,#047857)}.auth-modal-light .btn-forgot-password .btn-arrow{filter:drop-shadow(0 0 4px rgba(255,255,255,.5))}.auth-modal-light .divider{color:rgba(0,0,0,.35)}.auth-modal-light .divider:after,.auth-modal-light .divider:before{background:linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent)}.auth-modal-light .btn-social,.auth-modal-light .btn-social-full{background:hsla(0,0%,100%,.9);border:1.5px solid rgba(0,0,0,.08);box-shadow:0 2px 4px rgba(0,0,0,.04),inset 0 0 0 1px hsla(0,0%,100%,.8);color:#1a1a1a}.auth-modal-light .btn-social-full:hover,.auth-modal-light .btn-social:hover{background:#fff;border-color:rgba(16,185,129,.2);box-shadow:0 4px 8px rgba(0,0,0,.06),inset 0 0 0 1px rgba(16,185,129,.1);transform:translateY(-1px)}.auth-modal-light .btn-social-full:active,.auth-modal-light .btn-social:active{box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 0 0 1px rgba(0,0,0,.05);transform:translateY(0)}.auth-modal-light .link-primary{color:#10b981}.auth-modal-light .link-primary:hover{color:#059669;text-shadow:0 0 8px rgba(16,185,129,.2)}.auth-modal-light .forgot-password-icon{background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(6,182,212,.06));box-shadow:0 8px 24px rgba(16,185,129,.12),inset 0 0 0 1px rgba(16,185,129,.1)}.auth-modal-light .forgot-password-icon .icon-glow{background:radial-gradient(circle,rgba(16,185,129,.15) 0,transparent 70%)}.auth-modal-light .forgot-password-icon .icon-lock{color:#10b981;filter:drop-shadow(0 2px 8px rgba(16,185,129,.2))}.auth-modal-light .forgot-password-icon .lock-shackle{animation:shakeLock 2s ease-in-out infinite}.auth-modal-light .back-to-login{color:rgba(0,0,0,.6)}.auth-modal-light .back-to-login:hover{color:#10b981}.auth-modal-light .back-to-login svg{color:rgba(0,0,0,.4)}.auth-modal-light .back-to-login:hover svg{color:#10b981}.auth-modal-light .auth-message-content{background:linear-gradient(135deg,rgba(16,185,129,.05),rgba(6,182,212,.03));box-shadow:0 8px 32px rgba(16,185,129,.12),inset 0 0 0 1px rgba(16,185,129,.1)}.auth-modal-light .message-icon{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 24px rgba(16,185,129,.3),0 0 0 4px rgba(16,185,129,.1)}.auth-modal-light .message-icon svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.auth-modal-light .message-title{background:linear-gradient(135deg,#0a0a0a,#2a2a2a);-webkit-background-clip:text;color:#0a0a0a;-webkit-text-fill-color:transparent;background-clip:text}.auth-modal-light .message-text{color:rgba(0,0,0,.6)}
|