@bhooai/nexus-admin 2.0.1 → 2.0.3

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/src/index.css CHANGED
@@ -1,2401 +1,78 @@
1
- @tailwind base;
2
- @tailwind components;
3
- @tailwind utilities;
4
-
5
- :root {
6
- color-scheme: dark;
7
- }
8
-
9
- html,
10
- body,
11
- #root {
12
- min-height: 100%;
13
- }
14
-
15
- body {
16
- @apply text-slate-100 antialiased;
17
- color-scheme: dark;
18
- }
19
-
20
- /* Ambient gradient mesh behind the frosted glass. */
21
- .bg-mesh {
22
- background:
23
- radial-gradient(60rem 60rem at 85% -10%, rgba(99, 102, 241, 0.32), transparent 70%),
24
- radial-gradient(50rem 50rem at -10% 110%, rgba(34, 211, 238, 0.26), transparent 70%),
25
- radial-gradient(45rem 45rem at 50% 50%, rgba(168, 85, 247, 0.2), transparent 70%),
26
- radial-gradient(30rem 30rem at 100% 80%, rgba(52, 211, 153, 0.12), transparent 70%),
27
- #0b0d1a;
28
- background-attachment: fixed;
29
- }
30
-
31
- ::selection {
32
- background: rgba(129, 140, 248, 0.35);
33
- }
34
-
35
- * {
36
- scrollbar-width: thin;
37
- scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
38
- }
39
- *::-webkit-scrollbar {
40
- width: 10px;
41
- height: 10px;
42
- }
43
- *::-webkit-scrollbar-thumb {
44
- background: rgba(255, 255, 255, 0.14);
45
- border-radius: 8px;
46
- }
47
- *::-webkit-scrollbar-track {
48
- background: transparent;
49
- }
50
-
51
- @layer components {
52
- /* Frosted-glass surfaces. */
53
- .glass {
54
- border-width: 1px;
55
- border-style: solid;
56
- border-color: var(--admin-border, rgba(125, 174, 235, 0.2));
57
- background: var(--admin-surface, rgba(10, 24, 45, 0.78));
58
- box-shadow: 0 8px 32px rgba(2, 6, 23, 0.45);
59
- backdrop-filter: blur(20px);
60
- -webkit-backdrop-filter: blur(20px);
61
- }
62
- .glass-card {
63
- @apply glass rounded-2xl p-5;
64
- }
65
- .glass-panel {
66
- @apply glass rounded-2xl;
67
- }
68
-
69
- /* Gradients used for accents. */
70
- .brand-text {
71
- @apply bg-gradient-to-r from-indigo-300 via-violet-300 to-cyan-300 bg-clip-text text-transparent;
72
- }
73
- .glass-h3 {
74
- @apply text-sm font-semibold uppercase tracking-wider text-slate-300;
75
- }
76
-
77
- /* Inputs / selects. */
78
- .glass-input {
79
- @apply w-full rounded-xl border border-white/10 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 transition-colors focus:border-indigo-300/50 focus:outline-none focus:ring-2 focus:ring-indigo-400/40;
80
- background: rgba(255, 255, 255, 0.05);
81
- }
82
- .glass-input:focus {
83
- background: rgba(255, 255, 255, 0.08);
84
- }
85
- .glass-code {
86
- @apply rounded-xl border border-white/10 bg-black/30 font-mono text-xs text-slate-200 shadow-inner backdrop-blur-xl;
87
- }
88
-
89
- /* Buttons. */
90
- .glass-btn {
91
- @apply inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-2 text-sm font-semibold text-slate-100 transition-all hover:-translate-y-px hover:brightness-110 disabled:pointer-events-none disabled:opacity-50;
92
- background: color-mix(in srgb, var(--admin-blue) 15%, transparent);
93
- border: 1px solid color-mix(in srgb, var(--admin-blue) 40%, transparent);
94
- }
95
- .glass-btn-primary {
96
- @apply glass-btn text-white;
97
- background: linear-gradient(135deg, rgba(38, 130, 225, 0.55), rgba(90, 67, 183, 0.45));
98
- border-color: color-mix(in srgb, var(--admin-blue) 48%, transparent);
99
- box-shadow: 0 8px 24px color-mix(in srgb, var(--admin-blue) 17%, transparent);
100
- font-size: 0.72rem;
101
- font-weight: 700;
102
- padding: 0.55rem 0.9rem;
103
- }
104
- .glass-btn-primary:hover {
105
- background: linear-gradient(135deg, rgba(56, 150, 245, 0.65), rgba(110, 80, 205, 0.55));
106
- filter: brightness(1.12);
107
- }
108
- .glass-btn-success {
109
- @apply glass-btn text-white;
110
- background: linear-gradient(135deg, rgba(16, 185, 129, 0.7), rgba(5, 150, 105, 0.65));
111
- border-color: rgba(52, 211, 153, 0.4);
112
- }
113
- .glass-btn-danger {
114
- @apply glass-btn;
115
- background: color-mix(in srgb, #f43f5e 45%, transparent);
116
- border-color: color-mix(in srgb, #fb7185 45%, transparent);
117
- color: #fecdd3;
118
- }
119
- .glass-btn-danger:hover {
120
- background: color-mix(in srgb, #f43f5e 60%, transparent);
121
- }
122
-
123
- /* Small action buttons for tables / inline rows. */
124
- .glass-chip-btn {
125
- @apply inline-flex cursor-pointer items-center rounded-lg px-2.5 py-1 text-xs font-medium text-slate-300 transition-colors hover:brightness-110 hover:text-white;
126
- background: color-mix(in srgb, var(--admin-blue) 13%, transparent);
127
- border: 1px solid color-mix(in srgb, var(--admin-blue) 34%, transparent);
128
- color: color-mix(in srgb, var(--admin-ink, #eef6ff) 84%, transparent);
129
- }
130
- .glass-chip-btn:hover {
131
- background: color-mix(in srgb, var(--admin-blue) 22%, transparent);
132
- }
133
- .glass-chip-btn-danger {
134
- @apply glass-chip-btn;
135
- color: #fda4af;
136
- background: color-mix(in srgb, #f43f5e 24%, transparent);
137
- border-color: color-mix(in srgb, #fb7185 32%, transparent);
138
- }
139
- .glass-chip-btn-danger:hover {
140
- background: color-mix(in srgb, #f43f5e 45%, transparent);
141
- color: #ffe4e6;
142
- }
143
- .glass-chip-btn-primary {
144
- @apply glass-chip-btn text-white;
145
- background: linear-gradient(135deg, rgba(38, 130, 225, 0.55), rgba(90, 67, 183, 0.45));
146
- border-color: color-mix(in srgb, var(--admin-blue) 48%, transparent);
147
- box-shadow: 0 8px 24px color-mix(in srgb, var(--admin-blue) 17%, transparent);
148
- font-weight: 700;
149
- }
150
- .glass-chip-btn-primary:hover {
151
- background: linear-gradient(135deg, rgba(56, 150, 245, 0.65), rgba(110, 80, 205, 0.55));
152
- color: #fff;
153
- }
154
-
155
- /* Navigation. */
156
- .glass-nav {
157
- @apply flex w-full cursor-pointer items-center gap-2.5 rounded-xl px-3 py-2 text-left text-sm text-slate-400 transition-colors hover:bg-white/10 hover:text-slate-100;
158
- }
159
- .glass-nav-active {
160
- @apply glass-nav;
161
- color: #fff;
162
- background: linear-gradient(135deg, color-mix(in srgb, var(--admin-blue) 55%, transparent), color-mix(in srgb, var(--admin-violet) 45%, transparent));
163
- border: 1px solid color-mix(in srgb, var(--admin-violet) 40%, transparent);
164
- }
165
-
166
- /* Tables. */
167
- .glass-table {
168
- @apply w-full text-sm;
169
- }
170
- .glass-table th {
171
- @apply px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-slate-500;
172
- }
173
- .glass-table td {
174
- @apply border-t border-white/[0.06] px-3 py-2.5;
175
- }
176
- .glass-table tbody tr {
177
- @apply transition-colors hover:bg-white/5;
178
- }
179
-
180
- /* Small pill/badge. */
181
- .chip {
182
- @apply inline-flex items-center rounded-full border border-white/10 px-2.5 py-0.5 text-xs font-medium text-slate-300;
183
- background: rgba(255, 255, 255, 0.07);
184
- }
185
-
186
- /* Live status dot. */
187
- .dot {
188
- @apply inline-block h-2.5 w-2.5 rounded-full;
189
- }
190
- .dot-ok {
191
- @apply dot bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.8)];
192
- }
193
- .dot-bad {
194
- @apply dot bg-rose-500 shadow-[0_0_12px_rgba(244,63,94,0.7)];
195
- }
196
-
197
- /* Provider cards (AI Providers redesign). */
198
- .provider-card {
199
- display: flex;
200
- flex-direction: column;
201
- gap: 0.65rem;
202
- padding: 0.95rem;
203
- border: 1px solid rgba(112, 168, 228, 0.17);
204
- border-color: hsl(var(--card-accent, 220 15% 40%) / 0.28);
205
- border-radius: var(--admin-radius, 0.8rem);
206
- background: rgba(8, 25, 48, 0.68);
207
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 14px 42px rgba(0, 0, 0, 0.14);
208
- backdrop-filter: blur(calc(var(--admin-glass, 0) * 20px));
209
- -webkit-backdrop-filter: blur(calc(var(--admin-glass, 0) * 20px));
210
- transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
211
- }
212
- .provider-card:hover { border-color: hsl(var(--card-accent, 220 15% 40%) / 0.5); }
213
- .provider-card.is-on { --card-accent: 152 60% 45%; }
214
- .provider-card.is-warn { --card-accent: 38 90% 50%; }
215
- .provider-card.is-off { --card-accent: 220 15% 40%; }
216
-
217
- /* Fade out → vanish → fade in when a provider is toggled. */
218
- .provider-card.is-switch-out {
219
- animation: provider-switch-out 0.28s cubic-bezier(0.4, 0, 0.6, 1) forwards;
220
- }
221
- .provider-card.is-switch-in {
222
- animation: provider-switch-in 0.42s cubic-bezier(0.22, 1, 0.36, 1);
223
- }
224
- @keyframes provider-switch-out {
225
- to { opacity: 0; transform: scale(0.94); filter: blur(1px); }
226
- }
227
- @keyframes provider-switch-in {
228
- from { opacity: 0; transform: translateY(8px) scale(0.96); }
229
- to { opacity: 1; transform: translateY(0) scale(1); }
230
- }
231
-
232
- .provider-avatar {
233
- @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold;
234
- background: hsl(var(--avatar-hue, 220) 70% 45% / 0.25);
235
- color: hsl(var(--avatar-hue, 220) 80% 80%);
236
- border: 1px solid hsl(var(--avatar-hue, 220) 70% 55% / 0.35);
237
- }
238
-
239
- .provider-badge { @apply inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[10px] font-medium leading-none; }
240
- .provider-badge-ok { @apply provider-badge bg-emerald-500/15 text-emerald-300 border border-emerald-500/25; }
241
- .provider-badge-warn { @apply provider-badge bg-amber-500/15 text-amber-300 border border-amber-500/25; }
242
- .provider-badge-mute { @apply provider-badge bg-slate-500/15 text-slate-400 border border-slate-500/20; }
243
- .provider-badge-accent { @apply provider-badge bg-indigo-500/15 text-indigo-300 border border-indigo-500/25; }
244
- .provider-badge-local { @apply provider-badge bg-cyan-500/15 text-cyan-300 border border-cyan-500/25; }
245
-
246
- .provider-filter-bar {
247
- display: flex;
248
- flex-wrap: wrap;
249
- align-items: center;
250
- gap: 0.5rem;
251
- position: sticky;
252
- top: 0.5rem;
253
- z-index: 10;
254
- padding: 0.6rem 0.75rem;
255
- border: 1px solid color-mix(in srgb, var(--admin-blue) 24%, transparent);
256
- border-radius: 0.7rem;
257
- background: rgba(7, 30, 58, 0.6);
258
- backdrop-filter: blur(20px) saturate(135%);
259
- -webkit-backdrop-filter: blur(20px) saturate(135%);
260
- box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.35);
261
- }
262
-
263
- /* Keep the provider grid visible behind dialogs; the editor should not make
264
- * the entire AI Providers page look empty or disappear. */
265
- .provider-modal-backdrop {
266
- @apply fixed inset-0 z-50 flex items-center justify-center;
267
- background: rgba(2, 8, 18, 0.42);
268
- backdrop-filter: blur(4px) saturate(0.6);
269
- -webkit-backdrop-filter: blur(4px) saturate(0.6);
270
- transition: opacity 0.22s ease, background-color 0.22s ease,
271
- backdrop-filter 0.22s ease, -webkit-backdrop-filter 0.22s ease;
272
- }
273
- .provider-modal {
274
- width: 100%;
275
- max-width: 28rem;
276
- margin-inline: 1rem;
277
- padding: 1.25rem;
278
- border: 1px solid rgba(92, 185, 255, 0.3);
279
- border-radius: 0.75rem;
280
- background: rgba(7, 30, 58, 0.52);
281
- box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55);
282
- backdrop-filter: blur(20px) saturate(135%);
283
- -webkit-backdrop-filter: blur(20px) saturate(135%);
284
- animation: admin-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1);
285
- }
286
-
287
- /* Large account/workspace settings dialog (Profile, Security, Project, About). */
288
- .settings-dialog {
289
- display: flex;
290
- flex-direction: column;
291
- width: min(720px, 94vw);
292
- max-height: min(85vh, 760px);
293
- margin-inline: 1rem;
294
- border: 1px solid rgba(112, 168, 228, 0.2);
295
- border-radius: 0.6rem;
296
- background: rgba(9, 22, 43, 0.92);
297
- box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55);
298
- backdrop-filter: blur(20px) saturate(135%);
299
- -webkit-backdrop-filter: blur(20px) saturate(135%);
300
- animation: admin-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1);
301
- }
302
- .settings-header {
303
- display: flex;
304
- align-items: flex-start;
305
- justify-content: space-between;
306
- gap: 1rem;
307
- padding: 1.1rem 1.25rem 0.9rem;
308
- border-bottom: 1px solid rgba(112, 168, 228, 0.14);
309
- }
310
- .settings-header h3 {
311
- margin: 0.15rem 0 0;
312
- color: var(--admin-ink, #eef6ff);
313
- font-size: 1rem;
314
- font-weight: 700;
315
- }
316
- .settings-body {
317
- display: flex;
318
- flex-direction: column;
319
- gap: 0.9rem;
320
- padding: 1rem 1.25rem 1.25rem;
321
- overflow-y: auto;
322
- }
323
- .settings-section {
324
- border: 1px solid rgba(112, 168, 228, 0.14);
325
- border-radius: 0.6rem;
326
- background: rgba(10, 24, 45, 0.5);
327
- padding: 0.9rem 1rem;
328
- }
329
- .settings-section h4 {
330
- margin: 0 0 0.15rem;
331
- color: var(--admin-ink, #eef6ff);
332
- font-size: 0.72rem;
333
- font-weight: 700;
334
- letter-spacing: 0.04em;
335
- }
336
- .settings-desc {
337
- margin: 0 0 0.8rem;
338
- color: #6f89a7;
339
- font-size: 0.62rem;
340
- line-height: 1.5;
341
- }
342
- .settings-row {
343
- display: grid;
344
- grid-template-columns: 1fr 1fr;
345
- gap: 0.75rem;
346
- }
347
- .settings-row:not(:last-child) {
348
- margin-bottom: 0.75rem;
349
- }
350
- .settings-field {
351
- display: flex;
352
- flex-direction: column;
353
- gap: 0.3rem;
354
- }
355
- .settings-field .admin-overline {
356
- margin: 0;
357
- }
358
- .settings-field .glass-input[readonly] {
359
- color: #6f89a7;
360
- background: rgba(255, 255, 255, 0.03);
361
- cursor: default;
362
- }
363
- .settings-actions {
364
- display: flex;
365
- justify-content: flex-end;
366
- margin-top: 0.8rem;
367
- }
368
- .settings-status {
369
- margin-top: 0.7rem;
370
- padding: 0.45rem 0.65rem;
371
- border-radius: 0.45rem;
372
- border: 1px solid;
373
- font-size: 0.62rem;
374
- }
375
- .settings-status.ok {
376
- border-color: rgba(52, 211, 153, 0.3);
377
- background: rgba(16, 185, 129, 0.1);
378
- color: #6ee7b7;
379
- }
380
- .settings-status.err {
381
- border-color: rgba(251, 113, 133, 0.3);
382
- background: rgba(244, 63, 94, 0.1);
383
- color: #fda4af;
384
- }
385
- .settings-facts {
386
- display: grid;
387
- grid-template-columns: repeat(2, minmax(0, 1fr));
388
- gap: 0.5rem 1rem;
389
- }
390
- .settings-facts div {
391
- display: flex;
392
- flex-direction: column;
393
- gap: 0.1rem;
394
- min-width: 0;
395
- }
396
- .settings-facts span {
397
- color: #6f89a7;
398
- font-size: 0.5rem;
399
- letter-spacing: 0.08em;
400
- }
401
- .settings-facts b {
402
- overflow: hidden;
403
- color: #cfe3fb;
404
- font-size: 0.66rem;
405
- font-weight: 600;
406
- text-overflow: ellipsis;
407
- white-space: nowrap;
408
- }
409
- .settings-package {
410
- margin-top: 0.9rem;
411
- padding-top: 0.9rem;
412
- border-top: 1px solid rgba(112, 168, 228, 0.14);
413
- }
414
- @media (max-width: 560px) {
415
- .settings-row {
416
- grid-template-columns: 1fr;
417
- }
418
- .settings-facts {
419
- grid-template-columns: 1fr;
420
- }
421
- }
422
- }
423
-
424
- /* Aurora workspace shell inspired by the supplied desktop reference. */
425
- :root {
426
- --admin-bg: #040b18;
427
- --admin-surface: rgba(10, 24, 45, 0.78);
428
- --admin-surface-strong: rgba(12, 29, 54, 0.94);
429
- --admin-border: rgba(125, 174, 235, 0.2);
430
- --admin-border-bright: rgba(82, 160, 255, 0.55);
431
- --admin-ink: #edf6ff;
432
- --admin-muted: #849ab7;
433
- --admin-blue: #54b7ff;
434
- --admin-violet: #9f7bff;
435
- --admin-pink: #f36eb8;
436
- }
437
-
438
- html,
439
- body,
440
- #root {
441
- min-height: 100%;
442
- }
443
-
444
- body {
445
- min-width: 320px;
446
- overflow-x: hidden;
447
- background: var(--admin-bg);
448
- }
449
-
450
- button,
451
- input,
452
- textarea,
453
- select {
454
- font: inherit;
455
- }
456
-
457
- button {
458
- cursor: pointer;
459
- }
460
-
461
- .bg-mesh {
462
- background:
463
- radial-gradient(50rem 34rem at 56% -12%, rgba(27, 93, 184, 0.28), transparent 72%),
464
- radial-gradient(35rem 30rem at 0% 88%, rgba(7, 106, 170, 0.22), transparent 72%),
465
- radial-gradient(32rem 30rem at 96% 70%, rgba(105, 47, 190, 0.14), transparent 72%),
466
- linear-gradient(135deg, #030915 0%, #071326 52%, #040a16 100%);
467
- background-attachment: fixed;
468
- }
469
-
470
- .admin-shell {
471
- --admin-mesh: 0.32;
472
- --admin-glass: 0;
473
- --admin-radius: 13px;
474
- display: flex;
475
- width: var(--admin-shell-width, 80vw);
476
- max-width: 100vw;
477
- min-height: 100vh;
478
- margin: 0 auto;
479
- color: var(--admin-ink);
480
- isolation: isolate;
481
- }
482
-
483
- .admin-shell .workspace-panel,
484
- .admin-shell .glass-card,
485
- .admin-shell .role-box,
486
- .admin-shell .overview-stat {
487
- border-radius: var(--admin-radius, 0.8rem);
488
- backdrop-filter: blur(calc(var(--admin-glass, 0) * 20px));
489
- -webkit-backdrop-filter: blur(calc(var(--admin-glass, 0) * 20px));
490
- }
491
- .admin-shell .glass-card,
492
- .admin-shell .role-box,
493
- .admin-shell .overview-stat {
494
- transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
495
- }
496
-
497
- .admin-particles {
498
- position: fixed;
499
- inset: 0;
500
- z-index: 0;
501
- overflow: hidden;
502
- pointer-events: none;
503
- }
504
- .admin-particles i {
505
- position: absolute;
506
- bottom: -3rem;
507
- width: var(--s, 6px);
508
- height: var(--s, 6px);
509
- border-radius: 50%;
510
- background: radial-gradient(circle, rgba(130, 208, 255, 0.95), rgba(130, 208, 255, 0) 72%);
511
- opacity: 0;
512
- animation: admin-float var(--d, 24s) linear infinite;
513
- }
514
-
515
- @keyframes admin-float {
516
- 0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
517
- 10% { opacity: var(--o, 0.7); }
518
- 50% { transform: translateY(-52vh) translateX(var(--dx, 20px)) scale(1); }
519
- 90% { opacity: var(--o, 0.7); }
520
- 100% { transform: translateY(-108vh) translateX(var(--dx2, -20px)) scale(0.6); opacity: 0; }
521
- }
522
- @media (prefers-reduced-motion: reduce) {
523
- .admin-particles { opacity: 0 !important; }
524
- }
525
-
526
- .admin-login {
527
- position: relative;
528
- overflow: hidden;
529
- }
530
-
531
- .admin-boot {
532
- min-height: 100vh;
533
- display: flex;
534
- align-items: center;
535
- justify-content: center;
536
- color: var(--admin-muted, #98aec9);
537
- }
538
-
539
- .admin-login::before,
540
- .admin-login::after {
541
- position: absolute;
542
- width: 38rem;
543
- height: 15rem;
544
- border: 1px solid rgba(78, 172, 255, 0.18);
545
- border-radius: 50%;
546
- content: "";
547
- transform: rotate(-24deg);
548
- }
549
-
550
- .admin-login::before { top: 10%; left: -14rem; box-shadow: 0 0 80px rgba(32, 140, 255, 0.12); }
551
- .admin-login::after { right: -13rem; bottom: 12%; border-color: rgba(178, 104, 255, 0.2); transform: rotate(24deg); }
552
-
553
- .admin-login-card {
554
- position: relative;
555
- z-index: 1;
556
- border-color: rgba(84, 183, 255, 0.3);
557
- background: linear-gradient(145deg, rgba(13, 35, 67, 0.87), rgba(10, 17, 40, 0.88));
558
- box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55);
559
- }
560
-
561
- .admin-login.theme-midnight .admin-login-card {
562
- border-color: rgba(120, 191, 255, 0.28);
563
- background: linear-gradient(145deg, rgba(15, 29, 51, 0.92), rgba(6, 12, 24, 0.92));
564
- box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55);
565
- }
566
- .admin-login.theme-midnight {
567
- background: radial-gradient(45rem 34rem at 55% -15%, rgba(51, 93, 137, 0.28), transparent 72%), linear-gradient(135deg, #02050b, #07111f 54%, #030711);
568
- background-attachment: fixed;
569
- }
570
- .admin-login.theme-violet .admin-login-card {
571
- border-color: rgba(198, 140, 255, 0.32);
572
- background: linear-gradient(145deg, rgba(37, 22, 74, 0.9), rgba(19, 10, 42, 0.92));
573
- box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55);
574
- }
575
- .admin-login.theme-violet {
576
- background: radial-gradient(48rem 34rem at 60% -12%, rgba(117, 58, 194, 0.36), transparent 72%), radial-gradient(35rem 28rem at 0% 85%, rgba(53, 65, 176, 0.26), transparent 72%), #0b071b;
577
- background-attachment: fixed;
578
- }
579
-
580
- .admin-login .glass-input {
581
- border-color: rgba(125, 174, 235, 0.22);
582
- background: rgba(255, 255, 255, 0.05);
583
- }
584
- .admin-login .glass-input:focus {
585
- border-color: var(--admin-blue);
586
- background: rgba(255, 255, 255, 0.08);
587
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--admin-blue) 30%, transparent);
588
- }
589
- .admin-login .glass-btn-primary {
590
- background: linear-gradient(135deg, color-mix(in srgb, var(--admin-blue) 78%, #00000000), color-mix(in srgb, var(--admin-violet) 72%, #00000000));
591
- border-color: color-mix(in srgb, var(--admin-violet) 55%, transparent);
592
- box-shadow: 0 6px 24px -6px color-mix(in srgb, var(--admin-blue) 60%, transparent);
593
- }
594
- .admin-login .glass-btn-primary:hover {
595
- background: linear-gradient(135deg, color-mix(in srgb, var(--admin-blue) 90%, #00000000), color-mix(in srgb, var(--admin-violet) 85%, #00000000));
596
- }
597
- .admin-login .brand-text {
598
- background-image: linear-gradient(90deg, color-mix(in srgb, var(--admin-blue) 80%, white), color-mix(in srgb, var(--admin-violet) 80%, white) 60%, color-mix(in srgb, var(--admin-pink) 80%, white));
599
- }
600
-
601
- .admin-shell::before {
602
- position: fixed;
603
- inset: 0;
604
- z-index: -1;
605
- pointer-events: none;
606
- content: "";
607
- opacity: var(--admin-mesh-opacity, 0.3);
608
- background-image: linear-gradient(rgba(95, 164, 241, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 164, 241, 0.045) 1px, transparent 1px);
609
- background-size: 48px 48px;
610
- mask-image: linear-gradient(to bottom, black, transparent 78%);
611
- }
612
-
613
- .admin-sidebar {
614
- position: sticky;
615
- top: 0;
616
- display: flex;
617
- flex: 0 0 246px;
618
- flex-direction: column;
619
- min-height: 100vh;
620
- padding: 1.35rem 1rem;
621
- border-right: 1px solid rgba(112, 168, 228, 0.16);
622
- background: rgba(3, 12, 27, 0.74);
623
- backdrop-filter: blur(24px);
624
- }
625
-
626
- .admin-brand {
627
- display: flex;
628
- align-items: center;
629
- gap: 0.65rem;
630
- padding: 0.3rem 0.5rem 1.25rem;
631
- }
632
-
633
- .admin-brand img {
634
- width: 34px;
635
- height: 34px;
636
- filter: drop-shadow(0 0 12px rgba(68, 165, 255, 0.45));
637
- }
638
-
639
- .admin-brand div {
640
- display: flex;
641
- flex-direction: column;
642
- gap: 0.12rem;
643
- }
644
-
645
- .admin-brand strong {
646
- color: #f1f8ff;
647
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
648
- font-size: 0.86rem;
649
- letter-spacing: 0.17em;
650
- }
651
-
652
- .admin-brand span,
653
- .admin-project-card > span:last-child {
654
- color: var(--admin-muted);
655
- font-size: 0.62rem;
656
- }
657
-
658
- .admin-close-mobile,
659
- .admin-mobile-menu {
660
- display: none;
661
- }
662
-
663
- .admin-project-card,
664
- .admin-side-widget {
665
- padding: 0.85rem;
666
- border: 1px solid rgba(105, 171, 245, 0.2);
667
- border-radius: 0.8rem;
668
- background: linear-gradient(145deg, rgba(29, 82, 143, 0.26), rgba(8, 25, 51, 0.42));
669
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 14px 35px rgba(0, 0, 0, 0.16);
670
- }
671
-
672
- .admin-project-card {
673
- display: flex;
674
- flex-direction: column;
675
- gap: 0.35rem;
676
- margin-bottom: 1.3rem;
677
- }
678
-
679
- .admin-project-card strong {
680
- overflow: hidden;
681
- color: #f1f8ff;
682
- font-size: 0.79rem;
683
- text-overflow: ellipsis;
684
- white-space: nowrap;
685
- }
686
-
687
- .admin-project-db {
688
- overflow: hidden;
689
- color: var(--admin-muted);
690
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
691
- font-size: 0.62rem;
692
- font-style: normal;
693
- text-overflow: ellipsis;
694
- white-space: nowrap;
695
- }
696
-
697
- .admin-project-card span:last-child {
698
- display: flex;
699
- align-items: center;
700
- gap: 0.35rem;
701
- }
702
-
703
- .admin-overline {
704
- color: #63bdff;
705
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
706
- font-size: 0.57rem;
707
- font-weight: 700;
708
- letter-spacing: 0.13em;
709
- }
710
-
711
- .status-dot {
712
- display: inline-block;
713
- width: 0.44rem;
714
- height: 0.44rem;
715
- border-radius: 50%;
716
- }
717
-
718
- .status-dot.good {
719
- background: #5ef0b3;
720
- box-shadow: 0 0 10px rgba(94, 240, 179, 0.9);
721
- }
722
-
723
- .admin-nav-label {
724
- margin: 0.8rem 0 0.45rem 0.55rem;
725
- color: #536c8c;
726
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
727
- font-size: 0.56rem;
728
- letter-spacing: 0.16em;
729
- text-transform: uppercase;
730
- }
731
-
732
- .admin-nav {
733
- display: flex;
734
- flex-direction: column;
735
- gap: 0.2rem;
736
- }
737
-
738
- .admin-nav button {
739
- display: flex;
740
- align-items: center;
741
- gap: 0.65rem;
742
- width: 100%;
743
- padding: 0.63rem 0.65rem;
744
- border: 1px solid transparent;
745
- border-radius: 0.58rem;
746
- color: #849bb6;
747
- background: transparent;
748
- text-align: left;
749
- font-size: 0.7rem;
750
- transition: 160ms ease;
751
- }
752
-
753
- .admin-nav button:hover,
754
- .admin-nav button.is-active {
755
- border-color: rgba(74, 166, 255, 0.29);
756
- color: #e9f7ff;
757
- background: linear-gradient(90deg, rgba(40, 137, 235, 0.22), rgba(76, 83, 212, 0.12));
758
- box-shadow: inset 3px 0 #55b9ff, 0 8px 24px rgba(26, 91, 175, 0.1);
759
- }
760
-
761
- .admin-nav-icon {
762
- display: grid;
763
- width: 1.15rem;
764
- place-items: center;
765
- color: #62bfff;
766
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
767
- font-size: 0.74rem;
768
- }
769
-
770
- .admin-nav button b {
771
- margin-left: auto;
772
- color: #f18ac6;
773
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
774
- font-size: 0.46rem;
775
- }
776
-
777
- .admin-side-widget {
778
- margin-top: auto;
779
- margin-bottom: 1rem;
780
- }
781
-
782
- .admin-inspector .admin-side-widget {
783
- margin-top: 1rem;
784
- }
785
-
786
- .admin-widget-heading,
787
- .load-line {
788
- display: flex;
789
- align-items: center;
790
- }
791
-
792
- .admin-widget-heading {
793
- justify-content: space-between;
794
- margin-bottom: 0.8rem;
795
- color: #6b84a3;
796
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
797
- font-size: 0.55rem;
798
- letter-spacing: 0.1em;
799
- }
800
-
801
- .admin-widget-heading b {
802
- color: #5ef0b3;
803
- font-size: 0.48rem;
804
- }
805
-
806
- .load-line {
807
- gap: 0.45rem;
808
- margin-top: 0.55rem;
809
- color: #7892b1;
810
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
811
- font-size: 0.55rem;
812
- }
813
-
814
- .load-line > span {
815
- width: 1.8rem;
816
- }
817
-
818
- .load-line i {
819
- flex: 1;
820
- height: 0.25rem;
821
- overflow: hidden;
822
- border-radius: 999px;
823
- background: rgba(126, 169, 215, 0.18);
824
- }
825
-
826
- .load-line i b {
827
- display: block;
828
- height: 100%;
829
- border-radius: inherit;
830
- background: linear-gradient(90deg, #3f9bff, #6cd9ff);
831
- box-shadow: 0 0 9px rgba(84, 183, 255, 0.75);
832
- }
833
-
834
- .load-line i b.violet {
835
- background: linear-gradient(90deg, #8373ff, #c186ff);
836
- box-shadow: 0 0 9px rgba(159, 123, 255, 0.75);
837
- }
838
-
839
- .load-line strong {
840
- width: 1.9rem;
841
- color: #b4c9e3;
842
- font-size: 0.55rem;
843
- font-weight: 500;
844
- text-align: right;
845
- }
846
-
847
- .admin-signout {
848
- padding: 0.65rem;
849
- border: 0;
850
- color: #7590ae;
851
- background: transparent;
852
- text-align: left;
853
- font-size: 0.68rem;
854
- }
855
-
856
- .admin-signout:hover {
857
- color: #ff8bbd;
858
- }
859
-
860
- .admin-signout span {
861
- margin-right: 0.42rem;
862
- color: #f285bb;
863
- }
864
-
865
- .admin-main-shell {
866
- position: relative;
867
- min-width: 0;
868
- flex: 1;
869
- }
870
-
871
- .admin-topbar {
872
- position: relative;
873
- z-index: 10;
874
- display: flex;
875
- align-items: center;
876
- gap: 1.25rem;
877
- min-height: 66px;
878
- padding: 0 1.65rem;
879
- border-bottom: 1px solid rgba(112, 168, 228, 0.15);
880
- background: rgba(4, 14, 29, 0.62);
881
- backdrop-filter: blur(24px);
882
- }
883
-
884
- .admin-window-tab {
885
- display: flex;
886
- align-items: center;
887
- gap: 0.55rem;
888
- align-self: stretch;
889
- min-width: 170px;
890
- padding: 0 1.2rem;
891
- border-right: 1px solid rgba(112, 168, 228, 0.12);
892
- border-bottom: 2px solid #56baff;
893
- color: #edf7ff;
894
- font-size: 0.72rem;
895
- }
896
-
897
- .window-tab-mark {
898
- color: #63c5ff;
899
- font-size: 0.86rem;
900
- }
901
-
902
- .window-tab-close {
903
- margin-left: auto;
904
- color: #7490ad;
905
- font-size: 1rem;
906
- }
907
-
908
- .admin-search {
909
- display: flex;
910
- align-items: center;
911
- gap: 0.55rem;
912
- width: min(370px, 32vw);
913
- padding: 0.53rem 0.7rem;
914
- border: 1px solid rgba(112, 168, 228, 0.16);
915
- border-radius: 0.5rem;
916
- color: #6e87a5;
917
- background: rgba(20, 46, 79, 0.32);
918
- cursor: pointer;
919
- transition: border-color 150ms ease, background 150ms ease;
920
- }
921
- .admin-search:hover { border-color: rgba(112, 168, 228, 0.32); background: rgba(20, 46, 79, 0.45); }
922
-
923
- .admin-search input {
924
- min-width: 0;
925
- flex: 1;
926
- border: 0;
927
- outline: 0;
928
- color: #e5f4ff;
929
- background: transparent;
930
- font-size: 0.68rem;
931
- cursor: pointer;
932
- }
933
- .admin-search input:focus { cursor: text; }
934
-
935
- .admin-search kbd {
936
- color: #6884a3;
937
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
938
- font-size: 0.52rem;
939
- }
940
-
941
- .admin-search {
942
- position: relative;
943
- }
944
-
945
- .admin-search-results {
946
- position: absolute;
947
- top: calc(100% + 0.45rem);
948
- left: 0;
949
- right: 0;
950
- z-index: 9999;
951
- display: flex;
952
- flex-direction: column;
953
- padding: 0.35rem;
954
- border: 1px solid rgba(112, 168, 228, 0.2);
955
- border-radius: 0.6rem;
956
- background: rgba(9, 22, 43, 0.92);
957
- backdrop-filter: blur(20px) saturate(135%);
958
- box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55);
959
- overflow: hidden;
960
- }
961
-
962
- .admin-search-results button {
963
- display: flex;
964
- align-items: center;
965
- gap: 0.6rem;
966
- width: 100%;
967
- padding: 0.5rem 0.6rem;
968
- border: 0;
969
- border-radius: 0.45rem;
970
- color: #dcecff;
971
- background: transparent;
972
- font-size: 0.7rem;
973
- text-align: left;
974
- cursor: pointer;
975
- }
976
-
977
- .admin-search-results button:hover,
978
- .admin-search-results button.is-active {
979
- color: #eef8ff;
980
- background: rgba(84, 183, 255, 0.14);
981
- }
982
-
983
- .admin-search-result-icon {
984
- display: grid;
985
- place-items: center;
986
- width: 1.4rem;
987
- height: 1.4rem;
988
- border-radius: 0.35rem;
989
- color: #8fb8e4;
990
- background: rgba(84, 183, 255, 0.1);
991
- font-size: 0.6rem;
992
- }
993
-
994
- .admin-search-empty {
995
- padding: 0.7rem 0.6rem;
996
- color: #6e87a5;
997
- font-size: 0.68rem;
998
- }
999
-
1000
- .admin-top-actions {
1001
- position: relative;
1002
- display: flex;
1003
- align-items: center;
1004
- gap: 0.8rem;
1005
- margin-left: auto;
1006
- }
1007
-
1008
- .top-live {
1009
- display: flex;
1010
- align-items: center;
1011
- gap: 0.38rem;
1012
- color: #7893b1;
1013
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1014
- font-size: 0.56rem;
1015
- }
1016
-
1017
- .admin-mobile-search {
1018
- display: none;
1019
- place-items: center;
1020
- width: 30px;
1021
- height: 30px;
1022
- border: 1px solid rgba(112, 168, 228, 0.2);
1023
- border-radius: 0.5rem;
1024
- color: #9bb4d0;
1025
- background: rgba(25, 57, 95, 0.34);
1026
- font-size: 0.78rem;
1027
- cursor: pointer;
1028
- }
1029
- .admin-mobile-search:hover { color: #fff; background: rgba(71, 161, 247, 0.2); }
1030
-
1031
-
1032
- .admin-icon-button,
1033
- .admin-user-avatar {
1034
- position: relative;
1035
- display: grid;
1036
- place-items: center;
1037
- border: 1px solid rgba(112, 168, 228, 0.2);
1038
- border-radius: 0.5rem;
1039
- color: #9bb4d0;
1040
- background: rgba(25, 57, 95, 0.34);
1041
- }
1042
-
1043
- .admin-icon-button {
1044
- width: 30px;
1045
- height: 30px;
1046
- }
1047
-
1048
- .admin-icon-button.is-active {
1049
- color: #a9ddff;
1050
- background: rgba(64, 140, 219, 0.4);
1051
- border-color: rgba(100, 200, 255, 0.65);
1052
- box-shadow: 0 0 12px rgba(100, 200, 255, 0.35);
1053
- }
1054
-
1055
- .admin-icon-button b {
1056
- position: absolute;
1057
- top: -4px;
1058
- right: -4px;
1059
- display: grid;
1060
- width: 13px;
1061
- height: 13px;
1062
- place-items: center;
1063
- border-radius: 50%;
1064
- color: #071426;
1065
- background: #64c8ff;
1066
- font-size: 0.47rem;
1067
- }
1068
-
1069
- .admin-user-avatar {
1070
- width: 31px;
1071
- height: 31px;
1072
- border-color: rgba(84, 183, 255, 0.52);
1073
- color: white;
1074
- background: linear-gradient(135deg, #2767a6, #7544a7);
1075
- font-size: 0.58rem;
1076
- font-weight: 700;
1077
- }
1078
-
1079
- .admin-breadcrumb {
1080
- display: flex;
1081
- align-items: center;
1082
- gap: 0.7rem;
1083
- min-height: 50px;
1084
- padding: 0 1.8rem;
1085
- border-bottom: 1px solid rgba(112, 168, 228, 0.12);
1086
- color: #6c85a3;
1087
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1088
- font-size: 0.58rem;
1089
- }
1090
-
1091
- .admin-breadcrumb strong {
1092
- color: #d9ebfc;
1093
- font-weight: 600;
1094
- }
1095
-
1096
- .admin-breadcrumb b {
1097
- color: #47749d;
1098
- font-size: 0.86rem;
1099
- }
1100
-
1101
- .admin-breadcrumb button {
1102
- margin-left: auto;
1103
- border: 0;
1104
- color: #7894b2;
1105
- background: transparent;
1106
- font-size: 1rem;
1107
- }
1108
-
1109
- .admin-content-layout {
1110
- display: grid;
1111
- grid-template-columns: minmax(0, 1fr) 272px;
1112
- min-height: calc(100vh - 116px);
1113
- }
1114
-
1115
- .admin-content {
1116
- min-width: 0;
1117
- padding: 2rem 2rem 5.5rem;
1118
- }
1119
-
1120
- .admin-inspector {
1121
- padding: 1.25rem 1rem 5rem;
1122
- border-left: 1px solid rgba(112, 168, 228, 0.13);
1123
- background: rgba(4, 15, 31, 0.4);
1124
- }
1125
-
1126
- .inspector-heading,
1127
- .panel-title-row,
1128
- .section-heading,
1129
- .config-footer,
1130
- .heading-actions {
1131
- display: flex;
1132
- align-items: center;
1133
- justify-content: space-between;
1134
- gap: 1rem;
1135
- }
1136
-
1137
- .inspector-heading {
1138
- color: #6e8aaa;
1139
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1140
- font-size: 0.55rem;
1141
- letter-spacing: 0.12em;
1142
- }
1143
-
1144
- .inspector-heading button {
1145
- border: 0;
1146
- color: #6e8aaa;
1147
- background: transparent;
1148
- font-size: 1rem;
1149
- }
1150
-
1151
- .inspector-preview {
1152
- display: flex;
1153
- flex-direction: column;
1154
- align-items: center;
1155
- gap: 0.3rem;
1156
- margin: 1rem 0;
1157
- padding: 1.4rem 0.8rem 1rem;
1158
- border: 1px solid rgba(88, 162, 244, 0.2);
1159
- border-radius: 0.75rem;
1160
- background: linear-gradient(145deg, rgba(17, 50, 91, 0.42), rgba(18, 17, 52, 0.34));
1161
- text-align: center;
1162
- }
1163
-
1164
- .inspector-preview strong {
1165
- margin-top: 0.6rem;
1166
- color: #eff8ff;
1167
- font-size: 0.82rem;
1168
- }
1169
-
1170
- .inspector-preview > span:last-child {
1171
- color: #7891ad;
1172
- font-size: 0.59rem;
1173
- }
1174
-
1175
- .preview-orbit,
1176
- .hero-orbit-art {
1177
- position: relative;
1178
- display: grid;
1179
- place-items: center;
1180
- border: 1px solid rgba(84, 183, 255, 0.3);
1181
- border-radius: 50%;
1182
- background: radial-gradient(circle, rgba(57, 170, 255, 0.25), rgba(56, 58, 179, 0.12) 43%, transparent 68%);
1183
- box-shadow: 0 0 32px rgba(58, 149, 255, 0.18), inset 0 0 24px rgba(94, 119, 255, 0.12);
1184
- }
1185
-
1186
- .preview-orbit {
1187
- width: 78px;
1188
- height: 78px;
1189
- }
1190
-
1191
- .preview-orbit::before,
1192
- .hero-orbit-art::before {
1193
- position: absolute;
1194
- width: 72%;
1195
- height: 28%;
1196
- border: 1px solid rgba(112, 206, 255, 0.65);
1197
- border-radius: 50%;
1198
- content: "";
1199
- transform: rotate(-28deg);
1200
- }
1201
-
1202
- .preview-orbit::after,
1203
- .hero-orbit-art::after {
1204
- position: absolute;
1205
- width: 62%;
1206
- height: 24%;
1207
- border: 1px solid rgba(178, 113, 255, 0.55);
1208
- border-radius: 50%;
1209
- content: "";
1210
- transform: rotate(42deg);
1211
- }
1212
-
1213
- .preview-orbit span,
1214
- .preview-orbit i,
1215
- .preview-orbit b,
1216
- .hero-orbit-art span,
1217
- .hero-orbit-art i,
1218
- .hero-orbit-art b {
1219
- position: absolute;
1220
- width: 5px;
1221
- height: 5px;
1222
- border-radius: 50%;
1223
- background: #64d2ff;
1224
- box-shadow: 0 0 10px #64d2ff;
1225
- }
1226
-
1227
- .preview-orbit span { top: 13px; right: 15px; }
1228
- .preview-orbit i { bottom: 16px; left: 12px; background: #c17cff; box-shadow: 0 0 10px #c17cff; }
1229
- .preview-orbit b { right: 9px; bottom: 22px; width: 3px; height: 3px; background: #5ef0b3; box-shadow: 0 0 8px #5ef0b3; }
1230
-
1231
- .inspector-tabs {
1232
- display: flex;
1233
- gap: 1.15rem;
1234
- padding: 0.2rem 0.2rem 0.7rem;
1235
- border-bottom: 1px solid rgba(112, 168, 228, 0.13);
1236
- color: #718ba9;
1237
- font-size: 0.61rem;
1238
- }
1239
-
1240
- .inspector-tabs b {
1241
- padding-bottom: 0.65rem;
1242
- margin-bottom: -0.7rem;
1243
- border-bottom: 2px solid #5cbaff;
1244
- color: #eef8ff;
1245
- font-weight: 600;
1246
- }
1247
-
1248
- .inspector-card {
1249
- margin-top: 0.75rem;
1250
- padding: 0.85rem;
1251
- border: 1px solid rgba(112, 168, 228, 0.12);
1252
- border-radius: 0.7rem;
1253
- background: rgba(17, 42, 73, 0.32);
1254
- }
1255
-
1256
- .inspector-card strong {
1257
- display: block;
1258
- margin: 0.45rem 0 0.35rem;
1259
- color: #e9f6ff;
1260
- font-size: 0.78rem;
1261
- }
1262
-
1263
- .inspector-card p {
1264
- margin: 0;
1265
- color: #829ab5;
1266
- font-size: 0.62rem;
1267
- line-height: 1.6;
1268
- }
1269
-
1270
- .inspector-list {
1271
- display: flex;
1272
- flex-direction: column;
1273
- gap: 0.3rem;
1274
- }
1275
-
1276
- .inspector-list button {
1277
- display: flex;
1278
- justify-content: space-between;
1279
- padding: 0.42rem 0;
1280
- border: 0;
1281
- border-bottom: 1px solid rgba(112, 168, 228, 0.08);
1282
- color: #a6bfd8;
1283
- background: transparent;
1284
- text-align: left;
1285
- font-size: 0.64rem;
1286
- }
1287
-
1288
- .inspector-list button:last-child { border-bottom: 0; }
1289
- .inspector-list button b { color: #58baff; }
1290
-
1291
- .workspace-action {
1292
- display: inline-flex;
1293
- align-items: center;
1294
- justify-content: center;
1295
- gap: 0.55rem;
1296
- padding: 0.62rem 0.85rem;
1297
- border: 1px solid color-mix(in srgb, var(--admin-blue) 48%, transparent);
1298
- border-radius: 0.5rem;
1299
- color: #f0f9ff;
1300
- background: linear-gradient(135deg, rgba(38, 130, 225, 0.55), rgba(90, 67, 183, 0.45));
1301
- box-shadow: 0 8px 24px color-mix(in srgb, var(--admin-blue) 17%, transparent);
1302
- font-size: 0.63rem;
1303
- font-weight: 700;
1304
- transition: 160ms ease;
1305
- }
1306
-
1307
- .workspace-action:hover { transform: translateY(-1px); filter: brightness(1.12); }
1308
-
1309
- .workspace-action {
1310
- padding: 0.5rem 0.7rem;
1311
- color: color-mix(in srgb, var(--admin-ink, #eef6ff) 86%, transparent);
1312
- background: color-mix(in srgb, var(--admin-blue) 15%, transparent);
1313
- box-shadow: none;
1314
- }
1315
-
1316
- .section-heading {
1317
- margin-bottom: 1.4rem;
1318
- }
1319
-
1320
- .section-heading-title {
1321
- display: flex;
1322
- align-items: center;
1323
- gap: 0.75rem;
1324
- }
1325
-
1326
- .section-heading-mark {
1327
- display: block;
1328
- width: 3px;
1329
- height: 27px;
1330
- border-radius: 999px;
1331
- background: linear-gradient(#5bc6ff, #8d76ff);
1332
- box-shadow: 0 0 14px rgba(83, 180, 255, 0.8);
1333
- }
1334
-
1335
- .section-heading h2 {
1336
- margin: 0;
1337
- color: #f1f8ff;
1338
- font-size: 1.18rem;
1339
- letter-spacing: -0.04em;
1340
- }
1341
-
1342
- .admin-view-stack {
1343
- display: flex;
1344
- flex-direction: column;
1345
- gap: 1rem;
1346
- }
1347
-
1348
- .overview-hero,
1349
- .config-intro {
1350
- display: flex;
1351
- align-items: center;
1352
- justify-content: space-between;
1353
- gap: 2rem;
1354
- padding: 1.5rem 1.6rem;
1355
- overflow: hidden;
1356
- border: 1px solid rgba(83, 165, 246, 0.24);
1357
- border-radius: 0.9rem;
1358
- background: linear-gradient(115deg, rgba(22, 70, 122, 0.42), rgba(21, 28, 77, 0.3) 58%, rgba(88, 39, 128, 0.27));
1359
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 18px 55px rgba(0, 0, 0, 0.18);
1360
- }
1361
-
1362
- .overview-hero h1,
1363
- .config-intro h1 {
1364
- margin: 0.55rem 0 0.4rem;
1365
- color: #f0f8ff;
1366
- font-size: clamp(1.65rem, 3vw, 2.55rem);
1367
- letter-spacing: -0.075em;
1368
- }
1369
-
1370
- .overview-hero h1 em,
1371
- .config-intro h1 em {
1372
- color: #6fcaff;
1373
- font-style: normal;
1374
- text-shadow: 0 0 24px rgba(80, 183, 255, 0.4);
1375
- }
1376
-
1377
- .overview-hero p,
1378
- .config-intro p {
1379
- max-width: 580px;
1380
- margin: 0;
1381
- color: #9ab0c9;
1382
- font-size: 0.73rem;
1383
- line-height: 1.7;
1384
- }
1385
-
1386
- .hero-orbit-art {
1387
- flex: 0 0 124px;
1388
- width: 124px;
1389
- height: 124px;
1390
- }
1391
-
1392
- .hero-orbit-art strong {
1393
- z-index: 1;
1394
- color: #aee7ff;
1395
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1396
- font-size: 1rem;
1397
- text-shadow: 0 0 16px #359cff;
1398
- }
1399
-
1400
- .hero-orbit-art span { top: 23px; right: 21px; }
1401
- .hero-orbit-art i { bottom: 26px; left: 19px; background: #d27cff; box-shadow: 0 0 10px #d27cff; }
1402
- .hero-orbit-art b { right: 17px; bottom: 30px; width: 4px; height: 4px; background: #5ef0b3; box-shadow: 0 0 8px #5ef0b3; }
1403
-
1404
- .hero-art {
1405
- position: relative;
1406
- flex: 0 0 124px;
1407
- width: 124px;
1408
- height: 124px;
1409
- display: grid;
1410
- place-items: center;
1411
- border-radius: 0.9rem;
1412
- }
1413
- .hero-art strong {
1414
- z-index: 1;
1415
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1416
- font-size: 1rem;
1417
- text-shadow: 0 0 16px currentColor;
1418
- letter-spacing: 0.02em;
1419
- }
1420
- .hero-art .ha-a,
1421
- .hero-art .ha-b,
1422
- .hero-art .ha-c {
1423
- position: absolute;
1424
- border-radius: 50%;
1425
- }
1426
-
1427
- /* bars — three rising service bars */
1428
- .hero-art--bars {
1429
- color: #5ef0b3;
1430
- border: 1px solid rgba(94, 240, 179, 0.32);
1431
- background: linear-gradient(180deg, rgba(22, 90, 92, 0.45), rgba(6, 26, 34, 0.55));
1432
- box-shadow: inset 0 0 22px rgba(94, 240, 179, 0.1);
1433
- }
1434
- .hero-art--bars .ha-a { left: 28%; bottom: 30%; width: 6px; height: 30%; background: rgba(94, 240, 179, 0.95); box-shadow: 0 0 10px rgba(94, 240, 179, 0.9); border-radius: 3px 3px 0 0; }
1435
- .hero-art--bars .ha-b { left: 43%; bottom: 30%; width: 6px; height: 46%; background: rgba(94, 240, 179, 0.7); border-radius: 3px 3px 0 0; }
1436
- .hero-art--bars .ha-c { left: 58%; bottom: 30%; width: 6px; height: 26%; background: rgba(94, 240, 179, 0.45); border-radius: 3px 3px 0 0; }
1437
-
1438
- /* stack — stacked plugin tiles */
1439
- .hero-art--stack {
1440
- color: #ffc46b;
1441
- border: 1px solid rgba(255, 196, 107, 0.32);
1442
- background: linear-gradient(180deg, rgba(120, 74, 20, 0.4), rgba(40, 22, 10, 0.55));
1443
- box-shadow: inset 0 0 22px rgba(255, 196, 107, 0.08);
1444
- }
1445
- .hero-art--stack .ha-a, .hero-art--stack .ha-b, .hero-art--stack .ha-c {
1446
- width: 58%; height: 14%; border-radius: 4px; background: rgba(255, 196, 107, 0.4);
1447
- }
1448
- .hero-art--stack .ha-a { bottom: 30%; left: 21%; }
1449
- .hero-art--stack .ha-b { bottom: 45%; left: 21%; width: 50%; background: rgba(255, 196, 107, 0.65); }
1450
- .hero-art--stack .ha-c { bottom: 60%; left: 21%; width: 34%; background: rgba(255, 196, 107, 0.9); box-shadow: 0 0 8px rgba(255, 196, 107, 0.6); }
1451
-
1452
- /* people — clients ringed around a center */
1453
- .hero-art--people {
1454
- color: #c8b4ff;
1455
- border: 1px solid rgba(200, 180, 255, 0.32);
1456
- background: linear-gradient(180deg, rgba(84, 50, 150, 0.45), rgba(30, 16, 60, 0.55));
1457
- box-shadow: inset 0 0 22px rgba(200, 180, 255, 0.1);
1458
- }
1459
- .hero-art--people .ha-a { top: 18%; right: 26%; width: 10px; height: 10px; background: rgba(200, 180, 255, 0.95); box-shadow: 0 0 8px rgba(200, 180, 255, 0.8); }
1460
- .hero-art--people .ha-b { top: 66%; left: 22%; width: 12px; height: 12px; background: rgba(160, 130, 240, 0.8); box-shadow: 0 0 8px rgba(160, 130, 240, 0.7); }
1461
- .hero-art--people .ha-c { bottom: 22%; right: 24%; width: 8px; height: 8px; background: rgba(120, 200, 255, 0.8); box-shadow: 0 0 8px rgba(120, 200, 255, 0.7); }
1462
-
1463
- /* wave — pulsing heartbeat line */
1464
- .hero-art--wave {
1465
- color: #6fe8a8;
1466
- border: 1px solid rgba(111, 232, 168, 0.32);
1467
- background: linear-gradient(180deg, rgba(18, 102, 84, 0.45), rgba(8, 28, 30, 0.55));
1468
- box-shadow: inset 0 0 22px rgba(111, 232, 168, 0.1);
1469
- }
1470
- .hero-art--wave .ha-a, .hero-art--wave .ha-b, .hero-art--wave .ha-c { border-radius: 3px; }
1471
- .hero-art--wave .ha-a { left: 18%; right: 18%; top: 52%; height: 3px; background: linear-gradient(90deg, transparent, rgba(111, 232, 168, 0.95), transparent); box-shadow: 0 0 8px rgba(111, 232, 168, 0.8); }
1472
- .hero-art--wave .ha-b { left: 44%; top: 26%; width: 8px; height: 26%; background: rgba(111, 232, 168, 0.55); transform: rotate(20deg); }
1473
- .hero-art--wave .ha-c { left: 44%; bottom: 26%; width: 8px; height: 26%; background: rgba(111, 232, 168, 0.85); box-shadow: 0 0 8px rgba(111, 232, 168, 0.6); transform: rotate(-20deg); }
1474
-
1475
- /* coins — stacked cylinder of payment */
1476
- .hero-art--coins {
1477
- color: #ffd479;
1478
- border: 1px solid rgba(255, 212, 121, 0.32);
1479
- background: linear-gradient(180deg, rgba(122, 86, 20, 0.45), rgba(44, 28, 12, 0.55));
1480
- box-shadow: inset 0 0 22px rgba(255, 212, 121, 0.08);
1481
- }
1482
- .hero-art--coins .ha-a, .hero-art--coins .ha-b, .hero-art--coins .ha-c {
1483
- left: 33%; right: 33%; height: 11%; border-radius: 50%; background: rgba(255, 212, 121, 0.55);
1484
- }
1485
- .hero-art--coins .ha-a { bottom: 28%; }
1486
- .hero-art--coins .ha-b { bottom: 43%; background: rgba(255, 212, 121, 0.75); }
1487
- .hero-art--coins .ha-c { bottom: 58%; background: rgba(255, 212, 121, 0.95); box-shadow: 0 0 8px rgba(255, 212, 121, 0.7); }
1488
-
1489
- /* cubes — stacked database shelves */
1490
- .hero-art--cubes {
1491
- color: #6fd6ff;
1492
- border: 1px solid rgba(111, 214, 255, 0.32);
1493
- background: linear-gradient(180deg, rgba(22, 74, 116, 0.5), rgba(10, 28, 50, 0.55));
1494
- box-shadow: inset 0 0 22px rgba(111, 214, 255, 0.1);
1495
- }
1496
- .hero-art--cubes .ha-a, .hero-art--cubes .ha-b, .hero-art--cubes .ha-c {
1497
- width: 46%; height: 13%; border-radius: 4px; background: rgba(111, 214, 255, 0.5);
1498
- }
1499
- .hero-art--cubes .ha-a { top: 26%; left: 27%; transform: skew(-10deg); }
1500
- .hero-art--cubes .ha-b { top: 42%; left: 27%; background: rgba(111, 214, 255, 0.75); transform: skew(-10deg); }
1501
- .hero-art--cubes .ha-c { top: 58%; left: 27%; background: rgba(111, 214, 255, 0.95); box-shadow: 0 0 8px rgba(111, 214, 255, 0.7); transform: skew(-10deg); }
1502
-
1503
- /* spark — four-petal bloom around a center */
1504
- .hero-art--spark {
1505
- color: #ff9fd6;
1506
- border: 1px solid rgba(255, 159, 214, 0.32);
1507
- background: radial-gradient(circle, rgba(150, 40, 110, 0.5), rgba(40, 16, 40, 0.55) 70%);
1508
- box-shadow: inset 0 0 22px rgba(255, 159, 214, 0.1);
1509
- }
1510
- .hero-art--spark .ha-a { top: 20%; left: 50%; width: 30%; height: 30%; transform: translateX(-50%); background: rgba(255, 159, 214, 0.35); }
1511
- .hero-art--spark .ha-b { left: 20%; top: 50%; width: 28%; height: 28%; transform: translateY(-50%); background: rgba(255, 159, 214, 0.6); }
1512
- .hero-art--spark .ha-c { right: 20%; top: 50%; width: 28%; height: 28%; transform: translateY(-50%); background: rgba(180, 200, 255, 0.55); box-shadow: 0 0 10px rgba(160, 180, 255, 0.6); }
1513
-
1514
- /* grid — plugin/extension tiles */
1515
- .hero-art--grid {
1516
- color: #ffc46b;
1517
- border: 1px solid rgba(255, 196, 107, 0.32);
1518
- background: linear-gradient(180deg, rgba(120, 74, 20, 0.4), rgba(40, 22, 10, 0.55));
1519
- box-shadow: inset 0 0 22px rgba(255, 196, 107, 0.08);
1520
- }
1521
- .hero-art--grid .ha-a, .hero-art--grid .ha-b, .hero-art--grid .ha-c {
1522
- width: 30%; height: 30%; border-radius: 5px; background: rgba(255, 196, 107, 0.4);
1523
- }
1524
- .hero-art--grid .ha-a { top: 22%; left: 22%; }
1525
- .hero-art--grid .ha-b { top: 22%; right: 22%; background: rgba(255, 196, 107, 0.6); }
1526
- .hero-art--grid .ha-c { bottom: 22%; left: 38%; width: 24%; background: rgba(255, 196, 107, 0.85); box-shadow: 0 0 8px rgba(255, 196, 107, 0.6); }
1527
-
1528
- /* cards — payment card stack */
1529
- .hero-art--cards {
1530
- color: #ffd479;
1531
- border: 1px solid rgba(255, 212, 121, 0.32);
1532
- background: linear-gradient(180deg, rgba(122, 86, 20, 0.45), rgba(44, 28, 12, 0.55));
1533
- box-shadow: inset 0 0 22px rgba(255, 212, 121, 0.08);
1534
- }
1535
- .hero-art--cards .ha-a, .hero-art--cards .ha-b, .hero-art--cards .ha-c {
1536
- left: 22%; right: 22%; height: 34%; border-radius: 6px; background: rgba(255, 212, 121, 0.35);
1537
- }
1538
- .hero-art--cards .ha-a { top: 22%; transform: rotate(-6deg); }
1539
- .hero-art--cards .ha-b { top: 34%; transform: rotate(4deg); background: rgba(255, 212, 121, 0.6); }
1540
- .hero-art--cards .ha-c { top: 46%; background: rgba(255, 212, 121, 0.9); box-shadow: 0 0 10px rgba(255, 212, 121, 0.6); }
1541
-
1542
- /* bolt — AI schema flash */
1543
- .hero-art--bolt {
1544
- color: #6fd6ff;
1545
- border: 1px solid rgba(111, 214, 255, 0.32);
1546
- background: radial-gradient(circle, rgba(30, 110, 160, 0.5), rgba(10, 28, 50, 0.55) 70%);
1547
- box-shadow: inset 0 0 22px rgba(111, 214, 255, 0.1);
1548
- }
1549
- .hero-art--bolt .ha-a { left: 46%; top: 20%; width: 30%; height: 30%; clip-path: polygon(55% 0, 15% 55%, 45% 55%, 40% 100%, 90% 42%, 55% 42%); background: rgba(111, 214, 255, 0.9); box-shadow: 0 0 12px rgba(111, 214, 255, 0.7); }
1550
- .hero-art--bolt .ha-b { right: 20%; top: 30%; width: 9px; height: 9px; border-radius: 50%; background: rgba(200, 180, 255, 0.8); box-shadow: 0 0 8px rgba(200, 180, 255, 0.7); }
1551
- .hero-art--bolt .ha-c { bottom: 24%; left: 22%; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 159, 214, 0.8); box-shadow: 0 0 8px rgba(255, 159, 214, 0.7); }
1552
-
1553
- /* ===== animated art — orbit spin, glow, breathing, floating dots ===== */
1554
- @keyframes hero-orbit-spin { to { transform: rotate(360deg); } }
1555
- @keyframes hero-counter-spin { to { transform: rotate(-360deg); } }
1556
- @keyframes orbit-ring-glow {
1557
- 0%, 100% { box-shadow: 0 0 32px rgba(58, 149, 255, 0.18), inset 0 0 24px rgba(94, 119, 255, 0.12); }
1558
- 50% { box-shadow: 0 0 48px rgba(58, 149, 255, 0.4), inset 0 0 30px rgba(94, 119, 255, 0.24); }
1559
- }
1560
- @keyframes dot-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.9); } }
1561
- @keyframes hero-text-glow { 0%, 100% { opacity: 0.85; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.6); } }
1562
- @keyframes hero-art-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
1563
- @keyframes ha-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
1564
- @keyframes ha-pulse { 0%, 100% { opacity: 0.6; filter: brightness(0.9); } 50% { opacity: 1; filter: brightness(1.45); } }
1565
-
1566
- .hero-orbit-art,
1567
- .preview-orbit {
1568
- animation: hero-orbit-spin 16s linear infinite, orbit-ring-glow 4.5s ease-in-out infinite;
1569
- }
1570
-
1571
- .hero-orbit-art strong,
1572
- .preview-orbit strong {
1573
- animation: hero-counter-spin 16s linear infinite, hero-text-glow 3.4s ease-in-out infinite;
1574
- }
1575
-
1576
- .hero-orbit-art span,
1577
- .hero-orbit-art i,
1578
- .hero-orbit-art b,
1579
- .preview-orbit span,
1580
- .preview-orbit i,
1581
- .preview-orbit b {
1582
- animation: dot-glow 2.4s ease-in-out infinite;
1583
- }
1584
- .hero-orbit-art i,
1585
- .preview-orbit i { animation-delay: 0.8s; }
1586
- .hero-orbit-art b,
1587
- .preview-orbit b { animation-delay: 1.6s; }
1588
-
1589
- .hero-art { animation: hero-art-breathe 5s ease-in-out infinite; }
1590
- .hero-art strong { animation: hero-text-glow 3.4s ease-in-out infinite; }
1591
- .hero-art .ha-a,
1592
- .hero-art .ha-b,
1593
- .hero-art .ha-c { animation: ha-pulse 3s ease-in-out infinite, ha-float 4.6s ease-in-out infinite; }
1594
- .hero-art .ha-b { animation-delay: 0.5s, 0.9s; }
1595
- .hero-art .ha-c { animation-delay: 1s, 1.8s; }
1596
-
1597
- @media (prefers-reduced-motion: reduce) {
1598
- .hero-orbit-art, .preview-orbit, .hero-art,
1599
- .hero-orbit-art strong, .preview-orbit strong, .hero-art strong,
1600
- .hero-orbit-art span, .hero-orbit-art i, .hero-orbit-art b,
1601
- .preview-orbit span, .preview-orbit i, .preview-orbit b,
1602
- .hero-art .ha-a, .hero-art .ha-b, .hero-art .ha-c { animation: none; }
1603
- }
1604
-
1605
- .overview-stat-grid {
1606
- position: relative;
1607
- z-index: 1;
1608
- display: grid;
1609
- grid-template-columns: repeat(4, minmax(0, 1fr));
1610
- gap: 0.7rem;
1611
- }
1612
-
1613
- .overview-stat {
1614
- padding: 0.95rem 1rem;
1615
- border: 1px solid rgba(112, 168, 228, 0.16);
1616
- border-radius: 0.7rem;
1617
- background: rgba(10, 30, 56, 0.56);
1618
- }
1619
-
1620
- .overview-stat > span {
1621
- color: #6e8aaa;
1622
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1623
- font-size: 0.53rem;
1624
- letter-spacing: 0.11em;
1625
- }
1626
-
1627
- .overview-stat strong {
1628
- display: block;
1629
- margin: 0.45rem 0 0.2rem;
1630
- color: #f0f8ff;
1631
- font-size: 1.5rem;
1632
- letter-spacing: -0.05em;
1633
- }
1634
-
1635
- .overview-stat strong small { color: #718baa; font-size: 0.8rem; font-weight: 500; }
1636
- .overview-stat b { color: #718ba7; font-size: 0.55rem; font-weight: 500; }
1637
- .overview-stat .stat-good { color: #5ef0b3; }
1638
- .overview-stat .stat-violet { color: #bd9aff; }
1639
-
1640
- .overview-columns {
1641
- display: grid;
1642
- grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
1643
- gap: 0.8rem;
1644
- }
1645
-
1646
- .workspace-panel {
1647
- padding: 1rem;
1648
- border: 1px solid rgba(112, 168, 228, 0.17);
1649
- border-radius: 0.8rem;
1650
- background: rgba(8, 25, 48, 0.68);
1651
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 14px 42px rgba(0, 0, 0, 0.14);
1652
- }
1653
-
1654
- .panel-title-row h3 {
1655
- margin: 0.35rem 0 0;
1656
- color: #eaf6ff;
1657
- font-size: 0.88rem;
1658
- letter-spacing: -0.03em;
1659
- }
1660
-
1661
- .text-action {
1662
- border: 0;
1663
- color: #5ebcff;
1664
- background: transparent;
1665
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1666
- font-size: 0.58rem;
1667
- }
1668
-
1669
- .surface-grid {
1670
- display: grid;
1671
- grid-auto-flow: column;
1672
- grid-template-rows: repeat(2, auto);
1673
- grid-template-columns: repeat(4, minmax(0, 1fr));
1674
- gap: 0.55rem;
1675
- margin-top: 1rem;
1676
- }
1677
-
1678
- .surface-grid .surface-card {
1679
- position: relative;
1680
- display: grid;
1681
- grid-template-columns: 38px 1fr;
1682
- grid-template-rows: auto auto;
1683
- column-gap: 0.7rem;
1684
- align-items: center;
1685
- padding: 0.8rem;
1686
- border: 1px solid var(--admin-border, rgba(125, 174, 235, 0.2));
1687
- border-radius: 0.8rem;
1688
- color: var(--admin-ink, #eef6ff);
1689
- background: var(--admin-surface, rgba(10, 24, 45, 0.78));
1690
- text-align: left;
1691
- overflow: hidden;
1692
- transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
1693
- }
1694
-
1695
- .surface-grid .surface-card::before {
1696
- content: '';
1697
- position: absolute;
1698
- inset: 0;
1699
- background: radial-gradient(14rem 6rem at 120% -30%, color-mix(in srgb, var(--acc, var(--admin-blue)) 32%, transparent), transparent 70%);
1700
- opacity: 0;
1701
- transition: opacity 180ms ease;
1702
- }
1703
-
1704
- .surface-grid .surface-card:hover {
1705
- border-color: color-mix(in srgb, var(--acc, var(--admin-blue)) 55%, transparent);
1706
- background: color-mix(in srgb, var(--acc, var(--admin-blue)) 14%, transparent);
1707
- transform: translateY(-2px);
1708
- box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--acc, var(--admin-blue)) 40%, transparent);
1709
- }
1710
-
1711
- .surface-grid .surface-card:hover::before { opacity: 1; }
1712
- .surface-grid .surface-card strong { align-self: end; font-size: 0.7rem; font-weight: 600; color: var(--admin-ink, #eef6ff); }
1713
- .surface-grid .surface-card small { grid-column: 2; color: var(--admin-muted, #849ab7); font-size: 0.56rem; }
1714
-
1715
- .surface-grid .surface-icon {
1716
- display: grid;
1717
- grid-row: 1 / 3;
1718
- width: 38px;
1719
- height: 38px;
1720
- place-items: center;
1721
- border-radius: 0.7rem;
1722
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1723
- font-size: 0.85rem;
1724
- color: var(--acc, var(--admin-blue));
1725
- background: linear-gradient(135deg, color-mix(in srgb, var(--acc, var(--admin-blue)) 28%, transparent), color-mix(in srgb, var(--acc, var(--admin-blue)) 8%, transparent));
1726
- border: 1px solid color-mix(in srgb, var(--acc, var(--admin-blue)) 34%, transparent);
1727
- box-shadow: inset 0 0 14px color-mix(in srgb, var(--acc, var(--admin-blue)) 12%, transparent);
1728
- }
1729
-
1730
- .surface-grid .surface-go {
1731
- position: absolute;
1732
- top: 0.55rem;
1733
- right: 0.6rem;
1734
- font-style: normal;
1735
- color: var(--acc, var(--admin-blue));
1736
- font-size: 0.72rem;
1737
- opacity: 0;
1738
- transform: translateX(-4px);
1739
- transition: opacity 180ms ease, transform 180ms ease;
1740
- }
1741
-
1742
- .surface-grid .surface-card:hover .surface-go { opacity: 1; transform: translateX(0); }
1743
-
1744
- .surface-grid .acc-blue { --acc: var(--admin-blue); }
1745
- .surface-grid .acc-violet { --acc: var(--admin-violet); }
1746
- .surface-grid .acc-pink { --acc: var(--admin-pink); }
1747
-
1748
- .live-badge,
1749
- .restart-badge,
1750
- .secret-badge {
1751
- display: inline-flex;
1752
- align-items: center;
1753
- gap: 0.35rem;
1754
- padding: 0.3rem 0.45rem;
1755
- border: 1px solid rgba(91, 240, 179, 0.25);
1756
- border-radius: 999px;
1757
- color: #6df0bb;
1758
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1759
- font-size: 0.48rem;
1760
- letter-spacing: 0.08em;
1761
- }
1762
-
1763
- .restart-badge { border-color: rgba(255, 195, 102, 0.27); color: #ffcf78; }
1764
- .secret-badge { border-color: rgba(243, 110, 184, 0.3); color: #ff9dcc; }
1765
-
1766
- .pulse-bars {
1767
- display: flex;
1768
- align-items: end;
1769
- gap: 0.32rem;
1770
- height: 82px;
1771
- margin: 1.15rem 0 0.7rem;
1772
- padding: 0.35rem 0;
1773
- border-bottom: 1px solid rgba(112, 168, 228, 0.16);
1774
- }
1775
-
1776
- .pulse-bars i {
1777
- flex: 1;
1778
- min-height: 12%;
1779
- border-radius: 0.18rem 0.18rem 0 0;
1780
- background: linear-gradient(#67c8ff, #4d53bf);
1781
- box-shadow: 0 0 12px rgba(74, 169, 255, 0.22);
1782
- }
1783
-
1784
- .pulse-panel p,
1785
- .panel-description {
1786
- color: #7891ad;
1787
- font-size: 0.6rem;
1788
- line-height: 1.6;
1789
- }
1790
-
1791
- .live-traffic-panel { margin-top: 0.8rem; }
1792
-
1793
- .traffic-chart {
1794
- margin-top: 0.85rem;
1795
- }
1796
-
1797
- .traffic-chart-body {
1798
- position: relative;
1799
- }
1800
-
1801
- .traffic-chart-body svg {
1802
- display: block;
1803
- width: 100%;
1804
- height: 96px;
1805
- overflow: visible;
1806
- }
1807
-
1808
- .traffic-tip {
1809
- position: absolute;
1810
- transform: translate(-50%, -140%);
1811
- pointer-events: none;
1812
- z-index: 20;
1813
- display: flex;
1814
- flex-direction: column;
1815
- align-items: center;
1816
- gap: 0.1rem;
1817
- padding: 0.4rem 0.7rem;
1818
- border-radius: 0.5rem;
1819
- border: 1px solid color-mix(in srgb, var(--admin-violet, #9f7bff) 45%, transparent);
1820
- background: color-mix(in srgb, #0a1830 88%, transparent);
1821
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
1822
- white-space: nowrap;
1823
- }
1824
-
1825
- .traffic-tip-time {
1826
- font-size: 0.6rem;
1827
- color: var(--admin-muted, #849ab7);
1828
- }
1829
-
1830
- .traffic-tip-count {
1831
- font-size: 0.78rem;
1832
- font-weight: 700;
1833
- color: var(--admin-ink, #eef6ff);
1834
- }
1835
-
1836
- .traffic-meta {
1837
- display: flex;
1838
- align-items: center;
1839
- gap: 1rem;
1840
- margin-top: 0.55rem;
1841
- color: #7891ad;
1842
- font-size: 0.62rem;
1843
- }
1844
-
1845
- .traffic-meta span {
1846
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1847
- letter-spacing: 0.04em;
1848
- }
1849
-
1850
- .traffic-meta .text-action { margin-left: auto; }
1851
-
1852
- .series-tabs {
1853
- display: inline-flex;
1854
- gap: 0.25rem;
1855
- padding: 0.2rem;
1856
- border: 1px solid var(--admin-border, rgba(125, 174, 235, 0.2));
1857
- border-radius: 0.5rem;
1858
- background: var(--admin-surface, rgba(10, 24, 45, 0.78));
1859
- }
1860
-
1861
- .series-tabs button {
1862
- border: 0;
1863
- border-radius: 0.35rem;
1864
- padding: 0.32rem 0.65rem;
1865
- color: var(--admin-muted, #849ab7);
1866
- background: transparent;
1867
- font-size: 0.62rem;
1868
- cursor: pointer;
1869
- transition: 140ms ease;
1870
- }
1871
-
1872
- .series-tabs button:hover { color: var(--admin-ink, #eef6ff); }
1873
-
1874
- .series-tabs button.is-active {
1875
- color: var(--admin-ink, #eef6ff);
1876
- background: color-mix(in srgb, var(--admin-violet, #9f7bff) 26%, transparent);
1877
- box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--admin-violet, #9f7bff) 40%, transparent);
1878
- }
1879
-
1880
- .req-log-table-wrap { max-height: 340px; overflow: auto; }
1881
-
1882
- .req-log-table th { position: sticky; top: 0; background: rgba(8, 25, 48, 0.96); z-index: 1; }
1883
-
1884
- .req-log-table td { font-size: 0.62rem; }
1885
-
1886
- .req-td-time { white-space: nowrap; color: var(--admin-muted, #849ab7); }
1887
- .req-td-path { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--admin-ink, #eef6ff); }
1888
- .req-td-dur { white-space: nowrap; color: var(--admin-muted, #849ab7); }
1889
- .req-td-ip { white-space: nowrap; color: var(--admin-muted, #849ab7); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
1890
- .req-td-ref { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--admin-muted, #849ab7); }
1891
-
1892
- .req-method { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; }
1893
- .req-method-get { color: #5ef0b3; }
1894
- .req-method-post { color: #ffd479; }
1895
- .req-method-put { color: #6dcbff; }
1896
- .req-method-patch { color: #c0a0ff; }
1897
- .req-method-delete { color: #ff91a8; }
1898
-
1899
- .req-status { font-weight: 700; }
1900
- .req-status-err { color: #ff6b81; }
1901
- .req-status-warn { color: #ffcf78; }
1902
-
1903
- .workspace-tabs {
1904
- display: inline-flex;
1905
- gap: 0.2rem;
1906
- padding: 0.22rem;
1907
- border: 1px solid rgba(112, 168, 228, 0.14);
1908
- border-radius: 0.58rem;
1909
- background: rgba(8, 24, 45, 0.72);
1910
- }
1911
-
1912
- .workspace-tabs button {
1913
- padding: 0.52rem 0.75rem;
1914
- border: 0;
1915
- border-radius: 0.4rem;
1916
- color: #7891ae;
1917
- background: transparent;
1918
- font-size: 0.62rem;
1919
- }
1920
-
1921
- .workspace-tabs button.is-active { color: #ecf8ff; background: linear-gradient(135deg, rgba(38, 130, 225, 0.55), rgba(90, 67, 183, 0.45)); }
1922
-
1923
- /* ---- Logs: aggregated console viewer ---- */
1924
- .log-card { padding: 0; overflow: hidden; }
1925
-
1926
- .log-stat-strip {
1927
- display: grid;
1928
- grid-template-columns: repeat(4, minmax(0, 1fr));
1929
- gap: 0.55rem;
1930
- padding: 0.85rem 0.85rem 0.65rem;
1931
- }
1932
- .log-stat {
1933
- display: flex;
1934
- align-items: center;
1935
- gap: 0.55rem;
1936
- min-width: 0;
1937
- padding: 0.55rem 0.7rem;
1938
- border: 1px solid rgba(112, 168, 228, 0.16);
1939
- border-radius: 0.7rem;
1940
- background: rgba(10, 30, 56, 0.5);
1941
- }
1942
- .log-stat i {
1943
- width: 8px;
1944
- height: 8px;
1945
- flex: 0 0 auto;
1946
- border-radius: 50%;
1947
- background: color-mix(in srgb, var(--admin-blue) 80%, white);
1948
- box-shadow: 0 0 10px color-mix(in srgb, var(--admin-blue) 62%, transparent);
1949
- }
1950
- .log-stat b {
1951
- color: #eaf6ff;
1952
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1953
- font-size: 1rem;
1954
- line-height: 1;
1955
- }
1956
- .log-stat em {
1957
- overflow: hidden;
1958
- color: #6f89a8;
1959
- font-size: 0.54rem;
1960
- font-style: normal;
1961
- letter-spacing: 0.04em;
1962
- text-overflow: ellipsis;
1963
- white-space: nowrap;
1964
- }
1965
- .log-stat--all i { background: var(--admin-blue); box-shadow: 0 0 10px color-mix(in srgb, var(--admin-blue) 62%, transparent); }
1966
- .log-stat--all b { color: #aee1ff; }
1967
- .log-stat--error i { background: #fb7185; box-shadow: 0 0 10px rgba(251, 113, 133, 0.55); }
1968
- .log-stat--error b { color: #fda4af; }
1969
- .log-stat--warn i { background: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.55); }
1970
- .log-stat--warn b { color: #fcd34d; }
1971
- .log-stat--info i { background: #38bdf8; box-shadow: 0 0 10px rgba(56, 189, 248, 0.55); }
1972
- .log-stat--info b { color: #7dd3fc; }
1973
-
1974
- .log-toolbar {
1975
- display: flex;
1976
- flex-wrap: wrap;
1977
- align-items: center;
1978
- gap: 0.55rem;
1979
- padding: 0.1rem 0.85rem 0.85rem;
1980
- }
1981
- .log-filter-group {
1982
- display: inline-flex;
1983
- gap: 0.15rem;
1984
- padding: 0.2rem;
1985
- border-radius: 0.65rem;
1986
- }
1987
- .log-filter-btn {
1988
- padding: 0.42rem 0.62rem;
1989
- border: 0;
1990
- border-radius: 0.45rem;
1991
- color: #8aa7c6;
1992
- background: transparent;
1993
- font-size: 0.62rem;
1994
- font-weight: 600;
1995
- cursor: pointer;
1996
- transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
1997
- }
1998
- .log-filter-btn b { font-weight: 700; opacity: 0.65; }
1999
- .log-filter-btn:hover { color: #dbeafe; }
2000
- .log-filter-btn.is-active {
2001
- color: #f0f8ff;
2002
- background: linear-gradient(135deg, color-mix(in srgb, var(--admin-blue) 55%, transparent), color-mix(in srgb, var(--admin-violet) 45%, transparent));
2003
- box-shadow: 0 2px 10px color-mix(in srgb, var(--admin-blue) 22%, transparent);
2004
- }
2005
- .log-filter-btn.is-active b { opacity: 1; }
2006
- .log-crit-btn {
2007
- padding: 0.42rem 0.62rem;
2008
- border: 1px solid transparent;
2009
- border-radius: 0.45rem;
2010
- color: #8aa7c6;
2011
- background: transparent;
2012
- font-size: 0.62rem;
2013
- font-weight: 600;
2014
- cursor: pointer;
2015
- transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
2016
- }
2017
- .log-crit-btn:hover { color: #ffdce6; }
2018
- .log-crit-btn.is-active {
2019
- color: #ffd5e0;
2020
- border-color: rgba(251, 113, 133, 0.45);
2021
- background: rgba(244, 63, 94, 0.14);
2022
- box-shadow: 0 0 10px rgba(244, 63, 94, 0.18);
2023
- }
2024
- .log-ai-btn {
2025
- color: #d9c8ff;
2026
- border-color: color-mix(in srgb, var(--admin-violet) 40%, transparent);
2027
- background: color-mix(in srgb, var(--admin-violet) 16%, transparent);
2028
- }
2029
- .log-ai-btn:hover { color: #fff; background: color-mix(in srgb, var(--admin-violet) 30%, transparent); }
2030
- .log-ai-btn:disabled { opacity: 0.6; cursor: wait; }
2031
- .log-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; }
2032
- .log-service-input { width: 9.5rem; }
2033
- .log-search-input { width: 13rem; }
2034
- .log-search-input::placeholder { color: #59738f; }
2035
-
2036
- .log-viewer {
2037
- position: relative;
2038
- min-height: 180px;
2039
- max-height: min(58vh, 620px);
2040
- overflow: auto;
2041
- border-top: 1px solid rgba(112, 168, 228, 0.14);
2042
- border-bottom: 1px solid rgba(112, 168, 228, 0.14);
2043
- background: rgba(1, 8, 19, 0.62);
2044
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
2045
- font-size: 0.68rem;
2046
- line-height: 1.55;
2047
- }
2048
- .log-viewer:focus-visible {
2049
- outline: 1px solid color-mix(in srgb, var(--admin-blue) 55%, transparent);
2050
- outline-offset: -1px;
2051
- }
2052
-
2053
- .log-colhead {
2054
- position: sticky;
2055
- top: 0;
2056
- z-index: 2;
2057
- display: grid;
2058
- grid-template-columns: 84px 150px 88px 72px minmax(0, 1fr);
2059
- gap: 0.5rem;
2060
- align-items: center;
2061
- padding: 0.45rem 0.7rem;
2062
- border-bottom: 1px solid rgba(112, 168, 228, 0.13);
2063
- color: #5f7b99;
2064
- background: rgba(4, 14, 28, 0.94);
2065
- backdrop-filter: blur(8px);
2066
- font-size: 0.53rem;
2067
- font-weight: 700;
2068
- letter-spacing: 0.09em;
2069
- text-transform: uppercase;
2070
- }
2071
- .log-colhead span { color: inherit; }
2072
-
2073
- .log-row {
2074
- display: grid;
2075
- grid-template-columns: 84px 150px 88px 72px minmax(0, 1fr);
2076
- gap: 0.5rem;
2077
- align-items: baseline;
2078
- padding: 0.32rem 0.7rem;
2079
- border-top: 1px solid rgba(112, 168, 228, 0.07);
2080
- border-left: 2px solid transparent;
2081
- color: #b7cce3;
2082
- transition: background 120ms ease, border-color 120ms ease;
2083
- }
2084
- .log-row:hover { background: rgba(58, 116, 178, 0.12); }
2085
- .log-row--error {
2086
- border-left-color: rgba(244, 63, 94, 0.55);
2087
- background: linear-gradient(90deg, rgba(244, 63, 94, 0.1), rgba(244, 63, 94, 0.02) 65%, transparent);
2088
- }
2089
- .log-row--warn {
2090
- border-left-color: rgba(251, 191, 36, 0.5);
2091
- background: linear-gradient(90deg, rgba(251, 191, 36, 0.07), transparent 65%);
2092
- }
2093
- .log-row--info { border-left-color: transparent; }
2094
-
2095
- @keyframes log-critical-flash {
2096
- 0%, 100% { background: rgba(244, 63, 94, 0.16); box-shadow: inset 2px 0 0 rgba(251, 113, 133, 0.85); }
2097
- 50% { background: rgba(251, 191, 36, 0.13); box-shadow: inset 2px 0 0 rgba(251, 191, 36, 0.95); }
2098
- }
2099
- .log-row--critical {
2100
- border-left-color: rgba(251, 113, 133, 0.85);
2101
- animation: log-critical-flash 1.4s ease-in-out infinite;
2102
- }
2103
- @media (prefers-reduced-motion: reduce) {
2104
- .log-row--critical { animation: none; background: rgba(244, 63, 94, 0.14); }
2105
- }
2106
-
2107
- .log-time { color: #66809e; font-variant-numeric: tabular-nums; white-space: nowrap; }
2108
- .log-service, .log-source, .log-level { white-space: nowrap; }
2109
-
2110
- .log-tag {
2111
- justify-self: start;
2112
- padding: 0.08rem 0.45rem;
2113
- border-radius: 999px;
2114
- font-size: 0.6rem;
2115
- font-weight: 600;
2116
- letter-spacing: 0.02em;
2117
- }
2118
- .log-tag--default {
2119
- border: 1px solid rgba(255, 255, 255, 0.14);
2120
- background: rgba(255, 255, 255, 0.05);
2121
- color: #b7cce3;
2122
- }
2123
-
2124
- .log-source { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; }
2125
- .log-source--stdout { color: #7fd0e8; }
2126
- .log-source--stderr { color: #ff9f8a; }
2127
- .log-source--system { color: #c5a7ff; }
2128
-
2129
- .log-level {
2130
- justify-self: start;
2131
- padding: 0.06rem 0.4rem;
2132
- border-radius: 999px;
2133
- font-size: 0.58rem;
2134
- font-weight: 700;
2135
- text-transform: uppercase;
2136
- letter-spacing: 0.04em;
2137
- }
2138
- .log-level--error { color: #fda4af; background: rgba(244, 63, 94, 0.14); }
2139
- .log-level--warn { color: #fcd34d; background: rgba(251, 191, 36, 0.12); }
2140
- .log-level--info { color: #7dd3fc; background: rgba(56, 189, 248, 0.12); }
2141
-
2142
- .log-line { min-width: 0; color: #cfe2f5; white-space: pre-wrap; word-break: break-word; }
2143
- .log-row--error .log-line { color: #ffc4c9; }
2144
- .log-row--warn .log-line { color: #ffe3b0; }
2145
-
2146
- .log-empty {
2147
- display: flex;
2148
- flex-direction: column;
2149
- align-items: center;
2150
- justify-content: center;
2151
- gap: 0.35rem;
2152
- min-height: 220px;
2153
- padding: 1.5rem;
2154
- color: #64809f;
2155
- text-align: center;
2156
- }
2157
- .log-empty-glyph { font-size: 1.4rem; opacity: 0.55; color: var(--admin-muted); }
2158
- .log-empty strong { color: #a9c4de; font-size: 0.78rem; }
2159
- .log-empty p { margin: 0; color: #64809f; font-size: 0.65rem; }
2160
-
2161
- .log-footer {
2162
- display: flex;
2163
- align-items: center;
2164
- justify-content: space-between;
2165
- gap: 0.6rem;
2166
- padding: 0.7rem 0.85rem 0.8rem;
2167
- }
2168
- .log-foot-left { display: inline-flex; align-items: center; gap: 0.35rem; color: #6b87a5; font-size: 0.58rem; }
2169
- .log-live-dot {
2170
- display: inline-block;
2171
- width: 7px;
2172
- height: 7px;
2173
- border-radius: 50%;
2174
- background: #34d399;
2175
- box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
2176
- animation: dot-glow 2.4s ease-in-out infinite;
2177
- }
2178
- .log-live-btn.is-live { color: #34d399; border-color: rgba(52, 211, 153, 0.4); background: rgba(16, 185, 129, 0.12); }
2179
-
2180
- .log-ai-panel {
2181
- margin: 0 0.85rem 0.85rem;
2182
- padding: 0.75rem 0.8rem;
2183
- border: 1px solid color-mix(in srgb, var(--admin-violet) 34%, transparent);
2184
- border-radius: 0.7rem;
2185
- background: rgba(18, 12, 40, 0.5);
2186
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
2187
- }
2188
- .log-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; }
2189
- .log-ai-title { color: #d9c8ff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
2190
- .log-ai-actions { display: flex; align-items: center; gap: 0.4rem; }
2191
- .log-ai-note { color: #8f7fbf; font-size: 0.6rem; }
2192
- .log-ai-err {
2193
- margin: 0 0 0.5rem;
2194
- padding: 0.5rem 0.6rem;
2195
- border: 1px solid rgba(244, 63, 94, 0.4);
2196
- border-radius: 0.5rem;
2197
- color: #ffb4ad;
2198
- background: rgba(244, 63, 94, 0.1);
2199
- font-size: 0.62rem;
2200
- }
2201
- .log-ai-open { margin-left: 0.5rem; }
2202
- .log-ai-body {
2203
- margin: 0;
2204
- max-height: 260px;
2205
- overflow: auto;
2206
- padding: 0.6rem 0.7rem;
2207
- border-radius: 0.5rem;
2208
- background: rgba(1, 8, 19, 0.55);
2209
- color: #d9ccff;
2210
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
2211
- font-size: 0.66rem;
2212
- line-height: 1.6;
2213
- white-space: pre-wrap;
2214
- word-break: break-word;
2215
- }
2216
-
2217
- @media (prefers-reduced-motion: reduce) { .log-live-dot { animation: none; } }
2218
-
2219
- @media (max-width: 760px) {
2220
- .log-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2221
- .log-toolbar-right { width: 100%; margin-left: 0; }
2222
- .log-service-input, .log-search-input { flex: 1 1 45%; width: auto; min-width: 0; }
2223
- .log-viewer { max-height: 48vh; font-size: 0.64rem; }
2224
- .log-colhead, .log-row { grid-template-columns: 66px 92px minmax(0, 1fr); gap: 0.4rem; padding-inline: 0.55rem; }
2225
- .log-colhead .log-source, .log-colhead .log-level,
2226
- .log-row .log-source, .log-row .log-level { display: none; }
2227
- }
2228
-
2229
- .config-intro { padding: 1.2rem 1.35rem; }
2230
- .config-layer-stack { display: flex; flex-direction: column; gap: 0.38rem; min-width: 120px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.51rem; }
2231
- .config-layer-stack span, .config-layer-stack b, .config-layer-stack strong, .config-layer-stack i { padding: 0.35rem 0.55rem; border-radius: 0.25rem; font-style: normal; font-weight: 500; }
2232
- .config-layer-stack span { color: #7189a4; background: rgba(112, 168, 228, 0.1); }
2233
- .config-layer-stack b { color: #9ecbff; background: rgba(52, 131, 218, 0.18); }
2234
- .config-layer-stack strong { color: #d2b4ff; background: rgba(133, 81, 212, 0.24); }
2235
- .config-layer-stack i { color: #ffaad1; background: rgba(210, 72, 145, 0.18); }
2236
- .config-panel { padding: 1.15rem; }
2237
- .key-value-table { margin-top: 1rem; overflow: hidden; border: 1px solid rgba(112, 168, 228, 0.14); border-radius: 0.6rem; }
2238
- .key-value-head, .key-value-row { display: grid; grid-template-columns: minmax(150px, 1fr) 110px minmax(160px, 1.25fr) 30px; gap: 0.55rem; align-items: center; padding: 0.58rem 0.65rem; }
2239
- .key-value-head { color: #6280a1; background: rgba(29, 67, 108, 0.25); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.49rem; letter-spacing: 0.1em; }
2240
- .key-value-row { border-top: 1px solid rgba(112, 168, 228, 0.09); background: rgba(5, 20, 39, 0.34); }
2241
- .key-value-row input, .key-value-row select { min-width: 0; width: 100%; padding: 0.48rem 0.55rem; border: 1px solid rgba(112, 168, 228, 0.14); border-radius: 0.35rem; outline: 0; color: #dcefff; background: rgba(13, 35, 61, 0.72); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.58rem; }
2242
- .key-value-row input:focus, .key-value-row select:focus { border-color: rgba(84, 183, 255, 0.6); box-shadow: 0 0 0 2px rgba(84, 183, 255, 0.1); }
2243
- .row-delete { border: 0; color: #d77b9f; background: transparent; font-size: 1rem; }
2244
- .row-delete:hover { color: #ff8fbd; }
2245
- .key-value-empty { padding: 1.5rem; color: #6f89a6; font-size: 0.64rem; text-align: center; }
2246
- .key-group { border-top: 1px solid rgba(112, 168, 228, 0.14); }
2247
- .key-group-head { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.65rem; color: #bfe0ff; background: linear-gradient(90deg, rgba(47, 118, 192, 0.28), rgba(47, 118, 192, 0.06)); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; }
2248
- .key-group-head small { margin-left: auto; color: #5d7fa1; font-size: 0.48rem; letter-spacing: 0.05em; text-transform: none; }
2249
- .key-group-name { color: #8fd0ff; font-weight: 700; }
2250
- .key-add-bar { display: grid; grid-template-columns: minmax(150px, 1fr) 110px minmax(160px, 1.25fr); gap: 0.55rem; align-items: center; margin: 0.9rem 0 1rem; padding: 0 0.65rem; }
2251
- .key-add-bar input, .key-add-bar select { min-width: 0; width: 100%; padding: 0.48rem 0.55rem; border: 1px solid rgba(112, 168, 228, 0.14); border-radius: 0.35rem; outline: 0; color: #dcefff; background: rgba(13, 35, 61, 0.72); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.58rem; }
2252
- .key-add-bar input:focus, .key-add-bar select:focus { border-color: rgba(84, 183, 255, 0.6); box-shadow: 0 0 0 2px rgba(84, 183, 255, 0.1); }
2253
- .key-add-bar select { flex: 0 0 auto; }
2254
- .env-add-bar { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(160px, 1.25fr); gap: 0.55rem; align-items: center; margin: 0.9rem 0 1rem; padding: 0 0.65rem; }
2255
- .env-add-bar input { min-width: 0; width: 100%; padding: 0.48rem 0.55rem; border: 1px solid rgba(112, 168, 228, 0.14); border-radius: 0.35rem; outline: 0; color: #dcefff; background: rgba(13, 35, 61, 0.72); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.58rem; }
2256
- .env-add-bar input:focus { border-color: rgba(84, 183, 255, 0.6); box-shadow: 0 0 0 2px rgba(84, 183, 255, 0.1); }
2257
- .env-add-bar .env-value-wrap input { padding-right: 1.8rem; }
2258
- .config-footer { margin-top: 1rem; color: #738ca8; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.55rem; }
2259
- .source-editor { display: block; width: 100%; min-height: 390px; margin-top: 1rem; padding: 1rem; overflow: auto; resize: vertical; border: 1px solid rgba(112, 168, 228, 0.17); border-radius: 0.55rem; outline: 0; color: #c6ddf4; background: rgba(1, 8, 19, 0.8); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.67rem; line-height: 1.65; }
2260
- .effective-editor { margin-top: 0; white-space: pre; }
2261
- .env-path { overflow: hidden; color: #7491b0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.54rem; text-overflow: ellipsis; white-space: nowrap; }
2262
- .env-value-wrap { position: relative; min-width: 0; }
2263
- .env-value-wrap input { padding-right: 1.8rem; }
2264
- .secret-mark { position: absolute; top: 50%; right: 0.6rem; color: #526e8e; font-size: 0.5rem; transform: translateY(-50%); }
2265
- .secret-mark.is-secret { color: #ff8fc4; text-shadow: 0 0 8px rgba(255, 143, 196, 0.8); }
2266
-
2267
- .env-table .key-value-head, .env-table .key-value-row { grid-template-columns: 180px minmax(0, 1fr); }
2268
- .env-table .env-value-wrap { display: flex; align-items: center; gap: 0.4rem; }
2269
- .env-table .env-value-wrap input { flex: 1; min-width: 0; padding-right: 1.5rem; }
2270
- .env-table .env-value-wrap .secret-mark { right: 1.6rem; }
2271
- .env-table .env-value-wrap .row-delete {
2272
- display: grid;
2273
- place-items: center;
2274
- flex: 0 0 auto;
2275
- width: 24px;
2276
- height: 24px;
2277
- padding: 0;
2278
- border: 1px solid rgba(215, 123, 159, 0.45);
2279
- border-radius: 0.3rem;
2280
- background: rgba(243, 110, 184, 0.12);
2281
- color: #f77b9f;
2282
- font-size: 0.9rem;
2283
- line-height: 1;
2284
- }
2285
- .env-table .env-value-wrap .row-delete:hover { border-color: rgba(255, 111, 122, 0.65); color: #ff6b7a; background: rgba(243, 110, 184, 0.2); }
2286
- .env-intro { background: linear-gradient(115deg, rgba(24, 69, 117, 0.4), rgba(77, 31, 92, 0.28)); }
2287
- .env-file-switch { display: inline-flex; padding: 0.15rem; gap: 0.15rem; border: 1px solid rgba(112, 168, 228, 0.18); border-radius: 0.5rem; background: rgba(7, 22, 40, 0.6); }
2288
- .env-file-switch button {
2289
- padding: 0.32rem 0.6rem;
2290
- border: 0;
2291
- border-radius: 0.36rem;
2292
- color: #7f9ab6;
2293
- background: transparent;
2294
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
2295
- font-size: 0.6rem;
2296
- cursor: pointer;
2297
- transition: color 0.15s, background 0.15s, box-shadow 0.15s;
2298
- }
2299
- .env-file-switch button:hover { color: #c9e2f7; }
2300
- .env-file-switch button.is-active { color: #e3f4ff; background: linear-gradient(135deg, rgba(26, 108, 200, 0.6), rgba(128, 90, 200, 0.6)); box-shadow: 0 1px 8px rgba(70, 140, 255, 0.35); }
2301
- .env-lock-art {
2302
- position: relative;
2303
- display: flex;
2304
- flex-direction: column;
2305
- align-items: center;
2306
- justify-content: center;
2307
- width: 82px;
2308
- height: 82px;
2309
- border: 1px solid rgba(243, 110, 184, 0.35);
2310
- border-radius: 50%;
2311
- color: #ff96c9;
2312
- background: radial-gradient(circle, rgba(243, 110, 184, 0.25), transparent 68%);
2313
- box-shadow: 0 0 30px rgba(243, 110, 184, 0.18);
2314
- animation: orbit-ring-glow 4.5s ease-in-out infinite, hero-art-breathe 5s ease-in-out infinite;
2315
- }
2316
- .env-lock-art::before {
2317
- content: "";
2318
- position: absolute;
2319
- top: 50%;
2320
- left: 50%;
2321
- width: 58px;
2322
- height: 66px;
2323
- transform: translate(-50%, -50%);
2324
- opacity: 0.1;
2325
- background: linear-gradient(180deg, rgba(255, 190, 224, 0.95), rgba(210, 80, 150, 0.85) 46%, rgba(120, 30, 86, 0.9));
2326
- clip-path: polygon(50% 0%, 87% 10%, 100% 24%, 100% 66%, 87% 84%, 50% 100%, 13% 84%, 0% 66%, 0% 24%, 13% 10%);
2327
- animation: shield-glow 3s ease-in-out infinite;
2328
- }
2329
- .env-lock-art::after {
2330
- content: "";
2331
- position: absolute;
2332
- top: 50%;
2333
- left: 50%;
2334
- width: 46px;
2335
- height: 54px;
2336
- transform: translate(-50%, -50%);
2337
- opacity: 0.1;
2338
- background: radial-gradient(circle at 50% 32%, rgba(255, 170, 214, 0.55), rgba(80, 14, 58, 0.78) 74%);
2339
- clip-path: polygon(50% 6%, 82% 16%, 94% 54%, 50% 96%, 6% 54%, 18% 16%);
2340
- animation: shield-inner 4.5s ease-in-out infinite;
2341
- }
2342
- .env-lock-glyph {
2343
- position: relative;
2344
- z-index: 1;
2345
- font-style: normal;
2346
- font-size: 1.7rem;
2347
- line-height: 1;
2348
- animation: glyph-glow 2.6s ease-in-out infinite;
2349
- }
2350
- .env-lock-art span {
2351
- position: relative;
2352
- z-index: 1;
2353
- display: block;
2354
- margin-top: 0.15rem;
2355
- color: #ffb6d9;
2356
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
2357
- font-size: 0.43rem;
2358
- letter-spacing: 0.1em;
2359
- animation: hero-text-glow 3.4s ease-in-out infinite;
2360
- }
2361
- @keyframes glyph-glow {
2362
- 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 159, 214, 0.5)) drop-shadow(0 0 12px rgba(255, 159, 214, 0.3)); }
2363
- 50% { filter: drop-shadow(0 0 8px rgba(255, 210, 235, 0.95)) drop-shadow(0 0 24px rgba(255, 159, 214, 0.65)); }
2364
- }
2365
- @keyframes shield-glow {
2366
- 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 159, 214, 0.15)); opacity: 0.06; }
2367
- 50% { filter: drop-shadow(0 0 6px rgba(255, 159, 214, 0.4)); opacity: 0.14; }
2368
- }
2369
- @keyframes shield-inner {
2370
- 0%, 100% { filter: brightness(1); opacity: 0.08; }
2371
- 50% { filter: brightness(1.4); opacity: 0.12; }
2372
- }
2373
- @media (prefers-reduced-motion: reduce) { .env-lock-art, .env-lock-art::before, .env-lock-art::after, .env-lock-glyph, .env-lock-art span { animation: none; } }
2374
- .admin-notice { padding: 0.7rem 0.85rem; border: 1px solid rgba(255, 194, 101, 0.28); border-radius: 0.5rem; color: #ffd48a; background: rgba(150, 91, 26, 0.14); font-size: 0.62rem; }
2375
-
2376
- .confirm-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(2, 8, 18, 0.66); backdrop-filter: blur(6px) saturate(0.55); -webkit-backdrop-filter: blur(6px) saturate(0.55); transition: opacity 0.22s ease, background-color 0.22s ease, backdrop-filter 0.22s ease, -webkit-backdrop-filter 0.22s ease; }
2377
- .confirm-dialog { width: min(420px, 92vw); padding: 1.2rem 1.3rem 1.25rem; border: 1px solid rgba(112, 168, 228, 0.3); border-radius: 0.85rem; background: linear-gradient(150deg, rgba(13, 35, 67, 0.97), rgba(9, 18, 40, 0.97)); box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55); animation: confirm-pop 150ms ease; }
2378
- .confirm-dialog-head { display: flex; align-items: center; gap: 0.7rem; }
2379
- .confirm-dialog-mark { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(244, 117, 172, 0.42); border-radius: 50%; color: #ff8fc4; background: radial-gradient(circle, rgba(243, 110, 184, 0.2), transparent 70%); box-shadow: 0 0 18px rgba(243, 110, 184, 0.18); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; }
2380
- .confirm-dialog-head strong { color: #f3f9ff; font-size: 0.92rem; }
2381
- .confirm-dialog-close { margin-left: auto; border: 0; color: #7d96b2; background: transparent; font-size: 1.15rem; }
2382
- .confirm-dialog-close:hover { color: #e8f4ff; }
2383
- .confirm-dialog-message { margin: 0.9rem 0 1.15rem; color: #a9c1db; font-size: 0.78rem; line-height: 1.6; }
2384
- .confirm-dialog-message strong { color: #ffffff; font-weight: 600; }
2385
- .confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
2386
- .confirm-dialog-primary { background: linear-gradient(135deg, rgba(225, 61, 120, 0.55), rgba(161, 42, 98, 0.5)); border-color: rgba(244, 117, 172, 0.4); color: #ffe1ee; }
2387
- .confirm-dialog-primary:hover:not(:disabled) { border-color: rgba(244, 117, 172, 0.65); background: linear-gradient(135deg, rgba(239, 76, 138, 0.72), rgba(190, 52, 118, 0.6)); }
2388
- .confirm-dialog-primary:disabled { opacity: 0.55; cursor: default; }
2389
- @starting-style {
2390
- .provider-modal-backdrop,
2391
- .confirm-overlay,
2392
- .safe-goto-overlay {
2393
- opacity: 0;
2394
- background-color: rgba(2, 8, 18, 0);
2395
- backdrop-filter: blur(0) saturate(1);
2396
- -webkit-backdrop-filter: blur(0) saturate(1);
2397
- }
2398
- }
2399
- @keyframes confirm-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
2400
- .confirm-dialog { animation: confirm-pop 150ms ease; }
2401
-
1
+ :root {
2
+ --admin-bg: #0b1220;
3
+ --admin-fg: #e2e8f0;
4
+ --admin-muted: #94a3b8;
5
+ --admin-card: #0f172a;
6
+ --admin-border: #1e293b;
7
+ --admin-accent: #60a5fa;
8
+ --admin-ok: #4ade80;
9
+ --admin-bad: #f87171;
10
+ --admin-warn: #fbbf24;
11
+ }
12
+ @media (prefers-color-scheme: light) {
13
+ :root {
14
+ --admin-bg: #f8fafc;
15
+ --admin-fg: #0b1220;
16
+ --admin-muted: #475569;
17
+ --admin-card: #ffffff;
18
+ --admin-border: #e2e8f0;
19
+ --admin-accent: #2563eb;
20
+ --admin-ok: #16a34a;
21
+ --admin-bad: #dc2626;
22
+ --admin-warn: #d97706;
23
+ }
24
+ }
25
+ * { box-sizing: border-box; }
26
+ html, body { margin: 0; }
27
+ body {
28
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
29
+ background: var(--admin-bg);
30
+ color: var(--admin-fg);
31
+ font-size: 14px;
32
+ }
33
+ a { color: var(--admin-accent); }
34
+ code { background: rgba(148, 163, 184, 0.15); padding: 0.1em 0.3em; border-radius: 4px; }
35
+ h2 { margin: 0 0 1rem; font-size: 1.3rem; }
36
+ .muted { color: var(--admin-muted); }
37
+ button { cursor: pointer; padding: 0.45rem 0.9rem; border-radius: 8px; border: 1px solid var(--admin-border); background: var(--admin-accent); color: #fff; font-weight: 500; }
38
+ button:disabled { opacity: 0.5; cursor: default; }
39
+ button.btn-ghost { background: transparent; color: var(--admin-fg); }
40
+ button.btn-ghost.small { padding: 0.2rem 0.5rem; font-size: 0.75rem; }
41
+ textarea, select, input { background: var(--admin-card); color: var(--admin-fg); border: 1px solid var(--admin-border); border-radius: 8px; padding: 0.45rem; font-family: inherit; font-size: 0.9rem; }
42
+
43
+ .admin-shell { display: flex; min-height: 100vh; }
44
+ .admin-sidebar { width: 190px; border-right: 1px solid var(--admin-border); padding: 1rem 0.5rem; flex-shrink: 0; }
45
+ .admin-brand { font-weight: 700; padding: 0 0.5rem 1rem; font-size: 1.05rem; }
46
+ .admin-nav button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--admin-fg); padding: 0.5rem 0.75rem; border-radius: 8px; margin-bottom: 2px; }
47
+ .admin-nav button:hover { background: rgba(148, 163, 184, 0.12); }
48
+ .admin-nav button.is-active { background: rgba(96, 165, 250, 0.18); color: var(--admin-accent); }
49
+ .admin-main { flex: 1; padding: 1.25rem 1.5rem; overflow-x: auto; }
50
+ .admin-topbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
51
+
52
+ .admin-card { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 12px; padding: 1rem; }
53
+ .admin-card-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--admin-muted); margin-bottom: 0.5rem; }
54
+ .stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
55
+ .stat-num { font-size: 1.5rem; font-weight: 700; }
56
+
57
+ .pill { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
58
+ .pill-ok { background: rgba(74, 222, 128, 0.15); color: var(--admin-ok); }
59
+ .pill-bad { background: rgba(248, 113, 113, 0.15); color: var(--admin-bad); }
60
+ .pill-unknown { background: rgba(148, 163, 184, 0.15); color: var(--admin-muted); }
61
+
62
+ .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
63
+ .app-card { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 12px; padding: 0.75rem; }
64
+ .app-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
65
+ .app-card-body { font-size: 0.85rem; color: var(--admin-muted); }
66
+
67
+ .error-card { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; }
68
+ .error-card strong { color: var(--admin-bad); display: block; margin-bottom: 0.25rem; }
69
+
70
+ .log-table, .data-table { width: 100%; border-collapse: collapse; }
71
+ .log-table th, .log-table td, .data-table th, .data-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--admin-border); }
72
+ .log-table th, .data-table th { color: var(--admin-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
73
+ .status-err { color: var(--admin-bad); font-weight: 700; }
74
+ .status-warn { color: var(--admin-warn); font-weight: 700; }
75
+
76
+ .role-chip { display: inline-block; background: rgba(96, 165, 250, 0.15); color: var(--admin-accent); border-radius: 999px; padding: 0.1rem 0.45rem; font-size: 0.7rem; margin-right: 0.25rem; }
77
+
78
+ .config-tree { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 12px; padding: 1rem; overflow-x: auto; font-size: 0.8rem; line-height: 1.5; }