cabletidy 0.1.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/web/styles.css ADDED
@@ -0,0 +1,1188 @@
1
+ :root {
2
+ --ink: #242a30;
3
+ --muted: #636c75;
4
+ --paper: #fafbfc;
5
+ --panel: #ffffff;
6
+ --line: #e1e5e8;
7
+ --line-strong: #bfc7ce;
8
+ --rail: #f3f5f6;
9
+ --rail-soft: #e5eeea;
10
+ --accent: #277456;
11
+ --accent-soft: #edf5f0;
12
+ --warning: #906017;
13
+ --danger: #b43a3a;
14
+ --shadow: 0 4px 18px rgba(36, 42, 48, 0.1);
15
+ --radius: 4px;
16
+ font-family: "Aptos", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
17
+ font-size: 14px;
18
+ line-height: 1.5;
19
+ font-variant-numeric: tabular-nums;
20
+ color: var(--ink);
21
+ background: var(--paper);
22
+ font-synthesis: none;
23
+ }
24
+
25
+ * {
26
+ box-sizing: border-box;
27
+ }
28
+
29
+ body {
30
+ min-width: 320px;
31
+ min-height: 100dvh;
32
+ margin: 0;
33
+ background: var(--paper);
34
+ }
35
+
36
+ button,
37
+ input,
38
+ select,
39
+ textarea {
40
+ font: inherit;
41
+ }
42
+
43
+ button {
44
+ cursor: pointer;
45
+ }
46
+
47
+ [hidden] {
48
+ display: none !important;
49
+ }
50
+
51
+ button:focus-visible,
52
+ summary:focus-visible {
53
+ outline: 2px solid var(--accent);
54
+ outline-offset: 3px;
55
+ }
56
+
57
+ button:disabled {
58
+ cursor: default;
59
+ opacity: 0.5;
60
+ }
61
+
62
+ .muted {
63
+ color: var(--muted);
64
+ font-size: 13px;
65
+ }
66
+
67
+ .app-shell {
68
+ display: grid;
69
+ min-height: 100dvh;
70
+ grid-template-columns: 184px minmax(0, 1fr);
71
+ }
72
+
73
+ .rail {
74
+ position: sticky;
75
+ top: 0;
76
+ display: flex;
77
+ height: 100dvh;
78
+ align-self: start;
79
+ flex-direction: column;
80
+ padding: 22px 12px 16px;
81
+ border-right: 1px solid var(--line);
82
+ color: var(--ink);
83
+ background: var(--rail);
84
+ }
85
+
86
+ .brand {
87
+ display: flex;
88
+ align-items: center;
89
+ padding: 0 10px 12px;
90
+ }
91
+
92
+ .brand strong {
93
+ color: var(--ink);
94
+ font-size: 17px;
95
+ letter-spacing: -0.02em;
96
+ }
97
+
98
+ .rail-status,
99
+ .rail-footer {
100
+ display: flex;
101
+ align-items: center;
102
+ gap: 8px;
103
+ color: var(--muted);
104
+ font-size: 12px;
105
+ }
106
+
107
+ .rail-status {
108
+ margin: 0 10px 24px;
109
+ }
110
+
111
+ .status-light {
112
+ width: 7px;
113
+ height: 7px;
114
+ flex: 0 0 auto;
115
+ border-radius: 50%;
116
+ background: var(--accent);
117
+ }
118
+
119
+ .is-offline .status-light {
120
+ background: var(--danger);
121
+ }
122
+
123
+ .nav {
124
+ display: grid;
125
+ gap: 4px;
126
+ }
127
+
128
+ .nav-item {
129
+ min-height: 36px;
130
+ padding: 0 11px;
131
+ border: 1px solid transparent;
132
+ border-radius: var(--radius);
133
+ color: var(--muted);
134
+ background: transparent;
135
+ text-align: left;
136
+ transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
137
+ }
138
+
139
+ .nav-item:hover,
140
+ .nav-item.is-active {
141
+ color: var(--accent);
142
+ background: var(--rail-soft);
143
+ }
144
+
145
+ .nav-item.is-active {
146
+ font-weight: 600;
147
+ }
148
+
149
+ .rail-footer {
150
+ margin-top: auto;
151
+ padding: 14px 10px 0;
152
+ border-top: 1px solid var(--line);
153
+ }
154
+
155
+ .main {
156
+ min-width: 0;
157
+ }
158
+
159
+ .topbar {
160
+ display: flex;
161
+ align-items: center;
162
+ justify-content: space-between;
163
+ gap: 20px;
164
+ max-width: 1420px;
165
+ margin: 0 auto;
166
+ padding: 22px 28px;
167
+ }
168
+
169
+ .topbar > div:first-child {
170
+ min-width: 0;
171
+ }
172
+
173
+ h1,
174
+ h2,
175
+ h3,
176
+ p {
177
+ margin-top: 0;
178
+ }
179
+
180
+ h1 {
181
+ margin-bottom: 0;
182
+ font-size: 22px;
183
+ font-weight: 600;
184
+ line-height: 1.4;
185
+ overflow-wrap: anywhere;
186
+ }
187
+
188
+ h2 {
189
+ margin-bottom: 8px;
190
+ font-size: 15px;
191
+ font-weight: 600;
192
+ }
193
+
194
+ h3 {
195
+ margin-bottom: 5px;
196
+ font-size: 14px;
197
+ font-weight: 600;
198
+ }
199
+
200
+ .topbar-actions {
201
+ display: flex;
202
+ flex-wrap: wrap;
203
+ justify-content: flex-end;
204
+ gap: 8px;
205
+ align-items: center;
206
+ flex-shrink: 0;
207
+ }
208
+
209
+ .button {
210
+ min-height: 34px;
211
+ padding: 5px 12px;
212
+ border: 1px solid var(--line-strong);
213
+ border-radius: var(--radius);
214
+ color: var(--ink);
215
+ background: var(--panel);
216
+ font-size: 13px;
217
+ font-weight: 500;
218
+ transition: border-color 120ms ease, background 120ms ease;
219
+ }
220
+
221
+ .button:hover:not(:disabled) {
222
+ border-color: var(--muted);
223
+ background: var(--rail);
224
+ }
225
+
226
+ .button:active:not(:disabled) {
227
+ background: var(--line);
228
+ }
229
+
230
+ .button-primary {
231
+ color: #fff;
232
+ border-color: var(--accent);
233
+ background: var(--accent);
234
+ }
235
+
236
+ .button-primary:hover:not(:disabled) {
237
+ border-color: #205d46;
238
+ background: #205d46;
239
+ }
240
+
241
+ .button-quiet {
242
+ color: var(--muted);
243
+ background: transparent;
244
+ }
245
+
246
+ .button-danger {
247
+ color: var(--danger);
248
+ border-color: rgba(188, 76, 76, 0.35);
249
+ background: transparent;
250
+ }
251
+
252
+ .page-content {
253
+ display: grid;
254
+ gap: 16px;
255
+ max-width: 1420px;
256
+ margin: 0 auto;
257
+ padding: 0 28px 36px;
258
+ }
259
+
260
+ .suite-toolbar {
261
+ display: flex;
262
+ align-items: center;
263
+ justify-content: space-between;
264
+ gap: 20px;
265
+ }
266
+
267
+ .suite-list {
268
+ overflow: auto;
269
+ border: 1px solid var(--line);
270
+ border-radius: var(--radius);
271
+ background: var(--panel);
272
+ }
273
+
274
+ .suite-table {
275
+ width: 100%;
276
+ border-collapse: collapse;
277
+ text-align: left;
278
+ font-size: 13px;
279
+ }
280
+
281
+ .suite-table th,
282
+ .suite-table td {
283
+ padding: 12px 16px;
284
+ border-bottom: 1px solid var(--line);
285
+ font-weight: 400;
286
+ }
287
+
288
+ .suite-table thead th {
289
+ padding-block: 9px;
290
+ color: var(--muted);
291
+ background: var(--paper);
292
+ white-space: nowrap;
293
+ font-size: 12px;
294
+ }
295
+
296
+ .suite-table tbody tr:last-child > * {
297
+ border-bottom: 0;
298
+ }
299
+
300
+ .suite-table tbody tr:hover {
301
+ background: var(--paper);
302
+ }
303
+
304
+ .suite-table tbody th {
305
+ width: 32%;
306
+ }
307
+
308
+ .suite-name {
309
+ padding: 0;
310
+ border: 0;
311
+ color: var(--ink);
312
+ background: transparent;
313
+ font-weight: 600;
314
+ text-align: left;
315
+ overflow-wrap: anywhere;
316
+ }
317
+
318
+ .suite-name:hover {
319
+ color: var(--accent);
320
+ text-decoration: underline;
321
+ }
322
+
323
+ .suite-upstream {
324
+ display: block;
325
+ margin-top: 3px;
326
+ color: var(--muted);
327
+ font-size: 12px;
328
+ overflow-wrap: anywhere;
329
+ }
330
+
331
+ .config-form {
332
+ width: 100%;
333
+ max-width: 920px;
334
+ }
335
+
336
+ .config-section {
337
+ padding: 20px;
338
+ }
339
+
340
+ .config-section + .config-section {
341
+ border-top: 1px solid var(--line);
342
+ }
343
+
344
+ .config-section > h2 {
345
+ margin-bottom: 16px;
346
+ }
347
+
348
+ .config-form-footer {
349
+ display: flex;
350
+ justify-content: flex-end;
351
+ flex-wrap: wrap;
352
+ gap: 8px;
353
+ padding: 14px 20px;
354
+ border-top: 1px solid var(--line);
355
+ background: var(--paper);
356
+ }
357
+
358
+ .create-model-list {
359
+ display: grid;
360
+ gap: 16px;
361
+ }
362
+
363
+ .create-model-row {
364
+ display: grid;
365
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
366
+ align-items: start;
367
+ gap: 12px;
368
+ }
369
+
370
+ .create-model-row > .mini-button {
371
+ min-height: 36px;
372
+ margin-top: 24px;
373
+ }
374
+
375
+ .empty-state-panel {
376
+ min-height: 140px;
377
+ display: grid;
378
+ align-items: center;
379
+ }
380
+
381
+ .text-button {
382
+ justify-self: start;
383
+ padding: 0;
384
+ border: 0;
385
+ color: var(--muted);
386
+ background: transparent;
387
+ font-size: 13px;
388
+ }
389
+
390
+ .text-button:hover {
391
+ color: var(--accent);
392
+ }
393
+
394
+ .suite-status,
395
+ .suite-connection-actions {
396
+ display: flex;
397
+ flex-wrap: wrap;
398
+ align-items: center;
399
+ gap: 12px;
400
+ }
401
+
402
+ .suite-status {
403
+ color: var(--muted);
404
+ font-size: 12px;
405
+ }
406
+
407
+ .suite-connection-actions {
408
+ gap: 8px;
409
+ }
410
+
411
+ .suite-connection-actions .button {
412
+ white-space: nowrap;
413
+ }
414
+
415
+ .suite-connection-facts {
416
+ display: grid;
417
+ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
418
+ gap: 20px;
419
+ margin: 0;
420
+ }
421
+
422
+ .suite-connection-facts > div {
423
+ min-width: 0;
424
+ }
425
+
426
+ .suite-connection-facts dt {
427
+ margin-bottom: 5px;
428
+ color: var(--muted);
429
+ font-size: 12px;
430
+ }
431
+
432
+ .suite-connection-facts dd {
433
+ margin: 0;
434
+ font-size: 13px;
435
+ }
436
+
437
+ .suite-section {
438
+ padding: 20px;
439
+ }
440
+
441
+ .suite-section + .suite-section {
442
+ border-top: 1px solid var(--line);
443
+ }
444
+
445
+ .suite-section-heading {
446
+ margin-bottom: 16px;
447
+ }
448
+
449
+ .suite-section-heading h2 {
450
+ margin: 0;
451
+ }
452
+
453
+ .suite-section-heading p {
454
+ margin: 4px 0 0;
455
+ color: var(--muted);
456
+ font-size: 12px;
457
+ }
458
+
459
+ .suite-models-heading,
460
+ .suite-section-footer {
461
+ display: flex;
462
+ align-items: center;
463
+ justify-content: space-between;
464
+ gap: 12px;
465
+ }
466
+
467
+ .suite-section-footer {
468
+ margin-top: 16px;
469
+ }
470
+
471
+ .suite-section-footer .form-actions {
472
+ margin: 0;
473
+ flex-shrink: 0;
474
+ }
475
+
476
+ .suite-models-heading .button {
477
+ flex-shrink: 0;
478
+ }
479
+
480
+ .suite-section .catalog-status {
481
+ margin-bottom: 16px;
482
+ }
483
+
484
+ .suite-model-list {
485
+ display: grid;
486
+ gap: 16px;
487
+ }
488
+
489
+ .catalog-status {
490
+ display: flex;
491
+ align-items: center;
492
+ justify-content: space-between;
493
+ flex-wrap: wrap;
494
+ gap: 12px;
495
+ margin: 0;
496
+ color: var(--muted);
497
+ font-size: 12px;
498
+ overflow-wrap: anywhere;
499
+ }
500
+
501
+ .config-section .catalog-status {
502
+ margin-bottom: 16px;
503
+ }
504
+
505
+ .suite-model-card {
506
+ min-width: 0;
507
+ }
508
+
509
+ .suite-model-card + .suite-model-card {
510
+ padding-top: 16px;
511
+ border-top: 1px solid var(--line);
512
+ }
513
+
514
+ .suite-model-mapping {
515
+ display: grid;
516
+ grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) auto;
517
+ gap: 12px;
518
+ align-items: start;
519
+ }
520
+
521
+ .suite-model-mapping > .mini-button {
522
+ min-height: 36px;
523
+ margin-top: 24px;
524
+ white-space: nowrap;
525
+ }
526
+
527
+ .suite-mapping-arrow {
528
+ display: grid;
529
+ align-items: center;
530
+ min-height: 36px;
531
+ margin-top: 24px;
532
+ color: var(--muted);
533
+ font-size: 18px;
534
+ text-align: center;
535
+ }
536
+
537
+ .suite-model-settings {
538
+ margin-top: 10px;
539
+ }
540
+
541
+ .suite-model-settings summary {
542
+ width: fit-content;
543
+ max-width: 100%;
544
+ padding: 4px 0;
545
+ color: var(--muted);
546
+ font-size: 12px;
547
+ cursor: pointer;
548
+ }
549
+
550
+ .suite-model-settings summary > .field-hint {
551
+ margin-left: 12px;
552
+ }
553
+
554
+ .suite-model-settings summary:hover,
555
+ .suite-model-settings[open] summary {
556
+ color: var(--ink);
557
+ }
558
+
559
+ .suite-model-policy .checkbox-field {
560
+ padding-top: 18px;
561
+ }
562
+
563
+ .mono {
564
+ font-family: "SFMono-Regular", "Cascadia Code", monospace;
565
+ font-size: 12px;
566
+ overflow-wrap: anywhere;
567
+ }
568
+
569
+ .field-hint,
570
+ .table-meta {
571
+ color: var(--muted);
572
+ font-size: 12px;
573
+ overflow-wrap: anywhere;
574
+ }
575
+
576
+ .panel {
577
+ min-width: 0;
578
+ border: 1px solid var(--line);
579
+ border-radius: var(--radius);
580
+ background: var(--panel);
581
+ }
582
+
583
+ .panel-header {
584
+ display: flex;
585
+ align-items: center;
586
+ justify-content: space-between;
587
+ gap: 12px;
588
+ padding: 12px 16px;
589
+ border-bottom: 1px solid var(--line);
590
+ }
591
+
592
+ .panel-header h2 {
593
+ margin: 0;
594
+ }
595
+
596
+ .panel-header button {
597
+ flex-shrink: 0;
598
+ }
599
+
600
+ .panel-body {
601
+ padding: 16px;
602
+ }
603
+
604
+ .list {
605
+ display: grid;
606
+ gap: 0;
607
+ }
608
+
609
+ .list-row {
610
+ width: 100%;
611
+ border: 0;
612
+ border-bottom: 1px solid var(--line);
613
+ text-align: left;
614
+ display: grid;
615
+ grid-template-columns: minmax(0, 1fr) auto;
616
+ gap: 16px;
617
+ align-items: center;
618
+ padding: 15px 0;
619
+ border-radius: 0;
620
+ background: transparent;
621
+ min-width: 0;
622
+ }
623
+
624
+ .list-row > * {
625
+ min-width: 0;
626
+ overflow-wrap: anywhere;
627
+ }
628
+
629
+ .list-row:first-child {
630
+ padding-top: 0;
631
+ }
632
+
633
+ .list-row:last-child {
634
+ padding-bottom: 0;
635
+ border-bottom: 0;
636
+ }
637
+
638
+ button.list-row:hover,
639
+ .list-row.is-selected {
640
+ background: rgba(37, 184, 120, 0.055);
641
+ }
642
+
643
+ .checkbox-field {
644
+ align-content: center;
645
+ min-height: 40px;
646
+ padding: 0 4px;
647
+ }
648
+
649
+ .list-row p {
650
+ margin: 4px 0 0;
651
+ color: var(--muted);
652
+ font-size: 12px;
653
+ }
654
+
655
+ .status-badge {
656
+ display: inline-flex;
657
+ align-items: center;
658
+ gap: 6px;
659
+ color: var(--accent);
660
+ font-size: 12px;
661
+ white-space: nowrap;
662
+ }
663
+
664
+ .status-badge::before {
665
+ width: 6px;
666
+ height: 6px;
667
+ content: "";
668
+ border-radius: 50%;
669
+ background: currentColor;
670
+ }
671
+
672
+ .status-badge.warning {
673
+ color: var(--warning);
674
+ }
675
+
676
+ .status-badge.danger {
677
+ color: var(--danger);
678
+ }
679
+
680
+ .status-badge.neutral {
681
+ color: var(--muted);
682
+ }
683
+
684
+ .empty {
685
+ padding: 34px 8px;
686
+ color: var(--muted);
687
+ text-align: center;
688
+ }
689
+
690
+ .empty strong {
691
+ display: block;
692
+ margin-bottom: 7px;
693
+ color: var(--ink);
694
+ }
695
+
696
+ .form-layout {
697
+ display: grid;
698
+ grid-template-columns: minmax(0, 1fr) minmax(300px, 0.68fr);
699
+ gap: 22px;
700
+ align-items: start;
701
+ }
702
+
703
+ .form-grid {
704
+ display: grid;
705
+ grid-template-columns: repeat(2, minmax(0, 1fr));
706
+ gap: 14px;
707
+ }
708
+
709
+ .suite-model-policy {
710
+ grid-template-columns: repeat(4, minmax(0, 1fr));
711
+ align-items: start;
712
+ margin-top: 12px;
713
+ padding: 16px;
714
+ border-left: 2px solid var(--line-strong);
715
+ background: var(--paper);
716
+ }
717
+
718
+ .field {
719
+ display: grid;
720
+ min-width: 0;
721
+ gap: 6px;
722
+ }
723
+
724
+ .field.full {
725
+ grid-column: 1 / -1;
726
+ }
727
+
728
+ .field label,
729
+ .field > span:first-child {
730
+ color: var(--muted);
731
+ font-size: 12px;
732
+ }
733
+
734
+ .field input,
735
+ .field select,
736
+ .field textarea {
737
+ width: 100%;
738
+ min-width: 0;
739
+ min-height: 36px;
740
+ padding: 0 11px;
741
+ border: 1px solid var(--line-strong);
742
+ border-radius: var(--radius);
743
+ outline: 0;
744
+ color: var(--ink);
745
+ background: #fff;
746
+ font-size: 13px;
747
+ }
748
+
749
+ .field textarea {
750
+ min-height: 78px;
751
+ padding-top: 10px;
752
+ resize: vertical;
753
+ }
754
+
755
+ .field input:focus,
756
+ .field select:focus,
757
+ .field textarea:focus {
758
+ border-color: var(--accent);
759
+ box-shadow: 0 0 0 3px rgba(37, 184, 120, 0.14);
760
+ }
761
+
762
+ .field input:disabled {
763
+ color: var(--muted);
764
+ background: var(--rail);
765
+ }
766
+
767
+ .field.checkbox-field > span {
768
+ display: flex;
769
+ align-items: center;
770
+ gap: 8px;
771
+ min-height: 40px;
772
+ font-size: 13px;
773
+ }
774
+
775
+ .field.checkbox-field input {
776
+ width: 18px;
777
+ height: 18px;
778
+ min-height: 18px;
779
+ margin: 0;
780
+ padding: 0;
781
+ flex-shrink: 0;
782
+ accent-color: var(--accent);
783
+ }
784
+
785
+ .static-field {
786
+ display: grid;
787
+ align-content: center;
788
+ gap: 3px;
789
+ min-height: 40px;
790
+ padding: 0 11px;
791
+ border: 1px solid var(--line);
792
+ background: var(--rail);
793
+ font-size: 12px;
794
+ }
795
+
796
+ .static-field strong {
797
+ font-size: 12px;
798
+ font-weight: 650;
799
+ }
800
+
801
+ .static-field span {
802
+ color: var(--muted);
803
+ font-family: "SFMono-Regular", "Cascadia Code", monospace;
804
+ font-size: 10px;
805
+ }
806
+
807
+ .field-hint {
808
+ line-height: 1.45;
809
+ }
810
+
811
+ .form-actions {
812
+ display: flex;
813
+ flex-wrap: wrap;
814
+ gap: 8px;
815
+ margin-top: 18px;
816
+ }
817
+
818
+ .form-feedback {
819
+ margin-bottom: 16px;
820
+ overflow-wrap: anywhere;
821
+ }
822
+
823
+ .config-form > .form-feedback {
824
+ margin: 16px 20px 0;
825
+ }
826
+
827
+ .form-feedback ul {
828
+ margin: 8px 0 0;
829
+ padding-left: 20px;
830
+ }
831
+
832
+ .mapping-list {
833
+ display: grid;
834
+ gap: 10px;
835
+ }
836
+
837
+ .mapping-row {
838
+ display: grid;
839
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
840
+ gap: 8px;
841
+ align-items: end;
842
+ padding: 12px;
843
+ border: 1px solid var(--line);
844
+ background: #fff;
845
+ }
846
+
847
+ .mapping-row input {
848
+ width: 100%;
849
+ min-height: 36px;
850
+ padding: 0 9px;
851
+ border: 1px solid var(--line-strong);
852
+ border-radius: var(--radius);
853
+ color: var(--ink);
854
+ background: var(--panel);
855
+ font-size: 12px;
856
+ }
857
+
858
+ .mapping-row .mapping-capabilities {
859
+ margin-top: 7px;
860
+ }
861
+
862
+ .subsection {
863
+ margin-top: 22px;
864
+ padding-top: 18px;
865
+ border-top: 1px solid var(--line);
866
+ }
867
+
868
+ .subsection:first-child {
869
+ margin-top: 0;
870
+ padding-top: 0;
871
+ border-top: 0;
872
+ }
873
+
874
+ .subsection-header {
875
+ display: flex;
876
+ align-items: center;
877
+ justify-content: space-between;
878
+ gap: 12px;
879
+ margin-bottom: 12px;
880
+ }
881
+
882
+ .subsection-header h2,
883
+ .subsection-header h3 {
884
+ margin-bottom: 0;
885
+ }
886
+
887
+ .mini-button {
888
+ min-height: 32px;
889
+ padding: 0 9px;
890
+ border: 1px solid var(--line-strong);
891
+ border-radius: var(--radius);
892
+ color: var(--muted);
893
+ background: transparent;
894
+ font-size: 12px;
895
+ }
896
+
897
+ .mini-button:hover {
898
+ color: var(--ink);
899
+ border-color: var(--accent);
900
+ }
901
+
902
+ .code-preview {
903
+ min-width: 0;
904
+ max-height: 460px;
905
+ overflow: auto;
906
+ margin: 0;
907
+ padding: 16px;
908
+ border: 1px solid var(--line);
909
+ color: var(--ink);
910
+ background: var(--rail);
911
+ font-family: "SFMono-Regular", "Cascadia Code", monospace;
912
+ font-size: 12px;
913
+ line-height: 1.65;
914
+ white-space: pre-wrap;
915
+ word-break: break-word;
916
+ }
917
+
918
+ .notice {
919
+ padding: 12px 14px;
920
+ border-left: 3px solid var(--accent);
921
+ color: #3d5d4e;
922
+ background: var(--accent-soft);
923
+ font-size: 12px;
924
+ line-height: 1.5;
925
+ }
926
+
927
+ .notice.warning {
928
+ border-color: var(--warning);
929
+ color: #785326;
930
+ background: #fff0dc;
931
+ }
932
+
933
+ .notice > .button {
934
+ margin-left: 12px;
935
+ vertical-align: middle;
936
+ }
937
+
938
+ .toast-region {
939
+ position: fixed;
940
+ z-index: 10;
941
+ bottom: 20px;
942
+ right: 22px;
943
+ display: grid;
944
+ gap: 8px;
945
+ width: min(360px, calc(100vw - 44px));
946
+ pointer-events: none;
947
+ }
948
+
949
+ .toast {
950
+ padding: 13px 15px;
951
+ border: 1px solid var(--line-strong);
952
+ border-left: 3px solid var(--accent);
953
+ color: var(--ink);
954
+ background: var(--panel);
955
+ box-shadow: var(--shadow);
956
+ font-size: 12px;
957
+ animation: toast-in 200ms ease both;
958
+ }
959
+
960
+ .toast.error {
961
+ border-left-color: var(--danger);
962
+ }
963
+
964
+ @keyframes toast-in {
965
+ from {
966
+ opacity: 0;
967
+ transform: translateX(8px);
968
+ }
969
+ to {
970
+ opacity: 1;
971
+ transform: translateX(0);
972
+ }
973
+ }
974
+
975
+ @media (max-width: 1020px) {
976
+ .suite-model-policy {
977
+ grid-template-columns: repeat(2, minmax(0, 1fr));
978
+ }
979
+
980
+ .app-shell {
981
+ grid-template-columns: 160px minmax(0, 1fr);
982
+ }
983
+
984
+ .topbar,
985
+ .page-content {
986
+ padding-right: 20px;
987
+ padding-left: 20px;
988
+ }
989
+ .form-layout {
990
+ grid-template-columns: 1fr;
991
+ }
992
+ }
993
+
994
+ @media (max-width: 720px) {
995
+ .suite-connection .panel-header {
996
+ align-items: flex-start;
997
+ flex-direction: column;
998
+ }
999
+
1000
+ .suite-connection-facts {
1001
+ grid-template-columns: 1fr;
1002
+ gap: 12px;
1003
+ }
1004
+
1005
+ .suite-section {
1006
+ padding: 16px;
1007
+ }
1008
+
1009
+ .suite-section-footer {
1010
+ align-items: flex-start;
1011
+ flex-direction: column;
1012
+ }
1013
+
1014
+ .suite-model-mapping {
1015
+ grid-template-columns: minmax(0, 1fr) auto;
1016
+ gap: 12px 8px;
1017
+ }
1018
+
1019
+ .suite-model-mapping > .field {
1020
+ grid-column: 1 / -1;
1021
+ }
1022
+
1023
+ .suite-model-mapping > .mini-button {
1024
+ grid-column: 2;
1025
+ margin-top: 0;
1026
+ }
1027
+
1028
+ .suite-mapping-arrow {
1029
+ display: none;
1030
+ }
1031
+
1032
+ .suite-model-policy .checkbox-field {
1033
+ padding-top: 0;
1034
+ }
1035
+
1036
+ .app-shell {
1037
+ display: block;
1038
+ }
1039
+
1040
+ .rail {
1041
+ position: static;
1042
+ height: auto;
1043
+ padding: 16px;
1044
+ border-right: 0;
1045
+ border-bottom: 1px solid var(--line);
1046
+ }
1047
+
1048
+ .brand {
1049
+ padding: 0 0 12px;
1050
+ }
1051
+
1052
+ .rail-status {
1053
+ position: absolute;
1054
+ top: 23px;
1055
+ right: 16px;
1056
+ margin: 0;
1057
+ border: 0;
1058
+ }
1059
+
1060
+ .nav {
1061
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1062
+ }
1063
+
1064
+ .nav-item {
1065
+ min-height: 40px;
1066
+ text-align: center;
1067
+ }
1068
+
1069
+ .rail-footer {
1070
+ display: none;
1071
+ }
1072
+
1073
+ .topbar {
1074
+ align-items: flex-start;
1075
+ flex-direction: column;
1076
+ gap: 12px;
1077
+ padding: 18px 16px;
1078
+ }
1079
+
1080
+ .topbar-actions {
1081
+ flex-wrap: wrap;
1082
+ justify-content: flex-start;
1083
+ }
1084
+
1085
+ .page-content {
1086
+ padding-inline: 16px;
1087
+ }
1088
+
1089
+ .suite-table,
1090
+ .suite-table tbody,
1091
+ .suite-table tr,
1092
+ .suite-table th,
1093
+ .suite-table td {
1094
+ display: block;
1095
+ }
1096
+
1097
+ .suite-table thead {
1098
+ display: none;
1099
+ }
1100
+
1101
+ .suite-table tbody tr {
1102
+ padding: 12px 16px;
1103
+ }
1104
+
1105
+ .suite-table tbody tr + tr {
1106
+ border-top: 1px solid var(--line);
1107
+ }
1108
+
1109
+ .suite-table tbody th,
1110
+ .suite-table tbody td {
1111
+ width: 100%;
1112
+ padding: 4px 0;
1113
+ border: 0;
1114
+ }
1115
+
1116
+ .suite-table tbody td {
1117
+ display: grid;
1118
+ grid-template-columns: 64px minmax(0, 1fr);
1119
+ gap: 8px;
1120
+ }
1121
+
1122
+ .suite-table td::before {
1123
+ content: attr(data-label);
1124
+ color: var(--muted);
1125
+ font: 12px/1.5 "Aptos", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
1126
+ }
1127
+
1128
+ .config-section {
1129
+ padding: 16px;
1130
+ }
1131
+
1132
+ .create-model-row {
1133
+ grid-template-columns: minmax(0, 1fr) auto;
1134
+ }
1135
+
1136
+ .create-model-row > .field {
1137
+ grid-column: 1 / -1;
1138
+ }
1139
+
1140
+ .create-model-row > button {
1141
+ grid-column: 2;
1142
+ margin-top: 0;
1143
+ }
1144
+
1145
+ .create-model-row + .create-model-row {
1146
+ border-top: 1px solid var(--line);
1147
+ padding-top: 16px;
1148
+ }
1149
+
1150
+ .form-grid {
1151
+ grid-template-columns: 1fr;
1152
+ }
1153
+
1154
+ .field.full {
1155
+ grid-column: auto;
1156
+ }
1157
+
1158
+ .mapping-row {
1159
+ grid-template-columns: 1fr;
1160
+ }
1161
+
1162
+ .list-row {
1163
+ grid-template-columns: minmax(0, 1fr);
1164
+ gap: 8px;
1165
+ }
1166
+
1167
+ .button,
1168
+ .mini-button {
1169
+ min-height: 40px;
1170
+ }
1171
+
1172
+
1173
+ .notice > .button {
1174
+ margin-top: 10px;
1175
+ margin-left: 0;
1176
+ }
1177
+ }
1178
+
1179
+ @media (prefers-reduced-motion: reduce) {
1180
+ *,
1181
+ *::before,
1182
+ *::after {
1183
+ animation-duration: 0.001ms !important;
1184
+ animation-iteration-count: 1 !important;
1185
+ scroll-behavior: auto !important;
1186
+ transition-duration: 0.001ms !important;
1187
+ }
1188
+ }