@bhooai/nexus-cli 2.0.7 → 2.0.8

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.
Files changed (49) hide show
  1. package/package.json +1 -1
  2. package/templates/base/apps/admin/package.json.ejs +3 -3
  3. package/templates/base/apps/admin/src/App.tsx +0 -38
  4. package/templates/base/apps/admin/src/alertCenter.tsx +0 -151
  5. package/templates/base/apps/admin/src/api.ts +0 -474
  6. package/templates/base/apps/admin/src/assets/bhooai-nexus-logo.svg +0 -25
  7. package/templates/base/apps/admin/src/components/ThemeCentre.tsx +0 -201
  8. package/templates/base/apps/admin/src/components/shell/AppearancePanel.tsx +0 -37
  9. package/templates/base/apps/admin/src/components/shell/Dashboard.tsx +0 -441
  10. package/templates/base/apps/admin/src/components/shell/Login.tsx +0 -69
  11. package/templates/base/apps/admin/src/components/shell/NotifyPanel.tsx +0 -102
  12. package/templates/base/apps/admin/src/components/shell/RailPanel.tsx +0 -133
  13. package/templates/base/apps/admin/src/components/shell/SettingsDialog.tsx +0 -217
  14. package/templates/base/apps/admin/src/components/ui/ConfirmDialog.tsx +0 -38
  15. package/templates/base/apps/admin/src/components/ui/LintChecks.tsx +0 -54
  16. package/templates/base/apps/admin/src/components/ui/PageHead.tsx +0 -13
  17. package/templates/base/apps/admin/src/components/ui/PageHero.tsx +0 -15
  18. package/templates/base/apps/admin/src/icons.tsx +0 -104
  19. package/templates/base/apps/admin/src/index.css +0 -3539
  20. package/templates/base/apps/admin/src/lib/constants.ts +0 -94
  21. package/templates/base/apps/admin/src/lib/theme.ts +0 -80
  22. package/templates/base/apps/admin/src/lib/types.ts +0 -39
  23. package/templates/base/apps/admin/src/lib/utils.ts +0 -147
  24. package/templates/base/apps/admin/src/pages/Config.tsx +0 -108
  25. package/templates/base/apps/admin/src/pages/Databases.tsx +0 -122
  26. package/templates/base/apps/admin/src/pages/Environment.tsx +0 -69
  27. package/templates/base/apps/admin/src/pages/Logs.tsx +0 -270
  28. package/templates/base/apps/admin/src/pages/Monitoring.tsx +0 -88
  29. package/templates/base/apps/admin/src/pages/Overview.tsx +0 -108
  30. package/templates/base/apps/admin/src/pages/Payments.tsx +0 -68
  31. package/templates/base/apps/admin/src/pages/Plugins.tsx +0 -36
  32. package/templates/base/apps/admin/src/pages/Processes.tsx +0 -67
  33. package/templates/base/apps/admin/src/pages/Schema.tsx +0 -130
  34. package/templates/base/apps/admin/src/pages/Users.tsx +0 -144
  35. package/templates/base/apps/admin/src/pages/ai/AddProviderDialog.tsx +0 -150
  36. package/templates/base/apps/admin/src/pages/ai/AiAgents.tsx +0 -31
  37. package/templates/base/apps/admin/src/pages/ai/AiChatPlayground.tsx +0 -208
  38. package/templates/base/apps/admin/src/pages/ai/AiProviders.tsx +0 -276
  39. package/templates/base/apps/admin/src/pages/ai/AiSettings.tsx +0 -84
  40. package/templates/base/apps/admin/src/pages/ai/ProviderCard.tsx +0 -145
  41. package/templates/base/apps/admin/src/pages/ai/ProviderGroup.tsx +0 -50
  42. package/templates/base/apps/admin/src/pages/ai/ProviderKeyDialog.tsx +0 -66
  43. package/templates/base/apps/admin/src/pages/monitoring/RequestSeriesChart.tsx +0 -70
  44. package/templates/base/apps/admin/src/pages/overview/TrafficChart.tsx +0 -32
  45. package/templates/base/apps/admin/src/pages/payments/OrdersTable.tsx +0 -27
  46. package/templates/base/apps/admin/src/pages/payments/PaymentKeysDialog.tsx +0 -74
  47. package/templates/base/apps/admin/src/pages/payments/TestConsole.tsx +0 -173
  48. package/templates/base/apps/admin/src/pages/payments/TransactionsTable.tsx +0 -26
  49. package/templates/base/apps/admin/src/style.css +0 -6517
@@ -1,3539 +0,0 @@
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
- line-height: 1;
751
- transition: 160ms ease;
752
- }
753
-
754
- .admin-nav button:hover,
755
- .admin-nav button.is-active {
756
- border-color: rgba(74, 166, 255, 0.29);
757
- color: #e9f7ff;
758
- background: linear-gradient(90deg, rgba(40, 137, 235, 0.22), rgba(76, 83, 212, 0.12));
759
- box-shadow: inset 3px 0 #55b9ff, 0 8px 24px rgba(26, 91, 175, 0.1);
760
- }
761
-
762
- .admin-nav-icon {
763
- display: inline-flex;
764
- align-items: center;
765
- justify-content: center;
766
- width: 1.25rem;
767
- height: 1.25rem;
768
- flex: 0 0 1.25rem;
769
- place-items: center;
770
- color: #62bfff;
771
- line-height: 0;
772
- }
773
-
774
- .admin-search-icon {
775
- display: inline-flex;
776
- align-items: center;
777
- justify-content: center;
778
- flex: 0 0 auto;
779
- line-height: 0;
780
- color: #6e87a5;
781
- }
782
-
783
- .admin-nav button b {
784
- margin-left: auto;
785
- color: #f18ac6;
786
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
787
- font-size: 0.46rem;
788
- }
789
-
790
- .admin-side-widget {
791
- margin-top: auto;
792
- margin-bottom: 1rem;
793
- }
794
-
795
- .admin-inspector .admin-side-widget {
796
- margin-top: 1rem;
797
- }
798
-
799
- .admin-widget-heading,
800
- .load-line {
801
- display: flex;
802
- align-items: center;
803
- }
804
-
805
- .admin-widget-heading {
806
- justify-content: space-between;
807
- margin-bottom: 0.8rem;
808
- color: #6b84a3;
809
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
810
- font-size: 0.55rem;
811
- letter-spacing: 0.1em;
812
- }
813
-
814
- .admin-widget-heading b {
815
- color: #5ef0b3;
816
- font-size: 0.48rem;
817
- }
818
-
819
- .load-line {
820
- gap: 0.45rem;
821
- margin-top: 0.55rem;
822
- color: #7892b1;
823
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
824
- font-size: 0.55rem;
825
- }
826
-
827
- .load-line > span {
828
- width: 1.8rem;
829
- }
830
-
831
- .load-line i {
832
- flex: 1;
833
- height: 0.25rem;
834
- overflow: hidden;
835
- border-radius: 999px;
836
- background: rgba(126, 169, 215, 0.18);
837
- }
838
-
839
- .load-line i b {
840
- display: block;
841
- height: 100%;
842
- border-radius: inherit;
843
- background: linear-gradient(90deg, #3f9bff, #6cd9ff);
844
- box-shadow: 0 0 9px rgba(84, 183, 255, 0.75);
845
- }
846
-
847
- .load-line i b.violet {
848
- background: linear-gradient(90deg, #8373ff, #c186ff);
849
- box-shadow: 0 0 9px rgba(159, 123, 255, 0.75);
850
- }
851
-
852
- .load-line strong {
853
- width: 1.9rem;
854
- color: #b4c9e3;
855
- font-size: 0.55rem;
856
- font-weight: 500;
857
- text-align: right;
858
- }
859
-
860
- .admin-signout {
861
- padding: 0.65rem;
862
- border: 0;
863
- color: #7590ae;
864
- background: transparent;
865
- text-align: left;
866
- font-size: 0.68rem;
867
- }
868
-
869
- .admin-signout:hover {
870
- color: #ff8bbd;
871
- }
872
-
873
- .admin-signout span {
874
- margin-right: 0.42rem;
875
- color: #f285bb;
876
- }
877
-
878
- .admin-main-shell {
879
- position: relative;
880
- min-width: 0;
881
- flex: 1;
882
- }
883
-
884
- .admin-topbar {
885
- position: relative;
886
- z-index: 10;
887
- display: flex;
888
- align-items: center;
889
- gap: 1.25rem;
890
- min-height: 66px;
891
- padding: 0 1.65rem;
892
- border-bottom: 1px solid rgba(112, 168, 228, 0.15);
893
- background: rgba(4, 14, 29, 0.62);
894
- backdrop-filter: blur(24px);
895
- }
896
-
897
- .admin-window-tab {
898
- display: flex;
899
- align-items: center;
900
- gap: 0.55rem;
901
- align-self: stretch;
902
- min-width: 170px;
903
- padding: 0 1.2rem;
904
- border-right: 1px solid rgba(112, 168, 228, 0.12);
905
- border-bottom: 2px solid #56baff;
906
- color: #edf7ff;
907
- font-size: 0.72rem;
908
- }
909
-
910
- .window-tab-mark {
911
- color: #63c5ff;
912
- font-size: 0.86rem;
913
- }
914
-
915
- .window-tab-close {
916
- margin-left: auto;
917
- color: #7490ad;
918
- font-size: 1rem;
919
- }
920
-
921
- .admin-search {
922
- display: flex;
923
- align-items: center;
924
- gap: 0.55rem;
925
- width: min(370px, 32vw);
926
- padding: 0.53rem 0.7rem;
927
- border: 1px solid rgba(112, 168, 228, 0.16);
928
- border-radius: 0.5rem;
929
- color: #6e87a5;
930
- background: rgba(20, 46, 79, 0.32);
931
- cursor: pointer;
932
- transition: border-color 150ms ease, background 150ms ease;
933
- }
934
- .admin-search:hover { border-color: rgba(112, 168, 228, 0.32); background: rgba(20, 46, 79, 0.45); }
935
-
936
- .admin-search input {
937
- min-width: 0;
938
- flex: 1;
939
- border: 0;
940
- outline: 0;
941
- color: #e5f4ff;
942
- background: transparent;
943
- font-size: 0.68rem;
944
- cursor: pointer;
945
- }
946
- .admin-search input:focus { cursor: text; }
947
-
948
- .admin-search kbd {
949
- color: #6884a3;
950
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
951
- font-size: 0.52rem;
952
- }
953
-
954
- .admin-search {
955
- position: relative;
956
- }
957
-
958
- .admin-search-results {
959
- position: absolute;
960
- top: calc(100% + 0.45rem);
961
- left: 0;
962
- right: 0;
963
- z-index: 9999;
964
- display: flex;
965
- flex-direction: column;
966
- padding: 0.35rem;
967
- border: 1px solid rgba(112, 168, 228, 0.2);
968
- border-radius: 0.6rem;
969
- background: rgba(9, 22, 43, 0.92);
970
- backdrop-filter: blur(20px) saturate(135%);
971
- box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55);
972
- overflow: hidden;
973
- }
974
-
975
- .admin-search-results button {
976
- display: flex;
977
- align-items: center;
978
- gap: 0.6rem;
979
- width: 100%;
980
- padding: 0.5rem 0.6rem;
981
- border: 0;
982
- border-radius: 0.45rem;
983
- color: #dcecff;
984
- background: transparent;
985
- font-size: 0.7rem;
986
- text-align: left;
987
- cursor: pointer;
988
- }
989
-
990
- .admin-search-results button:hover,
991
- .admin-search-results button.is-active {
992
- color: #eef8ff;
993
- background: rgba(84, 183, 255, 0.14);
994
- }
995
-
996
- .admin-search-result-icon {
997
- display: inline-flex;
998
- align-items: center;
999
- justify-content: center;
1000
- width: 1.4rem;
1001
- height: 1.4rem;
1002
- flex: 0 0 1.4rem;
1003
- place-items: center;
1004
- border-radius: 0.35rem;
1005
- color: #8fb8e4;
1006
- background: rgba(84, 183, 255, 0.1);
1007
- line-height: 0;
1008
- }
1009
-
1010
- .admin-search-empty {
1011
- padding: 0.7rem 0.6rem;
1012
- color: #6e87a5;
1013
- font-size: 0.68rem;
1014
- }
1015
-
1016
- .admin-top-actions {
1017
- position: relative;
1018
- display: flex;
1019
- align-items: center;
1020
- gap: 0.8rem;
1021
- margin-left: auto;
1022
- }
1023
-
1024
- .top-live {
1025
- display: flex;
1026
- align-items: center;
1027
- gap: 0.38rem;
1028
- color: #7893b1;
1029
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1030
- font-size: 0.56rem;
1031
- }
1032
-
1033
- .admin-mobile-search {
1034
- display: none;
1035
- place-items: center;
1036
- width: 30px;
1037
- height: 30px;
1038
- border: 1px solid rgba(112, 168, 228, 0.2);
1039
- border-radius: 0.5rem;
1040
- color: #9bb4d0;
1041
- background: rgba(25, 57, 95, 0.34);
1042
- font-size: 0.78rem;
1043
- cursor: pointer;
1044
- }
1045
- .admin-mobile-search:hover { color: #fff; background: rgba(71, 161, 247, 0.2); }
1046
-
1047
-
1048
- .admin-icon-button,
1049
- .admin-user-avatar {
1050
- position: relative;
1051
- display: inline-flex;
1052
- align-items: center;
1053
- justify-content: center;
1054
- border: 1px solid rgba(112, 168, 228, 0.2);
1055
- border-radius: 0.5rem;
1056
- color: #9bb4d0;
1057
- background: rgba(25, 57, 95, 0.34);
1058
- line-height: 0;
1059
- }
1060
-
1061
- .admin-icon-button {
1062
- width: 30px;
1063
- height: 30px;
1064
- }
1065
-
1066
- .admin-icon-button.is-active {
1067
- color: #a9ddff;
1068
- background: rgba(64, 140, 219, 0.4);
1069
- border-color: rgba(100, 200, 255, 0.65);
1070
- box-shadow: 0 0 12px rgba(100, 200, 255, 0.35);
1071
- }
1072
-
1073
- .admin-icon-button b {
1074
- position: absolute;
1075
- top: -4px;
1076
- right: -4px;
1077
- display: grid;
1078
- width: 13px;
1079
- height: 13px;
1080
- place-items: center;
1081
- border-radius: 50%;
1082
- color: #071426;
1083
- background: #64c8ff;
1084
- font-size: 0.47rem;
1085
- }
1086
-
1087
- .admin-user-avatar {
1088
- width: 31px;
1089
- height: 31px;
1090
- border-color: rgba(84, 183, 255, 0.52);
1091
- color: white;
1092
- background: linear-gradient(135deg, #2767a6, #7544a7);
1093
- font-size: 0.58rem;
1094
- font-weight: 700;
1095
- }
1096
-
1097
- .admin-breadcrumb {
1098
- display: flex;
1099
- align-items: center;
1100
- gap: 0.7rem;
1101
- min-height: 50px;
1102
- padding: 0 1.8rem;
1103
- border-bottom: 1px solid rgba(112, 168, 228, 0.12);
1104
- color: #6c85a3;
1105
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1106
- font-size: 0.58rem;
1107
- }
1108
-
1109
- .admin-breadcrumb strong {
1110
- color: #d9ebfc;
1111
- font-weight: 600;
1112
- }
1113
-
1114
- .admin-breadcrumb b {
1115
- color: #47749d;
1116
- font-size: 0.86rem;
1117
- }
1118
-
1119
- .admin-breadcrumb button {
1120
- margin-left: auto;
1121
- border: 0;
1122
- color: #7894b2;
1123
- background: transparent;
1124
- font-size: 1rem;
1125
- }
1126
-
1127
- .admin-content-layout {
1128
- display: grid;
1129
- grid-template-columns: minmax(0, 1fr) 272px;
1130
- min-height: calc(100vh - 116px);
1131
- }
1132
-
1133
- .admin-content {
1134
- min-width: 0;
1135
- padding: 2rem 2rem 5.5rem;
1136
- }
1137
-
1138
- .admin-inspector {
1139
- padding: 1.25rem 1rem 5rem;
1140
- border-left: 1px solid rgba(112, 168, 228, 0.13);
1141
- background: rgba(4, 15, 31, 0.4);
1142
- }
1143
-
1144
- .inspector-heading,
1145
- .panel-title-row,
1146
- .section-heading,
1147
- .config-footer,
1148
- .heading-actions {
1149
- display: flex;
1150
- align-items: center;
1151
- justify-content: space-between;
1152
- gap: 1rem;
1153
- }
1154
-
1155
- .inspector-heading {
1156
- color: #6e8aaa;
1157
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1158
- font-size: 0.55rem;
1159
- letter-spacing: 0.12em;
1160
- }
1161
-
1162
- .inspector-heading button {
1163
- border: 0;
1164
- color: #6e8aaa;
1165
- background: transparent;
1166
- font-size: 1rem;
1167
- }
1168
-
1169
- .inspector-preview {
1170
- display: flex;
1171
- flex-direction: column;
1172
- align-items: center;
1173
- gap: 0.3rem;
1174
- margin: 1rem 0;
1175
- padding: 1.4rem 0.8rem 1rem;
1176
- border: 1px solid rgba(88, 162, 244, 0.2);
1177
- border-radius: 0.75rem;
1178
- background: linear-gradient(145deg, rgba(17, 50, 91, 0.42), rgba(18, 17, 52, 0.34));
1179
- text-align: center;
1180
- }
1181
-
1182
- .inspector-preview strong {
1183
- margin-top: 0.6rem;
1184
- color: #eff8ff;
1185
- font-size: 0.82rem;
1186
- }
1187
-
1188
- .inspector-preview > span:last-child {
1189
- color: #7891ad;
1190
- font-size: 0.59rem;
1191
- }
1192
-
1193
- .preview-orbit,
1194
- .hero-orbit-art {
1195
- position: relative;
1196
- display: grid;
1197
- place-items: center;
1198
- border: 1px solid rgba(84, 183, 255, 0.3);
1199
- border-radius: 50%;
1200
- background: radial-gradient(circle, rgba(57, 170, 255, 0.25), rgba(56, 58, 179, 0.12) 43%, transparent 68%);
1201
- box-shadow: 0 0 32px rgba(58, 149, 255, 0.18), inset 0 0 24px rgba(94, 119, 255, 0.12);
1202
- }
1203
-
1204
- .preview-orbit {
1205
- width: 78px;
1206
- height: 78px;
1207
- }
1208
-
1209
- .preview-orbit::before,
1210
- .hero-orbit-art::before {
1211
- position: absolute;
1212
- width: 72%;
1213
- height: 28%;
1214
- border: 1px solid rgba(112, 206, 255, 0.65);
1215
- border-radius: 50%;
1216
- content: "";
1217
- transform: rotate(-28deg);
1218
- }
1219
-
1220
- .preview-orbit::after,
1221
- .hero-orbit-art::after {
1222
- position: absolute;
1223
- width: 62%;
1224
- height: 24%;
1225
- border: 1px solid rgba(178, 113, 255, 0.55);
1226
- border-radius: 50%;
1227
- content: "";
1228
- transform: rotate(42deg);
1229
- }
1230
-
1231
- .preview-orbit span,
1232
- .preview-orbit i,
1233
- .preview-orbit b,
1234
- .hero-orbit-art span,
1235
- .hero-orbit-art i,
1236
- .hero-orbit-art b {
1237
- position: absolute;
1238
- width: 5px;
1239
- height: 5px;
1240
- border-radius: 50%;
1241
- background: #64d2ff;
1242
- box-shadow: 0 0 10px #64d2ff;
1243
- }
1244
-
1245
- .preview-orbit span { top: 13px; right: 15px; }
1246
- .preview-orbit i { bottom: 16px; left: 12px; background: #c17cff; box-shadow: 0 0 10px #c17cff; }
1247
- .preview-orbit b { right: 9px; bottom: 22px; width: 3px; height: 3px; background: #5ef0b3; box-shadow: 0 0 8px #5ef0b3; }
1248
-
1249
- .inspector-tabs {
1250
- display: flex;
1251
- gap: 1.15rem;
1252
- padding: 0.2rem 0.2rem 0.7rem;
1253
- border-bottom: 1px solid rgba(112, 168, 228, 0.13);
1254
- color: #718ba9;
1255
- font-size: 0.61rem;
1256
- }
1257
-
1258
- .inspector-tabs b {
1259
- padding-bottom: 0.65rem;
1260
- margin-bottom: -0.7rem;
1261
- border-bottom: 2px solid #5cbaff;
1262
- color: #eef8ff;
1263
- font-weight: 600;
1264
- }
1265
-
1266
- .inspector-card {
1267
- margin-top: 0.75rem;
1268
- padding: 0.85rem;
1269
- border: 1px solid rgba(112, 168, 228, 0.12);
1270
- border-radius: 0.7rem;
1271
- background: rgba(17, 42, 73, 0.32);
1272
- }
1273
-
1274
- .inspector-card strong {
1275
- display: block;
1276
- margin: 0.45rem 0 0.35rem;
1277
- color: #e9f6ff;
1278
- font-size: 0.78rem;
1279
- }
1280
-
1281
- .inspector-card p {
1282
- margin: 0;
1283
- color: #829ab5;
1284
- font-size: 0.62rem;
1285
- line-height: 1.6;
1286
- }
1287
-
1288
- .inspector-list {
1289
- display: flex;
1290
- flex-direction: column;
1291
- gap: 0.3rem;
1292
- }
1293
-
1294
- .inspector-list button {
1295
- display: flex;
1296
- justify-content: space-between;
1297
- padding: 0.42rem 0;
1298
- border: 0;
1299
- border-bottom: 1px solid rgba(112, 168, 228, 0.08);
1300
- color: #a6bfd8;
1301
- background: transparent;
1302
- text-align: left;
1303
- font-size: 0.64rem;
1304
- }
1305
-
1306
- .inspector-list button:last-child { border-bottom: 0; }
1307
- .inspector-list button b { color: #58baff; }
1308
-
1309
- .workspace-action {
1310
- display: inline-flex;
1311
- align-items: center;
1312
- justify-content: center;
1313
- gap: 0.55rem;
1314
- padding: 0.62rem 0.85rem;
1315
- border: 1px solid color-mix(in srgb, var(--admin-blue) 48%, transparent);
1316
- border-radius: 0.5rem;
1317
- color: #f0f9ff;
1318
- background: linear-gradient(135deg, rgba(38, 130, 225, 0.55), rgba(90, 67, 183, 0.45));
1319
- box-shadow: 0 8px 24px color-mix(in srgb, var(--admin-blue) 17%, transparent);
1320
- font-size: 0.63rem;
1321
- font-weight: 700;
1322
- transition: 160ms ease;
1323
- }
1324
-
1325
- .workspace-action:hover { transform: translateY(-1px); filter: brightness(1.12); }
1326
-
1327
- .workspace-action {
1328
- padding: 0.5rem 0.7rem;
1329
- color: color-mix(in srgb, var(--admin-ink, #eef6ff) 86%, transparent);
1330
- background: color-mix(in srgb, var(--admin-blue) 15%, transparent);
1331
- box-shadow: none;
1332
- }
1333
-
1334
- .section-heading {
1335
- margin-bottom: 1.4rem;
1336
- }
1337
-
1338
- .section-heading-title {
1339
- display: flex;
1340
- align-items: center;
1341
- gap: 0.75rem;
1342
- }
1343
-
1344
- .section-heading-mark {
1345
- display: block;
1346
- width: 3px;
1347
- height: 27px;
1348
- border-radius: 999px;
1349
- background: linear-gradient(#5bc6ff, #8d76ff);
1350
- box-shadow: 0 0 14px rgba(83, 180, 255, 0.8);
1351
- }
1352
-
1353
- .section-heading h2 {
1354
- margin: 0;
1355
- color: #f1f8ff;
1356
- font-size: 1.18rem;
1357
- letter-spacing: -0.04em;
1358
- }
1359
-
1360
- .admin-view-stack {
1361
- display: flex;
1362
- flex-direction: column;
1363
- gap: 1rem;
1364
- }
1365
-
1366
- .overview-hero,
1367
- .config-intro {
1368
- display: flex;
1369
- align-items: center;
1370
- justify-content: space-between;
1371
- gap: 2rem;
1372
- padding: 1.5rem 1.6rem;
1373
- overflow: hidden;
1374
- border: 1px solid rgba(83, 165, 246, 0.24);
1375
- border-radius: 0.9rem;
1376
- background: linear-gradient(115deg, rgba(22, 70, 122, 0.42), rgba(21, 28, 77, 0.3) 58%, rgba(88, 39, 128, 0.27));
1377
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 18px 55px rgba(0, 0, 0, 0.18);
1378
- }
1379
-
1380
- .overview-hero h1,
1381
- .config-intro h1 {
1382
- margin: 0.55rem 0 0.4rem;
1383
- color: #f0f8ff;
1384
- font-size: clamp(1.65rem, 3vw, 2.55rem);
1385
- letter-spacing: -0.075em;
1386
- }
1387
-
1388
- .overview-hero h1 em,
1389
- .config-intro h1 em {
1390
- color: #6fcaff;
1391
- font-style: normal;
1392
- text-shadow: 0 0 24px rgba(80, 183, 255, 0.4);
1393
- }
1394
-
1395
- .overview-hero p,
1396
- .config-intro p {
1397
- max-width: 580px;
1398
- margin: 0;
1399
- color: #9ab0c9;
1400
- font-size: 0.73rem;
1401
- line-height: 1.7;
1402
- }
1403
-
1404
- .hero-orbit-art {
1405
- flex: 0 0 124px;
1406
- width: 124px;
1407
- height: 124px;
1408
- }
1409
-
1410
- .hero-orbit-art strong {
1411
- z-index: 1;
1412
- color: #aee7ff;
1413
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1414
- font-size: 1rem;
1415
- text-shadow: 0 0 16px #359cff;
1416
- }
1417
-
1418
- .hero-orbit-art span { top: 23px; right: 21px; }
1419
- .hero-orbit-art i { bottom: 26px; left: 19px; background: #d27cff; box-shadow: 0 0 10px #d27cff; }
1420
- .hero-orbit-art b { right: 17px; bottom: 30px; width: 4px; height: 4px; background: #5ef0b3; box-shadow: 0 0 8px #5ef0b3; }
1421
-
1422
- .hero-art {
1423
- position: relative;
1424
- flex: 0 0 124px;
1425
- width: 124px;
1426
- height: 124px;
1427
- display: grid;
1428
- place-items: center;
1429
- border-radius: 0.9rem;
1430
- }
1431
- .hero-art strong {
1432
- z-index: 1;
1433
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1434
- font-size: 1rem;
1435
- text-shadow: 0 0 16px currentColor;
1436
- letter-spacing: 0.02em;
1437
- }
1438
- .hero-art .ha-a,
1439
- .hero-art .ha-b,
1440
- .hero-art .ha-c {
1441
- position: absolute;
1442
- border-radius: 50%;
1443
- }
1444
-
1445
- /* bars — three rising service bars */
1446
- .hero-art--bars {
1447
- color: #5ef0b3;
1448
- border: 1px solid rgba(94, 240, 179, 0.32);
1449
- background: linear-gradient(180deg, rgba(22, 90, 92, 0.45), rgba(6, 26, 34, 0.55));
1450
- box-shadow: inset 0 0 22px rgba(94, 240, 179, 0.1);
1451
- }
1452
- .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; }
1453
- .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; }
1454
- .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; }
1455
-
1456
- /* stack — stacked plugin tiles */
1457
- .hero-art--stack {
1458
- color: #ffc46b;
1459
- border: 1px solid rgba(255, 196, 107, 0.32);
1460
- background: linear-gradient(180deg, rgba(120, 74, 20, 0.4), rgba(40, 22, 10, 0.55));
1461
- box-shadow: inset 0 0 22px rgba(255, 196, 107, 0.08);
1462
- }
1463
- .hero-art--stack .ha-a, .hero-art--stack .ha-b, .hero-art--stack .ha-c {
1464
- width: 58%; height: 14%; border-radius: 4px; background: rgba(255, 196, 107, 0.4);
1465
- }
1466
- .hero-art--stack .ha-a { bottom: 30%; left: 21%; }
1467
- .hero-art--stack .ha-b { bottom: 45%; left: 21%; width: 50%; background: rgba(255, 196, 107, 0.65); }
1468
- .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); }
1469
-
1470
- /* people — clients ringed around a center */
1471
- .hero-art--people {
1472
- color: #c8b4ff;
1473
- border: 1px solid rgba(200, 180, 255, 0.32);
1474
- background: linear-gradient(180deg, rgba(84, 50, 150, 0.45), rgba(30, 16, 60, 0.55));
1475
- box-shadow: inset 0 0 22px rgba(200, 180, 255, 0.1);
1476
- }
1477
- .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); }
1478
- .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); }
1479
- .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); }
1480
-
1481
- /* wave — pulsing heartbeat line */
1482
- .hero-art--wave {
1483
- color: #6fe8a8;
1484
- border: 1px solid rgba(111, 232, 168, 0.32);
1485
- background: linear-gradient(180deg, rgba(18, 102, 84, 0.45), rgba(8, 28, 30, 0.55));
1486
- box-shadow: inset 0 0 22px rgba(111, 232, 168, 0.1);
1487
- }
1488
- .hero-art--wave .ha-a, .hero-art--wave .ha-b, .hero-art--wave .ha-c { border-radius: 3px; }
1489
- .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); }
1490
- .hero-art--wave .ha-b { left: 44%; top: 26%; width: 8px; height: 26%; background: rgba(111, 232, 168, 0.55); transform: rotate(20deg); }
1491
- .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); }
1492
-
1493
- /* coins — stacked cylinder of payment */
1494
- .hero-art--coins {
1495
- color: #ffd479;
1496
- border: 1px solid rgba(255, 212, 121, 0.32);
1497
- background: linear-gradient(180deg, rgba(122, 86, 20, 0.45), rgba(44, 28, 12, 0.55));
1498
- box-shadow: inset 0 0 22px rgba(255, 212, 121, 0.08);
1499
- }
1500
- .hero-art--coins .ha-a, .hero-art--coins .ha-b, .hero-art--coins .ha-c {
1501
- left: 33%; right: 33%; height: 11%; border-radius: 50%; background: rgba(255, 212, 121, 0.55);
1502
- }
1503
- .hero-art--coins .ha-a { bottom: 28%; }
1504
- .hero-art--coins .ha-b { bottom: 43%; background: rgba(255, 212, 121, 0.75); }
1505
- .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); }
1506
-
1507
- /* cubes — stacked database shelves */
1508
- .hero-art--cubes {
1509
- color: #6fd6ff;
1510
- border: 1px solid rgba(111, 214, 255, 0.32);
1511
- background: linear-gradient(180deg, rgba(22, 74, 116, 0.5), rgba(10, 28, 50, 0.55));
1512
- box-shadow: inset 0 0 22px rgba(111, 214, 255, 0.1);
1513
- }
1514
- .hero-art--cubes .ha-a, .hero-art--cubes .ha-b, .hero-art--cubes .ha-c {
1515
- width: 46%; height: 13%; border-radius: 4px; background: rgba(111, 214, 255, 0.5);
1516
- }
1517
- .hero-art--cubes .ha-a { top: 26%; left: 27%; transform: skew(-10deg); }
1518
- .hero-art--cubes .ha-b { top: 42%; left: 27%; background: rgba(111, 214, 255, 0.75); transform: skew(-10deg); }
1519
- .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); }
1520
-
1521
- /* spark — four-petal bloom around a center */
1522
- .hero-art--spark {
1523
- color: #ff9fd6;
1524
- border: 1px solid rgba(255, 159, 214, 0.32);
1525
- background: radial-gradient(circle, rgba(150, 40, 110, 0.5), rgba(40, 16, 40, 0.55) 70%);
1526
- box-shadow: inset 0 0 22px rgba(255, 159, 214, 0.1);
1527
- }
1528
- .hero-art--spark .ha-a { top: 20%; left: 50%; width: 30%; height: 30%; transform: translateX(-50%); background: rgba(255, 159, 214, 0.35); }
1529
- .hero-art--spark .ha-b { left: 20%; top: 50%; width: 28%; height: 28%; transform: translateY(-50%); background: rgba(255, 159, 214, 0.6); }
1530
- .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); }
1531
-
1532
- /* grid — plugin/extension tiles */
1533
- .hero-art--grid {
1534
- color: #ffc46b;
1535
- border: 1px solid rgba(255, 196, 107, 0.32);
1536
- background: linear-gradient(180deg, rgba(120, 74, 20, 0.4), rgba(40, 22, 10, 0.55));
1537
- box-shadow: inset 0 0 22px rgba(255, 196, 107, 0.08);
1538
- }
1539
- .hero-art--grid .ha-a, .hero-art--grid .ha-b, .hero-art--grid .ha-c {
1540
- width: 30%; height: 30%; border-radius: 5px; background: rgba(255, 196, 107, 0.4);
1541
- }
1542
- .hero-art--grid .ha-a { top: 22%; left: 22%; }
1543
- .hero-art--grid .ha-b { top: 22%; right: 22%; background: rgba(255, 196, 107, 0.6); }
1544
- .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); }
1545
-
1546
- /* cards — payment card stack */
1547
- .hero-art--cards {
1548
- color: #ffd479;
1549
- border: 1px solid rgba(255, 212, 121, 0.32);
1550
- background: linear-gradient(180deg, rgba(122, 86, 20, 0.45), rgba(44, 28, 12, 0.55));
1551
- box-shadow: inset 0 0 22px rgba(255, 212, 121, 0.08);
1552
- }
1553
- .hero-art--cards .ha-a, .hero-art--cards .ha-b, .hero-art--cards .ha-c {
1554
- left: 22%; right: 22%; height: 34%; border-radius: 6px; background: rgba(255, 212, 121, 0.35);
1555
- }
1556
- .hero-art--cards .ha-a { top: 22%; transform: rotate(-6deg); }
1557
- .hero-art--cards .ha-b { top: 34%; transform: rotate(4deg); background: rgba(255, 212, 121, 0.6); }
1558
- .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); }
1559
-
1560
- /* bolt — AI schema flash */
1561
- .hero-art--bolt {
1562
- color: #6fd6ff;
1563
- border: 1px solid rgba(111, 214, 255, 0.32);
1564
- background: radial-gradient(circle, rgba(30, 110, 160, 0.5), rgba(10, 28, 50, 0.55) 70%);
1565
- box-shadow: inset 0 0 22px rgba(111, 214, 255, 0.1);
1566
- }
1567
- .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); }
1568
- .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); }
1569
- .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); }
1570
-
1571
- /* ===== animated art — orbit spin, glow, breathing, floating dots ===== */
1572
- @keyframes hero-orbit-spin { to { transform: rotate(360deg); } }
1573
- @keyframes hero-counter-spin { to { transform: rotate(-360deg); } }
1574
- @keyframes orbit-ring-glow {
1575
- 0%, 100% { box-shadow: 0 0 32px rgba(58, 149, 255, 0.18), inset 0 0 24px rgba(94, 119, 255, 0.12); }
1576
- 50% { box-shadow: 0 0 48px rgba(58, 149, 255, 0.4), inset 0 0 30px rgba(94, 119, 255, 0.24); }
1577
- }
1578
- @keyframes dot-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.9); } }
1579
- @keyframes hero-text-glow { 0%, 100% { opacity: 0.85; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.6); } }
1580
- @keyframes hero-art-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
1581
- @keyframes ha-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
1582
- @keyframes ha-pulse { 0%, 100% { opacity: 0.6; filter: brightness(0.9); } 50% { opacity: 1; filter: brightness(1.45); } }
1583
-
1584
- .hero-orbit-art,
1585
- .preview-orbit {
1586
- animation: hero-orbit-spin 16s linear infinite, orbit-ring-glow 4.5s ease-in-out infinite;
1587
- }
1588
-
1589
- .hero-orbit-art strong,
1590
- .preview-orbit strong {
1591
- animation: hero-counter-spin 16s linear infinite, hero-text-glow 3.4s ease-in-out infinite;
1592
- }
1593
-
1594
- .hero-orbit-art span,
1595
- .hero-orbit-art i,
1596
- .hero-orbit-art b,
1597
- .preview-orbit span,
1598
- .preview-orbit i,
1599
- .preview-orbit b {
1600
- animation: dot-glow 2.4s ease-in-out infinite;
1601
- }
1602
- .hero-orbit-art i,
1603
- .preview-orbit i { animation-delay: 0.8s; }
1604
- .hero-orbit-art b,
1605
- .preview-orbit b { animation-delay: 1.6s; }
1606
-
1607
- .hero-art { animation: hero-art-breathe 5s ease-in-out infinite; }
1608
- .hero-art strong { animation: hero-text-glow 3.4s ease-in-out infinite; }
1609
- .hero-art .ha-a,
1610
- .hero-art .ha-b,
1611
- .hero-art .ha-c { animation: ha-pulse 3s ease-in-out infinite, ha-float 4.6s ease-in-out infinite; }
1612
- .hero-art .ha-b { animation-delay: 0.5s, 0.9s; }
1613
- .hero-art .ha-c { animation-delay: 1s, 1.8s; }
1614
-
1615
- @media (prefers-reduced-motion: reduce) {
1616
- .hero-orbit-art, .preview-orbit, .hero-art,
1617
- .hero-orbit-art strong, .preview-orbit strong, .hero-art strong,
1618
- .hero-orbit-art span, .hero-orbit-art i, .hero-orbit-art b,
1619
- .preview-orbit span, .preview-orbit i, .preview-orbit b,
1620
- .hero-art .ha-a, .hero-art .ha-b, .hero-art .ha-c { animation: none; }
1621
- }
1622
-
1623
- .overview-stat-grid {
1624
- position: relative;
1625
- z-index: 1;
1626
- display: grid;
1627
- grid-template-columns: repeat(4, minmax(0, 1fr));
1628
- gap: 0.7rem;
1629
- }
1630
-
1631
- .overview-stat {
1632
- padding: 0.95rem 1rem;
1633
- border: 1px solid rgba(112, 168, 228, 0.16);
1634
- border-radius: 0.7rem;
1635
- background: rgba(10, 30, 56, 0.56);
1636
- }
1637
-
1638
- .overview-stat > span {
1639
- color: #6e8aaa;
1640
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1641
- font-size: 0.53rem;
1642
- letter-spacing: 0.11em;
1643
- }
1644
-
1645
- .overview-stat strong {
1646
- display: block;
1647
- margin: 0.45rem 0 0.2rem;
1648
- color: #f0f8ff;
1649
- font-size: 1.5rem;
1650
- letter-spacing: -0.05em;
1651
- }
1652
-
1653
- .overview-stat strong small { color: #718baa; font-size: 0.8rem; font-weight: 500; }
1654
- .overview-stat b { color: #718ba7; font-size: 0.55rem; font-weight: 500; }
1655
- .overview-stat .stat-good { color: #5ef0b3; }
1656
- .overview-stat .stat-violet { color: #bd9aff; }
1657
-
1658
- .overview-columns {
1659
- display: grid;
1660
- grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
1661
- gap: 0.8rem;
1662
- }
1663
-
1664
- .workspace-panel {
1665
- padding: 1rem;
1666
- border: 1px solid rgba(112, 168, 228, 0.17);
1667
- border-radius: 0.8rem;
1668
- background: rgba(8, 25, 48, 0.68);
1669
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 14px 42px rgba(0, 0, 0, 0.14);
1670
- }
1671
-
1672
- .panel-title-row h3 {
1673
- margin: 0.35rem 0 0;
1674
- color: #eaf6ff;
1675
- font-size: 0.88rem;
1676
- letter-spacing: -0.03em;
1677
- }
1678
-
1679
- .text-action {
1680
- border: 0;
1681
- color: #5ebcff;
1682
- background: transparent;
1683
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1684
- font-size: 0.58rem;
1685
- }
1686
-
1687
- .surface-grid {
1688
- display: grid;
1689
- grid-auto-flow: column;
1690
- grid-template-rows: repeat(2, auto);
1691
- grid-template-columns: repeat(4, minmax(0, 1fr));
1692
- gap: 0.55rem;
1693
- margin-top: 1rem;
1694
- }
1695
-
1696
- .surface-grid .surface-card {
1697
- position: relative;
1698
- display: grid;
1699
- grid-template-columns: 38px 1fr;
1700
- grid-template-rows: auto auto;
1701
- column-gap: 0.7rem;
1702
- align-items: center;
1703
- padding: 0.8rem;
1704
- border: 1px solid var(--admin-border, rgba(125, 174, 235, 0.2));
1705
- border-radius: 0.8rem;
1706
- color: var(--admin-ink, #eef6ff);
1707
- background: var(--admin-surface, rgba(10, 24, 45, 0.78));
1708
- text-align: left;
1709
- overflow: hidden;
1710
- transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
1711
- }
1712
-
1713
- .surface-grid .surface-card::before {
1714
- content: '';
1715
- position: absolute;
1716
- inset: 0;
1717
- background: radial-gradient(14rem 6rem at 120% -30%, color-mix(in srgb, var(--acc, var(--admin-blue)) 32%, transparent), transparent 70%);
1718
- opacity: 0;
1719
- transition: opacity 180ms ease;
1720
- }
1721
-
1722
- .surface-grid .surface-card:hover {
1723
- border-color: color-mix(in srgb, var(--acc, var(--admin-blue)) 55%, transparent);
1724
- background: color-mix(in srgb, var(--acc, var(--admin-blue)) 14%, transparent);
1725
- transform: translateY(-2px);
1726
- box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--acc, var(--admin-blue)) 40%, transparent);
1727
- }
1728
-
1729
- .surface-grid .surface-card:hover::before { opacity: 1; }
1730
- .surface-grid .surface-card strong { align-self: end; font-size: 0.7rem; font-weight: 600; color: var(--admin-ink, #eef6ff); }
1731
- .surface-grid .surface-card small { grid-column: 2; color: var(--admin-muted, #849ab7); font-size: 0.56rem; }
1732
-
1733
- .surface-grid .surface-icon {
1734
- display: grid;
1735
- grid-row: 1 / 3;
1736
- width: 38px;
1737
- height: 38px;
1738
- place-items: center;
1739
- border-radius: 0.7rem;
1740
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1741
- font-size: 0.85rem;
1742
- color: var(--acc, var(--admin-blue));
1743
- 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));
1744
- border: 1px solid color-mix(in srgb, var(--acc, var(--admin-blue)) 34%, transparent);
1745
- box-shadow: inset 0 0 14px color-mix(in srgb, var(--acc, var(--admin-blue)) 12%, transparent);
1746
- }
1747
-
1748
- .surface-grid .surface-go {
1749
- position: absolute;
1750
- top: 0.55rem;
1751
- right: 0.6rem;
1752
- font-style: normal;
1753
- color: var(--acc, var(--admin-blue));
1754
- font-size: 0.72rem;
1755
- opacity: 0;
1756
- transform: translateX(-4px);
1757
- transition: opacity 180ms ease, transform 180ms ease;
1758
- }
1759
-
1760
- .surface-grid .surface-card:hover .surface-go { opacity: 1; transform: translateX(0); }
1761
-
1762
- .surface-grid .acc-blue { --acc: var(--admin-blue); }
1763
- .surface-grid .acc-violet { --acc: var(--admin-violet); }
1764
- .surface-grid .acc-pink { --acc: var(--admin-pink); }
1765
-
1766
- .live-badge,
1767
- .restart-badge,
1768
- .secret-badge {
1769
- display: inline-flex;
1770
- align-items: center;
1771
- gap: 0.35rem;
1772
- padding: 0.3rem 0.45rem;
1773
- border: 1px solid rgba(91, 240, 179, 0.25);
1774
- border-radius: 999px;
1775
- color: #6df0bb;
1776
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1777
- font-size: 0.48rem;
1778
- letter-spacing: 0.08em;
1779
- }
1780
-
1781
- .restart-badge { border-color: rgba(255, 195, 102, 0.27); color: #ffcf78; }
1782
- .secret-badge { border-color: rgba(243, 110, 184, 0.3); color: #ff9dcc; }
1783
-
1784
- .pulse-bars {
1785
- display: flex;
1786
- align-items: end;
1787
- gap: 0.32rem;
1788
- height: 82px;
1789
- margin: 1.15rem 0 0.7rem;
1790
- padding: 0.35rem 0;
1791
- border-bottom: 1px solid rgba(112, 168, 228, 0.16);
1792
- }
1793
-
1794
- .pulse-bars i {
1795
- flex: 1;
1796
- min-height: 12%;
1797
- border-radius: 0.18rem 0.18rem 0 0;
1798
- background: linear-gradient(#67c8ff, #4d53bf);
1799
- box-shadow: 0 0 12px rgba(74, 169, 255, 0.22);
1800
- }
1801
-
1802
- .pulse-panel p,
1803
- .panel-description {
1804
- color: #7891ad;
1805
- font-size: 0.6rem;
1806
- line-height: 1.6;
1807
- }
1808
-
1809
- .live-traffic-panel { margin-top: 0.8rem; }
1810
-
1811
- .traffic-chart {
1812
- margin-top: 0.85rem;
1813
- }
1814
-
1815
- .traffic-chart-body {
1816
- position: relative;
1817
- }
1818
-
1819
- .traffic-chart-body svg {
1820
- display: block;
1821
- width: 100%;
1822
- height: 96px;
1823
- overflow: visible;
1824
- }
1825
-
1826
- .traffic-tip {
1827
- position: absolute;
1828
- transform: translate(-50%, -140%);
1829
- pointer-events: none;
1830
- z-index: 20;
1831
- display: flex;
1832
- flex-direction: column;
1833
- align-items: center;
1834
- gap: 0.1rem;
1835
- padding: 0.4rem 0.7rem;
1836
- border-radius: 0.5rem;
1837
- border: 1px solid color-mix(in srgb, var(--admin-violet, #9f7bff) 45%, transparent);
1838
- background: color-mix(in srgb, #0a1830 88%, transparent);
1839
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
1840
- white-space: nowrap;
1841
- }
1842
-
1843
- .traffic-tip-time {
1844
- font-size: 0.6rem;
1845
- color: var(--admin-muted, #849ab7);
1846
- }
1847
-
1848
- .traffic-tip-count {
1849
- font-size: 0.78rem;
1850
- font-weight: 700;
1851
- color: var(--admin-ink, #eef6ff);
1852
- }
1853
-
1854
- .traffic-meta {
1855
- display: flex;
1856
- align-items: center;
1857
- gap: 1rem;
1858
- margin-top: 0.55rem;
1859
- color: #7891ad;
1860
- font-size: 0.62rem;
1861
- }
1862
-
1863
- .traffic-meta span {
1864
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1865
- letter-spacing: 0.04em;
1866
- }
1867
-
1868
- .traffic-meta .text-action { margin-left: auto; }
1869
-
1870
- .series-tabs {
1871
- display: inline-flex;
1872
- gap: 0.25rem;
1873
- padding: 0.2rem;
1874
- border: 1px solid var(--admin-border, rgba(125, 174, 235, 0.2));
1875
- border-radius: 0.5rem;
1876
- background: var(--admin-surface, rgba(10, 24, 45, 0.78));
1877
- }
1878
-
1879
- .series-tabs button {
1880
- border: 0;
1881
- border-radius: 0.35rem;
1882
- padding: 0.32rem 0.65rem;
1883
- color: var(--admin-muted, #849ab7);
1884
- background: transparent;
1885
- font-size: 0.62rem;
1886
- cursor: pointer;
1887
- transition: 140ms ease;
1888
- }
1889
-
1890
- .series-tabs button:hover { color: var(--admin-ink, #eef6ff); }
1891
-
1892
- .series-tabs button.is-active {
1893
- color: var(--admin-ink, #eef6ff);
1894
- background: color-mix(in srgb, var(--admin-violet, #9f7bff) 26%, transparent);
1895
- box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--admin-violet, #9f7bff) 40%, transparent);
1896
- }
1897
-
1898
- .req-log-table-wrap { max-height: 340px; overflow: auto; }
1899
-
1900
- .req-log-table th { position: sticky; top: 0; background: rgba(8, 25, 48, 0.96); z-index: 1; }
1901
-
1902
- .req-log-table td { font-size: 0.62rem; }
1903
-
1904
- .req-td-time { white-space: nowrap; color: var(--admin-muted, #849ab7); }
1905
- .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); }
1906
- .req-td-dur { white-space: nowrap; color: var(--admin-muted, #849ab7); }
1907
- .req-td-ip { white-space: nowrap; color: var(--admin-muted, #849ab7); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
1908
- .req-td-ref { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--admin-muted, #849ab7); }
1909
-
1910
- .req-method { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; }
1911
- .req-method-get { color: #5ef0b3; }
1912
- .req-method-post { color: #ffd479; }
1913
- .req-method-put { color: #6dcbff; }
1914
- .req-method-patch { color: #c0a0ff; }
1915
- .req-method-delete { color: #ff91a8; }
1916
-
1917
- .req-status { font-weight: 700; }
1918
- .req-status-err { color: #ff6b81; }
1919
- .req-status-warn { color: #ffcf78; }
1920
-
1921
- .workspace-tabs {
1922
- display: inline-flex;
1923
- gap: 0.2rem;
1924
- padding: 0.22rem;
1925
- border: 1px solid rgba(112, 168, 228, 0.14);
1926
- border-radius: 0.58rem;
1927
- background: rgba(8, 24, 45, 0.72);
1928
- }
1929
-
1930
- .workspace-tabs button {
1931
- padding: 0.52rem 0.75rem;
1932
- border: 0;
1933
- border-radius: 0.4rem;
1934
- color: #7891ae;
1935
- background: transparent;
1936
- font-size: 0.62rem;
1937
- }
1938
-
1939
- .workspace-tabs button.is-active { color: #ecf8ff; background: linear-gradient(135deg, rgba(38, 130, 225, 0.55), rgba(90, 67, 183, 0.45)); }
1940
-
1941
- /* ---- Logs: aggregated console viewer ---- */
1942
- .log-card { padding: 0; overflow: hidden; }
1943
-
1944
- .log-stat-strip {
1945
- display: grid;
1946
- grid-template-columns: repeat(4, minmax(0, 1fr));
1947
- gap: 0.55rem;
1948
- padding: 0.85rem 0.85rem 0.65rem;
1949
- }
1950
- .log-stat {
1951
- display: flex;
1952
- align-items: center;
1953
- gap: 0.55rem;
1954
- min-width: 0;
1955
- padding: 0.55rem 0.7rem;
1956
- border: 1px solid rgba(112, 168, 228, 0.16);
1957
- border-radius: 0.7rem;
1958
- background: rgba(10, 30, 56, 0.5);
1959
- }
1960
- .log-stat i {
1961
- width: 8px;
1962
- height: 8px;
1963
- flex: 0 0 auto;
1964
- border-radius: 50%;
1965
- background: color-mix(in srgb, var(--admin-blue) 80%, white);
1966
- box-shadow: 0 0 10px color-mix(in srgb, var(--admin-blue) 62%, transparent);
1967
- }
1968
- .log-stat b {
1969
- color: #eaf6ff;
1970
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1971
- font-size: 1rem;
1972
- line-height: 1;
1973
- }
1974
- .log-stat em {
1975
- overflow: hidden;
1976
- color: #6f89a8;
1977
- font-size: 0.54rem;
1978
- font-style: normal;
1979
- letter-spacing: 0.04em;
1980
- text-overflow: ellipsis;
1981
- white-space: nowrap;
1982
- }
1983
- .log-stat--all i { background: var(--admin-blue); box-shadow: 0 0 10px color-mix(in srgb, var(--admin-blue) 62%, transparent); }
1984
- .log-stat--all b { color: #aee1ff; }
1985
- .log-stat--error i { background: #fb7185; box-shadow: 0 0 10px rgba(251, 113, 133, 0.55); }
1986
- .log-stat--error b { color: #fda4af; }
1987
- .log-stat--warn i { background: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.55); }
1988
- .log-stat--warn b { color: #fcd34d; }
1989
- .log-stat--info i { background: #38bdf8; box-shadow: 0 0 10px rgba(56, 189, 248, 0.55); }
1990
- .log-stat--info b { color: #7dd3fc; }
1991
-
1992
- .log-toolbar {
1993
- display: flex;
1994
- flex-wrap: wrap;
1995
- align-items: center;
1996
- gap: 0.55rem;
1997
- padding: 0.1rem 0.85rem 0.85rem;
1998
- }
1999
- .log-filter-group {
2000
- display: inline-flex;
2001
- gap: 0.15rem;
2002
- padding: 0.2rem;
2003
- border-radius: 0.65rem;
2004
- }
2005
- .log-filter-btn {
2006
- padding: 0.42rem 0.62rem;
2007
- border: 0;
2008
- border-radius: 0.45rem;
2009
- color: #8aa7c6;
2010
- background: transparent;
2011
- font-size: 0.62rem;
2012
- font-weight: 600;
2013
- cursor: pointer;
2014
- transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
2015
- }
2016
- .log-filter-btn b { font-weight: 700; opacity: 0.65; }
2017
- .log-filter-btn:hover { color: #dbeafe; }
2018
- .log-filter-btn.is-active {
2019
- color: #f0f8ff;
2020
- background: linear-gradient(135deg, color-mix(in srgb, var(--admin-blue) 55%, transparent), color-mix(in srgb, var(--admin-violet) 45%, transparent));
2021
- box-shadow: 0 2px 10px color-mix(in srgb, var(--admin-blue) 22%, transparent);
2022
- }
2023
- .log-filter-btn.is-active b { opacity: 1; }
2024
- .log-crit-btn {
2025
- padding: 0.42rem 0.62rem;
2026
- border: 1px solid transparent;
2027
- border-radius: 0.45rem;
2028
- color: #8aa7c6;
2029
- background: transparent;
2030
- font-size: 0.62rem;
2031
- font-weight: 600;
2032
- cursor: pointer;
2033
- transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
2034
- }
2035
- .log-crit-btn:hover { color: #ffdce6; }
2036
- .log-crit-btn.is-active {
2037
- color: #ffd5e0;
2038
- border-color: rgba(251, 113, 133, 0.45);
2039
- background: rgba(244, 63, 94, 0.14);
2040
- box-shadow: 0 0 10px rgba(244, 63, 94, 0.18);
2041
- }
2042
- .log-ai-btn {
2043
- color: #d9c8ff;
2044
- border-color: color-mix(in srgb, var(--admin-violet) 40%, transparent);
2045
- background: color-mix(in srgb, var(--admin-violet) 16%, transparent);
2046
- }
2047
- .log-ai-btn:hover { color: #fff; background: color-mix(in srgb, var(--admin-violet) 30%, transparent); }
2048
- .log-ai-btn:disabled { opacity: 0.6; cursor: wait; }
2049
- .log-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; }
2050
- .log-service-input { width: 9.5rem; }
2051
- .log-search-input { width: 13rem; }
2052
- .log-search-input::placeholder { color: #59738f; }
2053
-
2054
- .log-viewer {
2055
- position: relative;
2056
- min-height: 180px;
2057
- max-height: min(58vh, 620px);
2058
- overflow: auto;
2059
- border-top: 1px solid rgba(112, 168, 228, 0.14);
2060
- border-bottom: 1px solid rgba(112, 168, 228, 0.14);
2061
- background: rgba(1, 8, 19, 0.62);
2062
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
2063
- font-size: 0.68rem;
2064
- line-height: 1.55;
2065
- }
2066
- .log-viewer:focus-visible {
2067
- outline: 1px solid color-mix(in srgb, var(--admin-blue) 55%, transparent);
2068
- outline-offset: -1px;
2069
- }
2070
-
2071
- .log-colhead {
2072
- position: sticky;
2073
- top: 0;
2074
- z-index: 2;
2075
- display: grid;
2076
- grid-template-columns: 84px 150px 88px 72px minmax(0, 1fr);
2077
- gap: 0.5rem;
2078
- align-items: center;
2079
- padding: 0.45rem 0.7rem;
2080
- border-bottom: 1px solid rgba(112, 168, 228, 0.13);
2081
- color: #5f7b99;
2082
- background: rgba(4, 14, 28, 0.94);
2083
- backdrop-filter: blur(8px);
2084
- font-size: 0.53rem;
2085
- font-weight: 700;
2086
- letter-spacing: 0.09em;
2087
- text-transform: uppercase;
2088
- }
2089
- .log-colhead span { color: inherit; }
2090
-
2091
- .log-row {
2092
- display: grid;
2093
- grid-template-columns: 84px 150px 88px 72px minmax(0, 1fr);
2094
- gap: 0.5rem;
2095
- align-items: baseline;
2096
- padding: 0.32rem 0.7rem;
2097
- border-top: 1px solid rgba(112, 168, 228, 0.07);
2098
- border-left: 2px solid transparent;
2099
- color: #b7cce3;
2100
- transition: background 120ms ease, border-color 120ms ease;
2101
- }
2102
- .log-row:hover { background: rgba(58, 116, 178, 0.12); }
2103
- .log-row--error {
2104
- border-left-color: rgba(244, 63, 94, 0.55);
2105
- background: linear-gradient(90deg, rgba(244, 63, 94, 0.1), rgba(244, 63, 94, 0.02) 65%, transparent);
2106
- }
2107
- .log-row--warn {
2108
- border-left-color: rgba(251, 191, 36, 0.5);
2109
- background: linear-gradient(90deg, rgba(251, 191, 36, 0.07), transparent 65%);
2110
- }
2111
- .log-row--info { border-left-color: transparent; }
2112
-
2113
- @keyframes log-critical-flash {
2114
- 0%, 100% { background: rgba(244, 63, 94, 0.16); box-shadow: inset 2px 0 0 rgba(251, 113, 133, 0.85); }
2115
- 50% { background: rgba(251, 191, 36, 0.13); box-shadow: inset 2px 0 0 rgba(251, 191, 36, 0.95); }
2116
- }
2117
- .log-row--critical {
2118
- border-left-color: rgba(251, 113, 133, 0.85);
2119
- animation: log-critical-flash 1.4s ease-in-out infinite;
2120
- }
2121
- @media (prefers-reduced-motion: reduce) {
2122
- .log-row--critical { animation: none; background: rgba(244, 63, 94, 0.14); }
2123
- }
2124
-
2125
- .log-time { color: #66809e; font-variant-numeric: tabular-nums; white-space: nowrap; }
2126
- .log-service, .log-source, .log-level { white-space: nowrap; }
2127
-
2128
- .log-tag {
2129
- justify-self: start;
2130
- padding: 0.08rem 0.45rem;
2131
- border-radius: 999px;
2132
- font-size: 0.6rem;
2133
- font-weight: 600;
2134
- letter-spacing: 0.02em;
2135
- }
2136
- .log-tag--default {
2137
- border: 1px solid rgba(255, 255, 255, 0.14);
2138
- background: rgba(255, 255, 255, 0.05);
2139
- color: #b7cce3;
2140
- }
2141
-
2142
- .log-source { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; }
2143
- .log-source--stdout { color: #7fd0e8; }
2144
- .log-source--stderr { color: #ff9f8a; }
2145
- .log-source--system { color: #c5a7ff; }
2146
-
2147
- .log-level {
2148
- justify-self: start;
2149
- padding: 0.06rem 0.4rem;
2150
- border-radius: 999px;
2151
- font-size: 0.58rem;
2152
- font-weight: 700;
2153
- text-transform: uppercase;
2154
- letter-spacing: 0.04em;
2155
- }
2156
- .log-level--error { color: #fda4af; background: rgba(244, 63, 94, 0.14); }
2157
- .log-level--warn { color: #fcd34d; background: rgba(251, 191, 36, 0.12); }
2158
- .log-level--info { color: #7dd3fc; background: rgba(56, 189, 248, 0.12); }
2159
-
2160
- .log-line { min-width: 0; color: #cfe2f5; white-space: pre-wrap; word-break: break-word; }
2161
- .log-row--error .log-line { color: #ffc4c9; }
2162
- .log-row--warn .log-line { color: #ffe3b0; }
2163
-
2164
- .log-empty {
2165
- display: flex;
2166
- flex-direction: column;
2167
- align-items: center;
2168
- justify-content: center;
2169
- gap: 0.35rem;
2170
- min-height: 220px;
2171
- padding: 1.5rem;
2172
- color: #64809f;
2173
- text-align: center;
2174
- }
2175
- .log-empty-glyph { font-size: 1.4rem; opacity: 0.55; color: var(--admin-muted); }
2176
- .log-empty strong { color: #a9c4de; font-size: 0.78rem; }
2177
- .log-empty p { margin: 0; color: #64809f; font-size: 0.65rem; }
2178
-
2179
- .log-footer {
2180
- display: flex;
2181
- align-items: center;
2182
- justify-content: space-between;
2183
- gap: 0.6rem;
2184
- padding: 0.7rem 0.85rem 0.8rem;
2185
- }
2186
- .log-foot-left { display: inline-flex; align-items: center; gap: 0.35rem; color: #6b87a5; font-size: 0.58rem; }
2187
- .log-live-dot {
2188
- display: inline-block;
2189
- width: 7px;
2190
- height: 7px;
2191
- border-radius: 50%;
2192
- background: #34d399;
2193
- box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
2194
- animation: dot-glow 2.4s ease-in-out infinite;
2195
- }
2196
- .log-live-btn.is-live { color: #34d399; border-color: rgba(52, 211, 153, 0.4); background: rgba(16, 185, 129, 0.12); }
2197
-
2198
- .log-ai-panel {
2199
- margin: 0 0.85rem 0.85rem;
2200
- padding: 0.75rem 0.8rem;
2201
- border: 1px solid color-mix(in srgb, var(--admin-violet) 34%, transparent);
2202
- border-radius: 0.7rem;
2203
- background: rgba(18, 12, 40, 0.5);
2204
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
2205
- }
2206
- .log-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; }
2207
- .log-ai-title { color: #d9c8ff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
2208
- .log-ai-actions { display: flex; align-items: center; gap: 0.4rem; }
2209
- .log-ai-note { color: #8f7fbf; font-size: 0.6rem; }
2210
- .log-ai-err {
2211
- margin: 0 0 0.5rem;
2212
- padding: 0.5rem 0.6rem;
2213
- border: 1px solid rgba(244, 63, 94, 0.4);
2214
- border-radius: 0.5rem;
2215
- color: #ffb4ad;
2216
- background: rgba(244, 63, 94, 0.1);
2217
- font-size: 0.62rem;
2218
- }
2219
- .log-ai-open { margin-left: 0.5rem; }
2220
- .log-ai-body {
2221
- margin: 0;
2222
- max-height: 260px;
2223
- overflow: auto;
2224
- padding: 0.6rem 0.7rem;
2225
- border-radius: 0.5rem;
2226
- background: rgba(1, 8, 19, 0.55);
2227
- color: #d9ccff;
2228
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
2229
- font-size: 0.66rem;
2230
- line-height: 1.6;
2231
- white-space: pre-wrap;
2232
- word-break: break-word;
2233
- }
2234
-
2235
- @media (prefers-reduced-motion: reduce) { .log-live-dot { animation: none; } }
2236
-
2237
- @media (max-width: 760px) {
2238
- .log-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2239
- .log-toolbar-right { width: 100%; margin-left: 0; }
2240
- .log-service-input, .log-search-input { flex: 1 1 45%; width: auto; min-width: 0; }
2241
- .log-viewer { max-height: 48vh; font-size: 0.64rem; }
2242
- .log-colhead, .log-row { grid-template-columns: 66px 92px minmax(0, 1fr); gap: 0.4rem; padding-inline: 0.55rem; }
2243
- .log-colhead .log-source, .log-colhead .log-level,
2244
- .log-row .log-source, .log-row .log-level { display: none; }
2245
- }
2246
-
2247
- .config-intro { padding: 1.2rem 1.35rem; }
2248
- .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; }
2249
- .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; }
2250
- .config-layer-stack span { color: #7189a4; background: rgba(112, 168, 228, 0.1); }
2251
- .config-layer-stack b { color: #9ecbff; background: rgba(52, 131, 218, 0.18); }
2252
- .config-layer-stack strong { color: #d2b4ff; background: rgba(133, 81, 212, 0.24); }
2253
- .config-layer-stack i { color: #ffaad1; background: rgba(210, 72, 145, 0.18); }
2254
- .config-panel { padding: 1.15rem; }
2255
- .key-value-table { margin-top: 1rem; overflow: hidden; border: 1px solid rgba(112, 168, 228, 0.14); border-radius: 0.6rem; }
2256
- .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; }
2257
- .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; }
2258
- .key-value-row { border-top: 1px solid rgba(112, 168, 228, 0.09); background: rgba(5, 20, 39, 0.34); }
2259
- .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; }
2260
- .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); }
2261
- .row-delete { border: 0; color: #d77b9f; background: transparent; font-size: 1rem; }
2262
- .row-delete:hover { color: #ff8fbd; }
2263
- .key-value-empty { padding: 1.5rem; color: #6f89a6; font-size: 0.64rem; text-align: center; }
2264
- .key-group { border-top: 1px solid rgba(112, 168, 228, 0.14); }
2265
- .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; }
2266
- .key-group-head small { margin-left: auto; color: #5d7fa1; font-size: 0.48rem; letter-spacing: 0.05em; text-transform: none; }
2267
- .key-group-name { color: #8fd0ff; font-weight: 700; }
2268
- .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; }
2269
- .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; }
2270
- .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); }
2271
- .key-add-bar select { flex: 0 0 auto; }
2272
- .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; }
2273
- .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; }
2274
- .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); }
2275
- .env-add-bar .env-value-wrap input { padding-right: 1.8rem; }
2276
- .config-footer { margin-top: 1rem; color: #738ca8; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.55rem; }
2277
- .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; }
2278
- .effective-editor { margin-top: 0; white-space: pre; }
2279
- .env-path { overflow: hidden; color: #7491b0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.54rem; text-overflow: ellipsis; white-space: nowrap; }
2280
- .env-value-wrap { position: relative; min-width: 0; }
2281
- .env-value-wrap input { padding-right: 1.8rem; }
2282
- .secret-mark { position: absolute; top: 50%; right: 0.6rem; color: #526e8e; font-size: 0.5rem; transform: translateY(-50%); }
2283
- .secret-mark.is-secret { color: #ff8fc4; text-shadow: 0 0 8px rgba(255, 143, 196, 0.8); }
2284
-
2285
- .env-table .key-value-head, .env-table .key-value-row { grid-template-columns: 180px minmax(0, 1fr); }
2286
- .env-table .env-value-wrap { display: flex; align-items: center; gap: 0.4rem; }
2287
- .env-table .env-value-wrap input { flex: 1; min-width: 0; padding-right: 1.5rem; }
2288
- .env-table .env-value-wrap .secret-mark { right: 1.6rem; }
2289
- .env-table .env-value-wrap .row-delete {
2290
- display: grid;
2291
- place-items: center;
2292
- flex: 0 0 auto;
2293
- width: 24px;
2294
- height: 24px;
2295
- padding: 0;
2296
- border: 1px solid rgba(215, 123, 159, 0.45);
2297
- border-radius: 0.3rem;
2298
- background: rgba(243, 110, 184, 0.12);
2299
- color: #f77b9f;
2300
- font-size: 0.9rem;
2301
- line-height: 1;
2302
- }
2303
- .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); }
2304
- .env-intro { background: linear-gradient(115deg, rgba(24, 69, 117, 0.4), rgba(77, 31, 92, 0.28)); }
2305
- .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); }
2306
- .env-file-switch button {
2307
- padding: 0.32rem 0.6rem;
2308
- border: 0;
2309
- border-radius: 0.36rem;
2310
- color: #7f9ab6;
2311
- background: transparent;
2312
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
2313
- font-size: 0.6rem;
2314
- cursor: pointer;
2315
- transition: color 0.15s, background 0.15s, box-shadow 0.15s;
2316
- }
2317
- .env-file-switch button:hover { color: #c9e2f7; }
2318
- .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); }
2319
- .env-lock-art {
2320
- position: relative;
2321
- display: flex;
2322
- flex-direction: column;
2323
- align-items: center;
2324
- justify-content: center;
2325
- width: 82px;
2326
- height: 82px;
2327
- border: 1px solid rgba(243, 110, 184, 0.35);
2328
- border-radius: 50%;
2329
- color: #ff96c9;
2330
- background: radial-gradient(circle, rgba(243, 110, 184, 0.25), transparent 68%);
2331
- box-shadow: 0 0 30px rgba(243, 110, 184, 0.18);
2332
- animation: orbit-ring-glow 4.5s ease-in-out infinite, hero-art-breathe 5s ease-in-out infinite;
2333
- }
2334
- .env-lock-art::before {
2335
- content: "";
2336
- position: absolute;
2337
- top: 50%;
2338
- left: 50%;
2339
- width: 58px;
2340
- height: 66px;
2341
- transform: translate(-50%, -50%);
2342
- opacity: 0.1;
2343
- background: linear-gradient(180deg, rgba(255, 190, 224, 0.95), rgba(210, 80, 150, 0.85) 46%, rgba(120, 30, 86, 0.9));
2344
- clip-path: polygon(50% 0%, 87% 10%, 100% 24%, 100% 66%, 87% 84%, 50% 100%, 13% 84%, 0% 66%, 0% 24%, 13% 10%);
2345
- animation: shield-glow 3s ease-in-out infinite;
2346
- }
2347
- .env-lock-art::after {
2348
- content: "";
2349
- position: absolute;
2350
- top: 50%;
2351
- left: 50%;
2352
- width: 46px;
2353
- height: 54px;
2354
- transform: translate(-50%, -50%);
2355
- opacity: 0.1;
2356
- background: radial-gradient(circle at 50% 32%, rgba(255, 170, 214, 0.55), rgba(80, 14, 58, 0.78) 74%);
2357
- clip-path: polygon(50% 6%, 82% 16%, 94% 54%, 50% 96%, 6% 54%, 18% 16%);
2358
- animation: shield-inner 4.5s ease-in-out infinite;
2359
- }
2360
- .env-lock-glyph {
2361
- position: relative;
2362
- z-index: 1;
2363
- font-style: normal;
2364
- font-size: 1.7rem;
2365
- line-height: 1;
2366
- animation: glyph-glow 2.6s ease-in-out infinite;
2367
- }
2368
- .env-lock-art span {
2369
- position: relative;
2370
- z-index: 1;
2371
- display: block;
2372
- margin-top: 0.15rem;
2373
- color: #ffb6d9;
2374
- font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
2375
- font-size: 0.43rem;
2376
- letter-spacing: 0.1em;
2377
- animation: hero-text-glow 3.4s ease-in-out infinite;
2378
- }
2379
- @keyframes glyph-glow {
2380
- 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)); }
2381
- 50% { filter: drop-shadow(0 0 8px rgba(255, 210, 235, 0.95)) drop-shadow(0 0 24px rgba(255, 159, 214, 0.65)); }
2382
- }
2383
- @keyframes shield-glow {
2384
- 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 159, 214, 0.15)); opacity: 0.06; }
2385
- 50% { filter: drop-shadow(0 0 6px rgba(255, 159, 214, 0.4)); opacity: 0.14; }
2386
- }
2387
- @keyframes shield-inner {
2388
- 0%, 100% { filter: brightness(1); opacity: 0.08; }
2389
- 50% { filter: brightness(1.4); opacity: 0.12; }
2390
- }
2391
- @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; } }
2392
- .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; }
2393
-
2394
- .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; }
2395
- .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; }
2396
- .confirm-dialog-head { display: flex; align-items: center; gap: 0.7rem; }
2397
- .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; }
2398
- .confirm-dialog-head strong { color: #f3f9ff; font-size: 0.92rem; }
2399
- .confirm-dialog-close { margin-left: auto; border: 0; color: #7d96b2; background: transparent; font-size: 1.15rem; }
2400
- .confirm-dialog-close:hover { color: #e8f4ff; }
2401
- .confirm-dialog-message { margin: 0.9rem 0 1.15rem; color: #a9c1db; font-size: 0.78rem; line-height: 1.6; }
2402
- .confirm-dialog-message strong { color: #ffffff; font-weight: 600; }
2403
- .confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
2404
- .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; }
2405
- .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)); }
2406
- .confirm-dialog-primary:disabled { opacity: 0.55; cursor: default; }
2407
- @starting-style {
2408
- .provider-modal-backdrop,
2409
- .confirm-overlay,
2410
- .safe-goto-overlay {
2411
- opacity: 0;
2412
- background-color: rgba(2, 8, 18, 0);
2413
- backdrop-filter: blur(0) saturate(1);
2414
- -webkit-backdrop-filter: blur(0) saturate(1);
2415
- }
2416
- }
2417
- @keyframes confirm-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
2418
- .confirm-dialog { animation: confirm-pop 150ms ease; }
2419
-
2420
-
2421
- .appearance-panel { position: absolute; top: calc(100% + 0.75rem); right: 0; z-index: 30; width: 245px; padding: 0.85rem; border: 1px solid rgba(112, 168, 228, 0.2); border-radius: 0.6rem; background: rgba(9, 22, 43, 0.92); box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55); backdrop-filter: blur(20px) saturate(135%); -webkit-backdrop-filter: blur(20px) saturate(135%); animation: admin-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
2422
- .appearance-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
2423
- .appearance-heading > span:last-child { color: #6e89a8; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.45rem; }
2424
- .appearance-panel > strong { display: block; margin-bottom: 0.65rem; color: #eaf6ff; font-size: 0.72rem; }
2425
- .appearance-options, .ui-mode-options { display: flex; flex-direction: column; gap: 0.3rem; }
2426
- .appearance-options button, .ui-mode-options button { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.46rem; border: 1px solid transparent; border-radius: 0.45rem; color: #9ab2ce; background: transparent; text-align: left; }
2427
- .appearance-options button:hover, .appearance-options button.is-selected, .ui-mode-options button:hover, .ui-mode-options button.is-selected { border-color: rgba(84, 183, 255, 0.26); color: #edf8ff; background: rgba(61, 139, 220, 0.14); }
2428
- .appearance-options button > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 0.12rem; }
2429
- .appearance-options b { font-size: 0.6rem; font-weight: 600; }
2430
- .appearance-options small, .ui-mode-options small { color: #6f89a7; font-size: 0.51rem; }
2431
- .appearance-options i { color: #61c7ff; font-size: 0.7rem; font-style: normal; }
2432
- .theme-preview { width: 26px; height: 26px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0.35rem; box-shadow: inset 0 0 11px rgba(255, 255, 255, 0.15); }
2433
- .theme-preview.aurora { background: linear-gradient(135deg, #0d5b9c, #4262dd 55%, #b558c6); }
2434
- .theme-preview.midnight { background: linear-gradient(135deg, #080f1c, #162c48 55%, #26364e); }
2435
- .theme-preview.violet { background: linear-gradient(135deg, #22154c, #5c2c9c 55%, #d063b6); }
2436
- .appearance-divider { height: 1px; margin: 0.7rem 0; background: rgba(112, 168, 228, 0.14); }
2437
- .ui-mode-options { margin-top: 0.45rem; }
2438
- .ui-mode-options button { justify-content: space-between; padding: 0.42rem 0.5rem; font-size: 0.59rem; }
2439
- .ui-mode-options button small { margin-left: auto; }
2440
-
2441
- .admin-account { position: relative; }
2442
- @keyframes admin-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
2443
- .account-panel { position: absolute; top: calc(100% + 0.75rem); right: 0; z-index: 31; width: 230px; padding: 0.6rem; border: 1px solid rgba(112, 168, 228, 0.2); border-radius: 0.6rem; background: rgba(9, 22, 43, 0.92); box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55); backdrop-filter: blur(20px) saturate(135%); -webkit-backdrop-filter: blur(20px) saturate(135%); animation: admin-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
2444
-
2445
- .account-panel::before {
2446
- content: "";
2447
- position: absolute;
2448
- top: -6px;
2449
- right: 10px;
2450
- width: 11px;
2451
- height: 11px;
2452
- border-left: 1px solid rgba(112, 168, 228, 0.2);
2453
- border-top: 1px solid rgba(112, 168, 228, 0.2);
2454
- background: rgba(9, 22, 43, 0.92);
2455
- transform: rotate(45deg);
2456
- }
2457
- .appearance-panel::before {
2458
- content: "";
2459
- position: absolute;
2460
- top: -6px;
2461
- right: 9.5px;
2462
- width: 11px;
2463
- height: 11px;
2464
- border-left: 1px solid rgba(112, 168, 228, 0.2);
2465
- border-top: 1px solid rgba(112, 168, 228, 0.2);
2466
- background: rgba(9, 22, 43, 0.92);
2467
- transform: rotate(45deg);
2468
- }
2469
- .account-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.4rem; }
2470
- .account-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(84, 183, 255, 0.52); border-radius: 50%; color: #fff; background: linear-gradient(135deg, #2767a6, #7544a7); font-size: 0.62rem; font-weight: 700; }
2471
- .account-meta { display: flex; min-width: 0; flex-direction: column; gap: 0.12rem; }
2472
- .account-meta strong { color: #eaf6ff; font-size: 0.68rem; font-weight: 700; }
2473
- .account-meta small { overflow: hidden; color: #6f89a7; font-size: 0.52rem; text-overflow: ellipsis; white-space: nowrap; }
2474
- .account-divider { height: 1px; margin: 0.55rem 0; background: rgba(112, 168, 228, 0.14); }
2475
- .account-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.5rem; border: 1px solid transparent; border-radius: 0.5rem; color: #9ab2ce; background: transparent; text-align: left; }
2476
- .account-item:hover { border-color: rgba(84, 183, 255, 0.26); color: #edf8ff; background: rgba(61, 139, 220, 0.14); }
2477
- .account-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 0.4rem; color: #61c7ff; background: rgba(40, 110, 178, 0.25); line-height: 0; }
2478
- .account-item > span:last-child { display: flex; flex-direction: column; gap: 0.1rem; }
2479
- .account-item b { color: inherit; font-size: 0.62rem; font-weight: 600; }
2480
- .account-item small { color: #6f89a7; font-size: 0.5rem; }
2481
- .account-item.account-danger:hover { border-color: rgba(244, 117, 172, 0.34); color: #ffd5e8; background: rgba(243, 110, 184, 0.12); }
2482
- .account-item.account-danger .account-item-icon { color: #ff8fc4; background: rgba(243, 110, 184, 0.16); }
2483
-
2484
- .admin-shell.theme-midnight { --admin-blue: #78bfff; --admin-violet: #7da5d3; --admin-pink: #b8c7db; background: radial-gradient(45rem 34rem at 55% -15%, rgba(51, 93, 137, 0.2), transparent 72%), linear-gradient(135deg, #02050b, #07111f 54%, #030711); }
2485
- .admin-shell.theme-midnight .admin-shell::before { opacity: 0.18; }
2486
- .admin-shell.theme-midnight .admin-nav button.is-active { background: rgba(79, 137, 193, 0.18); }
2487
- .admin-shell.theme-violet { --admin-blue: #b4a1ff; --admin-violet: #d78bff; --admin-pink: #ff8ed1; background: radial-gradient(48rem 34rem at 60% -12%, rgba(117, 58, 194, 0.32), transparent 72%), radial-gradient(35rem 28rem at 0% 85%, rgba(53, 65, 176, 0.22), transparent 72%), #0b071b; }
2488
- .admin-shell.theme-violet .admin-nav button.is-active { border-color: rgba(198, 134, 255, 0.34); background: linear-gradient(90deg, rgba(111, 64, 188, 0.3), rgba(195, 74, 170, 0.12)); box-shadow: inset 3px 0 #cf8cff, 0 8px 24px rgba(118, 49, 177, 0.14); }
2489
- .admin-shell.theme-violet .section-heading-mark { background: linear-gradient(#c989ff, #ff86ca); }
2490
- .admin-shell.ui-compact .admin-sidebar { flex-basis: 210px; padding-inline: 0.7rem; }
2491
- .admin-shell.ui-compact .admin-content { padding: 1.25rem 1.25rem 4.5rem; }
2492
- .admin-shell.ui-compact .admin-dock { left: 210px; }
2493
- .admin-shell.ui-compact .admin-side-widget { display: none; }
2494
- .admin-shell.ui-focus .admin-inspector { display: none; }
2495
- .admin-shell.ui-focus .admin-content-layout { display: block; }
2496
- .admin-shell.ui-focus .admin-content { max-width: 1180px; margin: auto; }
2497
-
2498
- @media (max-width: 760px) {
2499
- .admin-shell.ui-compact .admin-sidebar { flex-basis: 246px; }
2500
- .admin-shell.ui-compact .admin-dock { left: 0; }
2501
- }
2502
-
2503
- @media (max-width: 620px) {
2504
- .account-panel { position: fixed; top: 58px; right: 0.6rem; width: 250px; }
2505
- }
2506
-
2507
- .admin-tool-rail { position: fixed; top: 50%; right: 0.8rem; z-index: 4; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.55rem 0.4rem; transform: translateY(-50%); border: 1px solid rgba(83, 177, 255, 0.35); border-radius: 999px; background: rgba(6, 19, 39, 0.78); box-shadow: 0 0 28px rgba(45, 125, 221, 0.18); backdrop-filter: blur(18px); }
2508
- .admin-tool-rail button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; color: #9fc7ec; background: transparent; line-height: 0; cursor: pointer; }
2509
- .admin-tool-rail button:hover { color: white; background: rgba(71, 161, 247, 0.2); }
2510
- .admin-tool-rail button.is-active { color: white; background: linear-gradient(135deg, rgba(38, 130, 225, 0.55), rgba(90, 67, 183, 0.45)); box-shadow: 0 0 12px rgba(45, 125, 221, 0.3); }
2511
- .admin-tool-rail button[data-tip]::after {
2512
- content: attr(data-tip);
2513
- position: absolute;
2514
- bottom: calc(100% + 8px);
2515
- left: 50%;
2516
- z-index: 50;
2517
- padding: 0.3rem 0.55rem;
2518
- border: 1px solid rgba(83, 177, 255, 0.4);
2519
- border-radius: 0.45rem;
2520
- color: #eaf6ff;
2521
- background: rgba(6, 19, 39, 0.96);
2522
- box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
2523
- font-size: 0.58rem;
2524
- font-weight: 600;
2525
- letter-spacing: 0.02em;
2526
- line-height: 1.2;
2527
- white-space: nowrap;
2528
- opacity: 0;
2529
- pointer-events: none;
2530
- transform: translateX(-50%) translateY(2px);
2531
- transition: opacity 120ms ease, transform 120ms ease;
2532
- }
2533
- .admin-tool-rail button[data-tip]:hover::after,
2534
- .admin-tool-rail button[data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
2535
-
2536
- .rail-panel { position: fixed; top: 50%; right: 3.4rem; z-index: 40; width: 250px; max-height: 70vh; overflow: auto; padding: 0.9rem; translate: 0 -50%; border: 1px solid rgba(92, 185, 255, 0.3); border-radius: 0.75rem; background: rgba(7, 30, 58, 0.92); box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55); backdrop-filter: blur(20px) saturate(135%); -webkit-backdrop-filter: blur(20px) saturate(135%); animation: admin-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
2537
- .rail-panel-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; }
2538
- .rail-x { margin-left: auto; border: 0; color: var(--admin-muted); background: transparent; font-size: 1.05rem; line-height: 1; }
2539
- .rail-x:hover { color: var(--admin-ink); }
2540
- .rail-panel-text { margin: 0 0 0.6rem; color: #9ab2ce; font-size: 0.68rem; line-height: 1.5; }
2541
- .rail-panel-hint { display: block; color: #6f89a7; font-size: 0.6rem; }
2542
- .rail-divider { height: 1px; margin: 0.6rem 0; background: rgba(112, 168, 228, 0.14); }
2543
- .rail-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.6rem; }
2544
- .rail-empty { color: #6f89a7; font-size: 0.66rem; padding: 0.3rem 0; }
2545
- .rail-notes { display: block; width: 100%; min-height: 110px; padding: 0.5rem; resize: vertical; border: 1px solid rgba(112, 168, 228, 0.17); border-radius: 0.5rem; outline: 0; color: #dcefff; background: rgba(1, 8, 19, 0.8); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.66rem; line-height: 1.55; }
2546
- .rail-list { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
2547
- .rail-list li { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0.4rem; border: 1px solid transparent; border-radius: 0.4rem; }
2548
- .rail-list li:hover { border-color: rgba(84, 183, 255, 0.2); background: rgba(61, 139, 220, 0.08); }
2549
- .rail-list li b { color: #dcecff; font-size: 0.66rem; }
2550
- .rail-list li span { color: #6f89a7; font-size: 0.56rem; }
2551
- .rail-list--nav li { padding: 0; }
2552
- .rail-list--nav li button { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4rem 0.45rem; border: 0; border-radius: 0.4rem; color: #9ab2ce; background: transparent; text-align: left; cursor: pointer; }
2553
- .rail-list--nav li button:hover, .rail-list--nav li button.is-on { color: #edf8ff; background: rgba(61, 139, 220, 0.14); }
2554
- .rail-fav-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; line-height: 0; }
2555
- .rail-fav-label { flex: 1; font-size: 0.66rem; }
2556
- .rail-fav-check { color: #61c7ff; font-size: 0.66rem; }
2557
- .rail-appearance { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
2558
- .rail-appearance button { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.45rem; border: 1px solid transparent; border-radius: 0.45rem; color: #9ab2ce; background: transparent; text-align: left; cursor: pointer; }
2559
- .rail-appearance button:hover, .rail-appearance button.is-selected { border-color: rgba(84, 183, 255, 0.26); color: #edf8ff; background: rgba(61, 139, 220, 0.14); }
2560
- .rail-appearance-label { display: flex; flex: 1; flex-direction: column; gap: 0.12rem; }
2561
- .rail-appearance b { font-size: 0.62rem; font-weight: 600; }
2562
- .rail-appearance small { color: #6f89a7; font-size: 0.52rem; }
2563
- .rail-appearance i { color: #61c7ff; font-size: 0.66rem; font-style: normal; }
2564
-
2565
- .admin-notify { position: relative; }
2566
-
2567
- .notify-panel {
2568
- position: absolute;
2569
- top: calc(100% + 0.7rem);
2570
- right: 0;
2571
- z-index: 45;
2572
- width: min(380px, calc(100vw - 2rem));
2573
- max-height: min(70vh, 620px);
2574
- display: flex;
2575
- flex-direction: column;
2576
- border: 1px solid rgba(112, 168, 228, 0.2);
2577
- border-radius: 0.6rem;
2578
- background: rgba(9, 22, 43, 0.92);
2579
- box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55);
2580
- backdrop-filter: blur(20px) saturate(135%);
2581
- -webkit-backdrop-filter: blur(20px) saturate(135%);
2582
- animation: notify-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
2583
- }
2584
- .notify-panel::before {
2585
- content: '';
2586
- position: absolute;
2587
- top: -5px;
2588
- right: 9.5px;
2589
- z-index: 2;
2590
- width: 10px;
2591
- height: 10px;
2592
- transform: rotate(45deg);
2593
- border-top: 1px solid rgba(112, 168, 228, 0.2);
2594
- border-left: 1px solid rgba(112, 168, 228, 0.2);
2595
- background: rgba(9, 22, 43, 0.92);
2596
- }
2597
- @keyframes notify-pop {
2598
- from { opacity: 0; transform: translateY(-6px) scale(0.98); }
2599
- to { opacity: 1; transform: translateY(0) scale(1); }
2600
- }
2601
- .notify-head {
2602
- display: flex;
2603
- align-items: center;
2604
- gap: 0.55rem;
2605
- flex: 0 0 auto;
2606
- padding: 0.7rem 0.8rem;
2607
- border-bottom: 1px solid rgba(112, 168, 228, 0.14);
2608
- border-radius: 0.6rem 0.6rem 0 0;
2609
- }
2610
- .notify-head-icon {
2611
- display: grid;
2612
- width: 28px;
2613
- height: 28px;
2614
- flex: 0 0 auto;
2615
- place-items: center;
2616
- border-radius: 0.5rem;
2617
- color: #cfeaff;
2618
- background: linear-gradient(135deg, rgba(38, 130, 225, 0.5), rgba(90, 67, 183, 0.4));
2619
- font-size: 0.8rem;
2620
- }
2621
- .notify-head-titles { display: flex; flex-direction: column; gap: 0.05rem; }
2622
- .notify-head-titles strong { color: #eaf6ff; font-size: 0.74rem; font-weight: 600; }
2623
- .notify-refresh {
2624
- width: 24px;
2625
- height: 24px;
2626
- margin-left: auto;
2627
- border: 1px solid rgba(112, 168, 228, 0.2);
2628
- border-radius: 0.4rem;
2629
- color: var(--admin-muted);
2630
- background: rgba(25, 57, 95, 0.34);
2631
- font-size: 0.72rem;
2632
- line-height: 1;
2633
- }
2634
- .notify-refresh:hover { color: var(--admin-ink); background: rgba(71, 161, 247, 0.2); }
2635
- .notify-refresh:disabled { opacity: 0.5; }
2636
- .notify-head .rail-x { margin-left: 0; }
2637
-
2638
- .notify-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
2639
- .notify-body::-webkit-scrollbar { width: 8px; }
2640
- .notify-body::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(112, 168, 228, 0.22); }
2641
-
2642
- .notify-summary { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid rgba(112, 168, 228, 0.1); }
2643
- .notify-summary span { display: inline-flex; align-items: center; gap: 0.3rem; color: #9ab2ce; font-size: 0.6rem; }
2644
- .notify-summary .is-err { color: #fda4af; }
2645
- .notify-summary .is-warn { color: #fcd34d; }
2646
- .notify-summary .is-ok { color: #6ee7b7; }
2647
- .notify-summary .is-log { color: #93c5fd; }
2648
-
2649
- .notify-section-title { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.8rem 0.3rem; }
2650
- .notify-section-title span { color: #6f89a7; font-size: 0.58rem; letter-spacing: 0.12em; }
2651
- .notify-section-title button { border: 0; color: var(--admin-blue); background: transparent; font-size: 0.58rem; }
2652
- .notify-section-title button:hover { color: var(--admin-ink); }
2653
- .notify-section-title button:disabled { opacity: 0.4; }
2654
- .notify-section-meta { color: #5f7c99 !important; letter-spacing: 0 !important; }
2655
-
2656
- .notify-alerts { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; padding: 0.15rem 0.6rem 0.6rem; list-style: none; }
2657
- .notify-alerts li {
2658
- position: relative;
2659
- display: flex;
2660
- align-items: flex-start;
2661
- gap: 0.5rem;
2662
- overflow: hidden;
2663
- padding: 0.45rem 0.5rem 0.45rem 0.6rem;
2664
- border: 1px solid rgba(112, 168, 228, 0.12);
2665
- border-radius: 0.5rem;
2666
- background: rgba(10, 32, 60, 0.5);
2667
- }
2668
- .notify-alerts li:hover { border-color: rgba(84, 183, 255, 0.28); background: rgba(61, 139, 220, 0.1); }
2669
- .notify-alert-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; }
2670
- .notify-alerts li.is-err .notify-alert-bar { background: #fb7185; box-shadow: 0 0 8px rgba(251, 113, 133, 0.6); }
2671
- .notify-alerts li.is-warn .notify-alert-bar { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.6); }
2672
- .notify-alerts li.is-ok .notify-alert-bar { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.6); }
2673
- .notify-alert-dot { flex: none; width: 7px; height: 7px; margin-top: 0.32rem; border-radius: 50%; }
2674
- .notify-alerts li.is-err .notify-alert-dot { background: #fb7185; box-shadow: 0 0 6px rgba(251, 113, 133, 0.7); }
2675
- .notify-alerts li.is-warn .notify-alert-dot { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.7); }
2676
- .notify-alerts li.is-ok .notify-alert-dot { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.7); }
2677
- .notify-alert-body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
2678
- .notify-alert-body b { color: #dcecff; font-size: 0.64rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
2679
- .notify-alert-body small { color: #6f89a7; font-size: 0.54rem; }
2680
- .notify-alert-x { flex: none; width: 18px; height: 18px; border: 0; border-radius: 0.3rem; color: var(--admin-blue); background: transparent; font-size: 0.85rem; line-height: 1; }
2681
- .notify-alert-x:hover { color: var(--admin-ink); background: rgba(71, 161, 247, 0.2); }
2682
-
2683
- .notify-logs { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; padding: 0.15rem 0.6rem 0.7rem; list-style: none; }
2684
- .notify-logs li { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.5rem; border: 1px solid transparent; border-radius: 0.45rem; }
2685
- .notify-logs li:hover { border-color: rgba(251, 113, 133, 0.25); background: rgba(251, 113, 133, 0.06); }
2686
- .notify-logs li b { color: #fda4af; font-size: 0.62rem; }
2687
- .notify-logs li span { color: #6f89a7; font-size: 0.54rem; }
2688
- .notify-logs li p { margin: 0.1rem 0 0; color: #ffb4b4; font-size: 0.58rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 1.45; overflow-wrap: anywhere; }
2689
-
2690
- .notify-empty { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.6rem 1rem 1.8rem; text-align: center; }
2691
- .notify-empty-icon { color: rgba(97, 199, 255, 0.35); font-size: 1.6rem; }
2692
- .notify-empty strong { color: #cfe0f0; font-size: 0.72rem; font-weight: 600; }
2693
- .notify-empty p { margin: 0; color: #6f89a7; font-size: 0.6rem; }
2694
-
2695
- .admin-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 999; display: flex; flex-direction: column; gap: 0.6rem; width: min(22rem, calc(100vw - 2rem)); pointer-events: none; }
2696
- .admin-toast {
2697
- position: relative;
2698
- display: flex;
2699
- align-items: flex-start;
2700
- gap: 0.65rem;
2701
- overflow: hidden;
2702
- padding: 0.75rem 0.8rem;
2703
- border: 1px solid color-mix(in srgb, var(--admin-blue) 42%, transparent);
2704
- border-radius: 0.9rem;
2705
- background: color-mix(in srgb, var(--admin-bg, #0b0d1a) 88%, rgba(255, 255, 255, 0.1));
2706
- box-shadow: 0 12px 36px color-mix(in srgb, var(--admin-blue) 24%, transparent);
2707
- backdrop-filter: blur(20px);
2708
- color: var(--admin-ink, #eef6ff);
2709
- pointer-events: auto;
2710
- animation: admin-toast-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
2711
- }
2712
- .admin-toast::before {
2713
- content: '';
2714
- position: absolute;
2715
- inset: 0 auto 0 0;
2716
- width: 3px;
2717
- background: linear-gradient(180deg, var(--admin-blue), var(--admin-violet));
2718
- }
2719
- .admin-toast.is-err::before { background: linear-gradient(180deg, #fb7185, #f43f5e); }
2720
- .admin-toast.is-warn::before { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
2721
- .admin-toast-icon {
2722
- display: grid;
2723
- flex: none;
2724
- place-items: center;
2725
- width: 22px;
2726
- height: 22px;
2727
- border: 1px solid color-mix(in srgb, var(--admin-blue) 48%, transparent);
2728
- border-radius: 50%;
2729
- background: color-mix(in srgb, var(--admin-blue) 22%, transparent);
2730
- color: var(--admin-blue);
2731
- font-size: 0.68rem;
2732
- font-weight: 700;
2733
- }
2734
- .admin-toast.is-err .admin-toast-icon { border-color: rgba(251, 113, 133, 0.5); background: rgba(251, 113, 133, 0.2); color: #fda4af; }
2735
- .admin-toast.is-warn .admin-toast-icon { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.2); color: #fcd34d; }
2736
- .admin-toast-body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
2737
- .admin-toast-body b { color: var(--admin-ink, #dcecff); font-size: 0.72rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
2738
- .admin-toast-body small { color: var(--admin-muted, #6f89a7); font-size: 0.56rem; text-transform: capitalize; }
2739
- .admin-toast-x { flex: none; width: 20px; height: 20px; border: 0; border-radius: 0.35rem; color: var(--admin-muted, #9ab2ce); background: transparent; font-size: 0.9rem; line-height: 1; cursor: pointer; }
2740
- .admin-toast-x:hover { color: var(--admin-ink, #dcecff); background: color-mix(in srgb, var(--admin-blue) 18%, transparent); }
2741
- @keyframes admin-toast-in {
2742
- from { opacity: 0; transform: translateX(18px) scale(0.96); }
2743
- to { opacity: 1; transform: translateX(0) scale(1); }
2744
- }
2745
-
2746
- .admin-dock { position: fixed; right: 0; bottom: 0; left: 246px; z-index: 3; display: flex; align-items: center; gap: 1.5rem; min-height: 38px; padding: 0 1.3rem; border-top: 1px solid rgba(112, 168, 228, 0.15); color: #7790ac; background: rgba(3, 13, 28, 0.88); backdrop-filter: blur(18px); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.53rem; }
2747
- .dock-logo { margin-right: 0.4rem; color: #5cc3ff; font-size: 0.75rem; }
2748
- .dock-right { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
2749
- .admin-dock strong { color: #b4d4ef; font-weight: 500; }
2750
-
2751
- @media (max-width: 1120px) {
2752
- .admin-inspector { display: none; }
2753
- .admin-content-layout { display: block; }
2754
- .admin-dock { left: 246px; }
2755
- }
2756
-
2757
- @media (max-width: 1024px) {
2758
- .admin-shell { width: 100vw; margin: 0; }
2759
- .admin-shell.ui-compact .admin-side-widget { display: block; }
2760
- .admin-content { padding: 1.6rem 1.4rem 5rem; }
2761
- .admin-tool-rail { display: none; }
2762
- .admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 246px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateX(-102%); transition: transform 180ms ease; box-shadow: 20px 0 50px rgba(0, 0, 0, 0.4); }
2763
- .admin-sidebar.is-open { transform: translateX(0); }
2764
- .admin-close-mobile, .admin-mobile-menu { display: grid; place-items: center; border: 0; background: transparent; }
2765
- .admin-close-mobile { margin-left: auto; color: #9eb6d1; font-size: 1.2rem; }
2766
- .admin-mobile-menu { width: 30px; height: 30px; color: #9ec8eb; font-size: 1rem; }
2767
- .admin-shell.ui-compact .admin-sidebar { flex-basis: 246px; }
2768
- .admin-shell.ui-compact .admin-dock { left: 0; }
2769
- .admin-dock { left: 0; gap: 0.5rem; padding: 0 0.75rem; }
2770
- .admin-dock > span:nth-child(2) { display: none; }
2771
- }
2772
-
2773
- @media (max-width: 760px) {
2774
- .admin-shell { width: 100vw; margin: 0; }
2775
- .admin-topbar { gap: 0.7rem; padding: 0 0.85rem; }
2776
- .admin-window-tab { min-width: 0; padding: 0 0.55rem; border-right: 0; }
2777
- .admin-window-tab strong { overflow: hidden; max-width: 90px; text-overflow: ellipsis; white-space: nowrap; }
2778
- .admin-search { display: none; }
2779
- .admin-mobile-search { display: grid; }
2780
- .admin-topbar.is-mobile-search .admin-mobile-search {
2781
- color: #fff;
2782
- background: linear-gradient(135deg, rgba(38, 130, 225, 0.55), rgba(90, 67, 183, 0.45));
2783
- }
2784
- .admin-topbar.is-mobile-search .admin-search {
2785
- position: absolute;
2786
- top: 100%;
2787
- left: 0;
2788
- right: 0;
2789
- display: flex;
2790
- width: auto;
2791
- border-radius: 0;
2792
- border-left: 0;
2793
- border-right: 0;
2794
- border-top: 1px solid rgba(112, 168, 228, 0.16);
2795
- background: rgba(4, 14, 29, 0.98);
2796
- }
2797
- .admin-topbar.is-mobile-search .admin-search kbd { display: none; }
2798
- .top-live { display: none; }
2799
- .admin-breadcrumb { padding: 0 0.95rem; }
2800
- .admin-content { padding: 1.25rem 0.85rem 4.5rem; }
2801
- .overview-hero, .config-intro { align-items: flex-start; padding: 1.1rem; }
2802
- .overview-hero, .config-intro { align-items: flex-start; padding: 1.1rem; }
2803
- .hero-orbit-art, .hero-art { flex-basis: 78px; width: 78px; height: 78px; }
2804
- .hero-orbit-art strong, .hero-art strong { font-size: 0.7rem; }
2805
- .overview-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2806
- .overview-columns { grid-template-columns: 1fr; }
2807
- .surface-grid { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; }
2808
- .config-layer-stack { display: none; }
2809
- .heading-actions { gap: 0.35rem; }
2810
- .restart-badge { display: none; }
2811
- .key-value-table { overflow-x: auto; }
2812
- .key-value-head, .key-value-row { min-width: 580px; }
2813
- .key-value-head, .key-value-row { grid-template-columns: 170px 110px 1fr 30px; }
2814
- .env-table .key-value-head, .env-table .key-value-row { grid-template-columns: 180px minmax(0, 1fr); }
2815
- .admin-tool-rail { display: none; }
2816
- }
2817
-
2818
- /* ---- Users & Roles ---- */
2819
- .notice-line {
2820
- display: flex;
2821
- align-items: center;
2822
- gap: 0.5rem;
2823
- padding: 0.6rem 0.85rem;
2824
- border: 1px solid rgba(255, 255, 255, 0.1);
2825
- border-radius: 0.7rem;
2826
- font-size: 0.82rem;
2827
- }
2828
- .notice-line.is-ok { color: #7ce7b0; background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.35); }
2829
- .notice-line.is-err { color: #ffb4ad; background: rgba(244, 63, 94, 0.1); border-color: rgba(244, 63, 94, 0.4); }
2830
-
2831
- .role-catalog {
2832
- display: grid;
2833
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
2834
- gap: 1rem;
2835
- }
2836
- .role-box {
2837
- display: flex;
2838
- flex-direction: column;
2839
- gap: 0.7rem;
2840
- padding: 1rem;
2841
- border: 1px solid rgba(255, 255, 255, 0.1);
2842
- border-radius: 0.9rem;
2843
- background: linear-gradient(150deg, rgba(13, 35, 67, 0.85), rgba(8, 20, 42, 0.9));
2844
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 14px 35px rgba(0, 0, 0, 0.2);
2845
- border-top: 2px solid var(--role-accent, #63bdff);
2846
- }
2847
- .role-box-head { display: flex; align-items: center; gap: 0.7rem; }
2848
- .role-box-icon {
2849
- display: grid;
2850
- place-items: center;
2851
- width: 2.4rem;
2852
- height: 2.4rem;
2853
- flex: none;
2854
- border: 1px solid var(--role-accent, #63bdff);
2855
- border-radius: 0.7rem;
2856
- background: color-mix(in srgb, var(--role-accent, #63bdff) 14%, transparent);
2857
- font-size: 1.15rem;
2858
- }
2859
- .role-box-head strong { display: block; color: #eef6ff; font-size: 0.95rem; line-height: 1.15; }
2860
- .role-box-id { display: inline-block; margin-top: 0.15rem; color: var(--admin-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.62rem; letter-spacing: 0.06em; }
2861
- .role-box-desc { margin: 0; color: #b7c7db; font-size: 0.8rem; line-height: 1.45; }
2862
- .role-section { display: flex; flex-direction: column; gap: 0.4rem; }
2863
- .role-section-title { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
2864
- .role-section-title.is-can { color: #5ee6a0; }
2865
- .role-section-title.is-no { color: #ff9f97; }
2866
- .role-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
2867
- .role-list li {
2868
- display: flex;
2869
- flex-direction: column;
2870
- gap: 0.1rem;
2871
- padding: 0.45rem 0.6rem;
2872
- border: 1px solid rgba(255, 255, 255, 0.07);
2873
- border-radius: 0.55rem;
2874
- background: rgba(255, 255, 255, 0.035);
2875
- }
2876
- .role-list b { color: #dce9f7; font-size: 0.78rem; font-weight: 600; }
2877
- .role-list span { color: #8296ad; font-size: 0.7rem; line-height: 1.4; }
2878
-
2879
- .role-chip {
2880
- display: inline-flex;
2881
- align-items: center;
2882
- gap: 0.3rem;
2883
- margin-right: 0.35rem;
2884
- margin-bottom: 0.2rem;
2885
- padding: 0.18rem 0.55rem;
2886
- border: 1px solid;
2887
- border-radius: 999px;
2888
- font-size: 0.72rem;
2889
- font-weight: 600;
2890
- white-space: nowrap;
2891
- }
2892
- .you-tag {
2893
- display: inline-block;
2894
- margin-left: 0.45rem;
2895
- padding: 0.1rem 0.45rem;
2896
- border: 1px solid rgba(99, 189, 255, 0.4);
2897
- border-radius: 999px;
2898
- color: #63bdff;
2899
- font-size: 0.62rem;
2900
- font-weight: 700;
2901
- letter-spacing: 0.06em;
2902
- text-transform: uppercase;
2903
- vertical-align: middle;
2904
- }
2905
-
2906
- .role-dialog { width: min(520px, 94vw); }
2907
- .role-options { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.5rem 0 0.75rem; }
2908
- .role-option {
2909
- display: flex;
2910
- align-items: center;
2911
- gap: 0.7rem;
2912
- width: 100%;
2913
- padding: 0.7rem 0.8rem;
2914
- border: 1px solid rgba(255, 255, 255, 0.1);
2915
- border-radius: 0.7rem;
2916
- background: rgba(255, 255, 255, 0.04);
2917
- cursor: pointer;
2918
- text-align: left;
2919
- transition: border-color 120ms ease, background 120ms ease;
2920
- }
2921
- .role-option:hover { background: rgba(255, 255, 255, 0.08); }
2922
- .role-option.is-on { border-color: var(--role-accent, #63bdff); background: color-mix(in srgb, var(--role-accent, #63bdff) 12%, rgba(255,255,255,0.04)); }
2923
- .role-option-icon {
2924
- display: grid;
2925
- place-items: center;
2926
- width: 1.9rem;
2927
- height: 1.9rem;
2928
- flex: none;
2929
- border: 1px solid currentColor;
2930
- border-radius: 0.6rem;
2931
- background: color-mix(in srgb, currentColor 12%, transparent);
2932
- font-size: 0.95rem;
2933
- }
2934
- .role-option-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
2935
- .role-option-text b { color: #e7f1fc; font-size: 0.84rem; }
2936
- .role-option-text small { color: #8296ad; font-size: 0.7rem; line-height: 1.35; }
2937
- .role-option-check {
2938
- flex: none;
2939
- display: grid;
2940
- place-items: center;
2941
- width: 1.4rem;
2942
- height: 1.4rem;
2943
- border: 1px solid rgba(255, 255, 255, 0.18);
2944
- border-radius: 50%;
2945
- color: #0f2c18;
2946
- background: rgba(255, 255, 255, 0.06);
2947
- font-size: 0.75rem;
2948
- font-weight: 700;
2949
- }
2950
- .role-option.is-on .role-option-check { border-color: #5ee6a0; background: #5ee6a0; color: #07231a; }
2951
- .role-hint { margin: 0 0 0.25rem; color: #9fb2c8; font-size: 0.72rem; line-height: 1.45; }
2952
- .role-hint b { color: #ff9f97; }
2953
-
2954
- /* ---- Theme Centre ---- */
2955
- .hero-art--palette {
2956
- color: #ffd479;
2957
- border: 1px solid rgba(255, 212, 121, 0.32);
2958
- background: linear-gradient(135deg, rgba(120, 74, 20, 0.4), rgba(40, 22, 10, 0.55));
2959
- box-shadow: inset 0 0 22px rgba(255, 212, 121, 0.08);
2960
- }
2961
- .hero-art--palette .ha-a { left: 28%; bottom: 30%; width: 34%; height: 26%; background: rgba(255, 132, 205, 0.85); box-shadow: 0 0 10px rgba(255, 132, 205, 0.7); border-radius: 6px; }
2962
- .hero-art--palette .ha-b { right: 28%; bottom: 30%; width: 26%; height: 40%; background: rgba(111, 214, 255, 0.9); box-shadow: 0 0 10px rgba(111, 214, 255, 0.7); border-radius: 6px; }
2963
- .hero-art--palette .ha-c { left: 50%; bottom: 52%; width: 22%; height: 22%; transform: translateX(-50%); background: rgba(211, 160, 255, 0.95); box-shadow: 0 0 10px rgba(211, 160, 255, 0.7); border-radius: 6px; }
2964
-
2965
- .theme-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
2966
- .theme-card {
2967
- display: flex;
2968
- align-items: center;
2969
- gap: 0.7rem;
2970
- padding: 0.8rem;
2971
- border: 1px solid rgba(112, 168, 228, 0.16);
2972
- border-radius: 0.7rem;
2973
- color: #eaf6ff;
2974
- background: rgba(8, 25, 48, 0.6);
2975
- text-align: left;
2976
- cursor: pointer;
2977
- transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
2978
- }
2979
- .theme-card:hover { transform: translateY(-2px); border-color: rgba(84, 183, 255, 0.4); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); }
2980
- .theme-card.is-active { border-color: rgba(92, 185, 255, 0.6); box-shadow: 0 0 0 2px rgba(92, 185, 255, 0.22), 0 12px 30px rgba(0, 0, 0, 0.28); }
2981
- .theme-card-body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.15rem; }
2982
- .theme-card-body b { font-size: 0.72rem; }
2983
- .theme-card-body small { color: #7d98b6; font-size: 0.56rem; }
2984
- .theme-card-check { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #042a1a; background: #5ef0b3; font-size: 0.6rem; font-style: normal; }
2985
- .ui-mode-row { flex-direction: row; gap: 0.45rem; }
2986
- .ui-mode-row button { justify-content: flex-start; }
2987
- .ui-mode-row button small { margin-left: auto; }
2988
- .custom-toggle {
2989
- padding: 0.45rem 0.7rem;
2990
- border: 1px solid rgba(94, 240, 179, 0.4);
2991
- border-radius: 0.5rem;
2992
- color: #9df0c4;
2993
- background: rgba(30, 120, 90, 0.18);
2994
- font-size: 0.62rem;
2995
- font-weight: 600;
2996
- cursor: pointer;
2997
- transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
2998
- }
2999
- .custom-toggle:hover { color: #e5fff2; }
3000
- .custom-toggle.is-active { color: #042a1a; background: linear-gradient(135deg, #3fd98f, #5ef0b3); box-shadow: 0 2px 14px rgba(94, 240, 179, 0.4); }
3001
- .custom-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
3002
- .color-row {
3003
- display: flex;
3004
- align-items: center;
3005
- gap: 0.6rem;
3006
- padding: 0.6rem 0.7rem;
3007
- border: 1px solid rgba(112, 168, 228, 0.14);
3008
- border-radius: 0.6rem;
3009
- background: rgba(8, 25, 48, 0.5);
3010
- cursor: pointer;
3011
- transition: border-color 150ms ease, background 150ms ease;
3012
- }
3013
- .color-row:hover { border-color: rgba(84, 183, 255, 0.36); background: rgba(8, 25, 48, 0.75); }
3014
- .color-swatch { position: relative; width: 34px; height: 34px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0.5rem; }
3015
- .color-swatch input { position: absolute; inset: -8px; width: 50px; height: 50px; padding: 0; border: 0; cursor: pointer; }
3016
- .color-swatch input:disabled { cursor: not-allowed; }
3017
- .color-meta { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.12rem; }
3018
- .color-meta b { font-size: 0.66rem; font-weight: 600; }
3019
- .color-meta small { overflow: hidden; color: #7d98b6; font-size: 0.52rem; text-overflow: ellipsis; white-space: nowrap; }
3020
- .color-hex { width: 5.5rem; padding: 0.3rem 0.4rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.58rem; }
3021
-
3022
- @media (max-width: 960px) {
3023
- .theme-gallery, .custom-grid { grid-template-columns: 1fr; }
3024
- .ui-mode-row { flex-direction: column; }
3025
- }
3026
-
3027
-
3028
- /* ---- Theme Centre: surface tuning + preview ---- */
3029
- .surface-row {
3030
- display: flex;
3031
- align-items: center;
3032
- justify-content: space-between;
3033
- gap: 1rem;
3034
- padding: 0.7rem 0;
3035
- border-bottom: 1px solid rgba(112, 168, 228, 0.08);
3036
- }
3037
- .surface-row:last-child { border-bottom: 0; }
3038
- .surface-range {
3039
- -webkit-appearance: none;
3040
- appearance: none;
3041
- flex: 0 0 11rem;
3042
- height: 5px;
3043
- border-radius: 999px;
3044
- background: linear-gradient(90deg, var(--admin-blue), var(--admin-violet));
3045
- outline: none;
3046
- cursor: pointer;
3047
- }
3048
- .surface-range::-webkit-slider-thumb {
3049
- -webkit-appearance: none;
3050
- appearance: none;
3051
- width: 15px;
3052
- height: 15px;
3053
- border-radius: 50%;
3054
- background: #fff;
3055
- border: 2px solid var(--admin-violet);
3056
- cursor: pointer;
3057
- }
3058
- .surface-range::-moz-range-thumb {
3059
- width: 15px;
3060
- height: 15px;
3061
- border-radius: 50%;
3062
- background: #fff;
3063
- border: 2px solid var(--admin-violet);
3064
- cursor: pointer;
3065
- }
3066
- .surface-meta { display: flex; flex-direction: column; gap: 0.1rem; }
3067
- .surface-meta b { font-size: 0.82rem; color: var(--admin-ink); }
3068
- .surface-meta span { font-size: 0.7rem; color: var(--admin-muted); }
3069
- .surface-value {
3070
- flex: 0 0 2.9rem;
3071
- font-size: 0.78rem;
3072
- font-weight: 700;
3073
- text-align: right;
3074
- color: var(--admin-blue);
3075
- }
3076
- .surface-row.disabled .surface-meta span,
3077
- .surface-row.disabled .surface-value { opacity: 0.4; }
3078
- .surface-row.disabled .surface-range { pointer-events: none; opacity: 0.45; }
3079
-
3080
- .palette-list { display: flex; flex-wrap: wrap; gap: 0.55rem; }
3081
- .palette-chip {
3082
- display: inline-flex;
3083
- align-items: center;
3084
- gap: 0.35rem;
3085
- padding: 0.1rem 0.35rem 0.1rem 0.15rem;
3086
- border: 1px solid rgba(112, 168, 228, 0.2);
3087
- border-radius: 999px;
3088
- background: rgba(8, 25, 48, 0.5);
3089
- }
3090
- .palette-chip input[type="color"] {
3091
- width: 22px;
3092
- height: 22px;
3093
- padding: 0;
3094
- border: 0;
3095
- border-radius: 50%;
3096
- background: transparent;
3097
- cursor: pointer;
3098
- }
3099
- .row-delete {
3100
- border: 0;
3101
- background: transparent;
3102
- color: var(--admin-muted);
3103
- font-size: 0.9rem;
3104
- line-height: 1;
3105
- cursor: pointer;
3106
- padding: 0 0.15rem;
3107
- }
3108
- .row-delete:hover { color: #ff6b7a; }
3109
- .add-color {
3110
- align-self: center;
3111
- border: 1px dashed rgba(112, 168, 228, 0.35);
3112
- background: transparent;
3113
- color: var(--admin-blue);
3114
- font-size: 0.78rem;
3115
- padding: 0.4rem 0.8rem;
3116
- border-radius: 999px;
3117
- cursor: pointer;
3118
- }
3119
- .add-color:hover { border-color: var(--admin-blue); background: rgba(112, 168, 228, 0.1); }
3120
-
3121
- .theme-preview-tile {
3122
- position: relative;
3123
- overflow: hidden;
3124
- display: grid;
3125
- place-items: center;
3126
- flex: 1;
3127
- min-height: 12rem;
3128
- border-radius: var(--admin-radius, 0.8rem);
3129
- border: 1px solid rgba(112, 168, 228, 0.18);
3130
- background: var(--p-bg, linear-gradient(160deg, #070f1e, #0d2440));
3131
- }
3132
- .theme-preview-glow {
3133
- position: absolute;
3134
- inset: -20%;
3135
- background: radial-gradient(40rem 26rem at 20% 0%, var(--p-blue, rgba(74, 152, 255, 0.35)), transparent 60%),
3136
- radial-gradient(36rem 24rem at 85% 110%, var(--p-pink, rgba(255, 120, 190, 0.3)), transparent 60%);
3137
- animation: preview-breathe 6s ease-in-out infinite;
3138
- }
3139
- @keyframes preview-breathe {
3140
- 0%, 100% { opacity: 0.55; transform: translateY(0) scale(1); }
3141
- 50% { opacity: 1; transform: translateY(-6px) scale(1.04); }
3142
- }
3143
- .theme-preview-card {
3144
- position: relative;
3145
- width: 78%;
3146
- max-width: 20rem;
3147
- padding: 1.1rem 1.2rem;
3148
- border-radius: var(--admin-radius, 0.8rem);
3149
- border: 1px solid rgba(160, 200, 255, 0.22);
3150
- background: rgba(10, 28, 55, 0.55);
3151
- backdrop-filter: blur(calc(var(--admin-glass, 0) * 20px));
3152
- -webkit-backdrop-filter: blur(calc(var(--admin-glass, 0) * 20px));
3153
- box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.7);
3154
- }
3155
- .theme-preview-overline {
3156
- display: block;
3157
- font-size: 0.58rem;
3158
- letter-spacing: 0.16em;
3159
- color: var(--p-violet, var(--admin-violet));
3160
- margin-bottom: 0.35rem;
3161
- }
3162
- .theme-preview-title { font-size: 1.02rem; color: var(--p-ink, var(--admin-ink)); }
3163
- .theme-preview-actions { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
3164
- .theme-preview-dots { display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 1rem; }
3165
- .theme-preview-dots i {
3166
- width: 7px;
3167
- height: 7px;
3168
- border-radius: 50%;
3169
- background: var(--p-blue, var(--admin-blue));
3170
- opacity: 0.5;
3171
- }
3172
- .theme-preview-dots i:nth-child(2) { background: var(--p-violet, var(--admin-violet)); }
3173
- .theme-preview-dots i:nth-child(3) { background: var(--p-pink, var(--admin-pink)); }
3174
-
3175
- @media (prefers-reduced-motion: reduce) {
3176
- .theme-preview-glow { animation: none; }
3177
- }
3178
-
3179
-
3180
- /* ---- Overview: preflight diagnostics ---- */
3181
- .preflight-note { margin: 0 0 0.9rem; font-size: 0.74rem; color: var(--admin-muted); }
3182
- .preflight-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
3183
- .preflight-count { font-size: 0.78rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px; }
3184
- .preflight-count.ok { color: #4ade80; background: rgba(74, 222, 128, 0.12); }
3185
- .preflight-count.warn { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
3186
- .preflight-count.bad { color: #f87171; background: rgba(248, 113, 113, 0.12); }
3187
- .preflight-meta { margin-left: auto; font-size: 0.68rem; color: var(--admin-muted); }
3188
- .preflight-empty { font-size: 0.74rem; color: var(--admin-muted); }
3189
- .preflight-list { display: flex; flex-direction: column; gap: 0.45rem; }
3190
- .preflight-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.76rem; }
3191
- .preflight-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
3192
- .preflight-dot.good { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.8); }
3193
- .preflight-dot.bad { background: #f87171; }
3194
- .preflight-dot.warn { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.8); }
3195
- .preflight-message { color: var(--admin-muted); flex: 1 1 auto; min-width: 0; }
3196
- .preflight-message.is-ok { color: #34d399; }
3197
- .preflight-state.is-warn { color: #fbbf24; }
3198
- .preflight-check-name { color: var(--admin-ink); font-weight: 600; }
3199
- .preflight-kind { color: var(--admin-muted); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.06em; }
3200
- .preflight-latency { color: var(--admin-muted); font-variant-numeric: tabular-nums; }
3201
- .preflight-state { margin-left: auto; font-size: 0.68rem; font-weight: 700; }
3202
- .preflight-state.ok { color: #4ade80; }
3203
- .preflight-state.fail { color: #f87171; }
3204
- .preflight-error { flex: 0 0 auto; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f87171; font-size: 0.68rem; }
3205
-
3206
- .preflight-address { flex: 0 0 auto; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--admin-muted); font-size: 0.66rem; font-variant-numeric: tabular-nums; }
3207
-
3208
- .preflight-guidance { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.9rem; padding: 0.6rem 0.8rem; border: 1px solid rgba(251, 191, 36, 0.35); border-radius: 10px; background: rgba(251, 191, 36, 0.08); font-size: 0.74rem; color: var(--admin-ink); }
3209
- .preflight-guidance strong { color: #fbbf24; }
3210
- .preflight-guidance code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem; color: #fbbf24; background: rgba(251, 191, 36, 0.12); padding: 0.1rem 0.35rem; border-radius: 6px; }
3211
- .preflight-guidance .text-action { margin-left: auto; }
3212
-
3213
- /* ─── Toggle switch ─────────────────────────────────────────────── */
3214
- .ai-toggle {
3215
- position: relative;
3216
- display: inline-flex;
3217
- align-items: center;
3218
- justify-content: center;
3219
- height: 26px;
3220
- width: 48px;
3221
- flex: 0 0 auto;
3222
- border-radius: 999px;
3223
- border: 1px solid rgba(255, 255, 255, 0.12);
3224
- cursor: pointer;
3225
- outline: none;
3226
- transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, width 0.25s ease, min-width 0.25s ease, padding 0.25s ease;
3227
- background: rgba(30, 41, 59, 0.8);
3228
- }
3229
- .ai-toggle:focus-visible {
3230
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
3231
- }
3232
- .ai-toggle:disabled {
3233
- opacity: 0.45;
3234
- cursor: not-allowed;
3235
- }
3236
- .ai-toggle-knob {
3237
- position: absolute;
3238
- top: 50%;
3239
- left: 3px;
3240
- height: 18px;
3241
- width: 18px;
3242
- border-radius: 50%;
3243
- background: rgba(226, 232, 240, 0.95);
3244
- transform: translateY(-50%);
3245
- transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease, box-shadow 0.25s ease;
3246
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
3247
- }
3248
- .ai-toggle.is-on .ai-toggle-knob {
3249
- transform: translateY(-50%) translateX(22px);
3250
- background: #fff;
3251
- }
3252
-
3253
- /* Shared glow keyframes for ON states. */
3254
- @keyframes ai-glow-breathe {
3255
- 0%, 100% { box-shadow: 0 0 10px -1px var(--ai-glow-color, rgba(52, 211, 153, 0.45)); }
3256
- 50% { box-shadow: 0 0 22px 0 var(--ai-glow-color, rgba(52, 211, 153, 0.85)); }
3257
- }
3258
- @keyframes ai-glow-icon {
3259
- 0%, 100% { text-shadow: 0 0 6px rgba(255, 255, 255, 0.7); }
3260
- 50% { text-shadow: 0 0 12px rgba(255, 255, 255, 1), 0 0 20px rgba(52, 211, 153, 0.9); }
3261
- }
3262
- @keyframes ai-glow-dot {
3263
- 0%, 100% { box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.6); }
3264
- 50% { box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.95), 0 0 16px 3px rgba(52, 211, 153, 0.8); }
3265
- }
3266
- @keyframes ai-orb-pulse {
3267
- 0%, 100% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.15), 0 0 14px rgba(52, 211, 153, 0.5); }
3268
- 50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0.12), 0 0 24px rgba(52, 211, 153, 0.85); }
3269
- }
3270
-
3271
- /* Toggle style: Chip ON/OFF (default). */
3272
- .ai-toggle.tg-chip {
3273
- width: auto;
3274
- min-width: 58px;
3275
- gap: 0.35rem;
3276
- padding: 0 0.7rem;
3277
- color: #64748b;
3278
- border-color: rgba(148, 163, 184, 0.35);
3279
- }
3280
- .ai-toggle.tg-chip .ai-toggle-knob { display: none; }
3281
- .ai-toggle.tg-chip::before {
3282
- content: '';
3283
- width: 7px;
3284
- height: 7px;
3285
- border-radius: 50%;
3286
- background: #64748b;
3287
- transition: background 0.25s ease, box-shadow 0.25s ease;
3288
- }
3289
- .ai-toggle.tg-chip::after {
3290
- content: 'OFF';
3291
- font-size: 0.62rem;
3292
- font-weight: 700;
3293
- letter-spacing: 0.06em;
3294
- transition: color 0.25s ease;
3295
- }
3296
- .ai-toggle.tg-chip.is-on {
3297
- background: linear-gradient(135deg, rgba(16, 185, 129, 0.85), rgba(5, 150, 105, 0.75));
3298
- border-color: rgba(52, 211, 153, 0.5);
3299
- color: #fff;
3300
- --ai-glow-color: rgba(52, 211, 153, 0.6);
3301
- animation: ai-glow-breathe 1.8s ease-in-out infinite;
3302
- }
3303
- .ai-toggle.tg-chip.is-on::before { background: #d1fae5; animation: ai-glow-dot 1.8s ease-in-out infinite; }
3304
- .ai-toggle.tg-chip.is-on::after { content: 'ON'; }
3305
-
3306
- /* Toggle style: Neon glass. */
3307
- .ai-toggle.tg-neon {
3308
- background: linear-gradient(135deg, rgba(38, 130, 225, 0.35), rgba(90, 67, 183, 0.35));
3309
- border-color: rgba(130, 190, 255, 0.45);
3310
- box-shadow: 0 0 12px -3px rgba(84, 183, 255, 0.5);
3311
- }
3312
- .ai-toggle.tg-neon .ai-toggle-knob {
3313
- background: linear-gradient(135deg, rgba(160, 220, 255, 0.95), rgba(84, 183, 255, 0.45));
3314
- border: 1px solid rgba(160, 220, 255, 0.6);
3315
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4), inset 0 0 5px rgba(220, 240, 255, 0.8);
3316
- }
3317
- .ai-toggle.tg-neon.is-on {
3318
- background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.75));
3319
- border-color: rgba(52, 211, 153, 0.5);
3320
- --ai-glow-color: rgba(52, 211, 153, 0.7);
3321
- animation: ai-glow-breathe 2.2s ease-in-out infinite;
3322
- }
3323
- .ai-toggle.tg-neon.is-on .ai-toggle-knob { background: #fff; }
3324
-
3325
- /* Toggle style: Icon knob. */
3326
- .ai-toggle.tg-icon .ai-toggle-knob { display: none; }
3327
- .ai-toggle.tg-icon::before {
3328
- content: '⏻';
3329
- font-size: 0.6rem;
3330
- line-height: 1;
3331
- color: #64748b;
3332
- transition: color 0.25s ease, text-shadow 0.25s ease;
3333
- }
3334
- .ai-toggle.tg-icon.is-on {
3335
- background: linear-gradient(135deg, rgba(16, 185, 129, 0.85), rgba(5, 150, 105, 0.75));
3336
- border-color: rgba(52, 211, 153, 0.5);
3337
- --ai-glow-color: rgba(52, 211, 153, 0.6);
3338
- animation: ai-glow-breathe 1.8s ease-in-out infinite;
3339
- }
3340
- .ai-toggle.tg-icon.is-on::before { content: '⚡'; color: #fff; animation: ai-glow-icon 1.8s ease-in-out infinite; }
3341
-
3342
- /* Toggle style: Orb status dot. */
3343
- .ai-toggle.tg-orb {
3344
- width: 30px;
3345
- height: 30px;
3346
- border-radius: 50%;
3347
- border: 2px solid rgba(148, 163, 184, 0.45);
3348
- background: transparent;
3349
- transition: all 0.25s ease;
3350
- }
3351
- .ai-toggle.tg-orb .ai-toggle-knob { display: none; }
3352
- .ai-toggle.tg-orb.is-on {
3353
- border-color: rgba(52, 211, 153, 0.8);
3354
- background: radial-gradient(circle at 35% 35%, #6ee7b7, #10b981 60%, #047857);
3355
- animation: ai-orb-pulse 1.8s ease-in-out infinite;
3356
- }
3357
-
3358
- /* Toggle style: Gradient-track. */
3359
- .ai-toggle.tg-track { overflow: hidden; border-color: rgba(112, 168, 228, 0.3); }
3360
- .ai-toggle.tg-track::before {
3361
- content: '';
3362
- position: absolute;
3363
- top: 2px;
3364
- bottom: 2px;
3365
- left: 3px;
3366
- width: 21px;
3367
- border-radius: 999px;
3368
- background: linear-gradient(90deg, rgba(84, 183, 255, 0.55), rgba(16, 185, 129, 0.65));
3369
- transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
3370
- }
3371
- .ai-toggle.tg-track.is-on::before { width: calc(100% - 6px); }
3372
- .ai-toggle.tg-track.is-on {
3373
- border-color: rgba(52, 211, 153, 0.5);
3374
- --ai-glow-color: rgba(52, 211, 153, 0.7);
3375
- animation: ai-glow-breathe 2.2s ease-in-out infinite;
3376
- }
3377
- .ai-toggle.tg-track .ai-toggle-knob { z-index: 1; }
3378
-
3379
- /* Toggle style picker (Theme Centre). */
3380
- .toggle-style-row {
3381
- display: grid;
3382
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
3383
- gap: 0.55rem;
3384
- margin-top: 0.5rem;
3385
- }
3386
- .toggle-style-btn {
3387
- display: flex;
3388
- align-items: center;
3389
- gap: 0.5rem;
3390
- padding: 0.6rem;
3391
- border: 1px solid rgba(112, 168, 228, 0.14);
3392
- border-radius: var(--admin-radius, 0.8rem);
3393
- color: #9ab2ce;
3394
- background: rgba(8, 25, 48, 0.5);
3395
- text-align: left;
3396
- cursor: pointer;
3397
- transition: border-color 150ms ease, background 150ms ease;
3398
- }
3399
- .toggle-style-btn:hover { border-color: rgba(84, 183, 255, 0.4); background: rgba(24, 61, 102, 0.4); }
3400
- .toggle-style-btn.is-selected {
3401
- border-color: rgba(52, 211, 153, 0.5);
3402
- background: rgba(16, 185, 129, 0.08);
3403
- }
3404
- .toggle-style-preview { pointer-events: none; transform: scale(0.9); transform-origin: left center; }
3405
- .toggle-style-meta { display: flex; flex: 1; flex-direction: column; gap: 0.12rem; }
3406
- .toggle-style-meta b { font-size: 0.62rem; font-weight: 600; color: #eaf6ff; }
3407
- .toggle-style-meta small { font-size: 0.52rem; color: #6f89a7; }
3408
- .toggle-style-check { color: #4ade80; font-style: normal; font-size: 0.7rem; }
3409
-
3410
- /* ─── Safe-goto external link dialog ─────────────────────────────── */
3411
- .safe-goto-overlay {
3412
- position: fixed;
3413
- inset: 0;
3414
- z-index: 100;
3415
- display: flex;
3416
- align-items: center;
3417
- justify-content: center;
3418
- background: rgba(2, 6, 23, 0.72);
3419
- backdrop-filter: blur(6px) saturate(0.55);
3420
- -webkit-backdrop-filter: blur(6px) saturate(0.55);
3421
- transition: opacity 0.22s ease, background-color 0.22s ease,
3422
- backdrop-filter 0.22s ease, -webkit-backdrop-filter 0.22s ease;
3423
- }
3424
- .safe-goto-dialog {
3425
- max-width: 480px;
3426
- border-radius: 18px;
3427
- border: 1px solid rgba(255, 255, 255, 0.14);
3428
- background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(11, 7, 27, 0.96));
3429
- box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55);
3430
- overflow: hidden;
3431
- animation: safe-goto-pop 0.25s cubic-bezier(0.4, 0, 0.2, 1);
3432
- }
3433
- @keyframes safe-goto-pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
3434
- .safe-goto-icon-wrap {
3435
- display: flex;
3436
- align-items: center;
3437
- justify-content: center;
3438
- height: 64px;
3439
- background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.15));
3440
- border-bottom: 1px solid rgba(255, 255, 255, 0.08);
3441
- }
3442
- .safe-goto-icon {
3443
- font-size: 1.8rem;
3444
- filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.5));
3445
- }
3446
- .safe-goto-body { padding: 1.25rem 1.5rem; }
3447
- .safe-goto-title { font-size: 1.05rem; font-weight: 700; color: var(--admin-ink); margin-bottom: 0.5rem; }
3448
- .safe-goto-msg { font-size: 0.82rem; color: var(--admin-muted); line-height: 1.5; margin-bottom: 0.75rem; }
3449
- .safe-goto-url {
3450
- display: flex;
3451
- align-items: center;
3452
- gap: 0.5rem;
3453
- padding: 0.6rem 0.8rem;
3454
- border-radius: 10px;
3455
- background: rgba(0, 0, 0, 0.35);
3456
- border: 1px solid rgba(255, 255, 255, 0.08);
3457
- margin-bottom: 1.25rem;
3458
- }
3459
- .safe-goto-url code {
3460
- font-size: 0.78rem;
3461
- color: #93c5fd;
3462
- word-break: break-all;
3463
- font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
3464
- }
3465
- .safe-goto-url .safe-goto-shield {
3466
- flex: 0 0 auto;
3467
- font-size: 1.1rem;
3468
- }
3469
- .safe-goto-warning {
3470
- display: flex;
3471
- gap: 0.5rem;
3472
- padding: 0.6rem 0.8rem;
3473
- border-radius: 10px;
3474
- background: rgba(251, 191, 36, 0.08);
3475
- border: 1px solid rgba(251, 191, 36, 0.25);
3476
- font-size: 0.72rem;
3477
- color: #fbbf24;
3478
- margin-bottom: 1.25rem;
3479
- line-height: 1.45;
3480
- }
3481
- .safe-goto-actions {
3482
- display: flex;
3483
- gap: 0.6rem;
3484
- justify-content: flex-end;
3485
- }
3486
- .safe-goto-link {
3487
- display: inline-flex;
3488
- align-items: center;
3489
- gap: 0.3rem;
3490
- color: #93c5fd;
3491
- font-size: 0.72rem;
3492
- text-decoration: none;
3493
- cursor: pointer;
3494
- transition: color 0.2s ease;
3495
- }
3496
- .safe-goto-link:hover { color: #bfdbfe; text-decoration: underline; }
3497
-
3498
- /* ===== Inline SVG icon system (see src/icons.tsx) ===== */
3499
- .admin-shell svg,
3500
- .admin-login svg {
3501
- flex-shrink: 0;
3502
- }
3503
-
3504
- .admin-nav-icon svg,
3505
- .admin-search-result-icon svg,
3506
- .rail-fav-icon svg,
3507
- .account-item-icon svg,
3508
- .notify-head-icon svg,
3509
- .notify-empty-icon svg,
3510
- .log-ai-title svg,
3511
- .provider-avatar svg {
3512
- display: block;
3513
- }
3514
-
3515
- .hero-art strong svg,
3516
- .hero-orbit-art strong svg,
3517
- .env-lock-glyph svg {
3518
- display: block;
3519
- filter: drop-shadow(0 0 8px currentColor);
3520
- }
3521
-
3522
- .surface-icon svg {
3523
- width: 20px;
3524
- height: 20px;
3525
- }
3526
-
3527
- .log-empty-glyph svg {
3528
- display: block;
3529
- opacity: 0.85;
3530
- color: var(--admin-muted, #98aec9);
3531
- }
3532
-
3533
- .admin-topbar .admin-icon-button svg,
3534
- .admin-tool-rail button svg {
3535
- display: block;
3536
- }
3537
-
3538
-
3539
-