ltcai 2.2.2 → 2.2.7

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.
@@ -0,0 +1,303 @@
1
+ /* Lattice AI — account / auth page (account.html, body.lattice-ref-auth). Token-native. */
2
+ /* ============================================================
3
+ ACCOUNT / AUTH PAGE (account.html)
4
+ Light lavender theme — unified with chat/graph/admin pages.
5
+ ============================================================ */
6
+
7
+ * { box-sizing: border-box; margin: 0; padding: 0; }
8
+ html, body.lattice-ref-auth { height: 100%; }
9
+ body.lattice-ref-auth {
10
+ font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
11
+ color: var(--text);
12
+ background: var(--app-bg);
13
+ display: flex;
14
+ align-items: center;
15
+ justify-content: center;
16
+ min-height: 100vh;
17
+ padding: 24px;
18
+ overflow: hidden;
19
+ position: relative;
20
+ }
21
+
22
+ body::before {
23
+ content: '';
24
+ position: fixed;
25
+ inset: 0;
26
+ background:
27
+ radial-gradient(circle, rgba(123,109,255,0.28) 1px, transparent 1.8px),
28
+ linear-gradient(rgba(123,109,255,0.08) 1px, transparent 1px),
29
+ linear-gradient(90deg, rgba(123,109,255,0.06) 1px, transparent 1px);
30
+ background-size: 82px 82px, 46px 46px, 46px 46px;
31
+ background-position: 16px 18px, 0 0, 0 0;
32
+ mask-image: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.02));
33
+ pointer-events: none;
34
+ }
35
+
36
+ body::after {
37
+ content: '';
38
+ position: fixed;
39
+ inset: 0;
40
+ background:
41
+ radial-gradient(ellipse at 8% 78%, rgba(142,111,255,0.24), transparent 34%),
42
+ linear-gradient(115deg, transparent 0 35%, rgba(111,75,246,0.09) 35.2%, transparent 35.6% 100%);
43
+ pointer-events: none;
44
+ }
45
+
46
+ .orb {
47
+ display: none;
48
+ }
49
+
50
+ .login-shell {
51
+ width: min(920px, 100%);
52
+ display: grid;
53
+ grid-template-columns: minmax(280px, 400px) minmax(220px, 1fr);
54
+ align-items: center;
55
+ gap: 46px;
56
+ position: relative;
57
+ z-index: 1;
58
+ }
59
+
60
+ .brand-preview {
61
+ min-height: 360px;
62
+ border-radius: 34px;
63
+ background:
64
+ radial-gradient(circle at 54% 45%, rgba(111,75,246,0.24), transparent 18%),
65
+ linear-gradient(145deg, rgba(255,255,255,0.68), rgba(244,239,255,0.32));
66
+ border: 1px solid rgba(111,75,246,0.12);
67
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
68
+ position: relative;
69
+ overflow: hidden;
70
+ }
71
+ .brand-preview::before {
72
+ content: '';
73
+ position: absolute;
74
+ inset: auto -12% 0 -8%;
75
+ height: 46%;
76
+ background: linear-gradient(135deg, rgba(111,75,246,0.24), rgba(255,255,255,0.12));
77
+ clip-path: polygon(0 62%, 18% 42%, 36% 54%, 55% 26%, 76% 44%, 100% 20%, 100% 100%, 0 100%);
78
+ filter: blur(1px);
79
+ }
80
+ .preview-node {
81
+ position: absolute;
82
+ width: 52px;
83
+ height: 52px;
84
+ border-radius: 17px;
85
+ background: var(--surface-2);
86
+ border: 1px solid rgba(111,75,246,0.18);
87
+ box-shadow: 0 18px 40px rgba(111,75,246,0.16);
88
+ }
89
+ .preview-node::after {
90
+ content: '';
91
+ position: absolute;
92
+ inset: 14px;
93
+ border-radius: 10px;
94
+ background: linear-gradient(135deg, #6f4bf6, #9f8cff);
95
+ }
96
+ .preview-node.n1 { top: 52px; left: 58px; }
97
+ .preview-node.n2 { top: 112px; right: 64px; }
98
+ .preview-node.n3 { left: 120px; bottom: 92px; }
99
+ .preview-node.n4 { right: 120px; bottom: 58px; }
100
+ .preview-line {
101
+ position: absolute;
102
+ height: 2px;
103
+ width: 150px;
104
+ background: linear-gradient(90deg, transparent, rgba(111,75,246,0.45), transparent);
105
+ transform-origin: left center;
106
+ }
107
+ .preview-line.l1 { top: 108px; left: 112px; transform: rotate(18deg); }
108
+ .preview-line.l2 { top: 186px; left: 176px; transform: rotate(112deg); }
109
+ .preview-line.l3 { bottom: 112px; left: 172px; transform: rotate(-13deg); }
110
+
111
+ .card {
112
+ width: min(400px, 100%);
113
+ background: var(--card);
114
+ border: 1px solid rgba(111,75,246,0.13);
115
+ border-radius: 14px;
116
+ padding: 38px 34px;
117
+ box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.9);
118
+ position: relative;
119
+ z-index: 1;
120
+ backdrop-filter: blur(28px);
121
+ }
122
+
123
+ .card::before {
124
+ content: '';
125
+ position: absolute;
126
+ top: 0; left: 50%;
127
+ transform: translateX(-50%);
128
+ width: 55%; height: 1px;
129
+ background: linear-gradient(90deg, transparent, rgba(111,75,246,0.65), rgba(123,109,255,0.45), transparent);
130
+ }
131
+
132
+ .logo {
133
+ width: 54px; height: 54px;
134
+ background: linear-gradient(135deg, #6f4bf6 0%, #8d7aff 100%);
135
+ border-radius: 10px;
136
+ display: flex; align-items: center; justify-content: center;
137
+ font-size: 26px; color: #fff;
138
+ margin: 0 auto 18px;
139
+ box-shadow: 0 16px 34px rgba(111,75,246,0.28);
140
+ }
141
+
142
+ .title {
143
+ text-align: center;
144
+ font-size: 23px;
145
+ font-weight: 800;
146
+ margin-bottom: 6px;
147
+ background: linear-gradient(135deg, #1f2140 35%, #6f4bf6 82%);
148
+ -webkit-background-clip: text;
149
+ -webkit-text-fill-color: transparent;
150
+ background-clip: text;
151
+ }
152
+
153
+ .subtitle {
154
+ text-align: center;
155
+ color: var(--muted);
156
+ font-size: 12.5px;
157
+ margin-bottom: 26px;
158
+ line-height: 1.5;
159
+ }
160
+
161
+ .input {
162
+ width: 100%;
163
+ padding: 12px 14px;
164
+ margin-bottom: 10px;
165
+ background: var(--surface);
166
+ border: 1px solid rgba(111,75,246,0.16);
167
+ color: var(--text);
168
+ border-radius: 8px;
169
+ outline: none;
170
+ font-size: 14px;
171
+ font-family: inherit;
172
+ transition: border-color .15s, box-shadow .15s;
173
+ }
174
+ .input:focus {
175
+ border-color: rgba(111,75,246,0.52);
176
+ box-shadow: 0 0 0 4px rgba(111,75,246,0.10);
177
+ }
178
+ .input::placeholder { color: var(--faint); }
179
+
180
+ .submit {
181
+ width: 100%;
182
+ padding: 13px;
183
+ background: linear-gradient(135deg, #6f4bf6, #7b6dff);
184
+ color: #fff;
185
+ border: none;
186
+ border-radius: 8px;
187
+ cursor: pointer;
188
+ font-weight: 800;
189
+ font-size: 14px;
190
+ font-family: inherit;
191
+ box-shadow: 0 14px 30px rgba(111,75,246,0.24);
192
+ transition: all .18s;
193
+ margin-top: 4px;
194
+ }
195
+ .submit:hover {
196
+ background: linear-gradient(135deg, #5f3ee6, #705fff);
197
+ box-shadow: 0 18px 38px rgba(111,75,246,0.30);
198
+ transform: translateY(-1px);
199
+ }
200
+ .submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
201
+
202
+ .switch {
203
+ margin-top: 18px;
204
+ text-align: center;
205
+ font-size: 12.5px;
206
+ color: var(--faint);
207
+ }
208
+ .switch a { color: #6f4bf6; text-decoration: none; font-weight: 700; }
209
+ .switch a:hover { text-decoration: underline; }
210
+
211
+ .sso-divider {
212
+ display: flex; align-items: center; gap: 10px;
213
+ margin: 14px 0 10px;
214
+ color: var(--faint); font-size: 11.5px;
215
+ }
216
+ .sso-divider::before, .sso-divider::after {
217
+ content: ''; flex: 1;
218
+ height: 1px; background: rgba(111,75,246,0.12);
219
+ }
220
+ .sso-btn {
221
+ width: 100%;
222
+ padding: 12px;
223
+ background: var(--surface-2);
224
+ border: 1px solid rgba(111,75,246,0.15);
225
+ color: var(--text);
226
+ border-radius: 8px;
227
+ cursor: pointer;
228
+ font-weight: 600;
229
+ font-size: 13.5px;
230
+ font-family: inherit;
231
+ display: flex; align-items: center; justify-content: center; gap: 8px;
232
+ transition: all .18s;
233
+ }
234
+ .sso-btn:hover {
235
+ background: var(--surface);
236
+ border-color: rgba(111,75,246,0.34);
237
+ }
238
+
239
+ .msg {
240
+ font-size: 12px;
241
+ min-height: 18px;
242
+ margin-bottom: 6px;
243
+ text-align: center;
244
+ color: #d44f5c;
245
+ }
246
+ .msg.ok { color: var(--success); }
247
+
248
+ /* Lang picker */
249
+ .lang-wrap {
250
+ position: absolute;
251
+ top: 12px;
252
+ right: 12px;
253
+ z-index: 10;
254
+ }
255
+ .lang-btn {
256
+ background: var(--surface-2);
257
+ border: 1px solid rgba(111,75,246,0.18);
258
+ color: var(--text);
259
+ border-radius: 8px;
260
+ padding: 7px 12px;
261
+ font-size: 13px;
262
+ font-family: inherit;
263
+ cursor: pointer;
264
+ transition: background .15s;
265
+ box-shadow: 0 10px 28px rgba(86,70,160,0.12);
266
+ }
267
+ .lang-btn:hover { background: rgba(111,75,246,0.08); }
268
+ .lang-menu {
269
+ display: none;
270
+ position: absolute;
271
+ top: calc(100% + 6px);
272
+ right: 0;
273
+ background: var(--surface-elevated);
274
+ border: 1px solid rgba(111,75,246,0.15);
275
+ border-radius: 8px;
276
+ padding: 4px;
277
+ min-width: 130px;
278
+ box-shadow: 0 18px 44px rgba(86,70,160,0.16);
279
+ }
280
+ .lang-menu.open { display: block; }
281
+ .lang-opt {
282
+ padding: 7px 10px;
283
+ border-radius: 7px;
284
+ cursor: pointer;
285
+ font-size: 13px;
286
+ color: var(--muted);
287
+ }
288
+ .lang-opt:hover { background: rgba(111,75,246,0.07); color: var(--text); }
289
+ .lang-opt.active { color: var(--accent); font-weight: 700; }
290
+
291
+ @media (max-width: 760px) {
292
+ .login-shell { display: block; }
293
+ .brand-preview { display: none; }
294
+ }
295
+
296
+ :root[data-lt-theme="dark"] body.lattice-ref-auth .title,
297
+ :root[data-lt-theme="dark"] body.lattice-ref-auth #register-section .title {
298
+ background: none;
299
+ -webkit-background-clip: border-box;
300
+ background-clip: border-box;
301
+ -webkit-text-fill-color: currentColor;
302
+ color: var(--text);
303
+ }