docslight 0.1.0__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,878 @@
1
+ :root {
2
+ --bg-base: #f5f7fb;
3
+ --bg-surface: #ffffff;
4
+ --bg-elevated: #f8faff;
5
+ --bg-overlay: rgba(255, 255, 255, 0.86);
6
+ --border-subtle: #dfe5ef;
7
+ --border-strong: #b9c7dd;
8
+ --text-primary: #1f2937;
9
+ --text-secondary: #526175;
10
+ --text-muted: #8a97aa;
11
+ --accent: #4f7dff;
12
+ --accent-soft: rgba(79, 125, 255, 0.16);
13
+ --accent-strong: #2f62e9;
14
+ --success: #21b573;
15
+ --warning: #d97706;
16
+ --danger: #dc2626;
17
+ --hl-cloud: #4f7dff;
18
+ --hl-local: #16a3b8;
19
+ --hl-parse: #5b6ee1;
20
+ --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
21
+ --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
22
+ --radius-sm: 6px;
23
+ --radius-md: 8px;
24
+ --radius-lg: 8px;
25
+ --shadow-panel: 0 10px 28px rgba(31, 41, 55, 0.07);
26
+ }
27
+
28
+ * {
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ [hidden] {
33
+ display: none !important;
34
+ }
35
+
36
+ html {
37
+ color-scheme: light;
38
+ }
39
+
40
+ body {
41
+ margin: 0;
42
+ min-height: 100vh;
43
+ color: var(--text-primary);
44
+ background: var(--bg-base);
45
+ font-family: var(--font-sans);
46
+ }
47
+
48
+ body::before {
49
+ content: none;
50
+ }
51
+
52
+ button,
53
+ input,
54
+ select,
55
+ textarea {
56
+ font: inherit;
57
+ }
58
+
59
+ button,
60
+ select,
61
+ input,
62
+ textarea,
63
+ a {
64
+ color: inherit;
65
+ }
66
+
67
+ button {
68
+ border: 0;
69
+ }
70
+
71
+ button,
72
+ a,
73
+ input,
74
+ select,
75
+ textarea,
76
+ [tabindex] {
77
+ transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
78
+ }
79
+
80
+ :focus-visible {
81
+ outline: 2px solid var(--accent);
82
+ outline-offset: 2px;
83
+ }
84
+
85
+ .topbar {
86
+ position: sticky;
87
+ top: 0;
88
+ z-index: 20;
89
+ display: grid;
90
+ grid-template-columns: auto 1fr auto;
91
+ gap: 20px;
92
+ align-items: center;
93
+ min-height: 52px;
94
+ padding: 8px 22px;
95
+ border-bottom: 1px solid var(--border-subtle);
96
+ background: var(--bg-surface);
97
+ box-shadow: 0 1px 0 rgba(31, 41, 55, 0.02);
98
+ }
99
+
100
+ .brand {
101
+ display: inline-flex;
102
+ gap: 12px;
103
+ align-items: center;
104
+ color: var(--text-primary);
105
+ text-decoration: none;
106
+ }
107
+
108
+ .brand-mark {
109
+ display: grid;
110
+ width: 30px;
111
+ height: 30px;
112
+ place-items: center;
113
+ border-radius: var(--radius-sm);
114
+ background: var(--accent);
115
+ color: white;
116
+ font-weight: 800;
117
+ box-shadow: 0 8px 18px rgba(79, 125, 255, 0.24);
118
+ }
119
+
120
+ .brand-text {
121
+ font-size: 1rem;
122
+ font-weight: 720;
123
+ letter-spacing: 0;
124
+ }
125
+
126
+ .topnav {
127
+ display: inline-flex;
128
+ justify-content: center;
129
+ gap: 4px;
130
+ }
131
+
132
+ .nav-link {
133
+ padding: 8px 12px;
134
+ border: 1px solid transparent;
135
+ border-radius: var(--radius-sm);
136
+ color: var(--text-secondary);
137
+ text-decoration: none;
138
+ }
139
+
140
+ .nav-link:hover,
141
+ .nav-link.is-active {
142
+ border-color: rgba(79, 125, 255, 0.22);
143
+ background: var(--accent-soft);
144
+ color: var(--accent-strong);
145
+ }
146
+
147
+ .topbar-actions {
148
+ display: inline-flex;
149
+ gap: 10px;
150
+ align-items: center;
151
+ justify-self: end;
152
+ }
153
+
154
+ .language-select {
155
+ width: auto;
156
+ min-width: 112px;
157
+ height: 36px;
158
+ padding: 0 28px 0 10px;
159
+ border: 1px solid var(--border-subtle);
160
+ border-radius: var(--radius-sm);
161
+ background-color: var(--bg-elevated);
162
+ color: var(--text-secondary);
163
+ font-size: 0.86rem;
164
+ line-height: 36px;
165
+ box-sizing: border-box;
166
+ }
167
+
168
+ .health-badge {
169
+ display: inline-flex;
170
+ gap: 10px;
171
+ align-items: center;
172
+ min-width: 210px;
173
+ height: 36px;
174
+ padding: 0 10px;
175
+ border: 1px solid var(--border-subtle);
176
+ border-radius: var(--radius-sm);
177
+ background: var(--bg-elevated);
178
+ color: var(--text-secondary);
179
+ font-size: 0.86rem;
180
+ }
181
+
182
+ .health-dot {
183
+ width: 9px;
184
+ height: 9px;
185
+ border-radius: 999px;
186
+ background: var(--success);
187
+ box-shadow: 0 0 0 4px rgba(33, 181, 115, 0.14);
188
+ }
189
+
190
+ .app-main {
191
+ padding: 18px 20px 30px;
192
+ }
193
+
194
+ .workbench {
195
+ display: grid;
196
+ grid-template-columns: 380px minmax(0, 1fr) minmax(0, 1fr);
197
+ gap: 14px;
198
+ align-items: stretch;
199
+ max-width: 1720px;
200
+ margin: 0 auto;
201
+ }
202
+
203
+ .panel {
204
+ min-width: 0;
205
+ border: 1px solid var(--border-subtle);
206
+ border-radius: var(--radius-lg);
207
+ background: var(--bg-surface);
208
+ box-shadow: var(--shadow-panel);
209
+ }
210
+
211
+ .config-panel,
212
+ .specimen-panel,
213
+ .result-panel {
214
+ display: flex;
215
+ flex-direction: column;
216
+ gap: 14px;
217
+ padding: 16px;
218
+ height: calc(100vh - 100px);
219
+ overflow: hidden;
220
+ }
221
+
222
+ .config-panel {
223
+ overflow-y: auto;
224
+ padding-bottom: 24px;
225
+ }
226
+
227
+ .specimen-panel > .preview-canvas {
228
+ flex-direction: column;
229
+ flex: 1 1 auto;
230
+ min-height: 0;
231
+ }
232
+
233
+ .result-panel > [data-result-panel] {
234
+ flex: 1 1 auto;
235
+ min-height: 0;
236
+ min-width: 0;
237
+ overflow-y: auto;
238
+ overflow-x: hidden;
239
+ display: flex;
240
+ flex-direction: column;
241
+ align-items: stretch;
242
+ gap: 10px;
243
+ }
244
+
245
+ .result-tabs {
246
+ flex: 0 0 auto;
247
+ align-self: start;
248
+ }
249
+
250
+ .panel-header {
251
+ display: grid;
252
+ gap: 6px;
253
+ }
254
+
255
+ .eyebrow,
256
+ .file-name {
257
+ margin: 0;
258
+ color: var(--accent-strong);
259
+ font-family: var(--font-mono);
260
+ font-size: 0.72rem;
261
+ letter-spacing: 0;
262
+ text-transform: uppercase;
263
+ }
264
+
265
+ h1,
266
+ h2,
267
+ p {
268
+ margin-top: 0;
269
+ }
270
+
271
+ h1 {
272
+ margin-bottom: 0;
273
+ font-size: 1.42rem;
274
+ line-height: 1.2;
275
+ letter-spacing: 0;
276
+ }
277
+
278
+ h2 {
279
+ margin-bottom: 0;
280
+ font-size: 1rem;
281
+ letter-spacing: 0;
282
+ }
283
+
284
+ .panel-header p,
285
+ .helper-text,
286
+ .drop-copy,
287
+ .preview-empty,
288
+ .preview-notice,
289
+ #highlightStatus {
290
+ color: var(--text-secondary);
291
+ }
292
+
293
+ .field-label,
294
+ .config-block {
295
+ display: grid;
296
+ gap: 8px;
297
+ }
298
+
299
+ .field-label {
300
+ color: var(--text-secondary);
301
+ font-size: 0.86rem;
302
+ font-weight: 620;
303
+ }
304
+
305
+ .config-block {
306
+ margin: 0;
307
+ padding: 14px;
308
+ border: 1px solid var(--border-subtle);
309
+ border-radius: var(--radius-md);
310
+ background: var(--bg-elevated);
311
+ }
312
+
313
+ fieldset.config-block {
314
+ min-width: 0;
315
+ }
316
+
317
+ legend {
318
+ padding: 0 6px;
319
+ color: var(--text-secondary);
320
+ }
321
+
322
+ input,
323
+ select,
324
+ textarea {
325
+ width: 100%;
326
+ border: 1px solid var(--border-subtle);
327
+ border-radius: var(--radius-sm);
328
+ background: var(--bg-surface);
329
+ color: var(--text-primary);
330
+ padding: 11px 12px;
331
+ line-height: 1.4;
332
+ box-sizing: border-box;
333
+ }
334
+
335
+ select {
336
+ min-height: 42px;
337
+ padding-right: 32px;
338
+ }
339
+
340
+ input::placeholder,
341
+ textarea::placeholder {
342
+ color: var(--text-muted);
343
+ }
344
+
345
+ input:hover,
346
+ select:hover,
347
+ textarea:hover {
348
+ border-color: var(--border-strong);
349
+ }
350
+
351
+ input:focus,
352
+ select:focus,
353
+ textarea:focus {
354
+ border-color: var(--accent);
355
+ box-shadow: 0 0 0 3px var(--accent-soft);
356
+ }
357
+
358
+ button,
359
+ .ghost-button {
360
+ display: inline-flex;
361
+ align-items: center;
362
+ justify-content: center;
363
+ gap: 8px;
364
+ min-height: 40px;
365
+ padding: 10px 14px;
366
+ border-radius: var(--radius-sm);
367
+ background: var(--accent);
368
+ color: white;
369
+ cursor: pointer;
370
+ font-weight: 700;
371
+ }
372
+
373
+ button:hover,
374
+ .ghost-button:hover {
375
+ transform: translateY(-1px);
376
+ box-shadow: 0 10px 22px rgba(79, 125, 255, 0.2);
377
+ }
378
+
379
+ button:disabled {
380
+ cursor: not-allowed;
381
+ opacity: 0.48;
382
+ transform: none;
383
+ box-shadow: none;
384
+ }
385
+
386
+ .ghost-button {
387
+ border: 1px solid var(--border-subtle);
388
+ background: var(--bg-surface);
389
+ color: var(--accent-strong);
390
+ }
391
+
392
+ .form-error {
393
+ margin: 0;
394
+ padding: 12px;
395
+ border: 1px solid rgba(220, 38, 38, 0.22);
396
+ border-radius: var(--radius-sm);
397
+ background: #fff1f2;
398
+ color: #b42318;
399
+ }
400
+
401
+ .drop-zone {
402
+ display: grid;
403
+ min-height: 176px;
404
+ place-items: center;
405
+ gap: 8px;
406
+ padding: 24px;
407
+ border: 1px dashed color-mix(in srgb, var(--hl-cloud) 68%, var(--border-strong));
408
+ border-radius: var(--radius-lg);
409
+ background: #fbfdff;
410
+ cursor: pointer;
411
+ text-align: center;
412
+ }
413
+
414
+ .compact-drop-zone {
415
+ min-height: 124px;
416
+ padding: 18px;
417
+ }
418
+
419
+ .drop-zone.is-dragging,
420
+ .drop-zone:hover {
421
+ border-color: var(--hl-cloud);
422
+ background: #f0f5ff;
423
+ transform: translateY(-2px);
424
+ }
425
+
426
+ .drop-zone:focus-within {
427
+ border-color: var(--accent);
428
+ box-shadow: 0 0 0 3px var(--accent-soft);
429
+ }
430
+
431
+ .drop-zone input {
432
+ position: absolute;
433
+ width: 1px;
434
+ height: 1px;
435
+ opacity: 0;
436
+ }
437
+
438
+ .drop-title {
439
+ font-size: 1.08rem;
440
+ font-weight: 740;
441
+ }
442
+
443
+ .preview-header,
444
+ .result-header,
445
+ .field-actions {
446
+ display: flex;
447
+ gap: 12px;
448
+ align-items: center;
449
+ justify-content: space-between;
450
+ }
451
+
452
+ .preview-header span {
453
+ color: var(--text-muted);
454
+ font-size: 0.86rem;
455
+ }
456
+
457
+ .preview-canvas {
458
+ display: flex;
459
+ flex-direction: column;
460
+ gap: 18px;
461
+ min-height: 0;
462
+ overflow: auto;
463
+ padding: 18px;
464
+ border: 1px solid var(--border-subtle);
465
+ border-radius: var(--radius-lg);
466
+ background: #eef2f7;
467
+ }
468
+
469
+ .preview-page {
470
+ position: relative;
471
+ aspect-ratio: var(--preview-page-ratio);
472
+ width: min(100%, 760px);
473
+ flex-shrink: 0;
474
+ margin: 0 auto;
475
+ border: 1px solid #e2e8f0;
476
+ border-radius: 2px;
477
+ background: #ffffff;
478
+ box-shadow: 0 12px 32px rgba(31, 41, 55, 0.16);
479
+ overflow: hidden;
480
+ }
481
+
482
+ .preview-page img {
483
+ display: block;
484
+ width: 100%;
485
+ height: auto;
486
+ }
487
+
488
+ .preview-page-label {
489
+ position: absolute;
490
+ inset: 10px auto auto 10px;
491
+ z-index: 3;
492
+ padding: 4px 8px;
493
+ border: 1px solid rgba(79, 125, 255, 0.24);
494
+ border-radius: 999px;
495
+ background: rgba(255, 255, 255, 0.9);
496
+ color: var(--accent-strong);
497
+ font-size: 0.72rem;
498
+ font-weight: 760;
499
+ line-height: 1;
500
+ }
501
+
502
+ .preview-empty,
503
+ .preview-notice {
504
+ margin: 0;
505
+ padding: 14px;
506
+ border: 1px solid var(--border-subtle);
507
+ border-radius: var(--radius-md);
508
+ background: var(--bg-surface);
509
+ }
510
+
511
+ .preview-empty {
512
+ place-self: center;
513
+ }
514
+
515
+ .highlight-box {
516
+ position: absolute;
517
+ z-index: 2;
518
+ pointer-events: none;
519
+ border: 2px solid currentColor;
520
+ border-radius: 2px;
521
+ background: color-mix(in srgb, currentColor 14%, transparent);
522
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72);
523
+ }
524
+
525
+ .highlight-box.source-cloud {
526
+ color: var(--hl-cloud);
527
+ }
528
+
529
+ .highlight-box.source-local {
530
+ color: var(--hl-local);
531
+ border-style: dashed;
532
+ }
533
+
534
+ .highlight-box.source-parse {
535
+ color: var(--hl-parse);
536
+ }
537
+
538
+ .fields-builder,
539
+ .fields-rows,
540
+ .table-columns {
541
+ display: grid;
542
+ gap: 12px;
543
+ }
544
+
545
+ .fields-builder {
546
+ padding: 14px;
547
+ border: 1px solid var(--border-subtle);
548
+ border-radius: var(--radius-md);
549
+ background: var(--bg-elevated);
550
+ }
551
+
552
+ .field-row-card,
553
+ .table-field-card {
554
+ position: relative;
555
+ display: grid;
556
+ gap: 12px;
557
+ padding: 14px;
558
+ border: 1px solid var(--border-subtle);
559
+ border-radius: var(--radius-md);
560
+ background: var(--bg-surface);
561
+ }
562
+
563
+ .field-row-card strong,
564
+ .table-field-card strong {
565
+ color: var(--text-primary);
566
+ }
567
+
568
+ .table-columns {
569
+ padding-left: 12px;
570
+ border-left: 1px solid var(--border-subtle);
571
+ }
572
+
573
+ .prompt-cell {
574
+ display: flex;
575
+ align-items: flex-end;
576
+ gap: 6px;
577
+ }
578
+
579
+ .prompt-cell .field-label {
580
+ flex: 1 1 auto;
581
+ min-width: 0;
582
+ }
583
+
584
+ .prompt-trigger {
585
+ position: relative;
586
+ flex: 0 0 auto;
587
+ display: inline-flex;
588
+ align-items: center;
589
+ justify-content: center;
590
+ width: 28px;
591
+ height: 28px;
592
+ padding: 0;
593
+ border: 1px solid var(--border-subtle);
594
+ border-radius: var(--radius-sm);
595
+ background: var(--bg-surface);
596
+ color: var(--text-muted);
597
+ cursor: pointer;
598
+ transition: border-color 0.15s, color 0.15s, background 0.15s;
599
+ }
600
+
601
+ .prompt-trigger:hover {
602
+ border-color: var(--accent);
603
+ color: var(--accent);
604
+ }
605
+
606
+ .prompt-trigger[data-active="true"] {
607
+ border-color: var(--accent);
608
+ background: var(--accent-soft);
609
+ color: var(--accent);
610
+ }
611
+
612
+ .prompt-trigger svg {
613
+ width: 14px;
614
+ height: 14px;
615
+ pointer-events: none;
616
+ }
617
+
618
+ .prompt-popover-backdrop {
619
+ position: fixed;
620
+ inset: 0;
621
+ z-index: 90;
622
+ }
623
+
624
+ .prompt-popover {
625
+ position: fixed;
626
+ z-index: 100;
627
+ width: 260px;
628
+ padding: 12px;
629
+ border: 1px solid var(--border-subtle);
630
+ border-radius: var(--radius-md);
631
+ background: var(--bg-surface);
632
+ box-shadow: 0 8px 24px rgba(31, 41, 55, 0.12);
633
+ }
634
+
635
+ .prompt-popover-header {
636
+ display: flex;
637
+ align-items: center;
638
+ justify-content: space-between;
639
+ margin-bottom: 8px;
640
+ font-size: 12px;
641
+ font-weight: 600;
642
+ color: var(--text-secondary);
643
+ }
644
+
645
+ .prompt-popover textarea {
646
+ display: block;
647
+ width: 100%;
648
+ min-height: 72px;
649
+ padding: 8px;
650
+ border: 1px solid var(--border-subtle);
651
+ border-radius: var(--radius-sm);
652
+ background: var(--bg-base);
653
+ color: var(--text-primary);
654
+ font-size: 13px;
655
+ line-height: 1.5;
656
+ resize: vertical;
657
+ }
658
+
659
+ .prompt-popover textarea:focus {
660
+ outline: none;
661
+ border-color: var(--accent);
662
+ box-shadow: 0 0 0 2px var(--accent-soft);
663
+ }
664
+
665
+ .result-tabs {
666
+ display: inline-flex;
667
+ gap: 18px;
668
+ justify-content: start;
669
+ padding: 0;
670
+ border: 0;
671
+ border-bottom: 1px solid var(--border-subtle);
672
+ border-radius: 0;
673
+ background: transparent;
674
+ }
675
+
676
+ .result-tabs button {
677
+ min-height: 34px;
678
+ padding: 6px 0 8px;
679
+ border-bottom: 2px solid transparent;
680
+ border-radius: 0;
681
+ background: transparent;
682
+ color: var(--text-secondary);
683
+ box-shadow: none;
684
+ }
685
+
686
+ .result-tabs button.is-active {
687
+ background: transparent;
688
+ border-color: var(--accent);
689
+ color: var(--accent-strong);
690
+ }
691
+
692
+ .result-tabs button:hover {
693
+ transform: none;
694
+ box-shadow: none;
695
+ color: var(--accent-strong);
696
+ }
697
+
698
+ [data-result-panel] {
699
+ display: grid;
700
+ gap: 12px;
701
+ grid-template-rows: 1fr;
702
+ min-height: 0;
703
+ overflow: auto;
704
+ padding: 16px;
705
+ border: 1px solid var(--border-subtle);
706
+ border-radius: var(--radius-md);
707
+ background: #fbfcff;
708
+ }
709
+
710
+ [data-result-panel] > pre,
711
+ [data-result-panel] > .result-preview {
712
+ min-height: 0;
713
+ }
714
+
715
+ [data-result-panel][hidden] {
716
+ display: none;
717
+ }
718
+
719
+ .metadata-panel pre {
720
+ overflow: auto;
721
+ margin: 0;
722
+ padding: 16px;
723
+ border: 1px solid var(--border-subtle);
724
+ border-radius: var(--radius-md);
725
+ background: #fbfcff;
726
+ color: #344054;
727
+ font-family: var(--font-mono);
728
+ font-size: 0.82rem;
729
+ line-height: 1.6;
730
+ white-space: pre-wrap;
731
+ }
732
+
733
+ .result-preview,
734
+ [data-result-panel] > pre {
735
+ overflow: auto;
736
+ margin: 0;
737
+ padding: 0;
738
+ border: none;
739
+ background: transparent;
740
+ color: #344054;
741
+ font-family: var(--font-mono);
742
+ font-size: 0.82rem;
743
+ line-height: 1.6;
744
+ white-space: pre-wrap;
745
+ }
746
+
747
+ .result-placeholder {
748
+ display: flex;
749
+ align-items: center;
750
+ justify-content: center;
751
+ height: 100%;
752
+ padding: 24px;
753
+ color: var(--text-secondary);
754
+ font-size: 0.9rem;
755
+ text-align: center;
756
+ opacity: 0.7;
757
+ }
758
+
759
+ .result-block-card,
760
+ .result-field-card,
761
+ .result-table-card {
762
+ width: 100%;
763
+ border: 1px solid var(--border-subtle);
764
+ border-radius: var(--radius-md);
765
+ background: var(--bg-surface);
766
+ color: var(--text-primary);
767
+ text-align: left;
768
+ box-shadow: none;
769
+ word-break: break-word;
770
+ white-space: normal;
771
+ }
772
+
773
+ .result-block-card {
774
+ display: block;
775
+ padding: 14px;
776
+ cursor: pointer;
777
+ flex-shrink: 0;
778
+ text-align: left;
779
+ white-space: normal;
780
+ word-break: break-all;
781
+ overflow-wrap: anywhere;
782
+ }
783
+
784
+ .result-block-card .block-text {
785
+ display: block;
786
+ line-height: 1.6;
787
+ word-break: break-all;
788
+ overflow-wrap: anywhere;
789
+ white-space: normal;
790
+ }
791
+
792
+ .result-field-card {
793
+ padding: 14px;
794
+ display: grid;
795
+ grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
796
+ gap: 12px;
797
+ align-items: start;
798
+ }
799
+
800
+ .result-field-card strong {
801
+ color: var(--accent-strong);
802
+ }
803
+
804
+ .result-table-card {
805
+ display: grid;
806
+ gap: 12px;
807
+ padding: 14px;
808
+ }
809
+
810
+ .result-table-card pre {
811
+ overflow: auto;
812
+ margin: 0;
813
+ color: #344054;
814
+ font-family: var(--font-mono);
815
+ white-space: pre-wrap;
816
+ }
817
+
818
+ .metadata-panel {
819
+ color: var(--text-secondary);
820
+ }
821
+
822
+ .metadata-panel summary {
823
+ margin-bottom: 10px;
824
+ cursor: pointer;
825
+ }
826
+
827
+ @media (max-width: 1279px) {
828
+ .workbench {
829
+ grid-template-columns: 380px minmax(0, 1fr);
830
+ }
831
+
832
+ .result-panel {
833
+ grid-column: 1 / -1;
834
+ }
835
+
836
+ .preview-canvas {
837
+ max-height: 680px;
838
+ }
839
+ }
840
+
841
+ @media (max-width: 959px) {
842
+ .topbar {
843
+ grid-template-columns: 1fr;
844
+ }
845
+
846
+ .topnav {
847
+ justify-content: start;
848
+ }
849
+
850
+ .health-badge {
851
+ justify-self: start;
852
+ }
853
+
854
+ .topbar-actions {
855
+ justify-self: start;
856
+ }
857
+
858
+ .app-main {
859
+ padding: 20px 16px 32px;
860
+ }
861
+
862
+ .workbench,
863
+ .result-field-card {
864
+ grid-template-columns: 1fr;
865
+ }
866
+
867
+ .preview-header,
868
+ .result-header,
869
+ .field-actions {
870
+ align-items: stretch;
871
+ flex-direction: column;
872
+ }
873
+
874
+ .result-tabs {
875
+ flex-wrap: wrap;
876
+ border-radius: var(--radius-md);
877
+ }
878
+ }