synthocr 2.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,1111 @@
1
+ @font-face {
2
+ font-family: Studio;
3
+ src: url("/assets/ui-latin.ttf") format("truetype");
4
+ font-weight: 100 900;
5
+ font-display: swap;
6
+ }
7
+ @font-face {
8
+ font-family: Kurdish;
9
+ src: url("/assets/ui-kurdish.ttf") format("truetype");
10
+ font-display: swap;
11
+ }
12
+ :root {
13
+ color-scheme: dark;
14
+ --page: #101116;
15
+ --surface: #171920;
16
+ --surface-raised: #1d2029;
17
+ --field: #12141b;
18
+ --canvas: #111319;
19
+ --ink: #f0eff6;
20
+ --muted: #a4a5b5;
21
+ --quiet: #7c8093;
22
+ --line: #2b2e3b;
23
+ --line-strong: #41465a;
24
+ --accent: #a99aff;
25
+ --accent-hover: #bcafff;
26
+ --accent-ink: #1a1337;
27
+ --accent-wash: #a99aff14;
28
+ --success: #99d5bd;
29
+ --success-wash: #99d5bd14;
30
+ --danger: #ffaca7;
31
+ --danger-wash: #ffaca714;
32
+ --warning: #e5c893;
33
+ --warning-wash: #e5c89314;
34
+ --focus: #b7aaff;
35
+ --sans: Studio, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
36
+ --text: Kurdish, var(--sans);
37
+ --radius: 14px;
38
+ }
39
+ :root[data-theme="light"] {
40
+ color-scheme: light;
41
+ --page: #f5f5fa;
42
+ --surface: #ffffff;
43
+ --surface-raised: #f7f7fb;
44
+ --field: #fbfbfd;
45
+ --canvas: #eeeef4;
46
+ --ink: #20212e;
47
+ --muted: #676a80;
48
+ --quiet: #72768b;
49
+ --line: #e1e2eb;
50
+ --line-strong: #b8bbd0;
51
+ --accent: #6853cf;
52
+ --accent-hover: #5843bd;
53
+ --accent-ink: #ffffff;
54
+ --accent-wash: #6853cf0f;
55
+ --success: #36765b;
56
+ --success-wash: #36765b10;
57
+ --danger: #b64440;
58
+ --danger-wash: #b6444010;
59
+ --warning: #906921;
60
+ --warning-wash: #90692110;
61
+ --focus: #806cdd;
62
+ }
63
+ * {
64
+ box-sizing: border-box;
65
+ }
66
+ body {
67
+ margin: 0;
68
+ background: var(--page);
69
+ color: var(--ink);
70
+ font-family: var(--sans);
71
+ font-size: 16px;
72
+ line-height: 1.55;
73
+ -webkit-font-smoothing: antialiased;
74
+ }
75
+ button,
76
+ input,
77
+ select,
78
+ textarea {
79
+ font: inherit;
80
+ color: inherit;
81
+ }
82
+ button {
83
+ cursor: pointer;
84
+ }
85
+ button:disabled {
86
+ cursor: not-allowed;
87
+ opacity: 0.45;
88
+ }
89
+ a {
90
+ color: inherit;
91
+ text-decoration: none;
92
+ }
93
+ p,
94
+ h1,
95
+ h2,
96
+ h3,
97
+ figure {
98
+ margin: 0;
99
+ }
100
+ fieldset {
101
+ border: 0;
102
+ margin: 0;
103
+ padding: 0;
104
+ min-width: 0;
105
+ }
106
+ legend {
107
+ padding: 0;
108
+ }
109
+ code {
110
+ font-size: 0.92em;
111
+ padding: 1px 5px;
112
+ border-radius: 5px;
113
+ background: var(--surface-raised);
114
+ border: 1px solid var(--line);
115
+ }
116
+ [hidden] {
117
+ display: none !important;
118
+ }
119
+ :focus-visible {
120
+ outline: 2px solid var(--focus);
121
+ outline-offset: 3px;
122
+ }
123
+ [data-icon] svg {
124
+ width: 18px;
125
+ height: 18px;
126
+ display: block;
127
+ fill: none;
128
+ stroke: currentColor;
129
+ stroke-width: 1.8;
130
+ stroke-linecap: round;
131
+ stroke-linejoin: round;
132
+ }
133
+ .sr-only {
134
+ position: absolute;
135
+ width: 1px;
136
+ height: 1px;
137
+ padding: 0;
138
+ margin: -1px;
139
+ overflow: hidden;
140
+ clip: rect(0, 0, 0, 0);
141
+ white-space: nowrap;
142
+ border: 0;
143
+ }
144
+ .skip-link {
145
+ position: fixed;
146
+ top: -100px;
147
+ left: 16px;
148
+ z-index: 10;
149
+ padding: 8px 14px;
150
+ border-radius: 8px;
151
+ background: var(--accent);
152
+ color: var(--accent-ink);
153
+ }
154
+ .skip-link:focus {
155
+ top: 10px;
156
+ }
157
+
158
+ /* Header */
159
+ .app-header {
160
+ display: flex;
161
+ align-items: center;
162
+ justify-content: space-between;
163
+ gap: 16px;
164
+ padding: 14px max(16px, calc((100% - 760px) / 2));
165
+ border-bottom: 1px solid var(--line);
166
+ }
167
+ .brand {
168
+ display: flex;
169
+ align-items: center;
170
+ gap: 10px;
171
+ font-size: 19px;
172
+ font-weight: 650;
173
+ letter-spacing: -0.3px;
174
+ }
175
+ .brand-mark {
176
+ border-radius: 8px;
177
+ }
178
+ .brand-light {
179
+ font-weight: 400;
180
+ }
181
+ .header-meta {
182
+ display: flex;
183
+ align-items: center;
184
+ gap: 12px;
185
+ }
186
+ .header-version {
187
+ color: var(--quiet);
188
+ font-size: 13px;
189
+ }
190
+ .theme-toggle {
191
+ display: flex;
192
+ align-items: center;
193
+ gap: 7px;
194
+ min-height: 38px;
195
+ padding: 0 12px;
196
+ border: 1px solid var(--line);
197
+ border-radius: 9px;
198
+ background: var(--surface);
199
+ font-size: 13px;
200
+ }
201
+ .theme-toggle:hover {
202
+ border-color: var(--line-strong);
203
+ }
204
+
205
+ /* Layout */
206
+ .app-main {
207
+ max-width: 760px;
208
+ margin: 0 auto;
209
+ padding: 40px 16px 80px;
210
+ display: grid;
211
+ gap: 20px;
212
+ }
213
+ .page-heading h1 {
214
+ font-size: clamp(28px, 6vw, 38px);
215
+ line-height: 1.15;
216
+ letter-spacing: -0.8px;
217
+ font-weight: 650;
218
+ }
219
+ .page-heading p {
220
+ margin-top: 10px;
221
+ color: var(--muted);
222
+ font-size: 17px;
223
+ max-width: 600px;
224
+ }
225
+ .steps {
226
+ display: grid;
227
+ gap: 20px;
228
+ }
229
+ .card {
230
+ background: var(--surface);
231
+ border: 1px solid var(--line);
232
+ border-radius: var(--radius);
233
+ padding: 26px 28px 28px;
234
+ display: grid;
235
+ gap: 22px;
236
+ }
237
+ .card h2 {
238
+ display: flex;
239
+ align-items: center;
240
+ gap: 12px;
241
+ font-size: 20px;
242
+ font-weight: 620;
243
+ letter-spacing: -0.3px;
244
+ }
245
+ .step-number {
246
+ display: inline-grid;
247
+ place-items: center;
248
+ width: 28px;
249
+ height: 28px;
250
+ border-radius: 50%;
251
+ border: 1px solid var(--line-strong);
252
+ color: var(--accent);
253
+ font-size: 14px;
254
+ font-weight: 600;
255
+ }
256
+
257
+ /* Fields */
258
+ .field {
259
+ display: grid;
260
+ gap: 8px;
261
+ }
262
+ .field-label {
263
+ font-size: 15px;
264
+ font-weight: 600;
265
+ }
266
+ .field-help {
267
+ color: var(--muted);
268
+ font-size: 14px;
269
+ }
270
+ .field-status {
271
+ color: var(--muted);
272
+ font-size: 14px;
273
+ min-height: 1em;
274
+ }
275
+ .field-error,
276
+ .form-error {
277
+ color: var(--danger);
278
+ font-size: 14px;
279
+ }
280
+ .form-error {
281
+ padding: 12px 14px;
282
+ border-radius: 10px;
283
+ background: var(--danger-wash);
284
+ border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
285
+ }
286
+ input:not([type="checkbox"], [type="radio"], [type="file"]),
287
+ textarea {
288
+ width: 100%;
289
+ min-height: 48px;
290
+ padding: 11px 14px;
291
+ border: 1px solid var(--line);
292
+ border-radius: 10px;
293
+ background: var(--field);
294
+ font-size: 16px;
295
+ }
296
+ textarea {
297
+ resize: vertical;
298
+ font-family: var(--text);
299
+ line-height: 1.7;
300
+ }
301
+ input:focus,
302
+ textarea:focus {
303
+ border-color: var(--accent);
304
+ }
305
+ input[type="file"] {
306
+ padding: 10px;
307
+ border: 1px dashed var(--line-strong);
308
+ border-radius: 10px;
309
+ background: var(--field);
310
+ font-size: 14px;
311
+ width: 100%;
312
+ }
313
+ input[type="file"]::file-selector-button {
314
+ margin-right: 12px;
315
+ padding: 8px 14px;
316
+ border: 1px solid var(--line);
317
+ border-radius: 8px;
318
+ background: var(--surface-raised);
319
+ color: var(--ink);
320
+ cursor: pointer;
321
+ }
322
+
323
+ /* Selectable cards (checkbox or radio) */
324
+ .choice-grid {
325
+ display: grid;
326
+ gap: 10px;
327
+ }
328
+ .choice-grid.four {
329
+ grid-template-columns: repeat(4, 1fr);
330
+ }
331
+ .choice-grid.three {
332
+ grid-template-columns: repeat(3, 1fr);
333
+ }
334
+ .choice-grid.two {
335
+ grid-template-columns: repeat(2, 1fr);
336
+ }
337
+ .choice {
338
+ position: relative;
339
+ display: flex;
340
+ }
341
+ .choice input {
342
+ position: absolute;
343
+ opacity: 0;
344
+ inset: 0;
345
+ margin: 0;
346
+ cursor: pointer;
347
+ }
348
+ .choice-card {
349
+ flex: 1;
350
+ display: grid;
351
+ align-content: start;
352
+ gap: 3px;
353
+ padding: 13px 15px;
354
+ border: 1px solid var(--line);
355
+ border-radius: 11px;
356
+ background: var(--surface-raised);
357
+ transition:
358
+ border-color 0.15s,
359
+ background 0.15s;
360
+ }
361
+ .choice-card strong {
362
+ font-size: 15px;
363
+ font-weight: 600;
364
+ }
365
+ .choice-card span {
366
+ color: var(--muted);
367
+ font-size: 13px;
368
+ line-height: 1.45;
369
+ }
370
+ .choice-card .native {
371
+ font-family: var(--text);
372
+ }
373
+ .choice:hover .choice-card {
374
+ border-color: var(--line-strong);
375
+ }
376
+ .choice input:checked + .choice-card {
377
+ border-color: var(--accent);
378
+ background: var(--accent-wash);
379
+ box-shadow: inset 0 0 0 1px var(--accent);
380
+ }
381
+ .choice input:focus-visible + .choice-card {
382
+ outline: 2px solid var(--focus);
383
+ outline-offset: 3px;
384
+ }
385
+
386
+ /* Image count */
387
+ .count-row {
388
+ display: grid;
389
+ grid-template-columns: minmax(120px, 1fr) auto;
390
+ gap: 10px;
391
+ }
392
+ .sample-presets {
393
+ display: flex;
394
+ gap: 8px;
395
+ }
396
+ .sample-presets button {
397
+ min-width: 76px;
398
+ min-height: 48px;
399
+ padding: 0 12px;
400
+ border: 1px solid var(--line);
401
+ border-radius: 10px;
402
+ background: var(--surface-raised);
403
+ color: var(--muted);
404
+ font-size: 14px;
405
+ }
406
+ .sample-presets button[aria-pressed="true"] {
407
+ border-color: var(--accent);
408
+ color: var(--ink);
409
+ background: var(--accent-wash);
410
+ }
411
+
412
+ /* Language shares */
413
+ .share-list {
414
+ display: grid;
415
+ border: 1px solid var(--line);
416
+ border-radius: 11px;
417
+ }
418
+ .share-row {
419
+ display: grid;
420
+ grid-template-columns: 1fr 84px 16px minmax(110px, auto);
421
+ align-items: center;
422
+ gap: 8px;
423
+ padding: 8px 14px;
424
+ }
425
+ .share-row + .share-row {
426
+ border-top: 1px solid var(--line);
427
+ }
428
+ .share-name {
429
+ font-weight: 550;
430
+ }
431
+ .share-row input {
432
+ min-height: 40px;
433
+ padding: 6px 10px;
434
+ text-align: end;
435
+ }
436
+ .share-percent,
437
+ .share-count {
438
+ color: var(--muted);
439
+ font-size: 14px;
440
+ }
441
+ .share-count {
442
+ text-align: end;
443
+ font-variant-numeric: tabular-nums;
444
+ }
445
+
446
+ /* Customize */
447
+ .customize {
448
+ border: 1px solid var(--line);
449
+ border-radius: 11px;
450
+ }
451
+ .customize summary {
452
+ display: flex;
453
+ align-items: center;
454
+ justify-content: space-between;
455
+ padding: 13px 16px;
456
+ font-weight: 600;
457
+ font-size: 15px;
458
+ cursor: pointer;
459
+ list-style: none;
460
+ }
461
+ .customize summary::-webkit-details-marker {
462
+ display: none;
463
+ }
464
+ .customize[open] summary [data-icon] {
465
+ transform: rotate(180deg);
466
+ }
467
+ .customize-inner {
468
+ display: grid;
469
+ gap: 20px;
470
+ padding: 4px 16px 18px;
471
+ }
472
+ .label-row {
473
+ display: flex;
474
+ justify-content: space-between;
475
+ align-items: baseline;
476
+ }
477
+ .label-row output {
478
+ color: var(--accent);
479
+ font-weight: 600;
480
+ font-variant-numeric: tabular-nums;
481
+ }
482
+ input[type="range"] {
483
+ width: 100%;
484
+ accent-color: var(--accent);
485
+ }
486
+ fieldset:disabled {
487
+ opacity: 0.5;
488
+ }
489
+ .slider-list {
490
+ display: grid;
491
+ gap: 6px;
492
+ }
493
+ .slider-row {
494
+ display: grid;
495
+ grid-template-columns: 80px 1fr 64px;
496
+ align-items: center;
497
+ gap: 12px;
498
+ font-size: 14px;
499
+ }
500
+ .slider-row output {
501
+ text-align: end;
502
+ color: var(--accent);
503
+ font-weight: 600;
504
+ font-variant-numeric: tabular-nums;
505
+ }
506
+ .summary-note {
507
+ margin-left: 8px;
508
+ color: var(--muted);
509
+ font-weight: 400;
510
+ font-size: 14px;
511
+ }
512
+ .font-actions {
513
+ display: flex;
514
+ flex-wrap: wrap;
515
+ align-items: center;
516
+ gap: 6px 16px;
517
+ }
518
+ .add-font {
519
+ position: relative;
520
+ display: inline-flex;
521
+ align-items: center;
522
+ gap: 6px;
523
+ margin-left: auto;
524
+ cursor: pointer;
525
+ }
526
+ .add-font:focus-within {
527
+ outline: 2px solid var(--focus);
528
+ outline-offset: 3px;
529
+ }
530
+ .font-list {
531
+ max-height: 340px;
532
+ overflow-y: auto;
533
+ border: 1px solid var(--line);
534
+ border-radius: 11px;
535
+ }
536
+ .font-row {
537
+ display: flex;
538
+ align-items: center;
539
+ gap: 10px;
540
+ padding: 0 12px;
541
+ }
542
+ .font-row + .font-row {
543
+ border-top: 1px solid var(--line);
544
+ }
545
+ .font-row label {
546
+ flex: 1;
547
+ min-width: 0;
548
+ display: flex;
549
+ align-items: center;
550
+ gap: 10px;
551
+ min-height: 42px;
552
+ cursor: pointer;
553
+ }
554
+ .font-row input {
555
+ width: 16px;
556
+ height: 16px;
557
+ margin: 0;
558
+ flex-shrink: 0;
559
+ accent-color: var(--accent);
560
+ }
561
+ .font-name {
562
+ flex: 1;
563
+ min-width: 0;
564
+ overflow: hidden;
565
+ text-overflow: ellipsis;
566
+ white-space: nowrap;
567
+ font-size: 14px;
568
+ }
569
+ .font-tags {
570
+ color: var(--muted);
571
+ font-size: 12px;
572
+ white-space: nowrap;
573
+ }
574
+ .chip-list {
575
+ display: flex;
576
+ flex-wrap: wrap;
577
+ gap: 8px;
578
+ }
579
+ .chip {
580
+ position: relative;
581
+ display: inline-flex;
582
+ }
583
+ .chip input {
584
+ position: absolute;
585
+ opacity: 0;
586
+ inset: 0;
587
+ margin: 0;
588
+ cursor: pointer;
589
+ }
590
+ .chip span {
591
+ padding: 7px 13px;
592
+ border: 1px solid var(--line);
593
+ border-radius: 999px;
594
+ background: var(--surface-raised);
595
+ color: var(--muted);
596
+ font-size: 14px;
597
+ }
598
+ .chip:hover span {
599
+ border-color: var(--line-strong);
600
+ }
601
+ .chip input:checked + span {
602
+ border-color: var(--accent);
603
+ background: var(--accent-wash);
604
+ color: var(--ink);
605
+ }
606
+ .chip input:focus-visible + span {
607
+ outline: 2px solid var(--focus);
608
+ outline-offset: 2px;
609
+ }
610
+ .effect-list {
611
+ display: grid;
612
+ border: 1px solid var(--line);
613
+ border-radius: 11px;
614
+ }
615
+ .effect-row {
616
+ display: flex;
617
+ align-items: center;
618
+ justify-content: space-between;
619
+ gap: 12px;
620
+ padding: 9px 12px;
621
+ }
622
+ .effect-row + .effect-row {
623
+ border-top: 1px solid var(--line);
624
+ }
625
+ .effect-text {
626
+ display: grid;
627
+ min-width: 0;
628
+ }
629
+ .effect-text strong {
630
+ font-size: 14px;
631
+ font-weight: 600;
632
+ }
633
+ .effect-text small {
634
+ color: var(--muted);
635
+ font-size: 12px;
636
+ }
637
+ .segmented {
638
+ display: flex;
639
+ flex-shrink: 0;
640
+ border: 1px solid var(--line);
641
+ border-radius: 9px;
642
+ overflow: hidden;
643
+ }
644
+ .segmented label {
645
+ position: relative;
646
+ display: flex;
647
+ }
648
+ .segmented input {
649
+ position: absolute;
650
+ opacity: 0;
651
+ inset: 0;
652
+ margin: 0;
653
+ cursor: pointer;
654
+ }
655
+ .segmented span {
656
+ padding: 6px 11px;
657
+ color: var(--muted);
658
+ font-size: 13px;
659
+ white-space: nowrap;
660
+ }
661
+ .segmented label + label span {
662
+ border-left: 1px solid var(--line);
663
+ }
664
+ .segmented input:checked + span {
665
+ background: var(--accent-wash);
666
+ color: var(--ink);
667
+ box-shadow: inset 0 0 0 1px var(--accent);
668
+ }
669
+ .segmented input:focus-visible + span {
670
+ outline: 2px solid var(--focus);
671
+ outline-offset: -2px;
672
+ }
673
+
674
+ /* Folder */
675
+ .folder-row {
676
+ display: flex;
677
+ align-items: center;
678
+ gap: 10px;
679
+ }
680
+ .folder-name {
681
+ flex: 1;
682
+ min-width: 0;
683
+ min-height: 48px;
684
+ display: flex;
685
+ align-items: center;
686
+ padding: 0 14px;
687
+ border: 1px solid var(--line);
688
+ border-radius: 10px;
689
+ background: var(--field);
690
+ overflow: hidden;
691
+ text-overflow: ellipsis;
692
+ white-space: nowrap;
693
+ }
694
+ .folder-row .secondary-button,
695
+ .save-actions .secondary-button {
696
+ display: inline-flex;
697
+ align-items: center;
698
+ gap: 8px;
699
+ min-height: 48px;
700
+ }
701
+ .save-panel {
702
+ display: grid;
703
+ gap: 12px;
704
+ padding-top: 20px;
705
+ border-top: 1px solid var(--line);
706
+ }
707
+ .save-status {
708
+ font-weight: 550;
709
+ overflow-wrap: anywhere;
710
+ }
711
+ .save-actions {
712
+ display: grid;
713
+ grid-template-columns: 1fr auto;
714
+ gap: 10px;
715
+ }
716
+
717
+ /* Preview */
718
+ .preview {
719
+ display: grid;
720
+ gap: 12px;
721
+ padding: 18px;
722
+ border-radius: 12px;
723
+ background: var(--canvas);
724
+ }
725
+ .preview-heading {
726
+ display: flex;
727
+ align-items: center;
728
+ justify-content: space-between;
729
+ }
730
+ .text-button {
731
+ display: inline-flex;
732
+ align-items: center;
733
+ gap: 6px;
734
+ min-height: 36px;
735
+ padding: 0;
736
+ border: 0;
737
+ background: none;
738
+ color: var(--accent);
739
+ font-size: 14px;
740
+ font-weight: 500;
741
+ }
742
+ .text-button [data-icon] svg {
743
+ width: 15px;
744
+ height: 15px;
745
+ }
746
+ .text-button:hover:not(:disabled) {
747
+ text-decoration: underline;
748
+ }
749
+ .preview-grid {
750
+ display: grid;
751
+ grid-template-columns: repeat(2, 1fr);
752
+ gap: 12px;
753
+ }
754
+ .preview-grid.wide,
755
+ .preview-grid[data-count="1"] {
756
+ grid-template-columns: 1fr;
757
+ }
758
+ .preview-tile {
759
+ display: grid;
760
+ gap: 6px;
761
+ }
762
+ .preview-image {
763
+ display: grid;
764
+ place-items: center;
765
+ min-height: 90px;
766
+ padding: 10px;
767
+ border-radius: 9px;
768
+ background: var(--surface);
769
+ border: 1px solid var(--line);
770
+ }
771
+ .preview-image img {
772
+ display: block;
773
+ max-width: 100%;
774
+ max-height: 120px;
775
+ border-radius: 3px;
776
+ }
777
+ .preview-tile figcaption {
778
+ color: var(--muted);
779
+ font-size: 13px;
780
+ }
781
+ .label-box {
782
+ display: grid;
783
+ gap: 4px;
784
+ padding-top: 12px;
785
+ border-top: 1px solid var(--line);
786
+ }
787
+ .label-title {
788
+ color: var(--quiet);
789
+ font-size: 12px;
790
+ font-weight: 600;
791
+ letter-spacing: 0.4px;
792
+ text-transform: uppercase;
793
+ }
794
+ #preview-text {
795
+ font-family: var(--text);
796
+ font-size: 19px;
797
+ line-height: 1.8;
798
+ overflow-wrap: anywhere;
799
+ }
800
+
801
+ /* Buttons */
802
+ .primary-button {
803
+ display: flex;
804
+ align-items: center;
805
+ justify-content: center;
806
+ gap: 10px;
807
+ width: 100%;
808
+ min-height: 54px;
809
+ border: 0;
810
+ border-radius: 11px;
811
+ background: var(--accent);
812
+ color: var(--accent-ink);
813
+ font-size: 16px;
814
+ font-weight: 650;
815
+ }
816
+ .primary-button:hover:not(:disabled) {
817
+ background: var(--accent-hover);
818
+ }
819
+ .secondary-button {
820
+ justify-self: start;
821
+ min-height: 40px;
822
+ padding: 0 16px;
823
+ border: 1px solid var(--line);
824
+ border-radius: 9px;
825
+ background: var(--surface-raised);
826
+ font-size: 14px;
827
+ }
828
+ .secondary-button:hover:not(:disabled) {
829
+ border-color: var(--line-strong);
830
+ }
831
+
832
+ /* Result */
833
+ .result-heading {
834
+ display: flex;
835
+ align-items: center;
836
+ justify-content: space-between;
837
+ gap: 12px;
838
+ }
839
+ .job-name {
840
+ margin-top: -14px;
841
+ color: var(--muted);
842
+ font-size: 14px;
843
+ overflow-wrap: anywhere;
844
+ }
845
+ .status-badge {
846
+ padding: 3px 10px;
847
+ border-radius: 999px;
848
+ border: 1px solid var(--line-strong);
849
+ color: var(--muted);
850
+ font-size: 13px;
851
+ white-space: nowrap;
852
+ }
853
+ .status-badge.completed {
854
+ color: var(--success);
855
+ border-color: color-mix(in srgb, var(--success) 45%, transparent);
856
+ background: var(--success-wash);
857
+ }
858
+ .status-badge.failed,
859
+ .status-badge.cancelled {
860
+ color: var(--danger);
861
+ border-color: color-mix(in srgb, var(--danger) 45%, transparent);
862
+ background: var(--danger-wash);
863
+ }
864
+ .status-badge.generating,
865
+ .status-badge.preparing,
866
+ .status-badge.verifying,
867
+ .status-badge.queued,
868
+ .status-badge.cancelling {
869
+ color: var(--warning);
870
+ border-color: color-mix(in srgb, var(--warning) 45%, transparent);
871
+ background: var(--warning-wash);
872
+ }
873
+ .progress-track {
874
+ height: 6px;
875
+ border-radius: 999px;
876
+ background: var(--surface-raised);
877
+ overflow: hidden;
878
+ }
879
+ .progress-bar {
880
+ height: 100%;
881
+ border-radius: inherit;
882
+ background: var(--accent);
883
+ transition: width 0.3s;
884
+ }
885
+ .progress-bar.indeterminate {
886
+ width: 35% !important;
887
+ animation: progress 1.2s ease-in-out infinite;
888
+ }
889
+ @keyframes progress {
890
+ from {
891
+ transform: translateX(-100%);
892
+ }
893
+ to {
894
+ transform: translateX(300%);
895
+ }
896
+ }
897
+ .progress-details {
898
+ display: flex;
899
+ justify-content: space-between;
900
+ gap: 12px;
901
+ margin-top: -12px;
902
+ color: var(--muted);
903
+ font-size: 14px;
904
+ }
905
+ .downloads {
906
+ display: grid;
907
+ gap: 14px;
908
+ padding-top: 20px;
909
+ border-top: 1px solid var(--line);
910
+ }
911
+ .format-list {
912
+ display: grid;
913
+ border: 1px solid var(--line);
914
+ border-radius: 11px;
915
+ overflow: hidden;
916
+ }
917
+ .format-option {
918
+ display: flex;
919
+ align-items: flex-start;
920
+ gap: 12px;
921
+ padding: 12px 14px;
922
+ cursor: pointer;
923
+ }
924
+ .format-option + .format-option {
925
+ border-top: 1px solid var(--line);
926
+ }
927
+ .format-option:has(input:checked) {
928
+ background: var(--accent-wash);
929
+ }
930
+ .format-option input {
931
+ margin: 4px 0 0;
932
+ accent-color: var(--accent);
933
+ width: 16px;
934
+ height: 16px;
935
+ flex-shrink: 0;
936
+ }
937
+ .format-option strong {
938
+ display: block;
939
+ font-size: 15px;
940
+ font-weight: 600;
941
+ }
942
+ .format-option small {
943
+ display: block;
944
+ color: var(--muted);
945
+ font-size: 13px;
946
+ }
947
+ .gallery {
948
+ display: grid;
949
+ gap: 12px;
950
+ padding-top: 20px;
951
+ border-top: 1px solid var(--line);
952
+ }
953
+ .gallery-heading {
954
+ display: flex;
955
+ justify-content: space-between;
956
+ align-items: baseline;
957
+ gap: 12px;
958
+ }
959
+ .gallery-heading h3 {
960
+ font-size: 16px;
961
+ font-weight: 600;
962
+ }
963
+ .gallery-heading span {
964
+ color: var(--muted);
965
+ font-size: 13px;
966
+ }
967
+ .sample-gallery {
968
+ display: grid;
969
+ grid-template-columns: repeat(2, 1fr);
970
+ gap: 12px;
971
+ }
972
+ .gallery-card {
973
+ display: grid;
974
+ gap: 6px;
975
+ min-width: 0;
976
+ }
977
+ .gallery-image {
978
+ display: grid;
979
+ place-items: center;
980
+ min-height: 80px;
981
+ padding: 8px;
982
+ border-radius: 9px;
983
+ background: var(--canvas);
984
+ border: 1px solid var(--line);
985
+ }
986
+ .gallery-image:hover {
987
+ border-color: var(--line-strong);
988
+ }
989
+ .gallery-image img {
990
+ display: block;
991
+ max-width: 100%;
992
+ max-height: 90px;
993
+ }
994
+ .gallery-card figcaption {
995
+ font-family: var(--text);
996
+ font-size: 15px;
997
+ line-height: 1.6;
998
+ overflow: hidden;
999
+ text-overflow: ellipsis;
1000
+ white-space: nowrap;
1001
+ }
1002
+ .gallery-card small {
1003
+ color: var(--quiet);
1004
+ font-size: 12px;
1005
+ overflow: hidden;
1006
+ text-overflow: ellipsis;
1007
+ white-space: nowrap;
1008
+ }
1009
+ .gallery-pagination {
1010
+ display: flex;
1011
+ gap: 8px;
1012
+ }
1013
+
1014
+ /* History */
1015
+ .history {
1016
+ gap: 12px;
1017
+ }
1018
+ .history h2 {
1019
+ font-size: 17px;
1020
+ }
1021
+ #recent-runs {
1022
+ display: grid;
1023
+ }
1024
+ .recent-run {
1025
+ display: flex;
1026
+ align-items: center;
1027
+ justify-content: space-between;
1028
+ gap: 12px;
1029
+ padding: 12px 0;
1030
+ border: 0;
1031
+ border-top: 1px solid var(--line);
1032
+ background: none;
1033
+ text-align: start;
1034
+ }
1035
+ .recent-run span:first-child {
1036
+ display: grid;
1037
+ min-width: 0;
1038
+ }
1039
+ .recent-run strong {
1040
+ font-size: 15px;
1041
+ font-weight: 550;
1042
+ overflow-wrap: anywhere;
1043
+ }
1044
+ .recent-run small {
1045
+ color: var(--muted);
1046
+ font-size: 13px;
1047
+ }
1048
+ .recent-run:hover strong {
1049
+ color: var(--accent);
1050
+ }
1051
+
1052
+ .toast {
1053
+ position: fixed;
1054
+ left: 50%;
1055
+ bottom: 24px;
1056
+ transform: translateX(-50%);
1057
+ padding: 11px 18px;
1058
+ border-radius: 10px;
1059
+ background: var(--ink);
1060
+ color: var(--page);
1061
+ font-size: 14px;
1062
+ box-shadow: 0 8px 30px #0005;
1063
+ }
1064
+
1065
+ @media (max-width: 640px) {
1066
+ .font-tags {
1067
+ display: none;
1068
+ }
1069
+ .add-font {
1070
+ margin-left: 0;
1071
+ }
1072
+ .app-main {
1073
+ padding-top: 28px;
1074
+ }
1075
+ .card {
1076
+ padding: 20px 18px 22px;
1077
+ }
1078
+ .choice-grid.four {
1079
+ grid-template-columns: repeat(2, 1fr);
1080
+ }
1081
+ .choice-grid.three,
1082
+ .save-actions,
1083
+ .count-row,
1084
+ .preview-grid {
1085
+ grid-template-columns: 1fr;
1086
+ }
1087
+ .sample-presets button {
1088
+ flex: 1;
1089
+ }
1090
+ .effect-row {
1091
+ flex-direction: column;
1092
+ align-items: stretch;
1093
+ }
1094
+ .segmented label {
1095
+ flex: 1;
1096
+ }
1097
+ .segmented span {
1098
+ flex: 1;
1099
+ text-align: center;
1100
+ }
1101
+ .theme-toggle #theme-label,
1102
+ .header-version {
1103
+ display: none;
1104
+ }
1105
+ }
1106
+ @media (prefers-reduced-motion: reduce) {
1107
+ * {
1108
+ transition: none !important;
1109
+ animation: none !important;
1110
+ }
1111
+ }