1:root {
2 color-scheme: dark;
3 --sv-background: #0f1115;
4 --sv-surface: #171a21;
5 --sv-surface-variant: #1d2129;
6 --sv-text: #e8ebf0;
7 --sv-muted: #9aa3b2;
8 --sv-border: #2a313d;
9 --sv-success: var(--sv-accent, #8ab4ff);
10 --sv-danger: #ef4444;
11 --sv-danger-text: #fecaca;
12 --sv-radius-card: 0.5rem;
13 --sv-radius-control: 0.35rem;
14 --sv-radius-chip: 0.45rem;
15}
16
17body {
18 margin: 0;
19 font-family: var(--sv-font-sans, Inter), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
20 font-size: var(--sv-font-size, 14px);
21 background: var(--sv-background, #0f1115);
22 color: var(--sv-text, #e8ebf0);
23}
24
25.sv-app {
26 min-height: 100vh;
27 background: var(--sv-background, #0f1115);
28 color: var(--sv-text, #e8ebf0);
29}
30
31.sv-app.sv-dark {
32 color-scheme: dark;
33}
34
35.sv-app.sv-light {
36 color-scheme: light;
37 --sv-background: #f8fafc;
38 --sv-surface: #ffffff;
39 --sv-surface-variant: #eef2f7;
40 --sv-text: #111827;
41 --sv-muted: #64748b;
42 --sv-border: #d7dee8;
43 --sv-primary: #2563eb;
44 --sv-danger: #dc2626;
45 --sv-danger-text: #7f1d1d;
46}
47
48
49.sv-shell {
50 display: grid;
51 gap: 1rem;
52 padding: 1rem;
53}
54
55.sv-title {
56 display: flex;
57 flex-wrap: wrap;
58 gap: 0.45rem;
59 align-items: baseline;
60 margin: 0;
61 font-size: clamp(1.35rem, 2.4vw, 2rem);
62 line-height: 1.15;
63}
64
65.sv-title-detail {
66 color: var(--sv-muted);
67 font-size: clamp(0.9rem, 1.25vw, 1.05rem);
68 font-weight: 600;
69 letter-spacing: 0;
70}
71
72.sv-content {
73 display: grid;
74 gap: 1rem;
75}
76
77.sv-section > h2 {
78 margin: 0 0 0.75rem;
79 font-size: 1rem;
80 letter-spacing: 0.02em;
81}
82
83.sv-list {
84 display: grid;
85 gap: 0.6rem;
86 margin: 0.75rem 0 0;
87 padding: 0;
88 list-style: none;
89}
90
91.sv-list-row {
92 padding: 0.75rem;
93 border: 1px solid var(--sv-border, #2a313d);
94 border-radius: var(--sv-radius-card, 0.5rem);
95 background: color-mix(in srgb, var(--sv-surface-variant, #1d2129) 72%, transparent);
96}
97
98.sv-link {
99 color: var(--sv-accent, #8ab4ff);
100 font-weight: 700;
101 text-decoration: none;
102}
103
104.sv-link:hover {
105 text-decoration: underline;
106}
107
108.sv-badge {
109 display: inline-flex;
110 align-items: center;
111 border: 1px solid var(--sv-border, #2a313d);
112 border-radius: 999px;
113 padding: 0.15rem 0.45rem;
114 background: var(--sv-surface-variant, #1d2129);
115 color: var(--sv-muted, #9aa3b2);
116 font-size: 12px;
117 font-weight: 700;
118}
119
120.sv-header {
121 background: var(--sv-surface-variant, #1d2129);
122 border: 1px solid var(--sv-border, #2a313d);
123 border-radius: var(--sv-radius-card, 0.5rem);
124 padding: 1rem;
125}
126
127.sv-section {
128 background: var(--sv-surface, #171a21);
129 border: 1px solid var(--sv-border, #2a313d);
130 border-radius: var(--sv-radius-card, 0.5rem);
131 padding: 1rem;
132}
133
134.sv-meta {
135 color: var(--sv-muted, #9aa3b2);
136 font-size: 12px;
137}
138
139.sv-group {
140 margin-top: 1rem;
141 padding: 1rem;
142 border: 1px solid var(--sv-border, #2a313d);
143 border-radius: var(--sv-radius-card, 0.5rem);
144 background: var(--sv-surface, #171a21);
145}
146
147.sv-group-header {
148 display: flex;
149 justify-content: space-between;
150 gap: 1rem;
151 align-items: baseline;
152}
153
154.sv-group-header h4 {
155 margin: 0;
156}
157
158.sv-group-body {
159 display: grid;
160 gap: 0.75rem;
161 margin-top: 0.75rem;
162}
163
164.sv-binding {
165 padding-top: 0.75rem;
166 border-top: 1px solid var(--sv-border, #2a313d);
167 display: grid;
168 gap: 0.5rem;
169}
170
171.sv-group-body > .sv-binding:first-child {
172 padding-top: 0;
173 border-top: 0;
174}
175
176.sv-binding-header {
177 display: flex;
178 justify-content: space-between;
179 gap: 1rem;
180 align-items: flex-start;
181}
182
183.sv-binding-description {
184 font-weight: 600;
185}
186
187.sv-binding-keys {
188 display: flex;
189 flex-wrap: wrap;
190 gap: 0.35rem;
191 justify-content: flex-end;
192}
193
194.sv-key {
195 display: inline-flex;
196 align-items: center;
197 padding: 0.2rem 0.45rem;
198 border-radius: var(--sv-radius-control, 0.35rem);
199 border: 1px solid var(--sv-border, #2a313d);
200 background: var(--sv-surface-variant, #1d2129);
201 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
202 font-size: 12px;
203}
204
205.sv-binding-meta {
206 display: flex;
207 flex-wrap: wrap;
208 gap: 0.35rem 1rem;
209 color: var(--sv-muted, #9aa3b2);
210 font-size: 12px;
211}
212
213.sv-empty {
214 color: var(--sv-muted, #9aa3b2);
215}
216
217.sv-loading-panel,
218.sv-loading-card {
219 display: inline-flex;
220 align-items: center;
221 gap: 0.55rem;
222 color: var(--sv-muted, #9aa3b2);
223}
224
225.sv-loading-panel {
226 min-height: 4rem;
227 border: 1px solid var(--sv-border, #2a313d);
228 border-radius: var(--sv-radius-card, 0.5rem);
229 padding: 0.85rem;
230 background: var(--sv-surface-variant, #1d2129);
231}
232
233.sv-spinner {
234 width: 1rem;
235 height: 1rem;
236 border: 2px solid color-mix(in srgb, var(--sv-muted, #9aa3b2) 35%, transparent);
237 border-top-color: var(--sv-accent, #8ab4ff);
238 border-radius: 999px;
239 animation: sv-spin 0.75s linear infinite;
240}
241
242.sv-history-load-more {
243 display: flex;
244 justify-content: center;
245 padding: 1rem 0 0.25rem;
246}
247
248@keyframes sv-spin {
249 to {
250 transform: rotate(360deg);
251 }
252}
253
254.sv-stat-grid {
255 display: grid;
256 grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
257 gap: 0.75rem;
258 margin-top: 0.75rem;
259}
260
261.sv-stat-card {
262 display: grid;
263 gap: 0.15rem;
264 padding: 0.75rem;
265 border: 1px solid var(--sv-border, #2a313d);
266 border-radius: var(--sv-radius-card, 0.5rem);
267 background: var(--sv-surface-variant, #1d2129);
268}
269
270.sv-stat-value {
271 color: var(--sv-accent, #8ab4ff);
272 font-size: 1.35rem;
273 font-weight: 700;
274 line-height: 1.05;
275 font-variant-numeric: tabular-nums;
276}
277
278.sv-stat-label {
279 color: var(--sv-muted, #9aa3b2);
280 font-size: 12px;
281 text-transform: uppercase;
282 letter-spacing: 0.08em;
283}
284
285.sv-domain-list {
286 display: flex;
287 flex-wrap: wrap;
288 gap: 0.35rem;
289 max-height: 4rem;
290 margin-top: 0.5rem;
291 overflow: hidden;
292}
293
294.sv-domain-chip {
295 display: inline-flex;
296 gap: 0.35rem;
297 align-items: center;
298 max-width: 13rem;
299 min-width: 0;
300 padding: 0.25rem 0.35rem 0.25rem 0.5rem;
301 border: 1px solid var(--sv-border, #2a313d);
302 border-radius: var(--sv-radius-chip, 0.45rem);
303 background: var(--sv-surface-variant, #1d2129);
304}
305
306.sv-domain-chip-main {
307 display: inline-flex;
308 gap: 0.3rem;
309 align-items: baseline;
310 min-width: 0;
311}
312
313.sv-domain-meta {
314 flex: 0 0 auto;
315 white-space: nowrap;
316}
317
318.sv-domain-meta,
319.sv-history-meta,
320.sv-history-url {
321 color: var(--sv-muted, #9aa3b2);
322 font-size: 12px;
323}
324
325.sv-timeline-group + .sv-timeline-group {
326 margin-top: 1rem;
327}
328
329.sv-timeline-group h3 {
330 margin: 0 0 0.5rem;
331 color: var(--sv-muted, #9aa3b2);
332 font-size: 12px;
333 letter-spacing: 0.08em;
334 text-transform: uppercase;
335}
336
337.sv-history-item {
338 display: grid;
339 grid-template-columns: minmax(0, 1fr) auto;
340 gap: 1rem;
341 align-items: start;
342}
343
344.sv-history-content {
345 display: grid;
346 grid-template-columns: 24px minmax(0, 1fr);
347 gap: 0.75rem;
348 align-items: start;
349 min-width: 0;
350}
351
352.sv-history-favicon {
353 position: relative;
354 display: inline-grid;
355 place-items: center;
356 width: 24px;
357 height: 24px;
358 overflow: hidden;
359 color: var(--sv-muted, #9aa3b2);
360 font-size: 0.75rem;
361 font-weight: 800;
362 line-height: 1;
363 text-transform: uppercase;
364}
365
366.sv-history-favicon img {
367 position: absolute;
368 inset: 0;
369 z-index: 1;
370 width: 24px;
371 height: 24px;
372 object-fit: contain;
373}
374
375.sv-history-favicon-fallback {
376 position: relative;
377 z-index: 0;
378}
379
380.sv-history-favicon-has-image .sv-history-favicon-fallback {
381 visibility: hidden;
382}
383
384.sv-history-main {
385 min-width: 0;
386}
387
388.sv-history-url,
389.sv-history-meta {
390 margin: 0.25rem 0 0;
391}
392
393.sv-history-url {
394 display: -webkit-box;
395 max-width: 100%;
396 overflow: hidden;
397 overflow-wrap: anywhere;
398 -webkit-box-orient: vertical;
399 -webkit-line-clamp: 2;
400 line-clamp: 2;
401}
402
403.sv-app.sv-dark .sv-history-meta {
404 color: var(--sv-text, #e8ebf0);
405}
406
407.sv-error {
408 border: 1px solid color-mix(in srgb, var(--sv-danger, #ef4444) 65%, var(--sv-border, #2a313d));
409 background: color-mix(in srgb, var(--sv-danger, #ef4444) 12%, var(--sv-surface, #171a21));
410 border-radius: var(--sv-radius-card, 0.5rem);
411 color: var(--sv-text, #e8ebf0);
412 padding: 1rem;
413}
414
415.sv-error p {
416 margin: 0;
417}
418
419.sv-error p + p {
420 margin-top: 0.5rem;
421}
422
423.sv-kv {
424 margin: 0.75rem 0 0;
425 display: grid;
426 gap: 0.25rem;
427}
428
429.sv-kv-row {
430 display: grid;
431 grid-template-columns: minmax(12rem, 35%) minmax(0, 1fr);
432 gap: 0.25rem 1rem;
433 padding: 0.5rem 0;
434}
435
436.sv-kv-row + .sv-kv-row {
437 border-top: 1px solid var(--sv-border, #2a313d);
438}
439
440.sv-kv-row dt,
441.sv-kv-row dd {
442 margin: 0;
443 min-width: 0;
444 overflow-wrap: anywhere;
445}
446
447.sv-kv-row dt {
448 color: var(--sv-muted, #9aa3b2);
449 font-weight: 600;
450}
451.sv-alert {
452 border-radius: var(--sv-radius-card, 0.5rem);
453 padding: 0.75rem 1rem;
454 border: 1px solid var(--sv-border, #2a313d);
455 transition: opacity 180ms ease, transform 180ms ease;
456}
457
458.sv-alert-dismiss {
459 opacity: 0;
460 transform: translateY(-0.25rem);
461}
462
463.sv-alert-success {
464 background: color-mix(in srgb, var(--sv-success, #8ab4ff) 14%, var(--sv-surface, #171a21));
465 border-color: color-mix(in srgb, var(--sv-success, #8ab4ff) 62%, var(--sv-border, #2a313d));
466}
467
468.sv-alert-error {
469 color: var(--sv-danger-text, #fecaca);
470 background: color-mix(in srgb, var(--sv-danger, #ef4444) 12%, var(--sv-surface, #171a21));
471 border-color: color-mix(in srgb, var(--sv-danger, #ef4444) 72%, var(--sv-border, #2a313d));
472}
473
474.sv-toolbar,
475.sv-button-row,
476.sv-active-filters,
477.sv-history-actions-panel,
478.sv-history-row-actions {
479 display: flex;
480 flex-wrap: wrap;
481 gap: 0.5rem;
482 align-items: center;
483}
484
485.sv-toolbar {
486 align-items: end;
487}
488
489.sv-history-actions-panel {
490 margin-top: 0.75rem;
491 justify-content: space-between;
492}
493
494.sv-search-label {
495 display: grid;
496 gap: 0.25rem;
497 min-width: min(24rem, 100%);
498 color: var(--sv-muted, #9aa3b2);
499 font-size: 12px;
500 font-weight: 600;
501}
502
503.sv-search-label input {
504 border: 1px solid var(--sv-border, #2a313d);
505 border-radius: var(--sv-radius-control, 0.35rem);
506 padding: 0.55rem 0.65rem;
507 background: var(--sv-surface-variant, #1d2129);
508 color: var(--sv-text, #e8ebf0);
509 font: inherit;
510}
511
512.sv-button {
513 box-sizing: border-box;
514 display: inline-flex;
515 align-items: center;
516 justify-content: center;
517 gap: 0.4rem;
518 min-height: 2rem;
519 border: 1px solid var(--sv-accent, #8ab4ff);
520 border-radius: var(--sv-radius-control, 0.35rem);
521 padding: 0.35rem 0.65rem;
522 background: var(--sv-accent, #8ab4ff);
523 color: var(--sv-background, #0f1115);
524 cursor: pointer;
525 font: inherit;
526 font-weight: 600;
527 text-decoration: none;
528}
529
530.sv-button-secondary {
531 border-color: var(--sv-border, #2a313d);
532 background: var(--sv-surface-variant, #1d2129);
533 color: var(--sv-text, #e8ebf0);
534}
535
536.sv-button-danger {
537 border-color: color-mix(in srgb, var(--sv-danger, #ef4444) 78%, var(--sv-border, #2a313d));
538 background: color-mix(in srgb, var(--sv-danger, #ef4444) 14%, var(--sv-surface-variant, #1d2129));
539 color: var(--sv-danger-text, #fecaca);
540}
541
542.sv-button-danger:hover {
543 background: color-mix(in srgb, var(--sv-danger, #ef4444) 24%, var(--sv-surface-variant, #1d2129));
544}
545
546.sv-button-danger:disabled {
547 color: var(--sv-danger-text, #fecaca);
548 opacity: 0.7;
549}
550
551.sv-button-icon-only {
552 width: 2rem;
553 min-width: 2rem;
554 min-height: 2rem;
555 padding: 0.35rem;
556}
557
558.sv-danger-link {
559 border: 0;
560 padding: 0.15rem 0.2rem;
561 background: transparent;
562 color: var(--sv-danger-text, #fecaca);
563 cursor: pointer;
564 font: inherit;
565 font-weight: 650;
566 text-decoration: none;
567}
568
569.sv-danger-link:hover {
570 color: var(--sv-danger, #ef4444);
571 text-decoration: underline;
572}
573
574.sv-button:focus-visible,
575.sv-icon-button:focus-visible,
576.sv-domain-filter:focus-visible,
577.sv-danger-link:focus-visible,
578.sv-filter-chip button:focus-visible,
579.sv-link:focus-visible,
580.sv-search-label input:focus-visible,
581.sv-card-form input:focus-visible,
582.sv-card-form select:focus-visible,
583.sv-inline-form input:focus-visible,
584.sv-inline-form select:focus-visible,
585.sv-fieldset input:focus-visible,
586.sv-fieldset select:focus-visible {
587 outline: 2px solid var(--sv-accent, #8ab4ff);
588 outline-offset: 2px;
589}
590
591.sv-button:disabled {
592 cursor: not-allowed;
593 opacity: 0.45;
594}
595
596.sv-filter-chip {
597 display: inline-flex;
598 gap: 0.35rem;
599 align-items: center;
600 border: 1px solid var(--sv-border, #2a313d);
601 border-radius: var(--sv-radius-chip, 0.45rem);
602 padding: 0.25rem 0.55rem;
603 background: var(--sv-surface-variant, #1d2129);
604}
605
606.sv-filter-chip button,
607.sv-domain-filter,
608.sv-domain-delete,
609.sv-icon-button {
610 border: 0;
611 background: transparent;
612 color: inherit;
613 cursor: pointer;
614 font: inherit;
615}
616
617.sv-domain-filter {
618 min-width: 0;
619 overflow: hidden;
620 color: var(--sv-text, #e8ebf0);
621 font-weight: 700;
622 padding: 0;
623 text-align: left;
624 text-overflow: ellipsis;
625 white-space: nowrap;
626}
627
628.sv-domain-delete {
629 display: inline-grid;
630 place-items: center;
631 flex: 0 0 auto;
632 width: 1rem;
633 height: 1rem;
634 padding: 0;
635 border-radius: 999px;
636 color: var(--sv-danger-text, #fecaca);
637 font-size: 0.85rem;
638 font-weight: 700;
639 line-height: 1;
640}
641
642.sv-domain-delete:hover {
643 background: color-mix(in srgb, var(--sv-danger, #ef4444) 18%, transparent);
644}
645
646.sv-icon-button {
647 display: inline-flex;
648 align-items: center;
649 justify-content: center;
650 width: 1.75rem;
651 height: 1.75rem;
652 border-radius: 999px;
653}
654
655.sv-icon {
656 flex: 0 0 auto;
657 width: 1rem;
658 height: 1rem;
659 stroke-width: 2.15;
660}
661
662.sv-icon-button .sv-icon {
663 width: 0.95rem;
664 height: 0.95rem;
665}
666
667.sv-sr-only {
668 position: absolute;
669 width: 1px;
670 height: 1px;
671 padding: 0;
672 margin: -1px;
673 overflow: hidden;
674 -webkit-clip-path: inset(50%);
675 clip-path: inset(50%);
676 white-space: nowrap;
677 border: 0;
678}
679
680.sv-danger {
681 color: var(--sv-danger-text, #fecaca);
682}
683
684.sv-icon-button:hover,
685.sv-filter-chip button:hover,
686.sv-domain-filter:hover {
687 background: color-mix(in srgb, var(--sv-accent, #8ab4ff) 12%, transparent);
688}
689
690.sv-confirm-backdrop {
691 position: fixed;
692 inset: 0;
693 z-index: 1000;
694 display: grid;
695 place-items: center;
696 padding: 1rem;
697 background: rgba(0, 0, 0, 0.55);
698 backdrop-filter: blur(2px);
699}
700
701.sv-confirm-dialog {
702 width: min(26rem, 100%);
703 border: 1px solid color-mix(in srgb, var(--sv-danger, #ef4444) 48%, var(--sv-border, #2a313d));
704 border-radius: var(--sv-radius-card, 0.5rem);
705 padding: 1rem;
706 background: var(--sv-surface, #171a21);
707 color: var(--sv-text, #e8ebf0);
708 box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.35);
709}
710
711.sv-confirm-dialog h3 {
712 margin: 0;
713 font-size: 1rem;
714}
715
716.sv-confirm-dialog p {
717 margin: 0.65rem 0 0;
718 color: var(--sv-muted, #9aa3b2);
719}
720
721.sv-confirm-actions {
722 display: flex;
723 justify-content: flex-end;
724 gap: 0.5rem;
725 margin-top: 1rem;
726}
727
728.sv-history-item.sv-focused {
729 outline: 2px solid var(--sv-accent, #8ab4ff);
730 outline-offset: 0.35rem;
731 border-radius: var(--sv-radius-control, 0.35rem);
732}
733
734.sv-key-hints kbd {
735 border: 1px solid var(--sv-border, #2a313d);
736 border-radius: 0.25rem;
737 padding: 0.1rem 0.3rem;
738 background: var(--sv-surface-variant, #1d2129);
739 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
740}
741
742.sv-card-form,
743.sv-inline-form {
744 display: flex;
745 flex-wrap: wrap;
746 gap: 0.65rem;
747 align-items: end;
748 margin-top: 0.75rem;
749}
750
751.sv-card-form {
752 padding: 0.75rem;
753 border: 1px solid var(--sv-border, #2a313d);
754 border-radius: var(--sv-radius-card, 0.5rem);
755 background: var(--sv-surface-variant, #1d2129);
756}
757
758.sv-card-form label,
759.sv-inline-form label,
760.sv-fieldset label {
761 display: grid;
762 gap: 0.25rem;
763 min-width: min(14rem, 100%);
764 color: var(--sv-muted, #9aa3b2);
765 font-size: 12px;
766 font-weight: 600;
767}
768
769.sv-card-form input,
770.sv-card-form select,
771.sv-inline-form input,
772.sv-inline-form select,
773.sv-fieldset input,
774.sv-fieldset select {
775 border: 1px solid var(--sv-border, #2a313d);
776 border-radius: var(--sv-radius-control, 0.35rem);
777 padding: 0.5rem 0.6rem;
778 background: var(--sv-surface-variant, #1d2129);
779 color: var(--sv-text, #e8ebf0);
780 font: inherit;
781}
782
783.sv-card-form input[type="color"],
784.sv-inline-form input[type="color"],
785.sv-fieldset input[type="color"] {
786 width: 4rem;
787 min-width: 4rem;
788 height: 2.1rem;
789 padding: 0.15rem;
790 background: transparent;
791 cursor: pointer;
792}
793
794.sv-card-form input[type="color"]::-webkit-color-swatch-wrapper,
795.sv-inline-form input[type="color"]::-webkit-color-swatch-wrapper,
796.sv-fieldset input[type="color"]::-webkit-color-swatch-wrapper {
797 padding: 0;
798}
799
800.sv-card-form input[type="color"]::-webkit-color-swatch,
801.sv-inline-form input[type="color"]::-webkit-color-swatch,
802.sv-fieldset input[type="color"]::-webkit-color-swatch {
803 border: 0;
804 border-radius: calc(var(--sv-radius-control, 0.35rem) - 0.12rem);
805}
806
807.sv-config-form,
808.sv-fieldset {
809 display: flex;
810 flex-wrap: wrap;
811 gap: 0.65rem;
812 align-items: end;
813}
814
815.sv-fieldset {
816 width: 100%;
817 margin: 0;
818 padding: 0.75rem;
819 border: 1px solid var(--sv-border, #2a313d);
820 border-radius: var(--sv-radius-card, 0.5rem);
821}
822
823.sv-fieldset legend {
824 color: var(--sv-muted, #9aa3b2);
825 font-weight: 700;
826 padding: 0 0.35rem;
827}
828
829.sv-keybinding-row {
830 display: grid;
831 grid-template-columns: minmax(0, 1fr) minmax(18rem, auto);
832 gap: 1rem;
833 align-items: start;
834}
835
836.sv-filter-panel {
837 display: grid;
838 gap: 0.6rem;
839 margin-top: 0.75rem;
840}
841
842.sv-history-row-actions .sv-button {
843 min-width: 4.75rem;
844}
845
846.sv-history-row-actions .sv-button-icon-only {
847 width: 2rem;
848 min-width: 2rem;
849 flex: 0 0 2rem;
850}
851
852.sv-button-active {
853 border-color: var(--sv-accent, #8ab4ff);
854 box-shadow: 0 0 0 1px var(--sv-accent, #8ab4ff) inset;
855}
856
857.sv-tag-picker {
858 display: grid;
859 gap: 0.45rem;
860 min-width: min(22rem, 100%);
861 margin: 0;
862 padding: 0;
863 border: 0;
864}
865
866.sv-tag-picker legend {
867 color: var(--sv-muted, #9aa3b2);
868 font-size: 12px;
869 font-weight: 600;
870}
871
872.sv-card-form .sv-tag-toggle,
873.sv-tag-toggle {
874 display: inline-flex;
875 min-width: 0;
876 color: inherit;
877 font-size: inherit;
878 font-weight: inherit;
879 cursor: pointer;
880}
881
882.sv-tag-toggle input {
883 position: absolute;
884 inline-size: 1px;
885 block-size: 1px;
886 opacity: 0;
887 pointer-events: none;
888}
889
890.sv-tag-toggle span,
891.sv-tag-button {
892 display: inline-flex;
893 align-items: center;
894 gap: 0.35rem;
895}
896
897.sv-tag-toggle > span {
898 min-height: 1.45rem;
899 border: 1px solid var(--sv-border, #2a313d);
900 border-radius: var(--sv-radius-chip, 0.45rem);
901 padding: 0.16rem 0.45rem;
902 background: var(--sv-surface-variant, #1d2129);
903 color: var(--sv-text, #e8ebf0);
904 font-size: 12px;
905 font-weight: 700;
906}
907
908.sv-tag-toggle input:checked + span,
909.sv-tag-button-active {
910 border-color: var(--sv-accent, #8ab4ff);
911 background: var(--sv-accent, #8ab4ff);
912 color: var(--sv-background, #0f1115);
913}
914
915.sv-favorite-item {
916 display: grid;
917 gap: 0.75rem;
918}
919
920.sv-favorite-header {
921 display: flex;
922 justify-content: space-between;
923 gap: 1rem;
924 align-items: start;
925}
926
927.sv-tag-controls {
928 display: flex;
929 flex-wrap: wrap;
930 gap: 0.45rem;
931 align-items: center;
932}
933
934.sv-tag-dot {
935 display: inline-block;
936 width: 0.65rem;
937 height: 0.65rem;
938 border-radius: 999px;
939 margin-right: 0.35rem;
940 border: 1px solid color-mix(in srgb, var(--sv-border, #2a313d) 65%, transparent);
941}
942
943.sv-favorite-item.sv-focused {
944 outline: 2px solid var(--sv-accent, #8ab4ff);
945 outline-offset: 0.35rem;
946 border-radius: var(--sv-radius-control, 0.35rem);
947}
948
949@media (max-width: 720px) {
950 .sv-favorite-header,
951 .sv-keybinding-row,
952 .sv-history-item,
953 .sv-history-actions-panel,
954 .sv-toolbar {
955 display: grid;
956 grid-template-columns: 1fr;
957 }
958
959 .sv-kv-row {
960 grid-template-columns: 1fr;
961 }
962
963 .sv-card-form,
964 .sv-inline-form,
965 .sv-fieldset,
966 .sv-button-row {
967 align-items: stretch;
968 }
969
970 .sv-card-form label,
971 .sv-inline-form label,
972 .sv-fieldset label,
973 .sv-button,
974 .sv-button-secondary {
975 width: 100%;
976 }
977}