1:root {
2 --bg: #121418;
3 --panel: #1a1d23;
4 --panel-2: #22262e;
5 --border: #2e333d;
6 --text: #e6e8eb;
7 --muted: #8b929e;
8 --accent: #5b9dff;
9 --accent-2: #3d7fe0;
10 --red: #ef4444;
11 --red-2: #d53434;
12 --green: #3fb67a;
13 --amber: #e0a33a;
14 --radius: 8px;
15 color-scheme: dark;
16 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
17 font-size: 14px;
18 line-height: 1.45;
19 color: var(--text);
20 background: var(--bg);
21}
23* {
24 box-sizing: border-box;
25}
26body {
27 margin: 0;
28 background: var(--bg);
29}
30a {
31 color: var(--accent);
32 text-decoration: none;
33}
34a:hover {
35 text-decoration: underline;
36}
37code {
38 background: var(--panel-2);
39 padding: 1px 5px;
40 border-radius: 4px;
41 font-size: 0.92em;
42}
43h2 {
44 margin: 0 0 12px;
45 font-size: 18px;
46 font-weight: 600;
47}
48h3,
49h4 {
50 margin: 0 0 10px;
51 font-weight: 600;
52}
53h4 {
54 font-size: 13px;
55 text-transform: uppercase;
56 letter-spacing: 0.04em;
57 color: var(--muted);
58 margin-top: 6px;
59}
61.muted {
62 color: var(--muted);
63}
64.small {
65 font-size: 12px;
66}
67.spacer {
68 flex: 1;
69}
70.grow {
71 flex: 1;
72}
73.row {
74 display: flex;
75 align-items: center;
76 gap: 8px;
77 flex-wrap: wrap;
78}
79.error-text {
80 color: #ff8a8a;
81}
82.warn-text {
83 color: var(--amber);
84}
86input,
87textarea,
88select {
89 font: inherit;
90 color: var(--text);
91 background: var(--bg);
92 border: 1px solid var(--border);
93 border-radius: 6px;
94 padding: 6px 9px;
95}
96input:focus,
97textarea:focus,
98select:focus {
99 outline: none;
100 border-color: var(--accent);
101}
102textarea {
103 resize: vertical;
104}
105input[type='range'] {
106 padding: 0;
107 accent-color: var(--accent);
108}
109input[type='checkbox'] {
110 accent-color: var(--accent);
111}
113/* ---- buttons ---- */
114.btn {
115 display: inline-flex;
116 align-items: center;
117 gap: 6px;
118 font: inherit;
119 font-weight: 500;
120 color: var(--text);
121 background: var(--panel-2);
122 border: 1px solid var(--border);
123 border-radius: 6px;
124 padding: 6px 12px;
125 cursor: pointer;
126 white-space: nowrap;
127 text-decoration: none ;
128}
129.btn:hover:not(:disabled) {
130 background: #2a2f38;
131}
132.btn:disabled {
133 opacity: 0.45;
134 cursor: default;
135}
136.btn.primary {
137 background: var(--accent-2);
138 border-color: var(--accent-2);
139 color: white;
140}
141.btn.primary:hover:not(:disabled) {
142 background: var(--accent);
143}
144.btn.record {
145 background: var(--red-2);
146 border-color: var(--red-2);
147 color: white;
148}
149.btn.record:hover:not(:disabled) {
150 background: var(--red);
151}
152.btn.danger {
153 color: #ff8a8a;
154}
155.btn.danger:hover:not(:disabled) {
156 background: rgba(239, 68, 68, 0.15);
157}
158.btn.ghost {
159 background: transparent;
160 border-color: transparent;
161}
162.btn.ghost:hover:not(:disabled) {
163 background: var(--panel-2);
164}
165.btn.small {
166 padding: 3px 8px;
167 font-size: 12px;
168}
169.btn.big {
170 padding: 10px 20px;
171 font-size: 15px;
172}
173.icon-btn {
174 display: inline-flex;
175 align-items: center;
176 justify-content: center;
177 width: 30px;
178 height: 30px;
179 color: var(--text);
180 background: transparent;
181 border: 1px solid transparent;
182 border-radius: 6px;
183 cursor: pointer;
184}
185.icon-btn:hover:not(:disabled) {
186 background: var(--panel-2);
187 border-color: var(--border);
188}
189.icon-btn:disabled {
190 opacity: 0.35;
191 cursor: default;
192}
193.icon-btn.danger:hover:not(:disabled) {
194 color: #ff8a8a;
195}
196.icon-btn.play {
197 width: 36px;
198 height: 36px;
199 background: var(--panel-2);
200 border-color: var(--border);
201}
203/* ---- page chrome ---- */
204.page {
205 min-height: 100vh;
206 display: flex;
207 flex-direction: column;
208}
209.page.loading {
210 align-items: center;
211 justify-content: center;
212 color: var(--muted);
213}
214.topbar {
215 display: flex;
216 align-items: center;
217 gap: 10px;
218 padding: 10px 16px;
219 border-bottom: 1px solid var(--border);
220 background: var(--panel);
221 position: sticky;
222 top: 0;
223 z-index: 10;
224}
225.topbar-title {
226 font-weight: 600;
227 font-size: 15px;
228}
229.brand {
230 display: flex;
231 align-items: center;
232 gap: 8px;
233 font-weight: 700;
234 font-size: 17px;
235 margin-right: 12px;
236}
237.brand-dot {
238 width: 12px;
239 height: 12px;
240 border-radius: 50%;
241 background: var(--red);
242 box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
243}
244.search {
245 width: 260px;
246}
247.title-input {
248 font-size: 16px;
249 font-weight: 600;
250 background: transparent;
251 border-color: transparent;
252 min-width: 200px;
253 width: 40vw;
254}
255.title-input:hover {
256 border-color: var(--border);
257}
258.save-state {
259 font-size: 12px;
260 color: var(--muted);
261}
262.save-state.error {
263 color: #ff8a8a;
264}
265.banner {
266 margin: 10px 16px 0;
267 padding: 8px 12px;
268 border-radius: 6px;
269 background: var(--panel-2);
270 border: 1px solid var(--border);
271}
272.banner.error {
273 background: rgba(239, 68, 68, 0.12);
274 border-color: rgba(239, 68, 68, 0.4);
275 color: #ffb3b3;
276 cursor: pointer;
277}
278.toast {
279 position: fixed;
280 bottom: 20px;
281 left: 50%;
282 transform: translateX(-50%);
283 background: var(--panel-2);
284 border: 1px solid var(--border);
285 padding: 8px 16px;
286 border-radius: 20px;
287 z-index: 50;
288}
289.panel {
290 background: var(--panel);
291 border: 1px solid var(--border);
292 border-radius: var(--radius);
293 padding: 14px;
294 display: flex;
295 flex-direction: column;
296 gap: 10px;
297}
298.field {
299 display: flex;
300 flex-direction: column;
301 gap: 4px;
302}
303.field > span {
304 font-size: 12px;
305 color: var(--muted);
306}
307.field.grow {
308 flex: 1;
309}
310.check {
311 display: inline-flex;
312 align-items: center;
313 gap: 7px;
314 cursor: pointer;
315}
316.empty {
317 text-align: center;
318 padding: 70px 20px;
319}
320.empty p {
321 margin-bottom: 20px;
322}
324/* ---- modal ---- */
325.modal-backdrop {
326 position: fixed;
327 inset: 0;
328 background: rgba(0, 0, 0, 0.6);
329 display: flex;
330 align-items: center;
331 justify-content: center;
332 z-index: 100;
333}
334.modal {
335 background: var(--panel);
336 border: 1px solid var(--border);
337 border-radius: 10px;
338 padding: 20px;
339 width: min(440px, calc(100vw - 32px));
340 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
341}
342.modal.wide {
343 width: min(640px, calc(100vw - 32px));
344}
345.modal-body {
346 display: flex;
347 flex-direction: column;
348 gap: 12px;
349}
350.modal-body p {
351 margin: 0;
352}
353.modal-footer {
354 display: flex;
355 justify-content: flex-end;
356 gap: 8px;
357 margin-top: 18px;
358}
360/* ---- crop dialog ---- */
361.modal.crop-modal {
362 width: min(1000px, calc(100vw - 32px));
363}
364.crop-toolbar {
365 display: flex;
366 flex-wrap: wrap;
367 align-items: center;
368 gap: 10px;
369}
370.crop-frame-wrap {
371 display: flex;
372 justify-content: center;
373 padding: 8px;
374 background: #000;
375 border-radius: var(--radius);
376}
377.crop-frame {
378 position: relative;
379 max-width: 100%;
380 touch-action: none;
381 cursor: crosshair;
382 user-select: none;
383}
384.crop-frame video {
385 display: block;
386 width: 100%;
387 height: 100%;
388 pointer-events: none;
389}
390.crop-shade {
391 position: absolute;
392 inset: 0;
393 overflow: hidden;
394 pointer-events: none;
395}
396.crop-shade div {
397 position: absolute;
398 box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
399}
400.crop-rect {
401 position: absolute;
402 outline: 1px solid rgba(255, 255, 255, 0.9);
403 cursor: move;
404}
405.crop-grid {
406 position: absolute;
407 inset: 0;
408 pointer-events: none;
409 background:
410 linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.67% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.67% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.67% + 0.5px), transparent calc(66.67% + 0.5px)),
411 linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.67% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.67% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.67% + 0.5px), transparent calc(66.67% + 0.5px));
412}
413.crop-handle {
414 position: absolute;
415 width: 12px;
416 height: 12px;
417 margin: -6px 0 0 -6px;
418 background: white;
419 border: 1px solid rgba(0, 0, 0, 0.5);
420 border-radius: 2px;
421}
422.crop-handle.nw,
423.crop-handle.se {
424 cursor: nwse-resize;
425}
426.crop-handle.ne,
427.crop-handle.sw {
428 cursor: nesw-resize;
429}
430.crop-handle.n,
431.crop-handle.s {
432 cursor: ns-resize;
433}
434.crop-handle.e,
435.crop-handle.w {
436 cursor: ew-resize;
437}
438.crop-scrub {
439 display: flex;
440 align-items: center;
441 gap: 10px;
442}
443.crop-scrub input {
444 flex: 1;
445}
446.crop-modal .modal-footer {
447 align-items: center;
448}
450/* ---- library ---- */
451.library {
452 padding: 20px 16px 40px;
453}
454.grid {
455 display: grid;
456 grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
457 gap: 16px;
458}
459.card {
460 position: relative;
461 background: var(--panel);
462 border: 1px solid var(--border);
463 border-radius: var(--radius);
464 overflow: hidden;
465 cursor: pointer;
466 transition: border-color 0.12s, transform 0.12s;
467}
468.card:hover {
469 border-color: #454c59;
470}
471.card.dragging {
472 opacity: 0.4;
473}
474.thumb {
475 position: relative;
476 aspect-ratio: 16 / 9;
477 background: #0b0c0f;
478}
479.thumb img {
480 width: 100%;
481 height: 100%;
482 object-fit: cover;
483 display: block;
484}
485.thumb-empty {
486 width: 100%;
487 height: 100%;
488 display: flex;
489 align-items: center;
490 justify-content: center;
491 color: #3a404b;
492}
493.duration {
494 position: absolute;
495 right: 6px;
496 bottom: 6px;
497 background: rgba(0, 0, 0, 0.75);
498 padding: 1px 6px;
499 border-radius: 4px;
500 font-size: 12px;
501 font-variant-numeric: tabular-nums;
502}
503.thumb .kinds {
504 position: absolute;
505 left: 6px;
506 bottom: 6px;
507 background: rgba(0, 0, 0, 0.6);
508 border-radius: 4px;
509 padding: 2px 4px;
510}
511.kinds {
512 display: inline-flex;
513 gap: 5px;
514 color: var(--muted);
515}
516.thumb .kinds {
517 color: #dfe3e8;
518}
519.card-body {
520 padding: 10px 12px 12px;
521}
522.card-title {
523 font-weight: 600;
524 margin-bottom: 3px;
525}
526.card-desc {
527 color: var(--muted);
528 font-size: 13px;
529 display: -webkit-box;
530 -webkit-line-clamp: 2;
531 -webkit-box-orient: vertical;
532 overflow: hidden;
533 margin-bottom: 6px;
534}
535.card-meta {
536 display: flex;
537 gap: 10px;
538 align-items: center;
539 font-size: 12px;
540 color: var(--muted);
541}
542.tag {
543 font-size: 11px;
544 padding: 0 6px;
545 border-radius: 10px;
546 border: 1px solid;
547}
548.tag.ok {
549 color: var(--green);
550}
551.tag.warn {
552 color: var(--amber);
553}
554.card-actions {
555 position: absolute;
556 top: 6px;
557 right: 6px;
558 display: none;
559 gap: 4px;
560}
561.card-actions .icon-btn {
562 background: rgba(15, 17, 21, 0.85);
563}
564.card-actions .icon-btn:first-child {
565 color: var(--red);
566}
567.card:hover .card-actions {
568 display: flex;
569}
570.grip {
571 position: absolute;
572 top: 8px;
573 left: 6px;
574 color: #dfe3e8;
575 background: rgba(15, 17, 21, 0.7);
576 border-radius: 4px;
577 padding: 2px;
578 display: none;
579 cursor: grab;
580}
581.card:hover .grip {
582 display: flex;
583}
585/* ---- editor ---- */
586.editor-grid {
587 display: grid;
588 grid-template-columns: minmax(0, 1fr) 400px;
589 gap: 16px;
590 padding: 16px;
591 align-items: start;
592}
593@media (max-width: 1100px) {
594 .editor-grid {
595 grid-template-columns: 1fr;
596 }
597}
598.editor-main {
599 display: flex;
600 flex-direction: column;
601 gap: 10px;
602 min-width: 0;
603}
604.editor-side {
605 position: sticky;
606 top: 70px;
607 display: flex;
608 flex-direction: column;
609 gap: 0;
610 max-height: calc(100vh - 86px);
611}
612.editor-side .panel {
613 border-top-left-radius: 0;
614 border-top-right-radius: 0;
615 overflow: auto;
616 min-height: 300px;
617 max-height: calc(100vh - 124px);
618}
619.tabs {
620 display: flex;
621 gap: 2px;
622}
623.tabs button {
624 flex: 1;
625 font: inherit;
626 color: var(--muted);
627 background: var(--bg);
628 border: 1px solid var(--border);
629 border-bottom: none;
630 border-radius: 8px 8px 0 0;
631 padding: 7px 8px;
632 cursor: pointer;
633 white-space: nowrap;
634}
635.tabs button.active {
636 color: var(--text);
637 background: var(--panel);
638}
639textarea.notes {
640 min-height: 320px;
641 flex: 1;
642 font-size: 13px;
643}
645.stage {
646 position: relative;
647 width: 100%;
648 background: #000;
649 border-radius: var(--radius);
650 overflow: hidden;
651 cursor: pointer;
652}
653.stage-inner {
654 position: absolute;
655 left: 0;
656 top: 0;
657 transform-origin: 0 0;
658}
659.stage-inner .layer {
660 position: absolute;
661 background: #000;
662}
663.stage-empty {
664 position: absolute;
665 inset: 0;
666 display: flex;
667 align-items: center;
668 justify-content: center;
669 color: var(--muted);
670}
672.transport {
673 display: flex;
674 align-items: center;
675 gap: 4px;
676 flex-wrap: wrap;
677}
678.transport .sep {
679 width: 1px;
680 height: 22px;
681 background: var(--border);
682 margin: 0 6px;
683}
684.timecode {
685 font-variant-numeric: tabular-nums;
686 font-family: ui-monospace, 'SF Mono', Menlo, monospace;
687 font-size: 13px;
688 margin-left: 6px;
689}
690.zoom {
691 display: inline-flex;
692 align-items: center;
693 gap: 6px;
694}
695.zoom input {
696 width: 100px;
697}
699.timeline-scroll {
700 overflow-x: auto;
701 background: var(--panel);
702 border: 1px solid var(--border);
703 border-radius: var(--radius);
704}
705.timeline {
706 position: relative;
707 min-width: 100%;
708 height: 104px;
709 user-select: none;
710 cursor: text;
711 touch-action: none;
712}
713.tl-ruler {
714 position: relative;
715 height: 20px;
716 border-bottom: 1px solid var(--border);
717}
718.tl-tick {
719 position: absolute;
720 top: 3px;
721 font-size: 10px;
722 color: var(--muted);
723 padding-left: 3px;
724 border-left: 1px solid var(--border);
725 line-height: 14px;
726 font-variant-numeric: tabular-nums;
727}
728.tl-track {
729 position: absolute;
730 top: 28px;
731 left: 0;
732 right: 0;
733 height: 68px;
734}
735.tl-seg {
736 position: absolute;
737 top: 0;
738 bottom: 0;
739 background: hsl(var(--hue) 45% 30%);
740 border: 1px solid hsl(var(--hue) 50% 45%);
741 border-radius: 5px;
742 overflow: hidden;
743 box-sizing: border-box;
744}
745.tl-seg.selected {
746 border: 2px solid #fff;
747}
748.tl-wave {
749 position: absolute;
750 inset: 0;
751 width: 100%;
752 height: 100%;
753}
754.tl-label {
755 position: absolute;
756 left: 5px;
757 top: 2px;
758 font-size: 10px;
759 color: rgba(255, 255, 255, 0.85);
760 pointer-events: none;
761 white-space: nowrap;
762}
763.tl-range {
764 position: absolute;
765 top: 20px;
766 bottom: 0;
767 background: rgba(239, 68, 68, 0.28);
768 border-left: 1px solid var(--red);
769 border-right: 1px solid var(--red);
770 pointer-events: none;
771}
772.tl-mark {
773 position: absolute;
774 top: 20px;
775 bottom: 0;
776 width: 0;
777 border-left: 2px dashed var(--red);
778 pointer-events: none;
779}
780.tl-playhead {
781 position: absolute;
782 top: 0;
783 bottom: 0;
784 width: 2px;
785 margin-left: -1px;
786 background: #fff;
787 pointer-events: none;
788 box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
789}
790.tl-playhead::before {
791 content: '';
792 position: absolute;
793 top: 0;
794 left: -5px;
795 border: 6px solid transparent;
796 border-top-color: #fff;
797}
798.shortcuts {
799 margin: 0;
800}
801.section-title {
802 margin-top: 10px;
803 font-size: 14px;
804}
805.takes {
806 display: grid;
807 grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
808 gap: 10px;
809}
810.take {
811 background: var(--panel);
812 border: 1px solid var(--border);
813 border-radius: var(--radius);
814 padding: 10px 12px;
815 display: flex;
816 flex-direction: column;
817 gap: 4px;
818}
819.take-head {
820 display: flex;
821 align-items: center;
822 gap: 8px;
823}
824.take-head .kinds {
825 margin-left: auto;
826}
827.take-swatch {
828 width: 10px;
829 height: 10px;
830 border-radius: 3px;
831 background: hsl(var(--hue) 50% 45%);
832}
833.take-actions {
834 display: flex;
835 align-items: center;
836 gap: 6px;
837 margin-top: 4px;
838}
839.take-actions .icon-btn {
840 margin-left: auto;
841}
843.seg-control {
844 display: flex;
845 flex-wrap: wrap;
846 gap: 0;
847 border: 1px solid var(--border);
848 border-radius: 6px;
849 overflow: hidden;
850 width: fit-content;
851}
852.seg-control button {
853 font: inherit;
854 font-size: 12px;
855 color: var(--muted);
856 background: var(--bg);
857 border: none;
858 border-right: 1px solid var(--border);
859 padding: 5px 10px;
860 cursor: pointer;
861}
862.seg-control button:last-child {
863 border-right: none;
864}
865.seg-control button.active {
866 background: var(--accent-2);
867 color: white;
868}
869.export-box {
870 margin-top: 8px;
871 padding-top: 12px;
872 border-top: 1px solid var(--border);
873 display: flex;
874 flex-direction: column;
875 gap: 8px;
876 align-items: flex-start;
877}
878.export-box p {
879 margin: 0;
880}
881.export-info {
882 display: flex;
883 flex-direction: column;
884 gap: 6px;
885 align-items: flex-start;
886}
887.progress {
888 width: 100%;
889 height: 8px;
890 background: var(--bg);
891 border-radius: 4px;
892 overflow: hidden;
893}
894.progress > div {
895 height: 100%;
896 background: var(--accent);
897 transition: width 0.3s;
898}
900/* ---- transcript ---- */
901.transcript {
902 display: flex;
903 flex-direction: column;
904 gap: 10px;
905}
906.transcript-bar {
907 display: flex;
908 align-items: center;
909 gap: 10px;
910 justify-content: space-between;
911}
912.transcript-status {
913 display: flex;
914 flex-direction: column;
915 gap: 4px;
916}
917.transcript-words {
918 line-height: 1.8;
919 font-size: 14px;
920}
921.word {
922 cursor: pointer;
923 border-radius: 3px;
924 padding: 1px 1px;
925}
926.word:hover {
927 background: var(--panel-2);
928}
929.word.current {
930 background: rgba(91, 157, 255, 0.35);
931}
932.word.selected {
933 background: rgba(239, 68, 68, 0.35);
934 text-decoration: line-through;
935 text-decoration-color: rgba(255, 255, 255, 0.5);
936}
937.seg-break {
938 display: inline-block;
939 width: 2px;
940 height: 1em;
941 vertical-align: middle;
942 background: var(--amber);
943 margin: 0 5px;
944}
946/* ---- recorder ---- */
947.recorder-grid {
948 display: grid;
949 grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
950 gap: 16px;
951 padding: 16px;
952 align-items: start;
953}
954@media (max-width: 1000px) {
955 .recorder-grid {
956 grid-template-columns: 1fr;
957 }
958}
959.source {
960 display: flex;
961 flex-direction: column;
962 gap: 6px;
963 padding-bottom: 10px;
964 border-bottom: 1px solid var(--border);
965}
966.source > .check {
967 font-weight: 500;
968}
969.source-opts {
970 display: flex;
971 gap: 8px;
972 flex-wrap: wrap;
973 align-items: center;
974 padding-left: 24px;
975}
976.source-opts select {
977 max-width: 340px;
978}
979.mic-tools {
980 margin-left: 24px;
981 display: flex;
982 flex-direction: column;
983 gap: 6px;
984 max-width: 420px;
985}
986.mic-tools p {
987 margin: 0;
988}
989.meter-row {
990 display: flex;
991 align-items: center;
992 gap: 10px;
993}
994.meter {
995 position: relative;
996 flex: 1;
997 height: 8px;
998 background: var(--bg);
999 border-radius: 3px;
1000 overflow: hidden;
1001}
1002.meter-zone {
1003 position: absolute;
1004 top: 0;
1005 bottom: 0;
1006 background: rgba(63, 182, 122, 0.25);
1007}
1008.meter-bar {
1009 position: relative;
1010 height: 100%;
1011 width: 0;
1012 background: var(--green);
1013 transition: width 0.05s linear;
1014}
1015.meter-bar.hot {
1016 background: var(--red);
1017}
1018.meter-hold {
1019 position: absolute;
1020 top: 0;
1021 bottom: 0;
1022 width: 2px;
1023 margin-left: -1px;
1024 background: var(--text);
1025}
1026.meter-readout {
1027 font-size: 12px;
1028 color: var(--muted);
1029 min-width: 90px;
1030 font-variant-numeric: tabular-nums;
1031}
1032.gain-row input[type='range'] {
1033 flex: 1;
1034}
1035.gain-value {
1036 min-width: 40px;
1037 text-align: right;
1038 font-variant-numeric: tabular-nums;
1039}
1040.check-result {
1041 display: flex;
1042 flex-direction: column;
1043 gap: 4px;
1044}
1045.ok-text {
1046 color: var(--green);
1047}
1048.previews {
1049 display: grid;
1050 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
1051 gap: 10px;
1052}
1053.preview {
1054 aspect-ratio: 16 / 9;
1055 background: #000;
1056 border-radius: 6px;
1057 overflow: hidden;
1058}
1059.preview video {
1060 width: 100%;
1061 height: 100%;
1062 object-fit: contain;
1063 display: block;
1064}
1065.preview-empty {
1066 height: 100%;
1067 display: flex;
1068 align-items: center;
1069 justify-content: center;
1070 color: var(--muted);
1071 font-size: 13px;
1072}
1073.rec-controls {
1074 display: flex;
1075 align-items: center;
1076 gap: 10px;
1077 flex-wrap: wrap;
1078 padding: 8px 0;
1079}
1080.rec-indicator {
1081 display: inline-flex;
1082 align-items: center;
1083 gap: 8px;
1084 font-weight: 600;
1085 margin-right: 8px;
1086}
1087.rec-dot {
1088 width: 12px;
1089 height: 12px;
1090 border-radius: 50%;
1091 background: var(--red);
1092 animation: blink 1.2s infinite;
1093}
1094.rec-indicator.paused .rec-dot {
1095 background: var(--amber);
1096 animation: none;
1097}
1098@keyframes blink {
1099 50% {
1100 opacity: 0.3;
1101 }
1102}
1103.notes-panel {
1104 position: sticky;
1105 top: 70px;
1106 max-height: calc(100vh - 90px);
1107}
1108.notes-view {
1109 white-space: pre-wrap;
1110 font-size: 18px;
1111 line-height: 1.6;
1112 overflow: auto;
1113}
1114.countdown-overlay {
1115 position: fixed;
1116 inset: 0;
1117 background: rgba(0, 0, 0, 0.55);
1118 display: flex;
1119 align-items: center;
1120 justify-content: center;
1121 z-index: 200;
1122 pointer-events: none;
1123}
1124.countdown-num {
1125 font-size: 180px;
1126 font-weight: 700;
1127 color: white;
1128 text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
1129}
1131/* ---- prompter ---- */
1132.prompter {
1133 height: 100vh;
1134 display: flex;
1135 flex-direction: column;
1136}
1137.prompter-bar {
1138 display: flex;
1139 align-items: center;
1140 gap: 8px;
1141 padding: 10px 14px;
1142 background: var(--panel);
1143 border-bottom: 1px solid var(--border);
1144}
1145.prompter-tools {
1146 display: flex;
1147 align-items: center;
1148 gap: 8px;
1149 padding: 6px 14px;
1150 border-bottom: 1px solid var(--border);
1151}
1152.prompter-body {
1153 flex: 1;
1154 overflow: auto;
1155 padding: 24px 28px;
1156 white-space: pre-wrap;
1157 line-height: 1.5;
1158}
1160/* ---- settings ---- */
1161.settings {
1162 max-width: 760px;
1163 width: 100%;
1164 margin: 0 auto;
1165 padding: 20px 16px;
1166 display: flex;
1167 flex-direction: column;
1168 gap: 16px;
1169}
1170.settings p {
1171 margin: 0;
1172}
1173.settings .row > span {
1174 min-width: 240px;
1175}
1177.ok-text {
1178 color: var(--green);
1179}
1180.matte-status {
1181 display: flex;
1182 flex-direction: column;
1183 gap: 4px;
1184}
1185.matte-status p {
1186 margin: 4px 0 0;
1187}
1188.progress.mini {
1189 width: 120px;
1190 height: 6px;
1191}