1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
.page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
background:
radial-gradient(ellipse at 60% 20%, rgba(108, 126, 248, 0.08) 0%, transparent 60%),
radial-gradient(ellipse at 20% 80%, rgba(108, 126, 248, 0.05) 0%, transparent 50%),
var(--color-bg);
}
.card {
width: 100%;
max-width: 400px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
animation: slideUp var(--transition-normal) ease;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.logo {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.appName {
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-text-primary);
letter-spacing: -0.02em;
line-height: 1.2;
}
.appSub {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.heading {
font-size: var(--text-xl);
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.02em;
margin-bottom: var(--space-6);
}
.form {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.label {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-primary);
}
.passwordWrapper {
position: relative;
}
.passwordWrapper .input {
padding-right: var(--space-10);
}
.showPass {
position: absolute;
right: var(--space-3);
top: 50%;
transform: translateY(-50%);
font-size: var(--text-base);
line-height: 1;
color: var(--color-text-muted);
transition: color var(--transition-fast);
}
.showPass:hover {
color: var(--color-text-secondary);
}
.error {
padding: var(--space-3) var(--space-4);
background: rgba(248, 113, 113, 0.1);
border: 1px solid rgba(248, 113, 113, 0.3);
border-radius: var(--radius-md);
color: var(--color-priority-critical);
font-size: var(--text-sm);
animation: fadeIn var(--transition-fast) ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.submitBtn {
width: 100%;
padding: var(--space-3);
font-size: var(--text-base);
margin-top: var(--space-2);
}
.registerLink {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-align: center;
margin-top: var(--space-5);
}
|
