@maildeno/editor 0.1.1 → 0.1.2

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/dist/editor.css CHANGED
@@ -22,226 +22,226 @@
22
22
  }
23
23
  .md-input--invalid[data-v-3e558228]:focus { border-color: var(--md-danger); box-shadow: 0 0 0 1px var(--md-danger);
24
24
  }
25
-
26
- /* =========================================================
27
- SELECT ROOT
25
+
26
+ /* =========================================================
27
+ SELECT ROOT
28
28
  ========================================================= */
29
- .md-sel__anchor {
30
- display: flex;
31
- align-items: center;
32
- gap: 0.25rem;
33
- width: 100%;
34
- min-height: 32px;
35
- box-sizing: border-box;
36
- padding: 0 0.375rem 0 0.5rem;
37
- background: var(--md-surface);
38
- border: 1px solid var(--md-border);
39
- border-radius: 0.375rem;
40
- font-size: 13px;
29
+ .md-sel__anchor {
30
+ display: flex;
31
+ align-items: center;
32
+ gap: 0.25rem;
33
+ width: 100%;
34
+ min-height: 32px;
35
+ box-sizing: border-box;
36
+ padding: 0 0.375rem 0 0.5rem;
37
+ background: var(--md-surface);
38
+ border: 1px solid var(--md-border);
39
+ border-radius: 0.375rem;
40
+ font-size: 13px;
41
41
  color: var(--md-text);
42
42
  }
43
- .md-sel__anchor:focus-within {
43
+ .md-sel__anchor:focus-within {
44
44
  border-color: var(--md-primary);
45
45
  }
46
- .md-sel__anchor--open {
46
+ .md-sel__anchor--open {
47
47
  border-color: var(--md-primary);
48
48
  }
49
- .md-sel__anchor--disabled {
50
- background: var(--md-surface-hover);
49
+ .md-sel__anchor--disabled {
50
+ background: var(--md-surface-hover);
51
51
  color: var(--md-text-subtle);
52
- }
53
-
54
- /* =========================================================
55
- SEARCH INPUT
52
+ }
53
+
54
+ /* =========================================================
55
+ SEARCH INPUT
56
56
  ========================================================= */
57
- .md-sel__input {
58
- flex: 1;
59
- min-width: 0;
60
- width: 100%;
61
- box-sizing: border-box;
62
- padding: 0.375rem 0;
63
- border: 0;
64
- outline: none;
65
- background: transparent;
66
- font-family: inherit;
67
- font-size: 13px;
68
- line-height: 1.25rem;
57
+ .md-sel__input {
58
+ flex: 1;
59
+ min-width: 0;
60
+ width: 100%;
61
+ box-sizing: border-box;
62
+ padding: 0.375rem 0;
63
+ border: 0;
64
+ outline: none;
65
+ background: transparent;
66
+ font-family: inherit;
67
+ font-size: 13px;
68
+ line-height: 1.25rem;
69
69
  color: var(--md-text);
70
70
  }
71
- .md-sel__input::placeholder {
71
+ .md-sel__input::placeholder {
72
72
  color: var(--md-text-subtle);
73
- }
74
-
75
- /* =========================================================
76
- NON-FILTERED TRIGGER
73
+ }
74
+
75
+ /* =========================================================
76
+ NON-FILTERED TRIGGER
77
77
  ========================================================= */
78
- .md-sel__triggerText {
79
- flex: 1;
80
- min-width: 0;
81
- box-sizing: border-box;
82
- padding: 0.375rem 0;
83
- border: 0;
84
- outline: none;
85
- background: transparent;
86
- cursor: pointer;
87
- font-family: inherit;
88
- font-size: 13px;
89
- color: var(--md-text);
90
- text-align: left;
91
- overflow: hidden;
92
- text-overflow: ellipsis;
78
+ .md-sel__triggerText {
79
+ flex: 1;
80
+ min-width: 0;
81
+ box-sizing: border-box;
82
+ padding: 0.375rem 0;
83
+ border: 0;
84
+ outline: none;
85
+ background: transparent;
86
+ cursor: pointer;
87
+ font-family: inherit;
88
+ font-size: 13px;
89
+ color: var(--md-text);
90
+ text-align: left;
91
+ overflow: hidden;
92
+ text-overflow: ellipsis;
93
93
  white-space: nowrap;
94
94
  }
95
- .md-sel__ph {
95
+ .md-sel__ph {
96
96
  color: var(--md-text-subtle);
97
- }
98
-
99
- /* =========================================================
100
- CHEVRON
97
+ }
98
+
99
+ /* =========================================================
100
+ CHEVRON
101
101
  ========================================================= */
102
- .md-sel__chev {
103
- display: inline-flex;
104
- align-items: center;
105
- justify-content: center;
106
- flex-shrink: 0;
107
- width: 20px;
108
- height: 20px;
109
- padding: 0;
110
- border: 0;
111
- outline: none;
112
- background: transparent;
113
- cursor: pointer;
114
- color: var(--md-text-muted);
115
- transition:
116
- transform 150ms ease,
102
+ .md-sel__chev {
103
+ display: inline-flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ flex-shrink: 0;
107
+ width: 20px;
108
+ height: 20px;
109
+ padding: 0;
110
+ border: 0;
111
+ outline: none;
112
+ background: transparent;
113
+ cursor: pointer;
114
+ color: var(--md-text-muted);
115
+ transition:
116
+ transform 150ms ease,
117
117
  color 150ms ease;
118
118
  }
119
- .md-sel__chev--open {
120
- transform: rotate(180deg);
119
+ .md-sel__chev--open {
120
+ transform: rotate(180deg);
121
121
  color: var(--md-text);
122
- }
123
-
124
- /* =========================================================
125
- DROPDOWN
122
+ }
123
+
124
+ /* =========================================================
125
+ DROPDOWN
126
126
  ========================================================= */
127
- .md-sel__content {
128
- position: relative;
129
- z-index: 999999;
130
- width: var(--reka-combobox-trigger-width);
131
- min-width: 180px;
132
- max-width: 320px;
133
- box-sizing: border-box;
134
- background: var(--md-surface);
135
- border: 1px solid var(--md-border);
136
- border-radius: 0.5rem;
137
- box-shadow:
138
- 0 10px 15px -3px rgb(0 0 0 / 0.12),
139
- 0 4px 6px -4px rgb(0 0 0 / 0.12);
127
+ .md-sel__content {
128
+ position: relative;
129
+ z-index: 999999;
130
+ width: var(--reka-combobox-trigger-width);
131
+ min-width: 180px;
132
+ max-width: 320px;
133
+ box-sizing: border-box;
134
+ background: var(--md-surface);
135
+ border: 1px solid var(--md-border);
136
+ border-radius: 0.5rem;
137
+ box-shadow:
138
+ 0 10px 15px -3px rgb(0 0 0 / 0.12),
139
+ 0 4px 6px -4px rgb(0 0 0 / 0.12);
140
140
  overflow: hidden;
141
- }
142
-
143
- /* =========================================================
144
- DROPDOWN VIEWPORT
141
+ }
142
+
143
+ /* =========================================================
144
+ DROPDOWN VIEWPORT
145
145
  ========================================================= */
146
- .md-sel__viewport {
147
- width: 100%;
148
- max-height: 240px;
149
- box-sizing: border-box;
150
- overflow-x: hidden;
151
- overflow-y: auto;
152
- padding: 4px;
146
+ .md-sel__viewport {
147
+ width: 100%;
148
+ max-height: 240px;
149
+ box-sizing: border-box;
150
+ overflow-x: hidden;
151
+ overflow-y: auto;
152
+ padding: 4px;
153
153
  background: var(--md-surface);
154
- }
155
-
156
- /* =========================================================
157
- EMPTY
154
+ }
155
+
156
+ /* =========================================================
157
+ EMPTY
158
158
  ========================================================= */
159
- .md-sel__empty {
160
- display: block;
161
- width: 100%;
162
- box-sizing: border-box;
163
- padding: 8px;
164
- background: var(--md-surface);
165
- font-family: inherit;
166
- font-size: 12px;
167
- color: var(--md-text-subtle);
159
+ .md-sel__empty {
160
+ display: block;
161
+ width: 100%;
162
+ box-sizing: border-box;
163
+ padding: 8px;
164
+ background: var(--md-surface);
165
+ font-family: inherit;
166
+ font-size: 12px;
167
+ color: var(--md-text-subtle);
168
168
  text-align: center;
169
- }
170
-
171
- /* =========================================================
172
- OPTION
169
+ }
170
+
171
+ /* =========================================================
172
+ OPTION
173
173
  ========================================================= */
174
- .md-sel__item {
175
- display: flex;
176
- align-items: center;
177
- justify-content: space-between;
178
- width: 100%;
179
- min-height: 32px;
180
- box-sizing: border-box;
181
- gap: 8px;
182
- padding: 6px 8px;
183
- background: var(--md-surface);
184
- border: 0;
185
- border-radius: 6px;
186
- font-family: inherit;
187
- font-size: 13px;
188
- line-height: 18px;
189
- color: var(--md-text);
190
- cursor: pointer;
191
- outline: none;
174
+ .md-sel__item {
175
+ display: flex;
176
+ align-items: center;
177
+ justify-content: space-between;
178
+ width: 100%;
179
+ min-height: 32px;
180
+ box-sizing: border-box;
181
+ gap: 8px;
182
+ padding: 6px 8px;
183
+ background: var(--md-surface);
184
+ border: 0;
185
+ border-radius: 6px;
186
+ font-family: inherit;
187
+ font-size: 13px;
188
+ line-height: 18px;
189
+ color: var(--md-text);
190
+ cursor: pointer;
191
+ outline: none;
192
192
  user-select: none;
193
193
  }
194
- .md-sel__item:hover {
194
+ .md-sel__item:hover {
195
195
  background: var(--md-surface-muted);
196
196
  }
197
- .md-sel__item[data-highlighted] {
197
+ .md-sel__item[data-highlighted] {
198
198
  background: var(--md-surface-muted);
199
199
  }
200
- .md-sel__item[data-state="checked"] {
201
- background: var(--md-success-bg);
202
- color: var(--md-success-fg);
200
+ .md-sel__item[data-state="checked"] {
201
+ background: var(--md-success-bg);
202
+ color: var(--md-success-fg);
203
203
  font-weight: 500;
204
204
  }
205
- .md-sel__item[data-state="checked"][data-highlighted] {
206
- background: #dcfce7;
207
- }
208
-
209
- /* =========================================================
210
- OPTION TEXT
205
+ .md-sel__item[data-state="checked"][data-highlighted] {
206
+ background: color-mix(in srgb, var(--md-success) 20%, var(--md-success-bg));
207
+ }
208
+
209
+ /* =========================================================
210
+ OPTION TEXT
211
211
  ========================================================= */
212
- .md-sel__itemLabel {
213
- flex: 1;
214
- min-width: 0;
215
- overflow: hidden;
216
- text-overflow: ellipsis;
212
+ .md-sel__itemLabel {
213
+ flex: 1;
214
+ min-width: 0;
215
+ overflow: hidden;
216
+ text-overflow: ellipsis;
217
217
  white-space: nowrap;
218
- }
219
-
220
- /* =========================================================
221
- CHECK
218
+ }
219
+
220
+ /* =========================================================
221
+ CHECK
222
222
  ========================================================= */
223
- .md-sel__check {
224
- display: inline-flex;
225
- align-items: center;
226
- justify-content: center;
227
- flex-shrink: 0;
228
- width: 16px;
229
- height: 16px;
230
- font-size: 12px;
223
+ .md-sel__check {
224
+ display: inline-flex;
225
+ align-items: center;
226
+ justify-content: center;
227
+ flex-shrink: 0;
228
+ width: 16px;
229
+ height: 16px;
230
+ font-size: 12px;
231
231
  color: currentColor;
232
- }
232
+ }
233
233
 
234
- .section-fade-enter-active[data-v-315250dd],
235
- .section-fade-leave-active[data-v-315250dd] {
234
+ .section-fade-enter-active[data-v-9ae9089d],
235
+ .section-fade-leave-active[data-v-9ae9089d] {
236
236
  transition: opacity 0.15s ease, transform 0.15s ease;
237
237
  }
238
- .section-fade-enter-from[data-v-315250dd],
239
- .section-fade-leave-to[data-v-315250dd] {
238
+ .section-fade-enter-from[data-v-9ae9089d],
239
+ .section-fade-leave-to[data-v-9ae9089d] {
240
240
  opacity: 0;
241
241
  transform: translateY(-3px);
242
242
  }
243
243
 
244
- .transparent-swatch[data-v-4f01058e] {
244
+ .transparent-swatch[data-v-e240a193] {
245
245
  background-image:
246
246
  linear-gradient(45deg, #ccc 25%, transparent 25%),
247
247
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
@@ -252,7 +252,7 @@
252
252
  background-color: white;
253
253
  }
254
254
 
255
- .transparent-swatch[data-v-618c08eb] {
255
+ .transparent-swatch[data-v-936cb96e] {
256
256
  background-image:
257
257
  linear-gradient(45deg, #ccc 25%, transparent 25%),
258
258
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
@@ -484,61 +484,61 @@
484
484
  background: transparent;
485
485
  }
486
486
 
487
- .rules-scroll[data-v-a13d36c0] {
488
- overflow-x: auto;
489
- max-width: 100%;
487
+ .rules-scroll[data-v-ce314c0b] {
488
+ overflow-x: auto;
489
+ max-width: 100%;
490
490
  -webkit-overflow-scrolling: touch;
491
491
  }
492
- .rules-scroll[data-v-a13d36c0]::-webkit-scrollbar {
492
+ .rules-scroll[data-v-ce314c0b]::-webkit-scrollbar {
493
493
  height: 6px;
494
494
  }
495
- .rules-scroll[data-v-a13d36c0]::-webkit-scrollbar-track {
496
- background: #f1f1f1;
495
+ .rules-scroll[data-v-ce314c0b]::-webkit-scrollbar-track {
496
+ background: var(--md-surface-muted);
497
497
  border-radius: 4px;
498
498
  }
499
- .rules-scroll[data-v-a13d36c0]::-webkit-scrollbar-thumb {
500
- background: #ccc;
499
+ .rules-scroll[data-v-ce314c0b]::-webkit-scrollbar-thumb {
500
+ background: var(--md-border-strong);
501
501
  border-radius: 4px;
502
502
  }
503
- .rules-scroll[data-v-a13d36c0]::-webkit-scrollbar-thumb:hover {
504
- background: #999;
505
- }
503
+ .rules-scroll[data-v-ce314c0b]::-webkit-scrollbar-thumb:hover {
504
+ background: var(--md-text-subtle);
505
+ }
506
506
 
507
- .toggle-btn[data-v-85d1bec5] {
508
- display: flex;
509
- align-items: center;
510
- justify-content: center;
511
- height: 28px;
512
- border-radius: 6px;
513
- border: 0.5px solid transparent;
514
- cursor: pointer;
515
- transition:
516
- background 0.1s,
517
- border-color 0.1s,
518
- color 0.1s;
519
- background: transparent;
520
- padding: 0;
507
+ .toggle-btn[data-v-2dd9f5a7] {
508
+ display: flex;
509
+ align-items: center;
510
+ justify-content: center;
511
+ height: 28px;
512
+ border-radius: 6px;
513
+ border: 0.5px solid transparent;
514
+ cursor: pointer;
515
+ transition:
516
+ background 0.1s,
517
+ border-color 0.1s,
518
+ color 0.1s;
519
+ background: transparent;
520
+ padding: 0;
521
521
  outline: none;
522
522
  }
523
- .toggle-btn[data-v-85d1bec5]:focus-visible {
524
- box-shadow: 0 0 0 2px oklch(52.7% 0.154 150.069);
525
- }
526
- .toggle-btn--idle[data-v-85d1bec5] {
527
- border-color: #e5e7eb;
528
- color: #6b7280;
523
+ .toggle-btn[data-v-2dd9f5a7]:focus-visible {
524
+ box-shadow: 0 0 0 2px var(--md-selection);
529
525
  }
530
- .toggle-btn--idle[data-v-85d1bec5]:hover {
531
- background: #f9fafb;
532
- border-color: #d1d5db;
526
+ .toggle-btn--idle[data-v-2dd9f5a7] {
527
+ border-color: var(--md-border);
528
+ color: var(--md-text-subtle);
533
529
  }
534
- .toggle-btn--active[data-v-85d1bec5] {
535
- background: #eff6ff;
536
- border-color: #05df72;
537
- color: oklch(72.3% 0.219 149.579);
530
+ .toggle-btn--idle[data-v-2dd9f5a7]:hover {
531
+ background: var(--md-surface-hover);
532
+ border-color: var(--md-border-strong);
538
533
  }
539
- .toggle-btn--active[data-v-85d1bec5]:hover {
540
- background: #dbeafe;
534
+ .toggle-btn--active[data-v-2dd9f5a7] {
535
+ background: var(--md-selection-bg);
536
+ border-color: var(--md-selection);
537
+ color: var(--md-selection-fg);
541
538
  }
539
+ .toggle-btn--active[data-v-2dd9f5a7]:hover {
540
+ background: color-mix(in srgb, var(--md-selection) 20%, var(--md-selection-bg));
541
+ }
542
542
 
543
543
  .md-btn[data-v-cc741dfc] {
544
544
  display: inline-flex;
@@ -640,65 +640,67 @@
640
640
  border: 0;
641
641
  }
642
642
 
643
- [data-v-4650bfba] a {
644
- color: #2563eb;
643
+ [data-v-5aa602c3] a {
644
+ color: #2563eb;
645
645
  cursor: pointer;
646
646
  }
647
- [data-v-4650bfba] a:not([style*="text-decoration"]) {
647
+ [data-v-5aa602c3] a:not([style*="text-decoration"]) {
648
648
  text-decoration: underline;
649
649
  }
650
- [data-v-4650bfba] a:hover {
650
+ [data-v-5aa602c3] a:hover {
651
651
  opacity: 0.8;
652
- }
653
-
654
- /* Merge tag node — inline chip styling.
655
- display:inline ensures the span is exactly as wide as its text content.
656
- No width reservation from hidden raw-tag text since the NodeView
652
+ }
653
+
654
+ /* Merge tag node — inline chip styling.
655
+ display:inline ensures the span is exactly as wide as its text content.
656
+ No width reservation from hidden raw-tag text since the NodeView
657
657
  writes only one text node at a time. */
658
- [data-v-4650bfba] .merge-tag-node {
659
- display: inline;
660
- white-space: nowrap;
661
- vertical-align: baseline;
662
- cursor: default;
663
- border-radius: 3px;
658
+ [data-v-5aa602c3] .merge-tag-node {
659
+ display: inline;
660
+ white-space: nowrap;
661
+ vertical-align: baseline;
662
+ cursor: default;
663
+ border-radius: 3px;
664
664
  padding: 0 2px;
665
- }
666
-
665
+ }
666
+
667
667
  /* List styles — scoped to the editor content area */
668
- [data-v-4650bfba] li:not(:last-child) {
668
+ [data-v-5aa602c3] li:not(:last-child) {
669
669
  margin-bottom: var(--list-item-spacing, 0.25rem);
670
- }
671
-
672
- /* ─── Toolbar font Select sizing ─────────────────────────────────────────────
673
- Constrain the Select to sit flush inside the toolbar row.
674
- The trigger is kept compact (28px tall) and the overlay is widened so
670
+ }
671
+
672
+ /* ─── Toolbar font Select sizing ─────────────────────────────────────────────
673
+ Constrain the Select to sit flush inside the toolbar row.
674
+ The trigger is kept compact (28px tall) and the overlay is widened so
675
675
  long font names are readable without being clipped. */
676
- .toolbar-font-select[data-v-4650bfba] .p-select {
677
- height: 28px;
678
- min-width: 110px;
679
- max-width: 130px;
680
- border-radius: 6px;
681
- border-color: #d1d5db; /* gray-300 — matches other toolbar button borders */
682
- padding: 0 6px;
683
- font-size: 0.75rem;
684
- display: flex;
676
+ .toolbar-font-select[data-v-5aa602c3] .p-select {
677
+ height: 28px;
678
+ min-width: 110px;
679
+ max-width: 130px;
680
+ border-radius: 6px;
681
+ border-color: var(
682
+ --md-toolbar-border
683
+ ); /* matches other toolbar button borders */
684
+ padding: 0 6px;
685
+ font-size: 0.75rem;
686
+ display: flex;
685
687
  align-items: center;
686
688
  }
687
- .toolbar-font-select[data-v-4650bfba] .p-select-label {
688
- padding: 0;
689
- font-size: 0.85rem;
689
+ .toolbar-font-select[data-v-5aa602c3] .p-select-label {
690
+ padding: 0;
691
+ font-size: 0.85rem;
690
692
  line-height: 1;
691
693
  }
692
- .toolbar-font-select[data-v-4650bfba] .p-select-dropdown {
694
+ .toolbar-font-select[data-v-5aa602c3] .p-select-dropdown {
693
695
  width: 20px;
694
- }
695
-
696
+ }
697
+
696
698
  /* Widen the overlay panel so long font names are not clipped */
697
- [data-v-4650bfba] .p-select-overlay {
699
+ [data-v-5aa602c3] .p-select-overlay {
698
700
  min-width: 180px !important;
699
- }
701
+ }
700
702
 
701
- .toggle-btn[data-v-23c99fda] {
703
+ .toggle-btn[data-v-916ac99b] {
702
704
  display: flex;
703
705
  align-items: center;
704
706
  justify-content: center;
@@ -711,59 +713,59 @@
711
713
  padding: 0;
712
714
  outline: none;
713
715
  }
714
- .toggle-btn--idle[data-v-23c99fda] {
715
- border-color: rgba(229,231,235,0.8);
716
- color: #99a1af;
716
+ .toggle-btn--idle[data-v-916ac99b] {
717
+ border-color: color-mix(in srgb, var(--md-border) 80%, transparent);
718
+ color: var(--md-text-subtle);
717
719
  }
718
- .toggle-btn--idle[data-v-23c99fda]:hover {
719
- background: #f9fafb;
720
- border-color: #d1d5db;
721
- color: #6b7280;
720
+ .toggle-btn--idle[data-v-916ac99b]:hover {
721
+ background: var(--md-surface-hover);
722
+ border-color: var(--md-border-strong);
723
+ color: var(--md-text-muted);
722
724
  }
723
- .toggle-btn--active[data-v-23c99fda] {
724
- background: #f0fdf4;
725
- border-color: #4ade80;
726
- color: #16a34a;
725
+ .toggle-btn--active[data-v-916ac99b] {
726
+ background: var(--md-selection-bg);
727
+ border-color: var(--md-selection);
728
+ color: var(--md-selection-fg);
727
729
  }
728
- .toggle-btn--active[data-v-23c99fda]:hover {
729
- background: #dcfce7;
730
+ .toggle-btn--active[data-v-916ac99b]:hover {
731
+ background: color-mix(in srgb, var(--md-selection) 20%, var(--md-selection-bg));
730
732
  }
731
733
 
732
- .panel[data-v-3474739e] {
734
+ .panel[data-v-1ca75986] {
733
735
  padding: 10px 12px;
734
- background: #ffffff;
735
- border: 0.5px solid rgba(229, 231, 235, 0.8);
736
+ background: var(--md-surface);
737
+ border: 0.5px solid color-mix(in srgb, var(--md-border) 80%, transparent);
736
738
  border-radius: 10px;
737
739
  }
738
- .separator[data-v-3474739e] {
740
+ .separator[data-v-1ca75986] {
739
741
  height: 0.5px;
740
- background: rgba(229, 231, 235, 0.8);
742
+ background: color-mix(in srgb, var(--md-border) 80%, transparent);
741
743
  margin-left: -12px;
742
744
  margin-right: -12px;
743
745
  }
744
746
 
745
- .spinner[data-v-ddaffab7] {
746
- width: 50px;
747
- height: 50px;
748
- border: 5px solid rgba(0, 0, 0, 0.2);
749
- border-top-color: #05df72;
750
- border-radius: 50%;
751
- margin: 0 auto;
752
- animation: spin-ddaffab7 1s linear infinite;
747
+ .spinner[data-v-3ea84dc7] {
748
+ width: 50px;
749
+ height: 50px;
750
+ border: 5px solid rgba(0, 0, 0, 0.2);
751
+ border-top-color: var(--md-selection);
752
+ border-radius: 50%;
753
+ margin: 0 auto;
754
+ animation: spin-3ea84dc7 1s linear infinite;
753
755
  }
754
- @keyframes spin-ddaffab7 {
755
- to {
756
+ @keyframes spin-3ea84dc7 {
757
+ to {
756
758
  transform: rotate(360deg);
757
759
  }
758
- }
760
+ }
759
761
 
760
762
  /* ===== DESIGN SYSTEM TOKENS ===== */
761
- .desktop-gate[data-v-52ab9ff1] {
762
- --brand-primary: #2463eb;
763
- --brand-primary-dark: #1b4ec4;
764
- --brand-primary-light: #4b82f0;
765
- --brand-gradient-start: #2463eb;
766
- --brand-gradient-end: #8b5cf6;
763
+ .desktop-gate[data-v-561a092b] {
764
+ --brand-primary: #4a7c59;
765
+ --brand-primary-dark: #3a5a40;
766
+ --brand-primary-light: #3a5a40;
767
+ --brand-gradient-start: #4a7c59;
768
+ --brand-gradient-end: #3a5a40;
767
769
  --gray-50: #f9fafb;
768
770
  --gray-100: #f3f4f6;
769
771
  --gray-200: #e5e7eb;
@@ -784,7 +786,7 @@ to {
784
786
  }
785
787
 
786
788
  /* ===== MAIN LAYOUT ===== */
787
- .desktop-gate[data-v-52ab9ff1] {
789
+ .desktop-gate[data-v-561a092b] {
788
790
  position: fixed;
789
791
  inset: 0;
790
792
  z-index: 9999;
@@ -799,7 +801,7 @@ to {
799
801
  backdrop-filter: blur(2px);
800
802
  padding: 1.5rem;
801
803
  }
802
- .gate-container[data-v-52ab9ff1] {
804
+ .gate-container[data-v-561a092b] {
803
805
  max-width: 520px;
804
806
  width: 100%;
805
807
  background: white;
@@ -807,12 +809,12 @@ to {
807
809
  padding: 2.5rem;
808
810
  text-align: center;
809
811
  box-shadow: var(--shadow-2xl);
810
- animation: fadeInUp-52ab9ff1 0.5s cubic-bezier(0.16, 1, 0.3, 1);
812
+ animation: fadeInUp-561a092b 0.5s cubic-bezier(0.16, 1, 0.3, 1);
811
813
  border: 1px solid var(--gray-200);
812
814
  }
813
815
 
814
816
  /* ===== BRAND BADGE ===== */
815
- .brand-badge[data-v-52ab9ff1] {
817
+ .brand-badge[data-v-561a092b] {
816
818
  position: relative;
817
819
  width: 80px;
818
820
  height: 80px;
@@ -821,7 +823,7 @@ to {
821
823
  align-items: center;
822
824
  justify-content: center;
823
825
  }
824
- .badge-ring[data-v-52ab9ff1] {
826
+ .badge-ring[data-v-561a092b] {
825
827
  position: absolute;
826
828
  inset: 0;
827
829
  border-radius: 50%;
@@ -830,9 +832,9 @@ to {
830
832
  var(--brand-gradient-start),
831
833
  var(--brand-gradient-end)
832
834
  );
833
- animation: pulseRing-52ab9ff1 2s ease-out infinite;
835
+ animation: pulseRing-561a092b 2s ease-out infinite;
834
836
  }
835
- .badge-icon[data-v-52ab9ff1] {
837
+ .badge-icon[data-v-561a092b] {
836
838
  position: relative;
837
839
  width: 56px;
838
840
  height: 56px;
@@ -845,19 +847,19 @@ to {
845
847
  box-shadow: var(--shadow-md);
846
848
  transition: transform 0.2s ease;
847
849
  }
848
- .gate-container:hover .badge-icon[data-v-52ab9ff1] {
850
+ .gate-container:hover .badge-icon[data-v-561a092b] {
849
851
  transform: scale(1.02);
850
852
  }
851
853
 
852
854
  /* ===== TYPOGRAPHY ===== */
853
- .gate-title[data-v-52ab9ff1] {
855
+ .gate-title[data-v-561a092b] {
854
856
  font-size: 1.875rem;
855
857
  font-weight: 700;
856
858
  letter-spacing: -0.02em;
857
859
  margin: 0 0 1rem 0;
858
860
  color: var(--gray-900);
859
861
  }
860
- .brand-gradient[data-v-52ab9ff1] {
862
+ .brand-gradient[data-v-561a092b] {
861
863
  background: linear-gradient(
862
864
  135deg,
863
865
  var(--brand-gradient-start),
@@ -867,7 +869,7 @@ to {
867
869
  -webkit-background-clip: text;
868
870
  color: transparent;
869
871
  }
870
- .gate-description[data-v-52ab9ff1] {
872
+ .gate-description[data-v-561a092b] {
871
873
  font-size: 1rem;
872
874
  line-height: 1.5;
873
875
  color: var(--gray-600);
@@ -875,7 +877,7 @@ to {
875
877
  }
876
878
 
877
879
  /* ===== FEATURE GRID ===== */
878
- .feature-grid[data-v-52ab9ff1] {
880
+ .feature-grid[data-v-561a092b] {
879
881
  display: flex;
880
882
  justify-content: center;
881
883
  gap: 2rem;
@@ -884,7 +886,7 @@ to {
884
886
  border-top: 1px solid var(--gray-200);
885
887
  border-bottom: 1px solid var(--gray-200);
886
888
  }
887
- .feature-item[data-v-52ab9ff1] {
889
+ .feature-item[data-v-561a092b] {
888
890
  display: flex;
889
891
  flex-direction: column;
890
892
  align-items: center;
@@ -893,7 +895,7 @@ to {
893
895
  font-weight: 500;
894
896
  color: var(--gray-700);
895
897
  }
896
- .feature-icon[data-v-52ab9ff1] {
898
+ .feature-icon[data-v-561a092b] {
897
899
  width: 36px;
898
900
  height: 36px;
899
901
  background: var(--gray-100);
@@ -904,14 +906,14 @@ to {
904
906
  color: var(--brand-primary);
905
907
  transition: all 0.2s ease;
906
908
  }
907
- .feature-item:hover .feature-icon[data-v-52ab9ff1] {
909
+ .feature-item:hover .feature-icon[data-v-561a092b] {
908
910
  background: var(--brand-primary);
909
911
  color: white;
910
912
  transform: translateY(-2px);
911
913
  }
912
914
 
913
915
  /* ===== STATUS ===== */
914
- .detection-status[data-v-52ab9ff1] {
916
+ .detection-status[data-v-561a092b] {
915
917
  display: inline-flex;
916
918
  align-items: center;
917
919
  gap: 0.5rem;
@@ -922,16 +924,16 @@ to {
922
924
  font-weight: 500;
923
925
  color: var(--gray-600);
924
926
  }
925
- .status-dot[data-v-52ab9ff1] {
927
+ .status-dot[data-v-561a092b] {
926
928
  width: 8px;
927
929
  height: 8px;
928
930
  background: #f59e0b;
929
931
  border-radius: 50%;
930
- animation: pulse-52ab9ff1 1.5s ease-out infinite;
932
+ animation: pulse-561a092b 1.5s ease-out infinite;
931
933
  }
932
934
 
933
935
  /* ===== FOOTER ===== */
934
- .gate-footer[data-v-52ab9ff1] {
936
+ .gate-footer[data-v-561a092b] {
935
937
  margin-top: 2rem;
936
938
  padding-top: 1.5rem;
937
939
  display: flex;
@@ -941,7 +943,7 @@ to {
941
943
  font-size: 0.75rem;
942
944
  color: var(--gray-400);
943
945
  }
944
- .brand-text[data-v-52ab9ff1] {
946
+ .brand-text[data-v-561a092b] {
945
947
  font-weight: 600;
946
948
  background: linear-gradient(
947
949
  135deg,
@@ -954,7 +956,7 @@ to {
954
956
  }
955
957
 
956
958
  /* ===== ANIMATIONS ===== */
957
- @keyframes fadeInUp-52ab9ff1 {
959
+ @keyframes fadeInUp-561a092b {
958
960
  from {
959
961
  opacity: 0;
960
962
  transform: translateY(20px);
@@ -964,7 +966,7 @@ to {
964
966
  transform: translateY(0);
965
967
  }
966
968
  }
967
- @keyframes pulseRing-52ab9ff1 {
969
+ @keyframes pulseRing-561a092b {
968
970
  0% {
969
971
  opacity: 1;
970
972
  transform: scale(0.95);
@@ -978,7 +980,7 @@ to {
978
980
  transform: scale(1.25);
979
981
  }
980
982
  }
981
- @keyframes pulse-52ab9ff1 {
983
+ @keyframes pulse-561a092b {
982
984
  0%,
983
985
  100% {
984
986
  opacity: 1;
@@ -990,18 +992,18 @@ to {
990
992
 
991
993
  /* ===== RESPONSIVE TOUCH-UPS ===== */
992
994
  @media (max-width: 480px) {
993
- .gate-container[data-v-52ab9ff1] {
995
+ .gate-container[data-v-561a092b] {
994
996
  padding: 2rem 1.5rem;
995
997
  }
996
- .gate-title[data-v-52ab9ff1] {
998
+ .gate-title[data-v-561a092b] {
997
999
  font-size: 1.5rem;
998
1000
  }
999
- .feature-grid[data-v-52ab9ff1] {
1001
+ .feature-grid[data-v-561a092b] {
1000
1002
  gap: 1.25rem;
1001
1003
  }
1002
1004
  }
1003
1005
 
1004
- .row-drop-bar[data-v-ec871cea] {
1006
+ .row-drop-bar[data-v-601d4b22] {
1005
1007
  position: absolute;
1006
1008
  left: 0;
1007
1009
  right: 0;
@@ -1010,21 +1012,21 @@ to {
1010
1012
  align-items: center;
1011
1013
  gap: 8px;
1012
1014
  padding: 0 16px;
1013
- background: var(--drop-color-bg);
1015
+ background: color-mix(in srgb, var(--drop-color) 5%, transparent);
1014
1016
  border-radius: 6px;
1015
1017
  z-index: 20;
1016
1018
  pointer-events: none;
1017
1019
  }
1018
- .row-drop-bar--before[data-v-ec871cea] {
1020
+ .row-drop-bar--before[data-v-601d4b22] {
1019
1021
  top: -14px;
1020
1022
  }
1021
- .row-drop-bar--after[data-v-ec871cea] {
1023
+ .row-drop-bar--after[data-v-601d4b22] {
1022
1024
  bottom: -14px;
1023
1025
  }
1024
- .row-drop-bar-line[data-v-ec871cea] {
1026
+ .row-drop-bar-line[data-v-601d4b22] {
1025
1027
  flex: 1;
1026
1028
  height: 2px;
1027
- background: var(--drop-color-line);
1029
+ background: color-mix(in srgb, var(--drop-color) 50%, transparent);
1028
1030
  border-radius: 2px;
1029
1031
  /* animation: bar-expand 0.18s ease forwards; */
1030
1032
  }
@@ -1039,7 +1041,7 @@ to {
1039
1041
  opacity: 1;
1040
1042
  }
1041
1043
  } */
1042
- .row-drop-bar-label[data-v-ec871cea] {
1044
+ .row-drop-bar-label[data-v-601d4b22] {
1043
1045
  display: flex;
1044
1046
  align-items: center;
1045
1047
  gap: 6px;
@@ -1048,8 +1050,8 @@ to {
1048
1050
  color: var(--drop-color);
1049
1051
  white-space: nowrap;
1050
1052
  padding: 4px 12px;
1051
- background: var(--drop-color-pill-bg);
1052
- border: 1px solid var(--drop-color-pill-border);
1053
+ background: color-mix(in srgb, var(--drop-color) 10%, transparent);
1054
+ border: 1px solid color-mix(in srgb, var(--drop-color) 30%, transparent);
1053
1055
  border-radius: 24px;
1054
1056
  /* animation: label-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; */
1055
1057
  }
@@ -1064,7 +1066,7 @@ to {
1064
1066
  opacity: 1;
1065
1067
  }
1066
1068
  } */
1067
- .row-drop-bar-icon[data-v-ec871cea] {
1069
+ .row-drop-bar-icon[data-v-601d4b22] {
1068
1070
  width: 12px;
1069
1071
  height: 12px;
1070
1072
  flex-shrink: 0;
@@ -1090,12 +1092,12 @@ to {
1090
1092
  }
1091
1093
  } */
1092
1094
 
1093
- .fade-enter-active[data-v-83e65439],
1094
- .fade-leave-active[data-v-83e65439] {
1095
+ .fade-enter-active[data-v-7f93ba61],
1096
+ .fade-leave-active[data-v-7f93ba61] {
1095
1097
  transition: opacity 0.1s ease;
1096
1098
  }
1097
- .fade-enter-from[data-v-83e65439],
1098
- .fade-leave-to[data-v-83e65439] {
1099
+ .fade-enter-from[data-v-7f93ba61],
1100
+ .fade-leave-to[data-v-7f93ba61] {
1099
1101
  opacity: 0;
1100
1102
  }
1101
1103
 
@@ -1117,16 +1119,16 @@ to {
1117
1119
  * child is capped within this column's own stacking context and can never
1118
1120
  * exceed a sibling row painted at z-index: 0 in normal flow.
1119
1121
  */
1120
- .canvas-column[data-v-83e65439] {
1122
+ .canvas-column[data-v-7f93ba61] {
1121
1123
  position: relative;
1122
1124
  z-index: 1;
1123
1125
  }
1124
- .canvas-column.has-selected-child[data-v-83e65439] {
1126
+ .canvas-column.has-selected-child[data-v-7f93ba61] {
1125
1127
  z-index: auto;
1126
1128
  }
1127
1129
 
1128
1130
  /* ── Base zone ─────────────────────────────────────────────── */
1129
- .canvas-drop-zone[data-v-a85cd0b8] {
1131
+ .canvas-drop-zone[data-v-cc281ed8] {
1130
1132
  position: relative;
1131
1133
  height: 0;
1132
1134
  margin: 0;
@@ -1136,18 +1138,18 @@ to {
1136
1138
  }
1137
1139
 
1138
1140
  /* Full expansion on hover */
1139
- .canvas-drop-zone--active[data-v-a85cd0b8] {
1141
+ .canvas-drop-zone--active[data-v-cc281ed8] {
1140
1142
  height: 52px;
1141
1143
  }
1142
1144
 
1143
1145
  /* Empty-canvas variant — fills the whole empty area */
1144
- .canvas-drop-zone--empty[data-v-a85cd0b8] {
1146
+ .canvas-drop-zone--empty[data-v-cc281ed8] {
1145
1147
  height: 100%;
1146
1148
  min-height: 200px;
1147
1149
  }
1148
1150
 
1149
1151
  /* Full height variant - takes up entire parent container */
1150
- .canvas-drop-zone--full[data-v-a85cd0b8] {
1152
+ .canvas-drop-zone--full[data-v-cc281ed8] {
1151
1153
  position: absolute;
1152
1154
  top: 0;
1153
1155
  left: 0;
@@ -1156,29 +1158,33 @@ to {
1156
1158
  height: auto;
1157
1159
  min-height: 100%;
1158
1160
  }
1159
- .canvas-drop-zone--empty .cdz-bar[data-v-a85cd0b8] {
1161
+ .canvas-drop-zone--empty .cdz-bar[data-v-cc281ed8] {
1160
1162
  inset: 12px;
1161
1163
  justify-content: center;
1162
1164
  border-radius: 12px;
1163
1165
  }
1164
1166
 
1165
1167
  /* ── Empty state styles (when fullHeight is true) ── */
1166
- .cdz-empty-state[data-v-a85cd0b8] {
1168
+ .cdz-empty-state[data-v-cc281ed8] {
1167
1169
  position: absolute;
1168
1170
  inset: 0;
1169
1171
  display: flex;
1170
1172
  align-items: center;
1171
1173
  justify-content: center;
1172
1174
  pointer-events: none;
1173
- background: linear-gradient(135deg, #faf9ff 0%, #f5f3ff 100%);
1174
- border: 2px dashed #e0e7ff;
1175
+ background: linear-gradient(
1176
+ 135deg,
1177
+ color-mix(in srgb, var(--md-row-selection) 4%, var(--md-surface)) 0%,
1178
+ color-mix(in srgb, var(--md-row-selection) 8%, var(--md-surface)) 100%
1179
+ );
1180
+ border: 2px dashed color-mix(in srgb, var(--md-row-selection) 22%, var(--md-surface));
1175
1181
  border-radius: 6px;
1176
1182
  transition: all 0.2s ease;
1177
1183
  }
1178
- .canvas-drop-zone--full .cdz-empty-state[data-v-a85cd0b8] {
1179
- animation: fade-in-a85cd0b8 0.3s ease;
1184
+ .canvas-drop-zone--full .cdz-empty-state[data-v-cc281ed8] {
1185
+ animation: fade-in-cc281ed8 0.3s ease;
1180
1186
  }
1181
- @keyframes fade-in-a85cd0b8 {
1187
+ @keyframes fade-in-cc281ed8 {
1182
1188
  from {
1183
1189
  opacity: 0;
1184
1190
  transform: scale(0.98);
@@ -1188,27 +1194,27 @@ to {
1188
1194
  transform: scale(1);
1189
1195
  }
1190
1196
  }
1191
- .cdz-empty-content[data-v-a85cd0b8] {
1197
+ .cdz-empty-content[data-v-cc281ed8] {
1192
1198
  text-align: center;
1193
1199
  padding: 2rem;
1194
1200
  }
1195
- .cdz-empty-icon[data-v-a85cd0b8] {
1201
+ .cdz-empty-icon[data-v-cc281ed8] {
1196
1202
  width: 48px;
1197
1203
  height: 48px;
1198
1204
  margin: 0 auto 12px;
1199
- color: #94a3b8;
1205
+ color: var(--md-text-subtle);
1200
1206
  stroke-width: 1.5;
1201
1207
  }
1202
- .cdz-empty-title[data-v-a85cd0b8] {
1208
+ .cdz-empty-title[data-v-cc281ed8] {
1203
1209
  font-size: 1.125rem;
1204
1210
  font-weight: 500;
1205
- color: #02bb4c;
1211
+ color: var(--md-selection-fg);
1206
1212
  margin-bottom: 8px;
1207
1213
  letter-spacing: -0.01em;
1208
1214
  }
1209
- .cdz-empty-subtitle[data-v-a85cd0b8] {
1215
+ .cdz-empty-subtitle[data-v-cc281ed8] {
1210
1216
  font-size: 0.875rem;
1211
- color: #94a3b8;
1217
+ color: var(--md-text-subtle);
1212
1218
  line-height: 1.4;
1213
1219
  }
1214
1220
 
@@ -1228,7 +1234,7 @@ to {
1228
1234
  * height covers the hit area naturally, so bleed here is not needed for the
1229
1235
  * "snap into a big target" UX — that comes from the zone's own expanded size.
1230
1236
  */
1231
- .cdz-hit-area[data-v-a85cd0b8] {
1237
+ .cdz-hit-area[data-v-cc281ed8] {
1232
1238
  position: absolute;
1233
1239
  left: 0;
1234
1240
  right: 0;
@@ -1238,19 +1244,19 @@ to {
1238
1244
  /* Only catchable during a layout drag; invisible + inert otherwise */
1239
1245
  pointer-events: none;
1240
1246
  }
1241
- .canvas-drop-zone--receptive .cdz-hit-area[data-v-a85cd0b8] {
1247
+ .canvas-drop-zone--receptive .cdz-hit-area[data-v-cc281ed8] {
1242
1248
  pointer-events: all;
1243
1249
  }
1244
1250
 
1245
1251
  /* Hide empty state when dragging */
1246
- .canvas-drop-zone--full.canvas-drop-zone--receptive .cdz-empty-state[data-v-a85cd0b8],
1247
- .canvas-drop-zone--full.canvas-drop-zone--active .cdz-empty-state[data-v-a85cd0b8] {
1252
+ .canvas-drop-zone--full.canvas-drop-zone--receptive .cdz-empty-state[data-v-cc281ed8],
1253
+ .canvas-drop-zone--full.canvas-drop-zone--active .cdz-empty-state[data-v-cc281ed8] {
1248
1254
  opacity: 0.5;
1249
- background: rgba(139, 92, 246, 0.04);
1255
+ background: color-mix(in srgb, var(--md-row-selection) 4%, transparent);
1250
1256
  }
1251
1257
 
1252
1258
  /* ── Ghost line (receptive but not hovered) ─────────────────── */
1253
- .cdz-ghost-line[data-v-a85cd0b8] {
1259
+ .cdz-ghost-line[data-v-cc281ed8] {
1254
1260
  position: absolute;
1255
1261
  left: 0;
1256
1262
  right: 0;
@@ -1259,16 +1265,16 @@ to {
1259
1265
  transform: translateY(-50%);
1260
1266
  background: repeating-linear-gradient(
1261
1267
  90deg,
1262
- rgba(139, 92, 246, 0.25) 0px,
1263
- rgba(139, 92, 246, 0.25) 6px,
1268
+ color-mix(in srgb, var(--md-row-selection) 25%, transparent) 0px,
1269
+ color-mix(in srgb, var(--md-row-selection) 25%, transparent) 6px,
1264
1270
  transparent 6px,
1265
1271
  transparent 12px
1266
1272
  );
1267
1273
  border-radius: 2px;
1268
1274
  pointer-events: none;
1269
- animation: ghost-pulse-a85cd0b8 2s ease-in-out infinite;
1275
+ animation: ghost-pulse-cc281ed8 2s ease-in-out infinite;
1270
1276
  }
1271
- @keyframes ghost-pulse-a85cd0b8 {
1277
+ @keyframes ghost-pulse-cc281ed8 {
1272
1278
  0%, 100% { opacity: 0.5;
1273
1279
  }
1274
1280
  50% { opacity: 1;
@@ -1276,102 +1282,102 @@ to {
1276
1282
  }
1277
1283
 
1278
1284
  /* ── Active bar ─────────────────────────────────────────────── */
1279
- .cdz-bar[data-v-a85cd0b8] {
1285
+ .cdz-bar[data-v-cc281ed8] {
1280
1286
  position: absolute;
1281
1287
  inset: 4px 0;
1282
1288
  display: flex;
1283
1289
  align-items: center;
1284
1290
  gap: 10px;
1285
1291
  padding: 0 20px;
1286
- background: rgba(139, 92, 246, 0.06);
1292
+ background: color-mix(in srgb, var(--md-row-selection) 6%, transparent);
1287
1293
  border-radius: 8px;
1288
- border: 1.5px dashed rgba(139, 92, 246, 0.35);
1294
+ border: 1.5px dashed color-mix(in srgb, var(--md-row-selection) 35%, transparent);
1289
1295
  pointer-events: none; /* let drag events fall through to the parent drop zone */
1290
1296
  }
1291
- .cdz-line[data-v-a85cd0b8] {
1297
+ .cdz-line[data-v-cc281ed8] {
1292
1298
  flex: 1;
1293
1299
  height: 2px;
1294
1300
  background: linear-gradient(
1295
1301
  90deg,
1296
1302
  transparent,
1297
- rgba(139, 92, 246, 0.6),
1298
- rgba(139, 92, 246, 0.8),
1299
- rgba(139, 92, 246, 0.6),
1303
+ color-mix(in srgb, var(--md-row-selection) 60%, transparent),
1304
+ color-mix(in srgb, var(--md-row-selection) 80%, transparent),
1305
+ color-mix(in srgb, var(--md-row-selection) 60%, transparent),
1300
1306
  transparent
1301
1307
  );
1302
1308
  border-radius: 2px;
1303
- animation: line-expand-a85cd0b8 0.2s ease forwards;
1309
+ animation: line-expand-cc281ed8 0.2s ease forwards;
1304
1310
  transform-origin: center;
1305
1311
  }
1306
- @keyframes line-expand-a85cd0b8 {
1312
+ @keyframes line-expand-cc281ed8 {
1307
1313
  from { transform: scaleX(0); opacity: 0;
1308
1314
  }
1309
1315
  to { transform: scaleX(1); opacity: 1;
1310
1316
  }
1311
1317
  }
1312
- .cdz-pill[data-v-a85cd0b8] {
1318
+ .cdz-pill[data-v-cc281ed8] {
1313
1319
  display: flex;
1314
1320
  align-items: center;
1315
1321
  gap: 5px;
1316
1322
  font-size: 11px;
1317
1323
  font-weight: 600;
1318
- color: #7c3aed;
1324
+ color: var(--md-row-selection-fg);
1319
1325
  letter-spacing: 0.01em;
1320
1326
  white-space: nowrap;
1321
1327
  padding: 5px 14px;
1322
- background: rgba(139, 92, 246, 0.08);
1323
- border: 1.5px solid rgba(139, 92, 246, 0.35);
1328
+ background: color-mix(in srgb, var(--md-row-selection) 8%, transparent);
1329
+ border: 1.5px solid color-mix(in srgb, var(--md-row-selection) 35%, transparent);
1324
1330
  border-radius: 100px;
1325
- box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
1326
- animation: pill-pop-a85cd0b8 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
1331
+ box-shadow: 0 2px 8px color-mix(in srgb, var(--md-row-selection) 15%, transparent);
1332
+ animation: pill-pop-cc281ed8 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
1327
1333
  }
1328
- @keyframes pill-pop-a85cd0b8 {
1334
+ @keyframes pill-pop-cc281ed8 {
1329
1335
  from { transform: scale(0.75); opacity: 0;
1330
1336
  }
1331
1337
  to { transform: scale(1); opacity: 1;
1332
1338
  }
1333
1339
  }
1334
- .cdz-icon[data-v-a85cd0b8] {
1340
+ .cdz-icon[data-v-cc281ed8] {
1335
1341
  width: 13px;
1336
1342
  height: 13px;
1337
1343
  flex-shrink: 0;
1338
1344
  }
1339
1345
 
1340
1346
  /* ── Transition ─────────────────────────────────────────────── */
1341
- .cdz-bar-enter-active[data-v-a85cd0b8] { animation: cdz-in-a85cd0b8 0.15s ease forwards;
1347
+ .cdz-bar-enter-active[data-v-cc281ed8] { animation: cdz-in-cc281ed8 0.15s ease forwards;
1342
1348
  }
1343
- .cdz-bar-leave-active[data-v-a85cd0b8] { transition: opacity 0.1s ease;
1349
+ .cdz-bar-leave-active[data-v-cc281ed8] { transition: opacity 0.1s ease;
1344
1350
  }
1345
- .cdz-bar-leave-to[data-v-a85cd0b8] { opacity: 0;
1351
+ .cdz-bar-leave-to[data-v-cc281ed8] { opacity: 0;
1346
1352
  }
1347
- @keyframes cdz-in-a85cd0b8 {
1353
+ @keyframes cdz-in-cc281ed8 {
1348
1354
  from { opacity: 0; transform: scaleY(0.6);
1349
1355
  }
1350
1356
  to { opacity: 1; transform: scaleY(1);
1351
1357
  }
1352
1358
  }
1353
1359
 
1354
- .drop-line-enter-active[data-v-bbf19b57] {
1360
+ .drop-line-enter-active[data-v-8ae7a24f] {
1355
1361
  transition: opacity 80ms ease, transform 80ms ease;
1356
1362
  }
1357
- .drop-line-leave-active[data-v-bbf19b57] {
1363
+ .drop-line-leave-active[data-v-8ae7a24f] {
1358
1364
  transition: opacity 60ms ease, transform 60ms ease;
1359
1365
  }
1360
- .drop-line-enter-from[data-v-bbf19b57],
1361
- .drop-line-leave-to[data-v-bbf19b57] {
1366
+ .drop-line-enter-from[data-v-8ae7a24f],
1367
+ .drop-line-leave-to[data-v-8ae7a24f] {
1362
1368
  opacity: 0;
1363
1369
  transform: scaleX(0.6);
1364
1370
  transform-origin: left center;
1365
1371
  }
1366
1372
 
1367
- .slide-enter-active[data-v-0b0e946e],
1368
- .slide-leave-active[data-v-0b0e946e] {
1373
+ .slide-enter-active[data-v-ce5a848e],
1374
+ .slide-leave-active[data-v-ce5a848e] {
1369
1375
  transition: all 0.2s ease;
1370
1376
  max-height: 500px;
1371
1377
  overflow: hidden;
1372
1378
  }
1373
- .slide-enter-from[data-v-0b0e946e],
1374
- .slide-leave-to[data-v-0b0e946e] {
1379
+ .slide-enter-from[data-v-ce5a848e],
1380
+ .slide-leave-to[data-v-ce5a848e] {
1375
1381
  opacity: 0;
1376
1382
  max-height: 0;
1377
1383
  transform: translateY(-10px);
@@ -1380,7 +1386,7 @@ to { opacity: 1; transform: scaleY(1);
1380
1386
  /* ============================================================
1381
1387
  md-dropdown – suggestion list
1382
1388
  ============================================================ */
1383
- .md-dropdown[data-v-c497f9f6] {
1389
+ .md-dropdown[data-v-3cd230e0] {
1384
1390
  position: absolute;
1385
1391
  top: 100%;
1386
1392
  left: 0;
@@ -1394,24 +1400,24 @@ to { opacity: 1; transform: scaleY(1);
1394
1400
  max-height: 12rem;
1395
1401
  overflow-y: auto;
1396
1402
  }
1397
- .md-dropdown-item[data-v-c497f9f6] {
1403
+ .md-dropdown-item[data-v-3cd230e0] {
1398
1404
  padding: 0.5rem 0.75rem;
1399
1405
  cursor: pointer;
1400
1406
  color: var(--md-text);
1401
1407
  transition: background 0.1s;
1402
1408
  }
1403
- .md-dropdown-item[data-v-c497f9f6]:hover {
1409
+ .md-dropdown-item[data-v-3cd230e0]:hover {
1404
1410
  background: var(--md-surface-hover);
1405
1411
  }
1406
- .md-dropdown-item--active[data-v-c497f9f6] {
1412
+ .md-dropdown-item--active[data-v-3cd230e0] {
1407
1413
  background: var(--md-primary);
1408
- color: #fff;
1414
+ color: var(--md-on-primary);
1409
1415
  }
1410
1416
 
1411
1417
  /* ============================================================
1412
1418
  md-tag – selected tag pills
1413
1419
  ============================================================ */
1414
- .md-tag[data-v-c497f9f6] {
1420
+ .md-tag[data-v-3cd230e0] {
1415
1421
  display: inline-flex;
1416
1422
  align-items: center;
1417
1423
  padding: 0.125rem 0.75rem;
@@ -1419,10 +1425,10 @@ to { opacity: 1; transform: scaleY(1);
1419
1425
  font-size: 0.875rem;
1420
1426
  font-weight: 500;
1421
1427
  background: var(--md-primary);
1422
- color: #fff;
1428
+ color: var(--md-on-primary);
1423
1429
  line-height: 1.5;
1424
1430
  }
1425
- .md-tag-remove[data-v-c497f9f6] {
1431
+ .md-tag-remove[data-v-3cd230e0] {
1426
1432
  margin-left: 0.5rem;
1427
1433
  display: inline-flex;
1428
1434
  align-items: center;
@@ -1431,7 +1437,7 @@ to { opacity: 1; transform: scaleY(1);
1431
1437
  height: 1rem;
1432
1438
  border: none;
1433
1439
  background: transparent;
1434
- color: rgba(255, 255, 255, 0.8);
1440
+ color: color-mix(in srgb, var(--md-on-primary) 80%, transparent);
1435
1441
  cursor: pointer;
1436
1442
  border-radius: 9999px;
1437
1443
  transition:
@@ -1439,11 +1445,11 @@ to { opacity: 1; transform: scaleY(1);
1439
1445
  color 0.15s;
1440
1446
  padding: 0;
1441
1447
  }
1442
- .md-tag-remove[data-v-c497f9f6]:hover {
1443
- background: rgba(255, 255, 255, 0.2);
1444
- color: #fff;
1448
+ .md-tag-remove[data-v-3cd230e0]:hover {
1449
+ background: color-mix(in srgb, var(--md-on-primary) 20%, transparent);
1450
+ color: var(--md-on-primary);
1445
1451
  }
1446
- .md-tag-remove svg[data-v-c497f9f6] {
1452
+ .md-tag-remove svg[data-v-3cd230e0] {
1447
1453
  width: 100%;
1448
1454
  height: 100%;
1449
1455
  }
@@ -1451,149 +1457,149 @@ to { opacity: 1; transform: scaleY(1);
1451
1457
  /* ============================================================
1452
1458
  Scrollbar styling for dropdown (optional, keeps it clean)
1453
1459
  ============================================================ */
1454
- .md-dropdown[data-v-c497f9f6]::-webkit-scrollbar {
1460
+ .md-dropdown[data-v-3cd230e0]::-webkit-scrollbar {
1455
1461
  width: 4px;
1456
1462
  }
1457
- .md-dropdown[data-v-c497f9f6]::-webkit-scrollbar-track {
1463
+ .md-dropdown[data-v-3cd230e0]::-webkit-scrollbar-track {
1458
1464
  background: transparent;
1459
1465
  }
1460
- .md-dropdown[data-v-c497f9f6]::-webkit-scrollbar-thumb {
1466
+ .md-dropdown[data-v-3cd230e0]::-webkit-scrollbar-thumb {
1461
1467
  background: var(--md-border);
1462
1468
  border-radius: 8px;
1463
1469
  }
1464
- .md-dropdown[data-v-c497f9f6]::-webkit-scrollbar-thumb:hover {
1470
+ .md-dropdown[data-v-3cd230e0]::-webkit-scrollbar-thumb:hover {
1465
1471
  background: var(--md-text-subtle);
1466
1472
  }
1467
1473
 
1468
- .overflow-x-auto[data-v-2de6cff1] {
1474
+ .overflow-x-auto[data-v-22183f86] {
1469
1475
  max-width: 100%;
1470
1476
  -webkit-overflow-scrolling: touch;
1471
1477
  }
1472
- .overflow-x-auto[data-v-2de6cff1]::-webkit-scrollbar {
1478
+ .overflow-x-auto[data-v-22183f86]::-webkit-scrollbar {
1473
1479
  height: 6px;
1474
1480
  }
1475
- .overflow-x-auto[data-v-2de6cff1]::-webkit-scrollbar-track {
1476
- background: #f1f1f1;
1481
+ .overflow-x-auto[data-v-22183f86]::-webkit-scrollbar-track {
1482
+ background: var(--md-surface-muted);
1477
1483
  border-radius: 4px;
1478
1484
  }
1479
- .overflow-x-auto[data-v-2de6cff1]::-webkit-scrollbar-thumb {
1480
- background: #ccc;
1485
+ .overflow-x-auto[data-v-22183f86]::-webkit-scrollbar-thumb {
1486
+ background: var(--md-border-strong);
1481
1487
  border-radius: 4px;
1482
1488
  }
1483
- .overflow-x-auto[data-v-2de6cff1]::-webkit-scrollbar-thumb:hover {
1484
- background: #999;
1489
+ .overflow-x-auto[data-v-22183f86]::-webkit-scrollbar-thumb:hover {
1490
+ background: var(--md-text-subtle);
1485
1491
  }
1486
1492
 
1487
- .overflow-x-auto[data-v-60af6f59] {
1493
+ .overflow-x-auto[data-v-f8677731] {
1488
1494
  max-width: 100%;
1489
1495
  -webkit-overflow-scrolling: touch;
1490
1496
  }
1491
- .overflow-x-auto[data-v-60af6f59]::-webkit-scrollbar {
1497
+ .overflow-x-auto[data-v-f8677731]::-webkit-scrollbar {
1492
1498
  height: 6px;
1493
1499
  }
1494
- .overflow-x-auto[data-v-60af6f59]::-webkit-scrollbar-track {
1495
- background: #f1f1f1;
1500
+ .overflow-x-auto[data-v-f8677731]::-webkit-scrollbar-track {
1501
+ background: var(--md-surface-muted);
1496
1502
  border-radius: 4px;
1497
1503
  }
1498
- .overflow-x-auto[data-v-60af6f59]::-webkit-scrollbar-thumb {
1499
- background: #ccc;
1504
+ .overflow-x-auto[data-v-f8677731]::-webkit-scrollbar-thumb {
1505
+ background: var(--md-border-strong);
1500
1506
  border-radius: 4px;
1501
1507
  }
1502
- .overflow-x-auto[data-v-60af6f59]::-webkit-scrollbar-thumb:hover {
1503
- background: #999;
1508
+ .overflow-x-auto[data-v-f8677731]::-webkit-scrollbar-thumb:hover {
1509
+ background: var(--md-text-subtle);
1504
1510
  }
1505
1511
 
1506
- .panel-slide-enter-active[data-v-87974adb],
1507
- .panel-slide-leave-active[data-v-87974adb] {
1508
- transition:
1509
- opacity 0.18s ease,
1510
- transform 0.18s ease;
1511
- }
1512
- .panel-slide-enter-from[data-v-87974adb],
1513
- .panel-slide-leave-to[data-v-87974adb] {
1514
- opacity: 0;
1515
- transform: translateX(-10px);
1512
+ .panel-slide-enter-active[data-v-3185c8c2],
1513
+ .panel-slide-leave-active[data-v-3185c8c2] {
1514
+ transition:
1515
+ opacity 0.18s ease,
1516
+ transform 0.18s ease;
1516
1517
  }
1517
-
1518
+ .panel-slide-enter-from[data-v-3185c8c2],
1519
+ .panel-slide-leave-to[data-v-3185c8c2] {
1520
+ opacity: 0;
1521
+ transform: translateX(-10px);
1522
+ }
1523
+
1518
1524
  /* Filter pill fade */
1519
- .fade-enter-active[data-v-87974adb],
1520
- .fade-leave-active[data-v-87974adb] {
1521
- transition:
1522
- opacity 0.15s ease,
1523
- transform 0.15s ease;
1524
- }
1525
- .fade-enter-from[data-v-87974adb],
1526
- .fade-leave-to[data-v-87974adb] {
1527
- opacity: 0;
1528
- transform: translateY(-4px);
1525
+ .fade-enter-active[data-v-3185c8c2],
1526
+ .fade-leave-active[data-v-3185c8c2] {
1527
+ transition:
1528
+ opacity 0.15s ease,
1529
+ transform 0.15s ease;
1529
1530
  }
1530
-
1531
+ .fade-enter-from[data-v-3185c8c2],
1532
+ .fade-leave-to[data-v-3185c8c2] {
1533
+ opacity: 0;
1534
+ transform: translateY(-4px);
1535
+ }
1536
+
1531
1537
  /* Smooth row list reorder/filter transitions */
1532
- .row-list-enter-active[data-v-87974adb],
1533
- .row-list-leave-active[data-v-87974adb] {
1534
- transition:
1535
- opacity 0.2s ease,
1536
- transform 0.2s ease;
1537
- }
1538
- .row-list-enter-from[data-v-87974adb],
1539
- .row-list-leave-to[data-v-87974adb] {
1540
- opacity: 0;
1541
- transform: translateY(6px);
1538
+ .row-list-enter-active[data-v-3185c8c2],
1539
+ .row-list-leave-active[data-v-3185c8c2] {
1540
+ transition:
1541
+ opacity 0.2s ease,
1542
+ transform 0.2s ease;
1542
1543
  }
1543
- .row-list-move[data-v-87974adb] {
1544
- transition: transform 0.2s ease;
1544
+ .row-list-enter-from[data-v-3185c8c2],
1545
+ .row-list-leave-to[data-v-3185c8c2] {
1546
+ opacity: 0;
1547
+ transform: translateY(6px);
1545
1548
  }
1546
-
1549
+ .row-list-move[data-v-3185c8c2] {
1550
+ transition: transform 0.2s ease;
1551
+ }
1552
+
1547
1553
  /* Scrollbar — thin, unobtrusive */
1548
- .overflow-y-auto[data-v-87974adb]::-webkit-scrollbar {
1549
- width: 6px;
1550
- }
1551
- .overflow-y-auto[data-v-87974adb]::-webkit-scrollbar-track {
1552
- background: transparent;
1554
+ .overflow-y-auto[data-v-3185c8c2]::-webkit-scrollbar {
1555
+ width: 6px;
1553
1556
  }
1554
- .overflow-y-auto[data-v-87974adb]::-webkit-scrollbar-thumb {
1555
- background: #6a7282;
1556
- border-radius: 9999px;
1557
+ .overflow-y-auto[data-v-3185c8c2]::-webkit-scrollbar-track {
1558
+ background: transparent;
1557
1559
  }
1558
- .overflow-y-auto[data-v-87974adb]::-webkit-scrollbar-thumb:hover {
1559
- background: #364153;
1560
+ .overflow-y-auto[data-v-3185c8c2]::-webkit-scrollbar-thumb {
1561
+ background: var(--md-border-strong);
1562
+ border-radius: 9999px;
1560
1563
  }
1564
+ .overflow-y-auto[data-v-3185c8c2]::-webkit-scrollbar-thumb:hover {
1565
+ background: var(--md-text-subtle);
1566
+ }
1561
1567
 
1562
- .panel-slide-enter-active[data-v-4f9c7f2a],
1563
- .panel-slide-leave-active[data-v-4f9c7f2a] {
1564
- transition:
1565
- opacity 0.18s ease,
1568
+ .panel-slide-enter-active[data-v-3ec392a9],
1569
+ .panel-slide-leave-active[data-v-3ec392a9] {
1570
+ transition:
1571
+ opacity 0.18s ease,
1566
1572
  transform 0.18s ease;
1567
1573
  }
1568
- .panel-slide-enter-from[data-v-4f9c7f2a],
1569
- .panel-slide-leave-to[data-v-4f9c7f2a] {
1570
- opacity: 0;
1574
+ .panel-slide-enter-from[data-v-3ec392a9],
1575
+ .panel-slide-leave-to[data-v-3ec392a9] {
1576
+ opacity: 0;
1571
1577
  transform: translateX(-10px);
1572
1578
  }
1573
- .row-list-enter-active[data-v-4f9c7f2a],
1574
- .row-list-leave-active[data-v-4f9c7f2a] {
1575
- transition:
1576
- opacity 0.2s ease,
1579
+ .row-list-enter-active[data-v-3ec392a9],
1580
+ .row-list-leave-active[data-v-3ec392a9] {
1581
+ transition:
1582
+ opacity 0.2s ease,
1577
1583
  transform 0.2s ease;
1578
1584
  }
1579
- .row-list-enter-from[data-v-4f9c7f2a],
1580
- .row-list-leave-to[data-v-4f9c7f2a] {
1581
- opacity: 0;
1585
+ .row-list-enter-from[data-v-3ec392a9],
1586
+ .row-list-leave-to[data-v-3ec392a9] {
1587
+ opacity: 0;
1582
1588
  transform: translateY(6px);
1583
1589
  }
1584
- .row-list-move[data-v-4f9c7f2a] {
1590
+ .row-list-move[data-v-3ec392a9] {
1585
1591
  transition: transform 0.2s ease;
1586
- }
1587
-
1592
+ }
1593
+
1588
1594
  /* Scrollbar — thin, unobtrusive. Matches SavedRowsPanel. */
1589
- .overflow-y-auto[data-v-4f9c7f2a]::-webkit-scrollbar { width: 6px;
1595
+ .overflow-y-auto[data-v-3ec392a9]::-webkit-scrollbar { width: 6px;
1590
1596
  }
1591
- .overflow-y-auto[data-v-4f9c7f2a]::-webkit-scrollbar-track { background: transparent;
1597
+ .overflow-y-auto[data-v-3ec392a9]::-webkit-scrollbar-track { background: transparent;
1592
1598
  }
1593
- .overflow-y-auto[data-v-4f9c7f2a]::-webkit-scrollbar-thumb { background: #6a7282; border-radius: 9999px;
1594
- }
1595
- .overflow-y-auto[data-v-4f9c7f2a]::-webkit-scrollbar-thumb:hover { background: #364153;
1599
+ .overflow-y-auto[data-v-3ec392a9]::-webkit-scrollbar-thumb { background: var(--md-border-strong); border-radius: 9999px;
1596
1600
  }
1601
+ .overflow-y-auto[data-v-3ec392a9]::-webkit-scrollbar-thumb:hover { background: var(--md-text-subtle);
1602
+ }
1597
1603
 
1598
1604
  .md-toast__region[data-v-7583ad77] {
1599
1605
  position: fixed;
@@ -2338,34 +2344,36 @@ to { opacity: 1; transform: scaleY(1);
2338
2344
  max-height: 0;
2339
2345
  }
2340
2346
 
2341
- .picker-overlay-enter-active[data-v-a19c20aa],
2342
- .picker-overlay-leave-active[data-v-a19c20aa] {
2347
+ .picker-overlay-enter-active[data-v-5f1ee4c3],
2348
+ .picker-overlay-leave-active[data-v-5f1ee4c3] {
2343
2349
  transition: opacity 0.2s ease;
2344
2350
  }
2345
- .picker-overlay-enter-from[data-v-a19c20aa],
2346
- .picker-overlay-leave-to[data-v-a19c20aa] {
2351
+ .picker-overlay-enter-from[data-v-5f1ee4c3],
2352
+ .picker-overlay-leave-to[data-v-5f1ee4c3] {
2347
2353
  opacity: 0;
2348
2354
  }
2349
- .picker-drawer-enter-active[data-v-a19c20aa],
2350
- .picker-drawer-leave-active[data-v-a19c20aa] {
2355
+ .picker-drawer-enter-active[data-v-5f1ee4c3],
2356
+ .picker-drawer-leave-active[data-v-5f1ee4c3] {
2351
2357
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
2352
2358
  }
2353
- .picker-drawer-enter-from[data-v-a19c20aa],
2354
- .picker-drawer-leave-to[data-v-a19c20aa] {
2359
+ .picker-drawer-enter-from[data-v-5f1ee4c3],
2360
+ .picker-drawer-leave-to[data-v-5f1ee4c3] {
2355
2361
  transform: translateX(100%);
2356
2362
  }
2357
2363
 
2358
- .note-enter-active[data-v-0b957c88],
2359
- .note-leave-active[data-v-0b957c88] {
2360
- transition: opacity 0.2s ease, max-height 0.25s ease;
2361
- max-height: 60px;
2362
- overflow: hidden;
2363
- }
2364
- .note-enter-from[data-v-0b957c88],
2365
- .note-leave-to[data-v-0b957c88] {
2366
- opacity: 0;
2367
- max-height: 0;
2364
+ .note-enter-active[data-v-b07bbf33],
2365
+ .note-leave-active[data-v-b07bbf33] {
2366
+ transition:
2367
+ opacity 0.2s ease,
2368
+ max-height 0.25s ease;
2369
+ max-height: 60px;
2370
+ overflow: hidden;
2368
2371
  }
2372
+ .note-enter-from[data-v-b07bbf33],
2373
+ .note-leave-to[data-v-b07bbf33] {
2374
+ opacity: 0;
2375
+ max-height: 0;
2376
+ }
2369
2377
 
2370
2378
  .md-msg[data-v-db5ba171] {
2371
2379
  display: flex;
@@ -2394,17 +2402,17 @@ to { opacity: 1; transform: scaleY(1);
2394
2402
  }
2395
2403
 
2396
2404
  /* Auto-save pill: fade + 4px vertical drift on enter/leave */
2397
- .autosave-fade-enter-active[data-v-d422c2b4],
2398
- .autosave-fade-leave-active[data-v-d422c2b4] {
2405
+ .autosave-fade-enter-active[data-v-8a0c6ca5],
2406
+ .autosave-fade-leave-active[data-v-8a0c6ca5] {
2399
2407
  transition:
2400
2408
  opacity 0.2s ease,
2401
2409
  transform 0.2s ease;
2402
2410
  }
2403
- .autosave-fade-enter-from[data-v-d422c2b4] {
2411
+ .autosave-fade-enter-from[data-v-8a0c6ca5] {
2404
2412
  opacity: 0;
2405
2413
  transform: translateY(4px);
2406
2414
  }
2407
- .autosave-fade-leave-to[data-v-d422c2b4] {
2415
+ .autosave-fade-leave-to[data-v-8a0c6ca5] {
2408
2416
  opacity: 0;
2409
2417
  transform: translateY(-4px);
2410
2418
  }