@keqi.gress/plugin-ui 1.0.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/style.css CHANGED
@@ -1,5 +1,2930 @@
1
-
2
- .loading-container[data-v-88be2f1a] {
1
+ @keyframes fadeIn {
2
+ from {
3
+ opacity: 0;
4
+ }
5
+ to {
6
+ opacity: 1;
7
+ }
8
+ }
9
+ @keyframes slideInUp {
10
+ from {
11
+ opacity: 0;
12
+ transform: translateY(20px);
13
+ }
14
+ to {
15
+ opacity: 1;
16
+ transform: translateY(0);
17
+ }
18
+ }
19
+ @keyframes scaleIn {
20
+ from {
21
+ opacity: 0;
22
+ transform: scale(0.9);
23
+ }
24
+ to {
25
+ opacity: 1;
26
+ transform: scale(1);
27
+ }
28
+ }
29
+ @keyframes pulse {
30
+ 0%, 100% {
31
+ opacity: 1;
32
+ }
33
+ 50% {
34
+ opacity: 0.5;
35
+ }
36
+ }
37
+ :root {
38
+ --primary: #6366f1;
39
+ --primary-light: #818cf8;
40
+ --primary-lighter: #a5b4fc;
41
+ --primary-lightest: #e0e7ff;
42
+ --primary-dark: #4f46e5;
43
+ --primary-darker: #4338ca;
44
+ --secondary: #8b5cf6;
45
+ --secondary-light: #a78bfa;
46
+ --secondary-lighter: #c4b5fd;
47
+ --secondary-lightest: #ede9fe;
48
+ --secondary-dark: #7c3aed;
49
+ --success: #10b981;
50
+ --success-light: #34d399;
51
+ --success-lighter: #6ee7b7;
52
+ --success-lightest: #d1fae5;
53
+ --success-dark: #059669;
54
+ --warning: #f59e0b;
55
+ --warning-light: #fbbf24;
56
+ --warning-lighter: #fcd34d;
57
+ --warning-lightest: #fef3c7;
58
+ --warning-dark: #d97706;
59
+ --error: #ef4444;
60
+ --error-light: #f87171;
61
+ --error-lighter: #fca5a5;
62
+ --error-lightest: #fee2e2;
63
+ --error-dark: #dc2626;
64
+ --info: #3b82f6;
65
+ --info-light: #60a5fa;
66
+ --info-lighter: #93c5fd;
67
+ --info-lightest: #dbeafe;
68
+ --info-dark: #2563eb;
69
+ --gray-50: #fafafa;
70
+ --gray-100: #f5f5f5;
71
+ --gray-200: #e5e5e5;
72
+ --gray-300: #d4d4d4;
73
+ --gray-400: #a3a3a3;
74
+ --gray-500: #737373;
75
+ --gray-600: #525252;
76
+ --gray-700: #404040;
77
+ --gray-800: #262626;
78
+ --gray-900: #171717;
79
+ --text-primary: #1f2329;
80
+ --text-secondary: #4e5969;
81
+ --text-tertiary: #86909c;
82
+ --text-quaternary: #c9cdd4;
83
+ --text-disabled: #e5e6eb;
84
+ --text-white: #ffffff;
85
+ --bg-primary: #ffffff;
86
+ --bg-secondary: #f7f8fa;
87
+ --bg-tertiary: #f2f3f5;
88
+ --bg-quaternary: #e5e6eb;
89
+ --bg-overlay: rgba(0, 0, 0, 0.6);
90
+ --bg-mask: rgba(0, 0, 0, 0.4);
91
+ --border-primary: #e5e6eb;
92
+ --border-secondary: #f0f2f5;
93
+ --border-tertiary: #dcdfe6;
94
+ --border-focus: #6366f1;
95
+ --spacing-xs: 4px;
96
+ --spacing-sm: 8px;
97
+ --spacing-md: 12px;
98
+ --spacing-lg: 16px;
99
+ --spacing-xl: 20px;
100
+ --spacing-2xl: 24px;
101
+ --spacing-3xl: 32px;
102
+ --spacing-4xl: 40px;
103
+ --spacing-5xl: 48px;
104
+ --spacing-6xl: 64px;
105
+ --radius-xs: 4px;
106
+ --radius-sm: 6px;
107
+ --radius-md: 8px;
108
+ --radius-lg: 12px;
109
+ --radius-xl: 16px;
110
+ --radius-2xl: 20px;
111
+ --radius-3xl: 24px;
112
+ --radius-full: 9999px;
113
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
114
+ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
115
+ --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
116
+ --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
117
+ --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.12);
118
+ --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.14);
119
+ --shadow-3xl: 0 24px 48px rgba(0, 0, 0, 0.16);
120
+ --shadow-primary: 0 4px 12px rgba(99, 102, 241, 0.25);
121
+ --shadow-primary-lg: 0 8px 20px rgba(99, 102, 241, 0.3);
122
+ --shadow-success: 0 4px 12px rgba(16, 185, 129, 0.25);
123
+ --shadow-warning: 0 4px 12px rgba(245, 158, 11, 0.25);
124
+ --shadow-error: 0 4px 12px rgba(239, 68, 68, 0.25);
125
+ --font-family-base: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
126
+ --font-family-mono: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
127
+ --font-size-xs: 11px;
128
+ --font-size-sm: 12px;
129
+ --font-size-base: 13px;
130
+ --font-size-md: 14px;
131
+ --font-size-lg: 16px;
132
+ --font-size-xl: 18px;
133
+ --font-size-2xl: 20px;
134
+ --font-size-3xl: 24px;
135
+ --font-size-4xl: 28px;
136
+ --font-size-5xl: 32px;
137
+ --font-weight-light: 300;
138
+ --font-weight-normal: 400;
139
+ --font-weight-medium: 500;
140
+ --font-weight-semibold: 600;
141
+ --font-weight-bold: 700;
142
+ --line-height-tight: 1.2;
143
+ --line-height-normal: 1.5;
144
+ --line-height-relaxed: 1.6;
145
+ --line-height-loose: 1.8;
146
+ --transition-fast: 0.15s ease;
147
+ --transition-base: 0.2s ease;
148
+ --transition-slow: 0.3s ease;
149
+ --transition-slower: 0.4s ease;
150
+ --z-index-dropdown: 1000;
151
+ --z-index-sticky: 1020;
152
+ --z-index-fixed: 1030;
153
+ --z-index-modal-backdrop: 1040;
154
+ --z-index-modal: 1050;
155
+ --z-index-popover: 1060;
156
+ --z-index-tooltip: 1070;
157
+ --z-index-notification: 1080;
158
+ --button-height-sm: 28px;
159
+ --button-height-md: 32px;
160
+ --button-height-lg: 40px;
161
+ --input-height-sm: 28px;
162
+ --input-height-md: 32px;
163
+ --input-height-lg: 40px;
164
+ --card-padding-sm: 12px;
165
+ --card-padding-md: 16px;
166
+ --card-padding-lg: 24px;
167
+ --card-padding-xl: 32px;
168
+ --node-width: 260px;
169
+ --node-height: 140px;
170
+ --node-gap: 32px;
171
+ --node-border-width: 2px;
172
+ }
173
+ @keyframes fadeIn {
174
+ from {
175
+ opacity: 0;
176
+ }
177
+ to {
178
+ opacity: 1;
179
+ }
180
+ }
181
+ @keyframes slideInUp {
182
+ from {
183
+ opacity: 0;
184
+ transform: translateY(20px);
185
+ }
186
+ to {
187
+ opacity: 1;
188
+ transform: translateY(0);
189
+ }
190
+ }
191
+ @keyframes scaleIn {
192
+ from {
193
+ opacity: 0;
194
+ transform: scale(0.9);
195
+ }
196
+ to {
197
+ opacity: 1;
198
+ transform: scale(1);
199
+ }
200
+ }
201
+ @keyframes pulse {
202
+ 0%, 100% {
203
+ opacity: 1;
204
+ }
205
+ 50% {
206
+ opacity: 0.5;
207
+ }
208
+ }
209
+ @keyframes fadeIn {
210
+ from {
211
+ opacity: 0;
212
+ }
213
+ to {
214
+ opacity: 1;
215
+ }
216
+ }
217
+ @keyframes slideInUp {
218
+ from {
219
+ opacity: 0;
220
+ transform: translateY(20px);
221
+ }
222
+ to {
223
+ opacity: 1;
224
+ transform: translateY(0);
225
+ }
226
+ }
227
+ @keyframes scaleIn {
228
+ from {
229
+ opacity: 0;
230
+ transform: scale(0.9);
231
+ }
232
+ to {
233
+ opacity: 1;
234
+ transform: scale(1);
235
+ }
236
+ }
237
+ @keyframes pulse {
238
+ 0%, 100% {
239
+ opacity: 1;
240
+ }
241
+ 50% {
242
+ opacity: 0.5;
243
+ }
244
+ }
245
+ .m-0 {
246
+ margin: 0 !important;
247
+ }
248
+ .m-xs {
249
+ margin: 4px !important;
250
+ }
251
+ .m-sm {
252
+ margin: 8px !important;
253
+ }
254
+ .m-md {
255
+ margin: 12px !important;
256
+ }
257
+ .m-lg {
258
+ margin: 16px !important;
259
+ }
260
+ .m-xl {
261
+ margin: 20px !important;
262
+ }
263
+ .m-2xl {
264
+ margin: 24px !important;
265
+ }
266
+ .m-3xl {
267
+ margin: 32px !important;
268
+ }
269
+ .mt-0 {
270
+ margin-top: 0 !important;
271
+ }
272
+ .mt-xs {
273
+ margin-top: 4px !important;
274
+ }
275
+ .mt-sm {
276
+ margin-top: 8px !important;
277
+ }
278
+ .mt-md {
279
+ margin-top: 12px !important;
280
+ }
281
+ .mt-lg {
282
+ margin-top: 16px !important;
283
+ }
284
+ .mt-xl {
285
+ margin-top: 20px !important;
286
+ }
287
+ .mt-2xl {
288
+ margin-top: 24px !important;
289
+ }
290
+ .mt-3xl {
291
+ margin-top: 32px !important;
292
+ }
293
+ .mb-0 {
294
+ margin-bottom: 0 !important;
295
+ }
296
+ .mb-xs {
297
+ margin-bottom: 4px !important;
298
+ }
299
+ .mb-sm {
300
+ margin-bottom: 8px !important;
301
+ }
302
+ .mb-md {
303
+ margin-bottom: 12px !important;
304
+ }
305
+ .mb-lg {
306
+ margin-bottom: 16px !important;
307
+ }
308
+ .mb-xl {
309
+ margin-bottom: 20px !important;
310
+ }
311
+ .mb-2xl {
312
+ margin-bottom: 24px !important;
313
+ }
314
+ .mb-3xl {
315
+ margin-bottom: 32px !important;
316
+ }
317
+ .ml-0 {
318
+ margin-left: 0 !important;
319
+ }
320
+ .ml-xs {
321
+ margin-left: 4px !important;
322
+ }
323
+ .ml-sm {
324
+ margin-left: 8px !important;
325
+ }
326
+ .ml-md {
327
+ margin-left: 12px !important;
328
+ }
329
+ .ml-lg {
330
+ margin-left: 16px !important;
331
+ }
332
+ .ml-xl {
333
+ margin-left: 20px !important;
334
+ }
335
+ .ml-2xl {
336
+ margin-left: 24px !important;
337
+ }
338
+ .ml-3xl {
339
+ margin-left: 32px !important;
340
+ }
341
+ .mr-0 {
342
+ margin-right: 0 !important;
343
+ }
344
+ .mr-xs {
345
+ margin-right: 4px !important;
346
+ }
347
+ .mr-sm {
348
+ margin-right: 8px !important;
349
+ }
350
+ .mr-md {
351
+ margin-right: 12px !important;
352
+ }
353
+ .mr-lg {
354
+ margin-right: 16px !important;
355
+ }
356
+ .mr-xl {
357
+ margin-right: 20px !important;
358
+ }
359
+ .mr-2xl {
360
+ margin-right: 24px !important;
361
+ }
362
+ .mr-3xl {
363
+ margin-right: 32px !important;
364
+ }
365
+ .p-0 {
366
+ padding: 0 !important;
367
+ }
368
+ .p-xs {
369
+ padding: 4px !important;
370
+ }
371
+ .p-sm {
372
+ padding: 8px !important;
373
+ }
374
+ .p-md {
375
+ padding: 12px !important;
376
+ }
377
+ .p-lg {
378
+ padding: 16px !important;
379
+ }
380
+ .p-xl {
381
+ padding: 20px !important;
382
+ }
383
+ .p-2xl {
384
+ padding: 24px !important;
385
+ }
386
+ .p-3xl {
387
+ padding: 32px !important;
388
+ }
389
+ .pt-0 {
390
+ padding-top: 0 !important;
391
+ }
392
+ .pt-xs {
393
+ padding-top: 4px !important;
394
+ }
395
+ .pt-sm {
396
+ padding-top: 8px !important;
397
+ }
398
+ .pt-md {
399
+ padding-top: 12px !important;
400
+ }
401
+ .pt-lg {
402
+ padding-top: 16px !important;
403
+ }
404
+ .pt-xl {
405
+ padding-top: 20px !important;
406
+ }
407
+ .pt-2xl {
408
+ padding-top: 24px !important;
409
+ }
410
+ .pt-3xl {
411
+ padding-top: 32px !important;
412
+ }
413
+ .pb-0 {
414
+ padding-bottom: 0 !important;
415
+ }
416
+ .pb-xs {
417
+ padding-bottom: 4px !important;
418
+ }
419
+ .pb-sm {
420
+ padding-bottom: 8px !important;
421
+ }
422
+ .pb-md {
423
+ padding-bottom: 12px !important;
424
+ }
425
+ .pb-lg {
426
+ padding-bottom: 16px !important;
427
+ }
428
+ .pb-xl {
429
+ padding-bottom: 20px !important;
430
+ }
431
+ .pb-2xl {
432
+ padding-bottom: 24px !important;
433
+ }
434
+ .pb-3xl {
435
+ padding-bottom: 32px !important;
436
+ }
437
+ .text-left {
438
+ text-align: left !important;
439
+ }
440
+ .text-center {
441
+ text-align: center !important;
442
+ }
443
+ .text-right {
444
+ text-align: right !important;
445
+ }
446
+ .text-justify {
447
+ text-align: justify !important;
448
+ }
449
+ .text-primary {
450
+ color: #1f2329 !important;
451
+ }
452
+ .text-secondary {
453
+ color: #4e5969 !important;
454
+ }
455
+ .text-tertiary {
456
+ color: #86909c !important;
457
+ }
458
+ .text-white {
459
+ color: #ffffff !important;
460
+ }
461
+ .text-success {
462
+ color: #10b981 !important;
463
+ }
464
+ .text-warning {
465
+ color: #f59e0b !important;
466
+ }
467
+ .text-error {
468
+ color: #ef4444 !important;
469
+ }
470
+ .text-info {
471
+ color: #3b82f6 !important;
472
+ }
473
+ .text-xs {
474
+ font-size: 11px !important;
475
+ }
476
+ .text-sm {
477
+ font-size: 12px !important;
478
+ }
479
+ .text-base {
480
+ font-size: 13px !important;
481
+ }
482
+ .text-md {
483
+ font-size: 14px !important;
484
+ }
485
+ .text-lg {
486
+ font-size: 16px !important;
487
+ }
488
+ .text-xl {
489
+ font-size: 18px !important;
490
+ }
491
+ .text-2xl {
492
+ font-size: 20px !important;
493
+ }
494
+ .text-3xl {
495
+ font-size: 24px !important;
496
+ }
497
+ .font-light {
498
+ font-weight: 300 !important;
499
+ }
500
+ .font-normal {
501
+ font-weight: 400 !important;
502
+ }
503
+ .font-medium {
504
+ font-weight: 500 !important;
505
+ }
506
+ .font-semibold {
507
+ font-weight: 600 !important;
508
+ }
509
+ .font-bold {
510
+ font-weight: 700 !important;
511
+ }
512
+ .text-ellipsis {
513
+ overflow: hidden;
514
+ text-overflow: ellipsis;
515
+ white-space: nowrap;
516
+ }
517
+ .text-no-select {
518
+ user-select: none;
519
+ -webkit-user-select: none;
520
+ -moz-user-select: none;
521
+ -ms-user-select: none;
522
+ }
523
+ .d-none {
524
+ display: none !important;
525
+ }
526
+ .d-block {
527
+ display: block !important;
528
+ }
529
+ .d-inline {
530
+ display: inline !important;
531
+ }
532
+ .d-inline-block {
533
+ display: inline-block !important;
534
+ }
535
+ .d-flex {
536
+ display: flex !important;
537
+ }
538
+ .d-inline-flex {
539
+ display: inline-flex !important;
540
+ }
541
+ .d-grid {
542
+ display: grid !important;
543
+ }
544
+ .flex-row {
545
+ flex-direction: row !important;
546
+ }
547
+ .flex-column {
548
+ flex-direction: column !important;
549
+ }
550
+ .flex-wrap {
551
+ flex-wrap: wrap !important;
552
+ }
553
+ .flex-nowrap {
554
+ flex-wrap: nowrap !important;
555
+ }
556
+ .flex-1 {
557
+ flex: 1 !important;
558
+ }
559
+ .flex-auto {
560
+ flex: auto !important;
561
+ }
562
+ .flex-none {
563
+ flex: none !important;
564
+ }
565
+ .align-start {
566
+ align-items: flex-start !important;
567
+ }
568
+ .align-center {
569
+ align-items: center !important;
570
+ }
571
+ .align-end {
572
+ align-items: flex-end !important;
573
+ }
574
+ .align-stretch {
575
+ align-items: stretch !important;
576
+ }
577
+ .justify-start {
578
+ justify-content: flex-start !important;
579
+ }
580
+ .justify-center {
581
+ justify-content: center !important;
582
+ }
583
+ .justify-end {
584
+ justify-content: flex-end !important;
585
+ }
586
+ .justify-between {
587
+ justify-content: space-between !important;
588
+ }
589
+ .justify-around {
590
+ justify-content: space-around !important;
591
+ }
592
+ .gap-xs {
593
+ gap: 4px !important;
594
+ }
595
+ .gap-sm {
596
+ gap: 8px !important;
597
+ }
598
+ .gap-md {
599
+ gap: 12px !important;
600
+ }
601
+ .gap-lg {
602
+ gap: 16px !important;
603
+ }
604
+ .gap-xl {
605
+ gap: 20px !important;
606
+ }
607
+ .gap-2xl {
608
+ gap: 24px !important;
609
+ }
610
+ .position-relative {
611
+ position: relative !important;
612
+ }
613
+ .position-absolute {
614
+ position: absolute !important;
615
+ }
616
+ .position-fixed {
617
+ position: fixed !important;
618
+ }
619
+ .position-sticky {
620
+ position: sticky !important;
621
+ }
622
+ .w-full {
623
+ width: 100% !important;
624
+ }
625
+ .w-auto {
626
+ width: auto !important;
627
+ }
628
+ .w-screen {
629
+ width: 100vw !important;
630
+ }
631
+ .h-full {
632
+ height: 100% !important;
633
+ }
634
+ .h-auto {
635
+ height: auto !important;
636
+ }
637
+ .h-screen {
638
+ height: 100vh !important;
639
+ }
640
+ .min-w-0 {
641
+ min-width: 0 !important;
642
+ }
643
+ .max-w-full {
644
+ max-width: 100% !important;
645
+ }
646
+ .min-h-0 {
647
+ min-height: 0 !important;
648
+ }
649
+ .max-h-full {
650
+ max-height: 100% !important;
651
+ }
652
+ .bg-primary {
653
+ background-color: #ffffff !important;
654
+ }
655
+ .bg-secondary {
656
+ background-color: #f7f8fa !important;
657
+ }
658
+ .bg-tertiary {
659
+ background-color: #f2f3f5 !important;
660
+ }
661
+ .bg-transparent {
662
+ background-color: transparent !important;
663
+ }
664
+ .bg-gradient-primary {
665
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
666
+ }
667
+ .bg-gradient-success {
668
+ background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
669
+ }
670
+ .bg-gradient-warning {
671
+ background: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
672
+ }
673
+ .bg-gradient-error {
674
+ background: linear-gradient(135deg, #ef4444 0%, #f43f5e 100%);
675
+ }
676
+ .border {
677
+ border: 1px solid #e5e6eb !important;
678
+ }
679
+ .border-0 {
680
+ border: none !important;
681
+ }
682
+ .border-t {
683
+ border-top: 1px solid #e5e6eb !important;
684
+ }
685
+ .border-b {
686
+ border-bottom: 1px solid #e5e6eb !important;
687
+ }
688
+ .border-l {
689
+ border-left: 1px solid #e5e6eb !important;
690
+ }
691
+ .border-r {
692
+ border-right: 1px solid #e5e6eb !important;
693
+ }
694
+ .rounded-none {
695
+ border-radius: 0 !important;
696
+ }
697
+ .rounded-xs {
698
+ border-radius: 4px !important;
699
+ }
700
+ .rounded-sm {
701
+ border-radius: 6px !important;
702
+ }
703
+ .rounded-md {
704
+ border-radius: 8px !important;
705
+ }
706
+ .rounded-lg {
707
+ border-radius: 12px !important;
708
+ }
709
+ .rounded-xl {
710
+ border-radius: 16px !important;
711
+ }
712
+ .rounded-2xl {
713
+ border-radius: 20px !important;
714
+ }
715
+ .rounded-full {
716
+ border-radius: 9999px !important;
717
+ }
718
+ .shadow-none {
719
+ box-shadow: none !important;
720
+ }
721
+ .shadow-xs {
722
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
723
+ }
724
+ .shadow-sm {
725
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
726
+ }
727
+ .shadow-md {
728
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
729
+ }
730
+ .shadow-lg {
731
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
732
+ }
733
+ .shadow-xl {
734
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
735
+ }
736
+ .shadow-2xl {
737
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14) !important;
738
+ }
739
+ .shadow-primary {
740
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
741
+ }
742
+ .overflow-hidden {
743
+ overflow: hidden !important;
744
+ }
745
+ .overflow-auto {
746
+ overflow: auto !important;
747
+ }
748
+ .overflow-scroll {
749
+ overflow: scroll !important;
750
+ }
751
+ .overflow-x-auto {
752
+ overflow-x: auto !important;
753
+ }
754
+ .overflow-y-auto {
755
+ overflow-y: auto !important;
756
+ }
757
+ .cursor-pointer {
758
+ cursor: pointer !important;
759
+ }
760
+ .cursor-default {
761
+ cursor: default !important;
762
+ }
763
+ .cursor-not-allowed {
764
+ cursor: not-allowed !important;
765
+ }
766
+ .opacity-0 {
767
+ opacity: 0 !important;
768
+ }
769
+ .opacity-25 {
770
+ opacity: 0.25 !important;
771
+ }
772
+ .opacity-50 {
773
+ opacity: 0.5 !important;
774
+ }
775
+ .opacity-75 {
776
+ opacity: 0.75 !important;
777
+ }
778
+ .opacity-100 {
779
+ opacity: 1 !important;
780
+ }
781
+ .z-0 {
782
+ z-index: 0 !important;
783
+ }
784
+ .z-10 {
785
+ z-index: 10 !important;
786
+ }
787
+ .z-20 {
788
+ z-index: 20 !important;
789
+ }
790
+ .z-30 {
791
+ z-index: 30 !important;
792
+ }
793
+ .z-40 {
794
+ z-index: 40 !important;
795
+ }
796
+ .z-50 {
797
+ z-index: 50 !important;
798
+ }
799
+ .pointer-events-none {
800
+ pointer-events: none !important;
801
+ }
802
+ .pointer-events-auto {
803
+ pointer-events: auto !important;
804
+ }
805
+ .transition-fast {
806
+ transition: all 0.15s ease !important;
807
+ }
808
+ .transition-base {
809
+ transition: all 0.2s ease !important;
810
+ }
811
+ .transition-slow {
812
+ transition: all 0.3s ease !important;
813
+ }
814
+ @keyframes fadeIn {
815
+ from {
816
+ opacity: 0;
817
+ }
818
+ to {
819
+ opacity: 1;
820
+ }
821
+ }
822
+ @keyframes slideInUp {
823
+ from {
824
+ opacity: 0;
825
+ transform: translateY(20px);
826
+ }
827
+ to {
828
+ opacity: 1;
829
+ transform: translateY(0);
830
+ }
831
+ }
832
+ @keyframes scaleIn {
833
+ from {
834
+ opacity: 0;
835
+ transform: scale(0.9);
836
+ }
837
+ to {
838
+ opacity: 1;
839
+ transform: scale(1);
840
+ }
841
+ }
842
+ @keyframes pulse {
843
+ 0%, 100% {
844
+ opacity: 1;
845
+ }
846
+ 50% {
847
+ opacity: 0.5;
848
+ }
849
+ }
850
+ .gress-button {
851
+ display: flex;
852
+ align-items: center;
853
+ justify-content: center;
854
+ gap: 8px;
855
+ border: none;
856
+ border-radius: 8px;
857
+ font-weight: 500;
858
+ cursor: pointer;
859
+ transition: all 0.2s ease;
860
+ white-space: nowrap;
861
+ user-select: none;
862
+ -webkit-user-select: none;
863
+ -moz-user-select: none;
864
+ -ms-user-select: none;
865
+ }
866
+ .gress-button:disabled {
867
+ opacity: 0.5;
868
+ cursor: not-allowed;
869
+ }
870
+ .gress-button {
871
+ height: 32px;
872
+ padding: 0 16px;
873
+ font-size: 13px;
874
+ }
875
+ .gress-button--primary {
876
+ display: flex;
877
+ align-items: center;
878
+ justify-content: center;
879
+ gap: 8px;
880
+ border: none;
881
+ border-radius: 8px;
882
+ font-weight: 500;
883
+ cursor: pointer;
884
+ transition: all 0.2s ease;
885
+ white-space: nowrap;
886
+ user-select: none;
887
+ -webkit-user-select: none;
888
+ -moz-user-select: none;
889
+ -ms-user-select: none;
890
+ }
891
+ .gress-button--primary:disabled {
892
+ opacity: 0.5;
893
+ cursor: not-allowed;
894
+ }
895
+ .gress-button--primary {
896
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
897
+ color: #ffffff;
898
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
899
+ }
900
+ .gress-button--primary:hover:not(:disabled) {
901
+ box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
902
+ transform: translateY(-1px);
903
+ }
904
+ .gress-button--primary:active:not(:disabled) {
905
+ transform: translateY(0);
906
+ }
907
+ .gress-button--secondary {
908
+ background: #f7f8fa;
909
+ color: #1f2329;
910
+ border: 1px solid #e5e6eb;
911
+ }
912
+ .gress-button--secondary:hover:not(:disabled) {
913
+ background: #f2f3f5;
914
+ border-color: #dcdfe6;
915
+ }
916
+ .gress-button--success {
917
+ background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
918
+ color: #ffffff;
919
+ box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
920
+ }
921
+ .gress-button--success:hover:not(:disabled) {
922
+ box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
923
+ transform: translateY(-1px);
924
+ }
925
+ .gress-button--warning {
926
+ background: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
927
+ color: #ffffff;
928
+ box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
929
+ }
930
+ .gress-button--warning:hover:not(:disabled) {
931
+ box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
932
+ transform: translateY(-1px);
933
+ }
934
+ .gress-button--error {
935
+ background: linear-gradient(135deg, #ef4444 0%, #f43f5e 100%);
936
+ color: #ffffff;
937
+ box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
938
+ }
939
+ .gress-button--error:hover:not(:disabled) {
940
+ box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
941
+ transform: translateY(-1px);
942
+ }
943
+ .gress-button--text {
944
+ background: transparent;
945
+ color: #6366f1;
946
+ }
947
+ .gress-button--text:hover:not(:disabled) {
948
+ background: rgba(99, 102, 241, 0.08);
949
+ }
950
+ .gress-button--sm {
951
+ height: 28px;
952
+ padding: 0 12px;
953
+ font-size: 12px;
954
+ }
955
+ .gress-button--lg {
956
+ height: 40px;
957
+ padding: 0 20px;
958
+ font-size: 14px;
959
+ }
960
+ .gress-button--block {
961
+ width: 100%;
962
+ }
963
+ .gress-button--icon {
964
+ width: 32px;
965
+ padding: 0;
966
+ }
967
+ .gress-button--icon.gress-button--sm {
968
+ width: 28px;
969
+ }
970
+ .gress-button--icon.gress-button--lg {
971
+ width: 40px;
972
+ }
973
+ .gress-card {
974
+ background: #ffffff;
975
+ border-radius: 16px;
976
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
977
+ padding: 16px;
978
+ border: 1px solid #f0f2f5;
979
+ }
980
+ .gress-card--hover {
981
+ transition: all 0.2s ease;
982
+ }
983
+ .gress-card--hover:hover {
984
+ transform: translateY(-2px);
985
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
986
+ }
987
+ .gress-card--sm {
988
+ padding: 12px;
989
+ }
990
+ .gress-card--lg {
991
+ padding: 24px;
992
+ }
993
+ .gress-card--xl {
994
+ padding: 32px;
995
+ }
996
+ .gress-card--gradient {
997
+ background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
998
+ border: 1px solid rgba(99, 102, 241, 0.1);
999
+ }
1000
+ .gress-card__header {
1001
+ display: flex;
1002
+ align-items: center;
1003
+ justify-content: space-between;
1004
+ margin-bottom: 16px;
1005
+ padding-bottom: 16px;
1006
+ border-bottom: 1px solid #f0f2f5;
1007
+ }
1008
+ .gress-card__title {
1009
+ font-size: 16px;
1010
+ font-weight: 600;
1011
+ color: #1f2329;
1012
+ }
1013
+ .gress-card__subtitle {
1014
+ font-size: 12px;
1015
+ color: #86909c;
1016
+ margin-top: 4px;
1017
+ }
1018
+ .gress-card__body {
1019
+ flex: 1;
1020
+ }
1021
+ .gress-card__footer {
1022
+ display: flex;
1023
+ align-items: center;
1024
+ justify-content: space-between;
1025
+ margin-top: 16px;
1026
+ padding-top: 16px;
1027
+ border-top: 1px solid #f0f2f5;
1028
+ }
1029
+ .gress-input {
1030
+ width: 100%;
1031
+ border: 1px solid #e5e6eb;
1032
+ border-radius: 8px;
1033
+ background: #ffffff;
1034
+ color: #1f2329;
1035
+ font-size: 13px;
1036
+ transition: all 0.2s ease;
1037
+ }
1038
+ .gress-input:hover {
1039
+ border-color: #dcdfe6;
1040
+ }
1041
+ .gress-input:focus {
1042
+ outline: none;
1043
+ border-color: #6366f1;
1044
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
1045
+ }
1046
+ .gress-input:disabled {
1047
+ background: #f2f3f5;
1048
+ color: #e5e6eb;
1049
+ cursor: not-allowed;
1050
+ }
1051
+ .gress-input::placeholder {
1052
+ color: #86909c;
1053
+ }
1054
+ .gress-input {
1055
+ height: 32px;
1056
+ padding: 0 12px;
1057
+ }
1058
+ .gress-input--sm {
1059
+ height: 28px;
1060
+ padding: 0 8px;
1061
+ font-size: 12px;
1062
+ }
1063
+ .gress-input--lg {
1064
+ height: 40px;
1065
+ padding: 0 16px;
1066
+ font-size: 14px;
1067
+ }
1068
+ .gress-input--error {
1069
+ border-color: #ef4444;
1070
+ }
1071
+ .gress-input--error:focus {
1072
+ border-color: #ef4444;
1073
+ box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
1074
+ }
1075
+ .gress-input--success {
1076
+ border-color: #10b981;
1077
+ }
1078
+ .gress-input--success:focus {
1079
+ border-color: #10b981;
1080
+ box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
1081
+ }
1082
+ .gress-badge {
1083
+ display: inline-flex;
1084
+ align-items: center;
1085
+ padding: 2px 8px;
1086
+ border-radius: 6px;
1087
+ background: #6366f1;
1088
+ color: #ffffff;
1089
+ font-size: 11px;
1090
+ font-weight: 500;
1091
+ line-height: 1.2;
1092
+ }
1093
+ .gress-badge--primary {
1094
+ background: rgba(99, 102, 241, 0.1);
1095
+ color: #6366f1;
1096
+ }
1097
+ .gress-badge--success {
1098
+ background: rgba(16, 185, 129, 0.1);
1099
+ color: #10b981;
1100
+ }
1101
+ .gress-badge--warning {
1102
+ background: rgba(245, 158, 11, 0.1);
1103
+ color: #f59e0b;
1104
+ }
1105
+ .gress-badge--error {
1106
+ background: rgba(239, 68, 68, 0.1);
1107
+ color: #ef4444;
1108
+ }
1109
+ .gress-badge--info {
1110
+ background: rgba(59, 130, 246, 0.1);
1111
+ color: #3b82f6;
1112
+ }
1113
+ .gress-badge--gradient {
1114
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
1115
+ color: #ffffff;
1116
+ }
1117
+ .gress-tabs__nav {
1118
+ display: flex;
1119
+ align-items: center;
1120
+ gap: 8px;
1121
+ border-bottom: 2px solid #f0f2f5;
1122
+ margin-bottom: 24px;
1123
+ }
1124
+ .gress-tabs__item {
1125
+ background: none;
1126
+ border: none;
1127
+ padding: 0;
1128
+ margin: 0;
1129
+ font: inherit;
1130
+ color: inherit;
1131
+ cursor: pointer;
1132
+ outline: none;
1133
+ padding: 12px 16px;
1134
+ font-size: 13px;
1135
+ font-weight: 500;
1136
+ color: #4e5969;
1137
+ border-bottom: 2px solid transparent;
1138
+ margin-bottom: -2px;
1139
+ transition: all 0.2s ease;
1140
+ }
1141
+ .gress-tabs__item:hover {
1142
+ color: #6366f1;
1143
+ }
1144
+ .gress-tabs__item--active {
1145
+ color: #6366f1;
1146
+ border-bottom-color: #6366f1;
1147
+ }
1148
+ .gress-modal__overlay {
1149
+ position: absolute;
1150
+ top: 0;
1151
+ left: 0;
1152
+ right: 0;
1153
+ bottom: 0;
1154
+ display: flex;
1155
+ align-items: center;
1156
+ justify-content: center;
1157
+ background: rgba(0, 0, 0, 0.6);
1158
+ z-index: 1040;
1159
+ animation: fadeIn 0.2s ease;
1160
+ }
1161
+ .gress-modal__container {
1162
+ background: #ffffff;
1163
+ border-radius: 20px;
1164
+ box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
1165
+ padding: 32px;
1166
+ border: 1px solid #f0f2f5;
1167
+ max-width: 90vw;
1168
+ max-height: 90vh;
1169
+ overflow: auto;
1170
+ animation: scaleIn 0.2s ease;
1171
+ }
1172
+ .gress-modal__header {
1173
+ display: flex;
1174
+ align-items: center;
1175
+ justify-content: space-between;
1176
+ margin-bottom: 24px;
1177
+ }
1178
+ .gress-modal__title {
1179
+ font-size: 20px;
1180
+ font-weight: 600;
1181
+ color: #1f2329;
1182
+ }
1183
+ .gress-modal__close {
1184
+ background: none;
1185
+ border: none;
1186
+ padding: 0;
1187
+ margin: 0;
1188
+ font: inherit;
1189
+ color: inherit;
1190
+ cursor: pointer;
1191
+ outline: none;
1192
+ display: flex;
1193
+ align-items: center;
1194
+ justify-content: center;
1195
+ width: 32px;
1196
+ height: 32px;
1197
+ border-radius: 9999px;
1198
+ color: #86909c;
1199
+ transition: all 0.2s ease;
1200
+ }
1201
+ .gress-modal__close:hover {
1202
+ background: #f7f8fa;
1203
+ color: #1f2329;
1204
+ }
1205
+ .gress-modal__body {
1206
+ margin-bottom: 24px;
1207
+ }
1208
+ .gress-modal__footer {
1209
+ display: flex;
1210
+ align-items: center;
1211
+ justify-content: space-between;
1212
+ gap: 12px;
1213
+ }
1214
+ .gress-dropdown {
1215
+ position: relative;
1216
+ }
1217
+ .gress-dropdown__menu {
1218
+ background: #ffffff;
1219
+ border-radius: 12px;
1220
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
1221
+ padding: 8px;
1222
+ border: 1px solid #f0f2f5;
1223
+ position: absolute;
1224
+ top: 100%;
1225
+ left: 0;
1226
+ margin-top: 8px;
1227
+ min-width: 160px;
1228
+ z-index: 1000;
1229
+ animation: slideInUp 0.2s ease;
1230
+ }
1231
+ .gress-dropdown__item {
1232
+ background: none;
1233
+ border: none;
1234
+ padding: 0;
1235
+ margin: 0;
1236
+ font: inherit;
1237
+ color: inherit;
1238
+ cursor: pointer;
1239
+ outline: none;
1240
+ display: flex;
1241
+ align-items: center;
1242
+ width: 100%;
1243
+ padding: 12px;
1244
+ gap: 12px;
1245
+ font-size: 13px;
1246
+ color: #1f2329;
1247
+ border-radius: 8px;
1248
+ transition: all 0.2s ease;
1249
+ text-align: left;
1250
+ }
1251
+ .gress-dropdown__item:hover {
1252
+ background: #f7f8fa;
1253
+ }
1254
+ .gress-dropdown__item--active {
1255
+ background: rgba(99, 102, 241, 0.1);
1256
+ color: #6366f1;
1257
+ }
1258
+ .gress-dropdown__item--danger {
1259
+ color: #ef4444;
1260
+ }
1261
+ .gress-dropdown__item--danger:hover {
1262
+ background: rgba(239, 68, 68, 0.1);
1263
+ }
1264
+ .gress-dropdown__divider {
1265
+ height: 1px;
1266
+ background: #f0f2f5;
1267
+ margin: 8px 0;
1268
+ }
1269
+ .gress-notification {
1270
+ background: #ffffff;
1271
+ border-radius: 16px;
1272
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
1273
+ padding: 16px;
1274
+ border: 1px solid #f0f2f5;
1275
+ display: flex;
1276
+ align-items: center;
1277
+ gap: 12px;
1278
+ min-width: 320px;
1279
+ max-width: 480px;
1280
+ animation: slideInUp 0.2s ease;
1281
+ }
1282
+ .gress-notification__icon {
1283
+ display: flex;
1284
+ align-items: center;
1285
+ justify-content: center;
1286
+ width: 40px;
1287
+ height: 40px;
1288
+ border-radius: 9999px;
1289
+ flex-shrink: 0;
1290
+ }
1291
+ .gress-notification__content {
1292
+ flex: 1;
1293
+ }
1294
+ .gress-notification__title {
1295
+ font-size: 14px;
1296
+ font-weight: 600;
1297
+ color: #1f2329;
1298
+ margin-bottom: 4px;
1299
+ }
1300
+ .gress-notification__message {
1301
+ font-size: 12px;
1302
+ color: #4e5969;
1303
+ line-height: 1.6;
1304
+ }
1305
+ .gress-notification__close {
1306
+ background: none;
1307
+ border: none;
1308
+ padding: 0;
1309
+ margin: 0;
1310
+ font: inherit;
1311
+ color: inherit;
1312
+ cursor: pointer;
1313
+ outline: none;
1314
+ display: flex;
1315
+ align-items: center;
1316
+ justify-content: center;
1317
+ width: 24px;
1318
+ height: 24px;
1319
+ border-radius: 9999px;
1320
+ color: #86909c;
1321
+ flex-shrink: 0;
1322
+ transition: all 0.2s ease;
1323
+ }
1324
+ .gress-notification__close:hover {
1325
+ background: #f7f8fa;
1326
+ color: #1f2329;
1327
+ }
1328
+ .gress-notification--success .gress-notification__icon {
1329
+ background: rgba(16, 185, 129, 0.1);
1330
+ color: #10b981;
1331
+ }
1332
+ .gress-notification--warning .gress-notification__icon {
1333
+ background: rgba(245, 158, 11, 0.1);
1334
+ color: #f59e0b;
1335
+ }
1336
+ .gress-notification--error .gress-notification__icon {
1337
+ background: rgba(239, 68, 68, 0.1);
1338
+ color: #ef4444;
1339
+ }
1340
+ .gress-notification--info .gress-notification__icon {
1341
+ background: rgba(59, 130, 246, 0.1);
1342
+ color: #3b82f6;
1343
+ }
1344
+ .gress-loading {
1345
+ display: flex;
1346
+ align-items: center;
1347
+ justify-content: center;
1348
+ }
1349
+ .gress-loading__spinner {
1350
+ width: 40px;
1351
+ height: 40px;
1352
+ border: 3px solid #f0f2f5;
1353
+ border-top-color: #6366f1;
1354
+ border-radius: 9999px;
1355
+ animation: spin 0.8s linear infinite;
1356
+ }
1357
+ .gress-loading--sm .gress-loading__spinner {
1358
+ width: 24px;
1359
+ height: 24px;
1360
+ border-width: 2px;
1361
+ }
1362
+ .gress-loading--lg .gress-loading__spinner {
1363
+ width: 56px;
1364
+ height: 56px;
1365
+ border-width: 4px;
1366
+ }
1367
+ @keyframes spin {
1368
+ to {
1369
+ transform: rotate(360deg);
1370
+ }
1371
+ }
1372
+ .gress-empty {
1373
+ display: flex;
1374
+ align-items: center;
1375
+ justify-content: center;
1376
+ flex-direction: column;
1377
+ gap: 16px;
1378
+ padding: 48px 24px;
1379
+ text-align: center;
1380
+ }
1381
+ .gress-empty__icon {
1382
+ font-size: 64px;
1383
+ color: #c9cdd4;
1384
+ }
1385
+ .gress-empty__title {
1386
+ font-size: 16px;
1387
+ font-weight: 600;
1388
+ color: #4e5969;
1389
+ }
1390
+ .gress-empty__description {
1391
+ font-size: 13px;
1392
+ color: #86909c;
1393
+ max-width: 400px;
1394
+ }
1395
+ .gress-divider {
1396
+ height: 1px;
1397
+ background: #f0f2f5;
1398
+ margin: 24px 0;
1399
+ }
1400
+ .gress-divider--vertical {
1401
+ width: 1px;
1402
+ height: auto;
1403
+ margin: 0 16px;
1404
+ }
1405
+ .gress-divider--dashed {
1406
+ border-top: 1px dashed #e5e6eb;
1407
+ background: none;
1408
+ }
1409
+ * {
1410
+ box-sizing: border-box;
1411
+ margin: 0;
1412
+ padding: 0;
1413
+ }
1414
+ html {
1415
+ font-size: 16px;
1416
+ -webkit-font-smoothing: antialiased;
1417
+ -moz-osx-font-smoothing: grayscale;
1418
+ text-rendering: optimizeLegibility;
1419
+ }
1420
+ body {
1421
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1422
+ font-size: 13px;
1423
+ line-height: 1.5;
1424
+ color: #1f2329;
1425
+ background: #f7f8fa;
1426
+ min-height: 100vh;
1427
+ }
1428
+ ::-webkit-scrollbar {
1429
+ width: 8px;
1430
+ height: 8px;
1431
+ }
1432
+ ::-webkit-scrollbar-track {
1433
+ background: transparent;
1434
+ }
1435
+ ::-webkit-scrollbar-thumb {
1436
+ background: #d4d4d4;
1437
+ border-radius: 9999px;
1438
+ }
1439
+ ::-webkit-scrollbar-thumb:hover {
1440
+ background: #a3a3a3;
1441
+ }
1442
+ ::selection {
1443
+ background: rgba(99, 102, 241, 0.2);
1444
+ color: #1f2329;
1445
+ }
1446
+ a {
1447
+ color: #6366f1;
1448
+ text-decoration: none;
1449
+ transition: color 0.2s ease;
1450
+ }
1451
+ a:hover {
1452
+ color: #4f46e5;
1453
+ }
1454
+ code {
1455
+ font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1456
+ font-size: 0.9em;
1457
+ padding: 2px 6px;
1458
+ background: rgba(99, 102, 241, 0.08);
1459
+ border-radius: 6px;
1460
+ color: #6366f1;
1461
+ }
1462
+ pre {
1463
+ font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1464
+ padding: 16px;
1465
+ background: #f2f3f5;
1466
+ border-radius: 12px;
1467
+ overflow-x: auto;
1468
+ }
1469
+ pre code {
1470
+ padding: 0;
1471
+ background: none;
1472
+ }
1473
+ .workflow-editor {
1474
+ width: 100%;
1475
+ height: 100%;
1476
+ position: relative;
1477
+ background: #f7f8fa;
1478
+ overflow: hidden;
1479
+ }
1480
+ .workflow-canvas {
1481
+ width: 100%;
1482
+ height: 100%;
1483
+ position: relative;
1484
+ background-color: #f7f8fa;
1485
+ background-image: linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
1486
+ background-size: 24px 24px;
1487
+ }
1488
+ .workflow-node {
1489
+ position: absolute;
1490
+ min-width: 260px;
1491
+ background: #ffffff;
1492
+ border-radius: 16px;
1493
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
1494
+ cursor: move;
1495
+ transition: all 0.2s ease;
1496
+ border: 2px solid transparent;
1497
+ }
1498
+ .workflow-node:hover {
1499
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
1500
+ transform: translateY(-2px);
1501
+ }
1502
+ .workflow-node.selected {
1503
+ border-color: #6366f1;
1504
+ box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
1505
+ }
1506
+ .workflow-node.error {
1507
+ border-color: #ef4444;
1508
+ }
1509
+ .workflow-node.success {
1510
+ border-color: #10b981;
1511
+ }
1512
+ .workflow-connection {
1513
+ position: absolute;
1514
+ pointer-events: none;
1515
+ z-index: 1;
1516
+ }
1517
+ .workflow-connection.selected {
1518
+ stroke: #6366f1 !important;
1519
+ stroke-width: 3px !important;
1520
+ }
1521
+ .chat-container {
1522
+ display: flex;
1523
+ flex-direction: column;
1524
+ height: 100%;
1525
+ background: #ffffff;
1526
+ }
1527
+ .chat-messages {
1528
+ flex: 1;
1529
+ overflow-y: auto;
1530
+ padding: 24px;
1531
+ }
1532
+ .chat-messages::-webkit-scrollbar {
1533
+ width: 6px;
1534
+ height: 6px;
1535
+ }
1536
+ .chat-messages::-webkit-scrollbar-track {
1537
+ background: transparent;
1538
+ border-radius: 9999px;
1539
+ }
1540
+ .chat-messages::-webkit-scrollbar-thumb {
1541
+ background: #d4d4d4;
1542
+ border-radius: 9999px;
1543
+ }
1544
+ .chat-messages::-webkit-scrollbar-thumb:hover {
1545
+ background: rgb(186.5, 186.5, 186.5);
1546
+ }
1547
+ .chat-messages .chat-message {
1548
+ background: #ffffff;
1549
+ border-radius: 16px;
1550
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
1551
+ padding: 16px;
1552
+ border: 1px solid #f0f2f5;
1553
+ margin-bottom: 16px;
1554
+ max-width: 80%;
1555
+ }
1556
+ .chat-messages .chat-message--user {
1557
+ margin-left: auto;
1558
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
1559
+ color: #ffffff;
1560
+ }
1561
+ .chat-messages .chat-message--assistant {
1562
+ margin-right: auto;
1563
+ background: #ffffff;
1564
+ }
1565
+ .chat-messages .chat-message--system {
1566
+ margin: 0 auto;
1567
+ background: #f2f3f5;
1568
+ color: #4e5969;
1569
+ text-align: center;
1570
+ max-width: 60%;
1571
+ }
1572
+ .chat-input {
1573
+ border-top: 1px solid #f0f2f5;
1574
+ padding: 24px;
1575
+ background: #ffffff;
1576
+ }
1577
+ .chat-input__wrapper {
1578
+ display: flex;
1579
+ align-items: center;
1580
+ gap: 12px;
1581
+ }
1582
+ .chat-input__field {
1583
+ width: 100%;
1584
+ border: 1px solid #e5e6eb;
1585
+ border-radius: 8px;
1586
+ background: #ffffff;
1587
+ color: #1f2329;
1588
+ font-size: 13px;
1589
+ transition: all 0.2s ease;
1590
+ }
1591
+ .chat-input__field:hover {
1592
+ border-color: #dcdfe6;
1593
+ }
1594
+ .chat-input__field:focus {
1595
+ outline: none;
1596
+ border-color: #6366f1;
1597
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
1598
+ }
1599
+ .chat-input__field:disabled {
1600
+ background: #f2f3f5;
1601
+ color: #e5e6eb;
1602
+ cursor: not-allowed;
1603
+ }
1604
+ .chat-input__field::placeholder {
1605
+ color: #86909c;
1606
+ }
1607
+ .chat-input__field {
1608
+ flex: 1;
1609
+ height: 40px;
1610
+ padding: 0 16px;
1611
+ }
1612
+ .chat-input__button {
1613
+ display: flex;
1614
+ align-items: center;
1615
+ justify-content: center;
1616
+ gap: 8px;
1617
+ border: none;
1618
+ border-radius: 8px;
1619
+ font-weight: 500;
1620
+ cursor: pointer;
1621
+ transition: all 0.2s ease;
1622
+ white-space: nowrap;
1623
+ user-select: none;
1624
+ -webkit-user-select: none;
1625
+ -moz-user-select: none;
1626
+ -ms-user-select: none;
1627
+ }
1628
+ .chat-input__button:disabled {
1629
+ opacity: 0.5;
1630
+ cursor: not-allowed;
1631
+ }
1632
+ .chat-input__button {
1633
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
1634
+ color: #ffffff;
1635
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
1636
+ }
1637
+ .chat-input__button:hover:not(:disabled) {
1638
+ box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
1639
+ transform: translateY(-1px);
1640
+ }
1641
+ .chat-input__button:active:not(:disabled) {
1642
+ transform: translateY(0);
1643
+ }
1644
+ .chat-input__button {
1645
+ height: 40px;
1646
+ padding: 0 20px;
1647
+ }
1648
+ .workflow-list {
1649
+ padding: 32px;
1650
+ }
1651
+ .workflow-list__header {
1652
+ display: flex;
1653
+ align-items: center;
1654
+ justify-content: space-between;
1655
+ margin-bottom: 32px;
1656
+ }
1657
+ .workflow-list__title {
1658
+ font-size: 24px;
1659
+ font-weight: 700;
1660
+ color: #1f2329;
1661
+ }
1662
+ .workflow-list__grid {
1663
+ display: grid;
1664
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
1665
+ gap: 24px;
1666
+ }
1667
+ .workflow-list__item {
1668
+ background: #ffffff;
1669
+ border-radius: 16px;
1670
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
1671
+ padding: 24px;
1672
+ border: 1px solid #f0f2f5;
1673
+ transition: all 0.2s ease;
1674
+ }
1675
+ .workflow-list__item:hover {
1676
+ transform: translateY(-2px);
1677
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
1678
+ }
1679
+ .workflow-list__item {
1680
+ cursor: pointer;
1681
+ }
1682
+ .workflow-list__item:hover {
1683
+ border-color: #6366f1;
1684
+ }
1685
+ .workflow-list__item-header {
1686
+ display: flex;
1687
+ align-items: center;
1688
+ justify-content: space-between;
1689
+ margin-bottom: 12px;
1690
+ }
1691
+ .workflow-list__item-title {
1692
+ font-size: 16px;
1693
+ font-weight: 600;
1694
+ color: #1f2329;
1695
+ overflow: hidden;
1696
+ text-overflow: ellipsis;
1697
+ white-space: nowrap;
1698
+ }
1699
+ .workflow-list__item-desc {
1700
+ font-size: 12px;
1701
+ color: #86909c;
1702
+ line-height: 1.6;
1703
+ margin-bottom: 16px;
1704
+ display: -webkit-box;
1705
+ -webkit-line-clamp: 2;
1706
+ -webkit-box-orient: vertical;
1707
+ overflow: hidden;
1708
+ text-overflow: ellipsis;
1709
+ }
1710
+ .workflow-list__item-footer {
1711
+ display: flex;
1712
+ align-items: center;
1713
+ justify-content: space-between;
1714
+ padding-top: 12px;
1715
+ border-top: 1px solid #f0f2f5;
1716
+ }
1717
+ .workflow-list__item-meta {
1718
+ font-size: 11px;
1719
+ color: #86909c;
1720
+ }
1721
+ @media (max-width: 767px) {
1722
+ .workflow-list {
1723
+ padding: 24px;
1724
+ }
1725
+ .workflow-list__grid {
1726
+ grid-template-columns: 1fr;
1727
+ }
1728
+ .chat-messages .chat-message {
1729
+ max-width: 90%;
1730
+ }
1731
+ }
1732
+ @media (max-width: 639px) {
1733
+ .workflow-list {
1734
+ padding: 16px;
1735
+ }
1736
+ .chat-input {
1737
+ padding: 16px;
1738
+ }
1739
+ }
1740
+ @keyframes fadeIn {
1741
+ from {
1742
+ opacity: 0;
1743
+ }
1744
+ to {
1745
+ opacity: 1;
1746
+ }
1747
+ }
1748
+ @keyframes slideInUp {
1749
+ from {
1750
+ opacity: 0;
1751
+ transform: translateY(20px);
1752
+ }
1753
+ to {
1754
+ opacity: 1;
1755
+ transform: translateY(0);
1756
+ }
1757
+ }
1758
+ @keyframes scaleIn {
1759
+ from {
1760
+ opacity: 0;
1761
+ transform: scale(0.95);
1762
+ }
1763
+ to {
1764
+ opacity: 1;
1765
+ transform: scale(1);
1766
+ }
1767
+ }
1768
+ @keyframes pulse {
1769
+ 0%, 100% {
1770
+ opacity: 1;
1771
+ }
1772
+ 50% {
1773
+ opacity: 0.5;
1774
+ }
1775
+ }
1776
+ @keyframes spin {
1777
+ to {
1778
+ transform: rotate(360deg);
1779
+ }
1780
+ }
1781
+ @media print {
1782
+ body {
1783
+ background: white;
1784
+ }
1785
+ .workflow-canvas {
1786
+ background: white;
1787
+ }
1788
+ .workflow-node {
1789
+ box-shadow: none;
1790
+ border: 1px solid #e5e6eb;
1791
+ }
1792
+ }@keyframes fadeIn-65bd80d8 {
1793
+ from {
1794
+ opacity: 0;
1795
+ }
1796
+ to {
1797
+ opacity: 1;
1798
+ }
1799
+ }
1800
+ @keyframes slideInUp-65bd80d8 {
1801
+ from {
1802
+ opacity: 0;
1803
+ transform: translateY(20px);
1804
+ }
1805
+ to {
1806
+ opacity: 1;
1807
+ transform: translateY(0);
1808
+ }
1809
+ }
1810
+ @keyframes scaleIn-65bd80d8 {
1811
+ from {
1812
+ opacity: 0;
1813
+ transform: scale(0.9);
1814
+ }
1815
+ to {
1816
+ opacity: 1;
1817
+ transform: scale(1);
1818
+ }
1819
+ }
1820
+ @keyframes pulse-65bd80d8 {
1821
+ 0%, 100% {
1822
+ opacity: 1;
1823
+ }
1824
+ 50% {
1825
+ opacity: 0.5;
1826
+ }
1827
+ }
1828
+ .page-container[data-v-65bd80d8] {
1829
+ height: 100%;
1830
+ display: flex;
1831
+ flex-direction: column;
1832
+ overflow: hidden;
1833
+ background: var(--bg-secondary, #f7f8fa);
1834
+ }@keyframes fadeIn-7bbf9d25 {
1835
+ from {
1836
+ opacity: 0;
1837
+ }
1838
+ to {
1839
+ opacity: 1;
1840
+ }
1841
+ }
1842
+ @keyframes slideInUp-7bbf9d25 {
1843
+ from {
1844
+ opacity: 0;
1845
+ transform: translateY(20px);
1846
+ }
1847
+ to {
1848
+ opacity: 1;
1849
+ transform: translateY(0);
1850
+ }
1851
+ }
1852
+ @keyframes scaleIn-7bbf9d25 {
1853
+ from {
1854
+ opacity: 0;
1855
+ transform: scale(0.9);
1856
+ }
1857
+ to {
1858
+ opacity: 1;
1859
+ transform: scale(1);
1860
+ }
1861
+ }
1862
+ @keyframes pulse-7bbf9d25 {
1863
+ 0%, 100% {
1864
+ opacity: 1;
1865
+ }
1866
+ 50% {
1867
+ opacity: 0.5;
1868
+ }
1869
+ }
1870
+ .page-content[data-v-7bbf9d25] {
1871
+ flex: 1;
1872
+ overflow-y: auto;
1873
+ padding: var(--spacing-2xl, 24px);
1874
+ display: flex;
1875
+ flex-direction: column;
1876
+ gap: var(--spacing-lg, 16px);
1877
+ }
1878
+ .page-content[data-v-7bbf9d25]::-webkit-scrollbar {
1879
+ width: 6px;
1880
+ height: 6px;
1881
+ }
1882
+ .page-content[data-v-7bbf9d25]::-webkit-scrollbar-track {
1883
+ background: transparent;
1884
+ border-radius: var(--radius-full, 9999px);
1885
+ }
1886
+ .page-content[data-v-7bbf9d25]::-webkit-scrollbar-thumb {
1887
+ background: var(--gray-300, #d4d4d4);
1888
+ border-radius: var(--radius-full, 9999px);
1889
+ }
1890
+ .page-content[data-v-7bbf9d25]::-webkit-scrollbar-thumb:hover {
1891
+ background: var(--gray-400, #a3a3a3);
1892
+ }
1893
+ @media (max-width: 768px) {
1894
+ .page-content[data-v-7bbf9d25] {
1895
+ padding: var(--spacing-lg, 16px);
1896
+ }
1897
+ }@keyframes fadeIn-4d82a654 {
1898
+ from {
1899
+ opacity: 0;
1900
+ }
1901
+ to {
1902
+ opacity: 1;
1903
+ }
1904
+ }
1905
+ @keyframes slideInUp-4d82a654 {
1906
+ from {
1907
+ opacity: 0;
1908
+ transform: translateY(20px);
1909
+ }
1910
+ to {
1911
+ opacity: 1;
1912
+ transform: translateY(0);
1913
+ }
1914
+ }
1915
+ @keyframes scaleIn-4d82a654 {
1916
+ from {
1917
+ opacity: 0;
1918
+ transform: scale(0.9);
1919
+ }
1920
+ to {
1921
+ opacity: 1;
1922
+ transform: scale(1);
1923
+ }
1924
+ }
1925
+ @keyframes pulse-4d82a654 {
1926
+ 0%, 100% {
1927
+ opacity: 1;
1928
+ }
1929
+ 50% {
1930
+ opacity: 0.5;
1931
+ }
1932
+ }
1933
+ .page-header[data-v-4d82a654] {
1934
+ background: var(--bg-primary, #ffffff);
1935
+ border-bottom: 1px solid var(--border-secondary, #f0f2f5);
1936
+ padding: 0 var(--spacing-3xl, 32px);
1937
+ height: 64px;
1938
+ flex-shrink: 0;
1939
+ display: flex;
1940
+ align-items: center;
1941
+ }
1942
+ .page-header__content[data-v-4d82a654] {
1943
+ display: flex;
1944
+ justify-content: space-between;
1945
+ align-items: center;
1946
+ width: 100%;
1947
+ }
1948
+ .page-header__prefix[data-v-4d82a654] {
1949
+ display: flex;
1950
+ align-items: center;
1951
+ gap: var(--spacing-md, 12px);
1952
+ flex: 1;
1953
+ }
1954
+ .page-header__left[data-v-4d82a654] {
1955
+ display: flex;
1956
+ align-items: center;
1957
+ gap: var(--spacing-md, 12px);
1958
+ }
1959
+ .page-header__breadcrumb[data-v-4d82a654] {
1960
+ display: flex;
1961
+ align-items: center;
1962
+ gap: var(--spacing-md, 12px);
1963
+ flex-wrap: wrap;
1964
+ }
1965
+ .page-header .breadcrumb-item[data-v-4d82a654] {
1966
+ display: flex;
1967
+ align-items: center;
1968
+ gap: var(--spacing-xs, 4px);
1969
+ color: var(--text-tertiary, #86909c);
1970
+ font-size: var(--font-size-base, 13px);
1971
+ font-weight: var(--font-weight-medium, 500);
1972
+ transition: color 0.2s ease;
1973
+ }
1974
+ .page-header .breadcrumb-item[data-v-4d82a654]:hover {
1975
+ color: var(--text-secondary, #4e5969);
1976
+ }
1977
+ .page-header .breadcrumb-item--current[data-v-4d82a654] {
1978
+ color: var(--text-primary, #1f2329);
1979
+ font-size: var(--font-size-lg, 16px);
1980
+ font-weight: var(--font-weight-semibold, 600);
1981
+ }
1982
+ .page-header .breadcrumb-separator[data-v-4d82a654] {
1983
+ color: var(--text-quaternary, #c9cdd4);
1984
+ font-size: var(--font-size-base, 13px);
1985
+ user-select: none;
1986
+ }
1987
+ .page-header__actions[data-v-4d82a654] {
1988
+ display: flex;
1989
+ align-items: center;
1990
+ gap: var(--spacing-md, 12px);
1991
+ }
1992
+ @media (max-width: 768px) {
1993
+ .page-header[data-v-4d82a654] {
1994
+ padding: var(--spacing-md, 12px);
1995
+ }
1996
+ .page-header__content[data-v-4d82a654] {
1997
+ flex-direction: column;
1998
+ align-items: flex-start;
1999
+ gap: var(--spacing-md, 12px);
2000
+ }
2001
+ .page-header__prefix[data-v-4d82a654] {
2002
+ width: 100%;
2003
+ }
2004
+ .page-header__actions[data-v-4d82a654] {
2005
+ width: 100%;
2006
+ justify-content: flex-end;
2007
+ }
2008
+ }
2009
+ @media (max-width: 640px) {
2010
+ .page-header[data-v-4d82a654] {
2011
+ padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
2012
+ }
2013
+ .page-header .breadcrumb-item[data-v-4d82a654] {
2014
+ font-size: var(--font-size-sm, 12px);
2015
+ }
2016
+ .page-header .breadcrumb-item--current[data-v-4d82a654] {
2017
+ font-size: var(--font-size-base, 13px);
2018
+ }
2019
+ .page-header .breadcrumb-separator[data-v-4d82a654] {
2020
+ font-size: var(--font-size-sm, 12px);
2021
+ }
2022
+ }@keyframes fadeIn-f199a048 {
2023
+ from {
2024
+ opacity: 0;
2025
+ }
2026
+ to {
2027
+ opacity: 1;
2028
+ }
2029
+ }
2030
+ @keyframes slideInUp-f199a048 {
2031
+ from {
2032
+ opacity: 0;
2033
+ transform: translateY(20px);
2034
+ }
2035
+ to {
2036
+ opacity: 1;
2037
+ transform: translateY(0);
2038
+ }
2039
+ }
2040
+ @keyframes scaleIn-f199a048 {
2041
+ from {
2042
+ opacity: 0;
2043
+ transform: scale(0.9);
2044
+ }
2045
+ to {
2046
+ opacity: 1;
2047
+ transform: scale(1);
2048
+ }
2049
+ }
2050
+ @keyframes pulse-f199a048 {
2051
+ 0%, 100% {
2052
+ opacity: 1;
2053
+ }
2054
+ 50% {
2055
+ opacity: 0.5;
2056
+ }
2057
+ }
2058
+ .card-list[data-v-f199a048] {
2059
+ display: grid;
2060
+ gap: var(--spacing-lg, 16px);
2061
+ }
2062
+ .card-list--medium[data-v-f199a048] {
2063
+ grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
2064
+ }
2065
+ .card-list--small[data-v-f199a048] {
2066
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
2067
+ }
2068
+ .card-list--large[data-v-f199a048] {
2069
+ grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
2070
+ }
2071
+ @media (max-width: 768px) {
2072
+ .card-list[data-v-f199a048] {
2073
+ grid-template-columns: 1fr;
2074
+ }
2075
+ }@keyframes fadeIn-bf918fa3 {
2076
+ from {
2077
+ opacity: 0;
2078
+ }
2079
+ to {
2080
+ opacity: 1;
2081
+ }
2082
+ }
2083
+ @keyframes slideInUp-bf918fa3 {
2084
+ from {
2085
+ opacity: 0;
2086
+ transform: translateY(20px);
2087
+ }
2088
+ to {
2089
+ opacity: 1;
2090
+ transform: translateY(0);
2091
+ }
2092
+ }
2093
+ @keyframes scaleIn-bf918fa3 {
2094
+ from {
2095
+ opacity: 0;
2096
+ transform: scale(0.9);
2097
+ }
2098
+ to {
2099
+ opacity: 1;
2100
+ transform: scale(1);
2101
+ }
2102
+ }
2103
+ @keyframes pulse-bf918fa3 {
2104
+ 0%, 100% {
2105
+ opacity: 1;
2106
+ }
2107
+ 50% {
2108
+ opacity: 0.5;
2109
+ }
2110
+ }
2111
+ .page-pagination[data-v-bf918fa3] {
2112
+ display: flex;
2113
+ justify-content: flex-end;
2114
+ padding: var(--spacing-lg, 16px) 0;
2115
+ margin-top: var(--spacing-lg, 16px);
2116
+ }
2117
+ .pagination-controls[data-v-bf918fa3] {
2118
+ display: flex;
2119
+ align-items: center;
2120
+ gap: var(--spacing-md, 12px);
2121
+ }
2122
+ .pagination-btn[data-v-bf918fa3] {
2123
+ padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
2124
+ background: var(--bg-primary, #ffffff);
2125
+ border: 1px solid var(--border-primary, #e5e6eb);
2126
+ border-radius: var(--radius-md, 8px);
2127
+ color: var(--text-primary, #1f2329);
2128
+ font-size: var(--font-size-sm, 12px);
2129
+ cursor: pointer;
2130
+ transition: all 0.2s ease;
2131
+ }
2132
+ .pagination-btn[data-v-bf918fa3]:hover:not(:disabled) {
2133
+ background: var(--bg-secondary, #f7f8fa);
2134
+ border-color: var(--primary, #6366f1);
2135
+ color: var(--primary, #6366f1);
2136
+ }
2137
+ .pagination-btn[data-v-bf918fa3]:disabled {
2138
+ opacity: 0.5;
2139
+ cursor: not-allowed;
2140
+ }
2141
+ .pagination-info[data-v-bf918fa3] {
2142
+ color: var(--text-secondary, #4e5969);
2143
+ font-size: var(--font-size-sm, 12px);
2144
+ white-space: nowrap;
2145
+ }
2146
+ .pagination-select[data-v-bf918fa3] {
2147
+ padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
2148
+ background: var(--bg-primary, #ffffff);
2149
+ border: 1px solid var(--border-primary, #e5e6eb);
2150
+ border-radius: var(--radius-md, 8px);
2151
+ color: var(--text-primary, #1f2329);
2152
+ font-size: var(--font-size-sm, 12px);
2153
+ cursor: pointer;
2154
+ transition: all 0.2s ease;
2155
+ }
2156
+ .pagination-select[data-v-bf918fa3]:hover {
2157
+ border-color: var(--primary, #6366f1);
2158
+ }
2159
+ .pagination-select[data-v-bf918fa3]:focus {
2160
+ outline: none;
2161
+ border-color: var(--primary, #6366f1);
2162
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
2163
+ }@keyframes fadeIn-c4c4657a {
2164
+ from {
2165
+ opacity: 0;
2166
+ }
2167
+ to {
2168
+ opacity: 1;
2169
+ }
2170
+ }
2171
+ @keyframes slideInUp-c4c4657a {
2172
+ from {
2173
+ opacity: 0;
2174
+ transform: translateY(20px);
2175
+ }
2176
+ to {
2177
+ opacity: 1;
2178
+ transform: translateY(0);
2179
+ }
2180
+ }
2181
+ @keyframes scaleIn-c4c4657a {
2182
+ from {
2183
+ opacity: 0;
2184
+ transform: scale(0.9);
2185
+ }
2186
+ to {
2187
+ opacity: 1;
2188
+ transform: scale(1);
2189
+ }
2190
+ }
2191
+ @keyframes pulse-c4c4657a {
2192
+ 0%, 100% {
2193
+ opacity: 1;
2194
+ }
2195
+ 50% {
2196
+ opacity: 0.5;
2197
+ }
2198
+ }
2199
+ .log-viewer[data-v-c4c4657a] {
2200
+ display: flex;
2201
+ flex-direction: column;
2202
+ height: 100%;
2203
+ background: var(--bg-secondary, #f8f9fa);
2204
+ border-radius: var(--radius-md, 8px);
2205
+ overflow: hidden;
2206
+ border: 1px solid var(--border-secondary, #e8e8e8);
2207
+ }
2208
+ .log-viewer.log-viewer--dark[data-v-c4c4657a] {
2209
+ background: #1e1e1e;
2210
+ border-color: #3e3e3e;
2211
+ }
2212
+ .log-viewer.log-viewer--dark .log-toolbar[data-v-c4c4657a] {
2213
+ background: #2d2d2d;
2214
+ border-bottom-color: #3e3e3e;
2215
+ }
2216
+ .log-viewer.log-viewer--dark .log-content[data-v-c4c4657a] {
2217
+ background: #1e1e1e;
2218
+ }
2219
+ .log-viewer.log-viewer--dark .log-line[data-v-c4c4657a]:hover {
2220
+ background: rgba(255, 255, 255, 0.05);
2221
+ }
2222
+ .log-viewer.log-viewer--dark .log-timestamp[data-v-c4c4657a] {
2223
+ color: #8c8c8c;
2224
+ }
2225
+ .log-viewer.log-viewer--dark .log-thread[data-v-c4c4657a] {
2226
+ color: #69c0ff;
2227
+ }
2228
+ .log-viewer.log-viewer--dark .log-class[data-v-c4c4657a] {
2229
+ color: #b37feb;
2230
+ }
2231
+ .log-viewer.log-viewer--dark .log-message[data-v-c4c4657a] {
2232
+ color: #d4d4d4;
2233
+ }
2234
+ .log-viewer.log-viewer--dark .log-empty[data-v-c4c4657a] {
2235
+ color: #8c8c8c;
2236
+ }
2237
+ .log-viewer.log-viewer--dark .toolbar-btn[data-v-c4c4657a] {
2238
+ background: #3e3e3e;
2239
+ color: #d4d4d4;
2240
+ border-color: #4e4e4e;
2241
+ }
2242
+ .log-viewer.log-viewer--dark .toolbar-btn[data-v-c4c4657a]:hover {
2243
+ background: #4e4e4e;
2244
+ }
2245
+ .log-viewer.log-viewer--dark .toolbar-select[data-v-c4c4657a] {
2246
+ background: #3e3e3e;
2247
+ color: #d4d4d4;
2248
+ border-color: #4e4e4e;
2249
+ }
2250
+ .log-toolbar[data-v-c4c4657a] {
2251
+ padding: 12px;
2252
+ background: var(--bg-primary, #ffffff);
2253
+ border-bottom: 1px solid var(--border-secondary, #e8e8e8);
2254
+ flex-shrink: 0;
2255
+ }
2256
+ .toolbar-group[data-v-c4c4657a] {
2257
+ display: flex;
2258
+ gap: 8px;
2259
+ align-items: center;
2260
+ flex-wrap: wrap;
2261
+ }
2262
+ .toolbar-btn[data-v-c4c4657a] {
2263
+ display: flex;
2264
+ align-items: center;
2265
+ gap: 4px;
2266
+ padding: 6px 12px;
2267
+ background: var(--bg-primary, #ffffff);
2268
+ border: 1px solid var(--border-primary, #e5e6eb);
2269
+ border-radius: var(--radius-md, 8px);
2270
+ color: var(--text-primary, #1f2329);
2271
+ font-size: var(--font-size-sm, 12px);
2272
+ cursor: pointer;
2273
+ transition: all 0.2s ease;
2274
+ }
2275
+ .toolbar-btn[data-v-c4c4657a]:hover {
2276
+ background: var(--bg-secondary, #f7f8fa);
2277
+ border-color: var(--primary, #6366f1);
2278
+ }
2279
+ .toolbar-btn .btn-icon[data-v-c4c4657a] {
2280
+ font-size: 14px;
2281
+ }
2282
+ .toolbar-select[data-v-c4c4657a] {
2283
+ padding: 6px 12px;
2284
+ background: var(--bg-primary, #ffffff);
2285
+ border: 1px solid var(--border-primary, #e5e6eb);
2286
+ border-radius: var(--radius-md, 8px);
2287
+ color: var(--text-primary, #1f2329);
2288
+ font-size: var(--font-size-sm, 12px);
2289
+ cursor: pointer;
2290
+ transition: all 0.2s ease;
2291
+ }
2292
+ .toolbar-select[data-v-c4c4657a]:hover {
2293
+ border-color: var(--primary, #6366f1);
2294
+ }
2295
+ .toolbar-select[data-v-c4c4657a]:focus {
2296
+ outline: none;
2297
+ border-color: var(--primary, #6366f1);
2298
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
2299
+ }
2300
+ .log-content[data-v-c4c4657a] {
2301
+ flex: 1;
2302
+ padding: 12px;
2303
+ overflow-y: auto;
2304
+ overflow-x: hidden;
2305
+ }
2306
+ .log-content[data-v-c4c4657a]::-webkit-scrollbar {
2307
+ width: 6px;
2308
+ }
2309
+ .log-content[data-v-c4c4657a]::-webkit-scrollbar-thumb {
2310
+ background: var(--gray-300, #d4d4d4);
2311
+ border-radius: var(--radius-full, 9999px);
2312
+ }
2313
+ .log-content[data-v-c4c4657a]::-webkit-scrollbar-thumb:hover {
2314
+ background: var(--gray-400, #a3a3a3);
2315
+ }
2316
+ .log-loading[data-v-c4c4657a] {
2317
+ display: flex;
2318
+ flex-direction: column;
2319
+ align-items: center;
2320
+ justify-content: center;
2321
+ height: 200px;
2322
+ gap: 12px;
2323
+ color: var(--text-tertiary, #86909c);
2324
+ }
2325
+ .loading-spinner[data-v-c4c4657a] {
2326
+ width: 32px;
2327
+ height: 32px;
2328
+ border: 3px solid var(--border-secondary, #f0f2f5);
2329
+ border-top-color: var(--primary, #6366f1);
2330
+ border-radius: var(--radius-full, 9999px);
2331
+ animation: spin-c4c4657a 0.8s linear infinite;
2332
+ }
2333
+ @keyframes spin-c4c4657a {
2334
+ to {
2335
+ transform: rotate(360deg);
2336
+ }
2337
+ }
2338
+ .log-list[data-v-c4c4657a] {
2339
+ display: flex;
2340
+ flex-direction: column;
2341
+ gap: 0;
2342
+ }
2343
+ .log-line[data-v-c4c4657a] {
2344
+ padding: 4px 8px;
2345
+ font-family: "Consolas", "Monaco", "Courier New", monospace;
2346
+ font-size: 12px;
2347
+ line-height: 1.6;
2348
+ white-space: pre-wrap;
2349
+ word-break: break-word;
2350
+ border-left: 2px solid transparent;
2351
+ transition: all 0.15s ease;
2352
+ }
2353
+ .log-line[data-v-c4c4657a]:hover {
2354
+ background: rgba(0, 0, 0, 0.03);
2355
+ border-left-color: var(--primary, #6366f1);
2356
+ }
2357
+ .log-line.log-level-trace .log-level[data-v-c4c4657a] {
2358
+ color: #8c8c8c;
2359
+ }
2360
+ .log-line.log-level-debug .log-level[data-v-c4c4657a] {
2361
+ color: #1890ff;
2362
+ }
2363
+ .log-line.log-level-info .log-level[data-v-c4c4657a] {
2364
+ color: #52c41a;
2365
+ }
2366
+ .log-line.log-level-warn[data-v-c4c4657a] {
2367
+ background: rgba(250, 173, 20, 0.05);
2368
+ }
2369
+ .log-line.log-level-warn .log-level[data-v-c4c4657a] {
2370
+ color: #faad14;
2371
+ }
2372
+ .log-line.log-level-error[data-v-c4c4657a], .log-line.log-level-fatal[data-v-c4c4657a] {
2373
+ background: rgba(245, 34, 45, 0.05);
2374
+ }
2375
+ .log-line.log-level-error .log-level[data-v-c4c4657a], .log-line.log-level-fatal .log-level[data-v-c4c4657a] {
2376
+ color: #f5222d;
2377
+ font-weight: 600;
2378
+ }
2379
+ .log-timestamp[data-v-c4c4657a] {
2380
+ color: #8c8c8c;
2381
+ margin-right: 8px;
2382
+ font-weight: 500;
2383
+ }
2384
+ .log-thread[data-v-c4c4657a] {
2385
+ color: #1890ff;
2386
+ margin-right: 8px;
2387
+ font-style: italic;
2388
+ }
2389
+ .log-level[data-v-c4c4657a] {
2390
+ display: inline-block;
2391
+ min-width: 50px;
2392
+ margin-right: 8px;
2393
+ font-weight: 600;
2394
+ text-align: left;
2395
+ }
2396
+ .log-class[data-v-c4c4657a] {
2397
+ color: #722ed1;
2398
+ margin-right: 8px;
2399
+ }
2400
+ .log-separator[data-v-c4c4657a] {
2401
+ color: #8c8c8c;
2402
+ margin-right: 8px;
2403
+ }
2404
+ .log-message[data-v-c4c4657a] {
2405
+ color: var(--text-primary, #262626);
2406
+ flex: 1;
2407
+ }
2408
+ .log-error-detail[data-v-c4c4657a] {
2409
+ display: block;
2410
+ margin-top: 4px;
2411
+ padding-left: 24px;
2412
+ color: #f5222d;
2413
+ }
2414
+ .log-error-label[data-v-c4c4657a] {
2415
+ font-weight: 600;
2416
+ margin-right: 8px;
2417
+ }
2418
+ .log-error-message[data-v-c4c4657a] {
2419
+ font-style: italic;
2420
+ }
2421
+ .log-empty[data-v-c4c4657a] {
2422
+ display: flex;
2423
+ flex-direction: column;
2424
+ align-items: center;
2425
+ justify-content: center;
2426
+ height: 200px;
2427
+ gap: 12px;
2428
+ color: var(--text-tertiary, #86909c);
2429
+ }
2430
+ .empty-icon[data-v-c4c4657a] {
2431
+ font-size: 48px;
2432
+ opacity: 0.5;
2433
+ }
2434
+ .empty-text[data-v-c4c4657a] {
2435
+ font-size: var(--font-size-base, 13px);
2436
+ }@keyframes fadeIn-8db9aa68 {
2437
+ from {
2438
+ opacity: 0;
2439
+ }
2440
+ to {
2441
+ opacity: 1;
2442
+ }
2443
+ }
2444
+ @keyframes slideInUp-8db9aa68 {
2445
+ from {
2446
+ opacity: 0;
2447
+ transform: translateY(20px);
2448
+ }
2449
+ to {
2450
+ opacity: 1;
2451
+ transform: translateY(0);
2452
+ }
2453
+ }
2454
+ @keyframes scaleIn-8db9aa68 {
2455
+ from {
2456
+ opacity: 0;
2457
+ transform: scale(0.9);
2458
+ }
2459
+ to {
2460
+ opacity: 1;
2461
+ transform: scale(1);
2462
+ }
2463
+ }
2464
+ @keyframes pulse-8db9aa68 {
2465
+ 0%, 100% {
2466
+ opacity: 1;
2467
+ }
2468
+ 50% {
2469
+ opacity: 0.5;
2470
+ }
2471
+ }
2472
+ .filter-card[data-v-8db9aa68] {
2473
+ background: var(--bg-primary, #ffffff);
2474
+ border-radius: var(--radius-lg, 12px);
2475
+ padding: var(--spacing-lg, 16px);
2476
+ display: flex;
2477
+ flex-direction: column;
2478
+ gap: var(--spacing-md, 12px);
2479
+ }
2480
+ .filter-inline[data-v-8db9aa68] {
2481
+ display: flex;
2482
+ align-items: center;
2483
+ justify-content: space-between;
2484
+ gap: var(--spacing-lg, 16px);
2485
+ flex-wrap: wrap;
2486
+ }
2487
+ .filter-inline__fields[data-v-8db9aa68] {
2488
+ display: flex;
2489
+ gap: var(--spacing-lg, 16px);
2490
+ flex: 1;
2491
+ min-width: 240px;
2492
+ flex-wrap: wrap;
2493
+ }
2494
+ .filter-inline__field[data-v-8db9aa68] {
2495
+ display: flex;
2496
+ align-items: center;
2497
+ gap: var(--spacing-sm, 8px);
2498
+ min-width: 220px;
2499
+ }
2500
+ .field-label[data-v-8db9aa68] {
2501
+ color: var(--text-secondary, #4e5969);
2502
+ font-size: var(--font-size-sm, 12px);
2503
+ white-space: nowrap;
2504
+ }
2505
+ .filter-input[data-v-8db9aa68] {
2506
+ flex: 1;
2507
+ padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
2508
+ border: 1px solid var(--border-primary, #e5e6eb);
2509
+ border-radius: var(--radius-md, 8px);
2510
+ background: var(--bg-primary, #ffffff);
2511
+ color: var(--text-primary, #1f2329);
2512
+ font-size: var(--font-size-base, 13px);
2513
+ transition: all 0.2s ease;
2514
+ }
2515
+ .filter-input[data-v-8db9aa68]:hover {
2516
+ border-color: var(--border-tertiary, #dcdfe6);
2517
+ }
2518
+ .filter-input[data-v-8db9aa68]:focus {
2519
+ outline: none;
2520
+ border-color: var(--primary, #6366f1);
2521
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
2522
+ }
2523
+ .filter-input[data-v-8db9aa68]::placeholder {
2524
+ color: var(--text-tertiary, #86909c);
2525
+ }
2526
+ .filter-inline__actions[data-v-8db9aa68] {
2527
+ display: flex;
2528
+ align-items: center;
2529
+ gap: var(--spacing-sm, 8px);
2530
+ }
2531
+ .filter-inline__actions.align-left[data-v-8db9aa68] {
2532
+ justify-content: flex-start;
2533
+ }
2534
+ .filter-inline__actions.align-right[data-v-8db9aa68] {
2535
+ justify-content: flex-end;
2536
+ }
2537
+ .filter-btn[data-v-8db9aa68] {
2538
+ padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
2539
+ border: none;
2540
+ border-radius: var(--radius-md, 8px);
2541
+ font-size: var(--font-size-sm, 12px);
2542
+ font-weight: var(--font-weight-medium, 500);
2543
+ cursor: pointer;
2544
+ transition: all 0.2s ease;
2545
+ white-space: nowrap;
2546
+ }
2547
+ .filter-btn--primary[data-v-8db9aa68] {
2548
+ background: linear-gradient(135deg, var(--primary, #6366f1) 0%, var(--secondary, #8b5cf6) 100%);
2549
+ color: var(--text-white, #ffffff);
2550
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
2551
+ }
2552
+ .filter-btn--primary[data-v-8db9aa68]:hover {
2553
+ box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
2554
+ transform: translateY(-1px);
2555
+ }
2556
+ .filter-btn--secondary[data-v-8db9aa68] {
2557
+ background: var(--bg-secondary, #f7f8fa);
2558
+ color: var(--text-primary, #1f2329);
2559
+ border: 1px solid var(--border-primary, #e5e6eb);
2560
+ }
2561
+ .filter-btn--secondary[data-v-8db9aa68]:hover {
2562
+ background: var(--bg-tertiary, #f2f3f5);
2563
+ border-color: var(--border-tertiary, #dcdfe6);
2564
+ }
2565
+ .inline-toggle[data-v-8db9aa68] {
2566
+ display: flex;
2567
+ align-items: center;
2568
+ gap: var(--spacing-xs, 4px);
2569
+ padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
2570
+ background: none;
2571
+ border: 1px solid rgba(99, 102, 241, 0.3);
2572
+ border-radius: var(--radius-full, 9999px);
2573
+ color: var(--primary, #6366f1);
2574
+ font-size: var(--font-size-sm, 12px);
2575
+ cursor: pointer;
2576
+ transition: all 0.2s ease;
2577
+ }
2578
+ .inline-toggle[data-v-8db9aa68]:hover {
2579
+ background: rgba(99, 102, 241, 0.08);
2580
+ }
2581
+ .inline-toggle .toggle-icon[data-v-8db9aa68] {
2582
+ font-size: 10px;
2583
+ }
2584
+ .filter-grid[data-v-8db9aa68] {
2585
+ display: grid;
2586
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
2587
+ gap: var(--spacing-md, 12px);
2588
+ padding-top: var(--spacing-sm, 8px);
2589
+ border-top: 1px dashed var(--border-secondary, #f0f2f5);
2590
+ overflow: hidden;
2591
+ }
2592
+ .filter-grid__field[data-v-8db9aa68] {
2593
+ display: flex;
2594
+ align-items: center;
2595
+ gap: var(--spacing-sm, 8px);
2596
+ }
2597
+ .filter-grid__hint[data-v-8db9aa68] {
2598
+ grid-column: 1/-1;
2599
+ font-size: var(--font-size-xs, 11px);
2600
+ color: var(--text-tertiary, #86909c);
2601
+ }@keyframes fadeIn-c1a551dc {
2602
+ from {
2603
+ opacity: 0;
2604
+ }
2605
+ to {
2606
+ opacity: 1;
2607
+ }
2608
+ }
2609
+ @keyframes slideInUp-c1a551dc {
2610
+ from {
2611
+ opacity: 0;
2612
+ transform: translateY(20px);
2613
+ }
2614
+ to {
2615
+ opacity: 1;
2616
+ transform: translateY(0);
2617
+ }
2618
+ }
2619
+ @keyframes scaleIn-c1a551dc {
2620
+ from {
2621
+ opacity: 0;
2622
+ transform: scale(0.9);
2623
+ }
2624
+ to {
2625
+ opacity: 1;
2626
+ transform: scale(1);
2627
+ }
2628
+ }
2629
+ @keyframes pulse-c1a551dc {
2630
+ 0%, 100% {
2631
+ opacity: 1;
2632
+ }
2633
+ 50% {
2634
+ opacity: 0.5;
2635
+ }
2636
+ }
2637
+ .fade-scale-enter-active[data-v-c1a551dc],
2638
+ .fade-scale-leave-active[data-v-c1a551dc] {
2639
+ transition: opacity 0.25s ease, transform 0.25s ease;
2640
+ }
2641
+ .fade-scale-enter-from[data-v-c1a551dc],
2642
+ .fade-scale-leave-to[data-v-c1a551dc] {
2643
+ opacity: 0;
2644
+ transform: scale(0.95);
2645
+ }
2646
+ .slide-left-enter-active[data-v-c1a551dc],
2647
+ .slide-left-leave-active[data-v-c1a551dc],
2648
+ .slide-right-enter-active[data-v-c1a551dc],
2649
+ .slide-right-leave-active[data-v-c1a551dc],
2650
+ .slide-top-enter-active[data-v-c1a551dc],
2651
+ .slide-top-leave-active[data-v-c1a551dc],
2652
+ .slide-bottom-enter-active[data-v-c1a551dc],
2653
+ .slide-bottom-leave-active[data-v-c1a551dc] {
2654
+ transition: opacity 0.25s ease, transform 0.25s ease;
2655
+ }
2656
+ .slide-left-enter-from[data-v-c1a551dc],
2657
+ .slide-left-leave-to[data-v-c1a551dc] {
2658
+ opacity: 0;
2659
+ transform: translateX(-20px);
2660
+ }
2661
+ .slide-right-enter-from[data-v-c1a551dc],
2662
+ .slide-right-leave-to[data-v-c1a551dc] {
2663
+ opacity: 0;
2664
+ transform: translateX(20px);
2665
+ }
2666
+ .slide-top-enter-from[data-v-c1a551dc],
2667
+ .slide-top-leave-to[data-v-c1a551dc] {
2668
+ opacity: 0;
2669
+ transform: translateY(-20px);
2670
+ }
2671
+ .slide-bottom-enter-from[data-v-c1a551dc],
2672
+ .slide-bottom-leave-to[data-v-c1a551dc] {
2673
+ opacity: 0;
2674
+ transform: translateY(20px);
2675
+ }
2676
+ .universal-modal-wrapper[data-v-c1a551dc] {
2677
+ position: fixed;
2678
+ inset: 0;
2679
+ display: flex;
2680
+ z-index: 1000;
2681
+ }
2682
+ .universal-modal-wrapper.with-mask[data-v-c1a551dc] {
2683
+ background: rgba(0, 0, 0, 0.45);
2684
+ }
2685
+ .universal-modal-wrapper.no-mask[data-v-c1a551dc] {
2686
+ background: transparent;
2687
+ pointer-events: none;
2688
+ }
2689
+ .universal-modal-wrapper.position-center[data-v-c1a551dc] {
2690
+ align-items: center;
2691
+ justify-content: center;
2692
+ padding: 24px;
2693
+ }
2694
+ .universal-modal-wrapper.position-left[data-v-c1a551dc] {
2695
+ justify-content: flex-start;
2696
+ }
2697
+ .universal-modal-wrapper.position-right[data-v-c1a551dc] {
2698
+ justify-content: flex-end;
2699
+ }
2700
+ .universal-modal-wrapper.position-top[data-v-c1a551dc] {
2701
+ align-items: flex-start;
2702
+ }
2703
+ .universal-modal-wrapper.position-bottom[data-v-c1a551dc] {
2704
+ align-items: flex-end;
2705
+ }
2706
+ .universal-modal-wrapper.fullscreen[data-v-c1a551dc] {
2707
+ padding: 0;
2708
+ }
2709
+ .universal-modal[data-v-c1a551dc] {
2710
+ position: relative;
2711
+ background: var(--bg-primary, #ffffff);
2712
+ border-radius: var(--radius-xl, 16px);
2713
+ box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
2714
+ display: flex;
2715
+ flex-direction: column;
2716
+ overflow: hidden;
2717
+ pointer-events: auto;
2718
+ height: 100%;
2719
+ }
2720
+ .universal-modal.modal-center[data-v-c1a551dc] {
2721
+ margin: auto;
2722
+ height: auto;
2723
+ }
2724
+ .universal-modal.modal-left[data-v-c1a551dc], .universal-modal.modal-right[data-v-c1a551dc] {
2725
+ position: absolute;
2726
+ }
2727
+ .universal-modal.modal-top[data-v-c1a551dc], .universal-modal.modal-bottom[data-v-c1a551dc] {
2728
+ position: absolute;
2729
+ max-width: calc(100vw - 48px);
2730
+ height: auto;
2731
+ }
2732
+ .universal-modal.modal-fullscreen[data-v-c1a551dc] {
2733
+ width: 100vw !important;
2734
+ height: 100vh !important;
2735
+ max-width: 100vw !important;
2736
+ max-height: 100vh !important;
2737
+ border-radius: 0;
2738
+ top: 0 !important;
2739
+ left: 0 !important;
2740
+ right: 0 !important;
2741
+ bottom: 0 !important;
2742
+ }
2743
+ .resize-handle[data-v-c1a551dc] {
2744
+ position: absolute;
2745
+ z-index: 10;
2746
+ }
2747
+ .resize-handle-top[data-v-c1a551dc], .resize-handle-bottom[data-v-c1a551dc] {
2748
+ left: 0;
2749
+ right: 0;
2750
+ height: 4px;
2751
+ cursor: ns-resize;
2752
+ }
2753
+ .resize-handle-top[data-v-c1a551dc]:hover, .resize-handle-bottom[data-v-c1a551dc]:hover {
2754
+ background: rgba(99, 102, 241, 0.3);
2755
+ }
2756
+ .resize-handle-top[data-v-c1a551dc] {
2757
+ top: 0;
2758
+ }
2759
+ .resize-handle-bottom[data-v-c1a551dc] {
2760
+ bottom: 0;
2761
+ }
2762
+ .resize-handle-left[data-v-c1a551dc], .resize-handle-right[data-v-c1a551dc] {
2763
+ top: 0;
2764
+ bottom: 0;
2765
+ width: 4px;
2766
+ cursor: ew-resize;
2767
+ }
2768
+ .resize-handle-left[data-v-c1a551dc]:hover, .resize-handle-right[data-v-c1a551dc]:hover {
2769
+ background: rgba(99, 102, 241, 0.3);
2770
+ }
2771
+ .resize-handle-left[data-v-c1a551dc] {
2772
+ left: 0;
2773
+ }
2774
+ .resize-handle-right[data-v-c1a551dc] {
2775
+ right: 0;
2776
+ }
2777
+ .modal-header[data-v-c1a551dc] {
2778
+ padding: 16px 20px 12px;
2779
+ display: flex;
2780
+ justify-content: space-between;
2781
+ align-items: flex-start;
2782
+ gap: 12px;
2783
+ border-bottom: 1px solid var(--border-secondary, #f2f3f5);
2784
+ background: linear-gradient(180deg, rgba(248, 249, 255, 0.8), #fff);
2785
+ flex-shrink: 0;
2786
+ }
2787
+ .header-content[data-v-c1a551dc] {
2788
+ display: flex;
2789
+ gap: 12px;
2790
+ align-items: flex-start;
2791
+ flex: 1;
2792
+ min-width: 0;
2793
+ }
2794
+ .header-icon[data-v-c1a551dc] {
2795
+ width: 32px;
2796
+ height: 32px;
2797
+ border-radius: 10px;
2798
+ background: radial-gradient(circle at 30% 20%, #e6e8ff, #cdcfff);
2799
+ display: flex;
2800
+ align-items: center;
2801
+ justify-content: center;
2802
+ flex-shrink: 0;
2803
+ }
2804
+ .header-icon .header-icon-img[data-v-c1a551dc] {
2805
+ width: 24px;
2806
+ height: 24px;
2807
+ object-fit: contain;
2808
+ }
2809
+ .header-info[data-v-c1a551dc] {
2810
+ flex: 1;
2811
+ display: flex;
2812
+ flex-direction: column;
2813
+ gap: 4px;
2814
+ min-width: 0;
2815
+ }
2816
+ .header-subtitle[data-v-c1a551dc] {
2817
+ font-size: var(--font-size-sm, 12px);
2818
+ color: var(--text-tertiary, #86909c);
2819
+ line-height: 1.3;
2820
+ }
2821
+ .header-title[data-v-c1a551dc] {
2822
+ font-size: var(--font-size-lg, 16px);
2823
+ font-weight: var(--font-weight-semibold, 600);
2824
+ color: var(--text-primary, #1f2329);
2825
+ line-height: 1.3;
2826
+ word-break: break-word;
2827
+ }
2828
+ .header-actions[data-v-c1a551dc] {
2829
+ display: flex;
2830
+ gap: 8px;
2831
+ align-items: center;
2832
+ flex-shrink: 0;
2833
+ }
2834
+ .header-btn[data-v-c1a551dc] {
2835
+ width: 28px;
2836
+ height: 28px;
2837
+ border: none;
2838
+ background: transparent;
2839
+ border-radius: var(--radius-full, 9999px);
2840
+ color: var(--text-tertiary, #86909c);
2841
+ cursor: pointer;
2842
+ transition: all 0.2s ease;
2843
+ display: flex;
2844
+ align-items: center;
2845
+ justify-content: center;
2846
+ font-size: 16px;
2847
+ }
2848
+ .header-btn[data-v-c1a551dc]:hover {
2849
+ background: var(--bg-secondary, #f7f8fa);
2850
+ color: var(--text-primary, #1f2329);
2851
+ }
2852
+ .modal-body[data-v-c1a551dc] {
2853
+ flex: 1;
2854
+ padding: 20px 24px;
2855
+ overflow-y: auto;
2856
+ overflow-x: hidden;
2857
+ min-height: 0;
2858
+ max-height: 100%;
2859
+ }
2860
+ .modal-body[data-v-c1a551dc]::-webkit-scrollbar {
2861
+ width: 6px;
2862
+ }
2863
+ .modal-body[data-v-c1a551dc]::-webkit-scrollbar-thumb {
2864
+ background: var(--gray-300, #d4d4d4);
2865
+ border-radius: var(--radius-full, 9999px);
2866
+ }
2867
+ .modal-body[data-v-c1a551dc]::-webkit-scrollbar-thumb:hover {
2868
+ background: var(--gray-400, #a3a3a3);
2869
+ }
2870
+ .modal-footer[data-v-c1a551dc] {
2871
+ padding: 16px 24px;
2872
+ border-top: 1px solid var(--border-secondary, #f2f3f5);
2873
+ background: var(--bg-secondary, #f7f8fa);
2874
+ flex-shrink: 0;
2875
+ }
2876
+ .footer-actions[data-v-c1a551dc] {
2877
+ display: flex;
2878
+ justify-content: flex-end;
2879
+ gap: 12px;
2880
+ }
2881
+ .footer-btn[data-v-c1a551dc] {
2882
+ padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
2883
+ border: none;
2884
+ border-radius: var(--radius-md, 8px);
2885
+ font-size: var(--font-size-sm, 12px);
2886
+ font-weight: var(--font-weight-medium, 500);
2887
+ cursor: pointer;
2888
+ transition: all 0.2s ease;
2889
+ }
2890
+ .footer-btn--cancel[data-v-c1a551dc] {
2891
+ background: var(--bg-secondary, #f7f8fa);
2892
+ color: var(--text-primary, #1f2329);
2893
+ border: 1px solid var(--border-primary, #e5e6eb);
2894
+ }
2895
+ .footer-btn--cancel[data-v-c1a551dc]:hover {
2896
+ background: var(--bg-tertiary, #f2f3f5);
2897
+ }
2898
+ .footer-btn--confirm[data-v-c1a551dc] {
2899
+ background: linear-gradient(135deg, var(--primary, #6366f1) 0%, var(--secondary, #8b5cf6) 100%);
2900
+ color: var(--text-white, #ffffff);
2901
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
2902
+ }
2903
+ .footer-btn--confirm[data-v-c1a551dc]:hover {
2904
+ box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
2905
+ transform: translateY(-1px);
2906
+ }
2907
+ @media (max-width: 768px) {
2908
+ .universal-modal-wrapper.position-center[data-v-c1a551dc] {
2909
+ padding: 16px;
2910
+ }
2911
+ .universal-modal.modal-left[data-v-c1a551dc], .universal-modal.modal-right[data-v-c1a551dc] {
2912
+ max-height: calc(100vh - 32px);
2913
+ }
2914
+ .universal-modal.modal-top[data-v-c1a551dc], .universal-modal.modal-bottom[data-v-c1a551dc] {
2915
+ max-width: calc(100vw - 32px);
2916
+ }
2917
+ .modal-header[data-v-c1a551dc] {
2918
+ padding: 14px 16px 10px;
2919
+ }
2920
+ .modal-body[data-v-c1a551dc] {
2921
+ padding: 16px 20px;
2922
+ }
2923
+ .modal-footer[data-v-c1a551dc] {
2924
+ padding: 12px 20px;
2925
+ }
2926
+ }
2927
+ .loading-container[data-v-d3a7a28f] {
3
2928
  display: flex;
4
2929
  flex-direction: column;
5
2930
  align-items: center;
@@ -7,26 +2932,26 @@
7
2932
  min-height: 200px;
8
2933
  padding: var(--spacing-4xl, 40px);
9
2934
  }
10
- .loading-spinner[data-v-88be2f1a] {
2935
+ .loading-spinner[data-v-d3a7a28f] {
11
2936
  width: 40px;
12
2937
  height: 40px;
13
2938
  border: 3px solid var(--border-secondary, #f0f2f5);
14
2939
  border-top-color: var(--primary, #6366f1);
15
2940
  border-radius: var(--radius-full, 9999px);
16
- animation: spin-88be2f1a 0.8s linear infinite;
2941
+ animation: spin-d3a7a28f 0.8s linear infinite;
17
2942
  }
18
- @keyframes spin-88be2f1a {
2943
+ @keyframes spin-d3a7a28f {
19
2944
  to {
20
2945
  transform: rotate(360deg);
21
2946
  }
22
2947
  }
23
- .loading-message[data-v-88be2f1a] {
2948
+ .loading-message[data-v-d3a7a28f] {
24
2949
  margin-top: var(--spacing-lg, 16px);
25
2950
  font-size: var(--font-size-sm, 12px);
26
2951
  color: var(--text-secondary, #4e5969);
27
2952
  }
28
2953
 
29
- .empty-state[data-v-12ee016f] {
2954
+ .empty-state[data-v-a29f92b8] {
30
2955
  display: flex;
31
2956
  flex-direction: column;
32
2957
  align-items: center;
@@ -34,28 +2959,28 @@ to {
34
2959
  padding: var(--spacing-5xl, 48px) var(--spacing-2xl, 24px);
35
2960
  text-align: center;
36
2961
  }
37
- .empty-icon[data-v-12ee016f] {
2962
+ .empty-icon[data-v-a29f92b8] {
38
2963
  font-size: 48px;
39
2964
  color: var(--text-quaternary, #c9cdd4);
40
2965
  margin-bottom: var(--spacing-lg, 16px);
41
2966
  }
42
- .empty-title[data-v-12ee016f] {
2967
+ .empty-title[data-v-a29f92b8] {
43
2968
  font-size: var(--font-size-lg, 16px);
44
2969
  font-weight: var(--font-weight-medium, 500);
45
2970
  color: var(--text-secondary, #4e5969);
46
2971
  margin-bottom: var(--spacing-sm, 8px);
47
2972
  }
48
- .empty-description[data-v-12ee016f] {
2973
+ .empty-description[data-v-a29f92b8] {
49
2974
  font-size: var(--font-size-sm, 12px);
50
2975
  color: var(--text-tertiary, #86909c);
51
2976
  max-width: 400px;
52
2977
  margin: 0;
53
2978
  }
54
- .empty-action[data-v-12ee016f] {
2979
+ .empty-action[data-v-a29f92b8] {
55
2980
  margin-top: var(--spacing-lg, 16px);
56
2981
  }
57
2982
 
58
- .error-container[data-v-9bbae138] {
2983
+ .error-container[data-v-c6d5c909] {
59
2984
  display: flex;
60
2985
  flex-direction: column;
61
2986
  align-items: center;
@@ -63,27 +2988,27 @@ to {
63
2988
  padding: var(--spacing-4xl, 40px) var(--spacing-2xl, 24px);
64
2989
  text-align: center;
65
2990
  }
66
- .error-icon[data-v-9bbae138] {
2991
+ .error-icon[data-v-c6d5c909] {
67
2992
  font-size: 48px;
68
2993
  color: var(--error, #ef4444);
69
2994
  margin-bottom: var(--spacing-lg, 16px);
70
2995
  }
71
- .error-title[data-v-9bbae138] {
2996
+ .error-title[data-v-c6d5c909] {
72
2997
  font-size: var(--font-size-lg, 16px);
73
2998
  font-weight: var(--font-weight-semibold, 600);
74
2999
  color: var(--error, #ef4444);
75
3000
  margin-bottom: var(--spacing-sm, 8px);
76
3001
  }
77
- .error-message[data-v-9bbae138] {
3002
+ .error-message[data-v-c6d5c909] {
78
3003
  font-size: var(--font-size-sm, 12px);
79
3004
  color: var(--text-secondary, #4e5969);
80
3005
  max-width: 500px;
81
3006
  margin: 0 0 var(--spacing-lg, 16px);
82
3007
  }
83
- .error-action[data-v-9bbae138] {
3008
+ .error-action[data-v-c6d5c909] {
84
3009
  margin-top: var(--spacing-lg, 16px);
85
3010
  }
86
- .error-retry-btn[data-v-9bbae138] {
3011
+ .error-retry-btn[data-v-c6d5c909] {
87
3012
  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
88
3013
  font-size: var(--font-size-sm, 12px);
89
3014
  color: white;
@@ -93,9 +3018,9 @@ to {
93
3018
  cursor: pointer;
94
3019
  transition: opacity var(--transition-fast, 0.15s) ease;
95
3020
  }
96
- .error-retry-btn[data-v-9bbae138]:hover {
3021
+ .error-retry-btn[data-v-c6d5c909]:hover {
97
3022
  opacity: 0.8;
98
3023
  }
99
- .error-retry-btn[data-v-9bbae138]:active {
3024
+ .error-retry-btn[data-v-c6d5c909]:active {
100
3025
  opacity: 0.6;
101
3026
  }