@kyro-cms/admin 0.10.6 → 0.10.7

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/index.css CHANGED
@@ -1,1698 +1 @@
1
- @import "tailwindcss";
2
-
3
- /* src/styles/main.css */
4
- @custom-variant dark (&:where(.dark, .dark *));
5
- @source "../../src/**/*.{astro,html,js,jsx,ts,tsx}";
6
- :root {
7
- --kyro-black: #0b1222;
8
- --kyro-black-light: #1a2332;
9
- --kyro-black-hover: #2a3342;
10
- --kyro-gray-50: #f9fafb;
11
- --kyro-gray-100: #f3f4f6;
12
- --kyro-gray-200: #e5e7eb;
13
- --kyro-gray-300: #d1d5db;
14
- --kyro-gray-400: #9ca3af;
15
- --kyro-gray-500: #6b7280;
16
- --kyro-gray-600: #4b5563;
17
- --kyro-gray-700: #374151;
18
- --kyro-gray-800: #1f2937;
19
- --kyro-gray-900: #111827;
20
- --kyro-bg: #eaeff2;
21
- --kyro-surface: #ffffff;
22
- --kyro-surface-accent: #f9fafb;
23
- --kyro-sidebar-bg: #ffffff;
24
- --kyro-sidebar-active: #0b1222;
25
- --kyro-sidebar-text: #64748b;
26
- --kyro-sidebar-text-active: #ffffff;
27
- --kyro-sidebar-border: rgba(0, 0, 0, 0.05);
28
- --kyro-text-primary: #0b1222;
29
- --kyro-text-secondary: #64748b;
30
- --kyro-text-muted: #94a3b8;
31
- --kyro-border: #f3f4f6;
32
- --kyro-input-bg: #ffffff;
33
- --kyro-input-border: #e5e7eb;
34
- --kyro-radius-tile: 32px;
35
- --kyro-radius-lg: 16px;
36
- --kyro-radius-xl: 48px;
37
- --kyro-shadow-tile: 0 10px 40px -10px rgba(0, 0, 0, 0.04);
38
- --kyro-primary: #0b1222;
39
- --kyro-primary-hover: #1a2332;
40
- --kyro-success: #22c55e;
41
- --kyro-success-bg: rgba(34, 197, 94, 0.1);
42
- --kyro-danger: #ef4444;
43
- --kyro-danger-bg: rgba(239, 68, 68, 0.1);
44
- --kyro-error: #ef4444;
45
- --kyro-warning: #ffae00;
46
- --kyro-warning-bg: rgba(255, 174, 0, 0.1);
47
- --kyro-border-active: #0b1222;
48
- --kyro-bg-secondary: #f3f4f6;
49
- --kyro-sidebar-width: 320px;
50
- --kyro-header-height: 80px;
51
- }
52
- :root.dark {
53
- --kyro-bg: #050912;
54
- --kyro-surface: #0b1222;
55
- --kyro-surface-accent: #111a2e;
56
- --kyro-sidebar-bg: #0b1222;
57
- --kyro-sidebar-active: #ffffff;
58
- --kyro-sidebar-text: #94a3b8;
59
- --kyro-sidebar-text-active: #0b1222;
60
- --kyro-sidebar-border: rgba(255, 255, 255, 0.05);
61
- --kyro-text-primary: #ffffff;
62
- --kyro-text-secondary: #94a3b8;
63
- --kyro-text-muted: #64748b;
64
- --kyro-border: #1a2332;
65
- --kyro-input-bg: #111a2e;
66
- --kyro-input-border: #1e293b;
67
- --kyro-black: #ffffff;
68
- --kyro-black-light: #f3f4f6;
69
- --kyro-black-hover: #e5e7eb;
70
- --kyro-gray-50: #1a2332;
71
- --kyro-gray-100: #1e293b;
72
- --kyro-gray-200: #334155;
73
- --kyro-primary: var(--kyro-sidebar-active);
74
- --kyro-primary-hover: var(--kyro-sidebar-text-active);
75
- --kyro-success: #22c55e;
76
- --kyro-success-bg: rgba(34, 197, 94, 0.15);
77
- --kyro-danger: #f87171;
78
- --kyro-danger-bg: rgba(248, 113, 113, 0.15);
79
- --kyro-error: #f87171;
80
- --kyro-warning: #ffae00;
81
- --kyro-warning-bg: rgba(255, 174, 0, 0.15);
82
- --kyro-border-active: #ffffff;
83
- --kyro-bg-secondary: #111a2e;
84
- color-scheme: dark;
85
- }
86
- @theme { --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --color-primary: var(--kyro-black); --color-primary-hover: var(--kyro-black-hover); --color-primary-light: var(--kyro-gray-100); --color-gray-50: var(--kyro-gray-50); --color-gray-100: var(--kyro-gray-100); --color-gray-200: var(--kyro-gray-200); --color-gray-400: var(--kyro-gray-400); --color-gray-500: var(--kyro-gray-500); --radius-tile: var(--kyro-radius-tile); --radius-lg: var(--kyro-radius-lg); --radius-xl: var(--kyro-radius-xl); --shadow-tile: var(--kyro-shadow-tile); --animate-slide-in-from-right: slide-in-from-right 200ms ease-out; @keyframes slide-in-from-right { from { transform: translateX(100%); } to { transform: translateX(0); } } }
87
- @layer base {
88
- html {
89
- font-family: var(--font-sans);
90
- font-size: 14px;
91
- line-height: 1.5;
92
- color: var(--kyro-text-primary);
93
- background: var(--kyro-bg);
94
- transition: background-color 300ms ease, color 300ms ease;
95
- }
96
- * {
97
- scrollbar-width: none;
98
- -ms-overflow-style: none;
99
- }
100
- *::-webkit-scrollbar {
101
- display: none;
102
- }
103
- a,
104
- button,
105
- [role=button],
106
- input[type=button],
107
- input[type=submit],
108
- input[type=reset] {
109
- cursor: pointer;
110
- }
111
- .kyro-glass {
112
- background: rgba(255, 255, 255, 0.7);
113
- backdrop-filter: blur(20px) saturate(180%);
114
- -webkit-backdrop-filter: blur(20px) saturate(180%);
115
- border: 1px solid rgba(255, 255, 255, 0.3);
116
- }
117
- .dark .kyro-glass {
118
- background: rgba(11, 18, 34, 0.7);
119
- border: 1px solid rgba(255, 255, 255, 0.05);
120
- }
121
- .font-bold {
122
- font-weight: 900;
123
- letter-spacing: -0.05em;
124
- line-height: 1.1;
125
- }
126
- }
127
- @layer components {
128
- .kyro-admin {
129
- display: flex;
130
- height: 100vh;
131
- padding: 16px;
132
- gap: 16px;
133
- background: var(--kyro-bg);
134
- }
135
- .kyro-sidebar {
136
- width: var(--kyro-sidebar-width);
137
- background: var(--kyro-sidebar-bg);
138
- display: flex;
139
- flex-direction: column;
140
- flex-shrink: 0;
141
- overflow: hidden;
142
- }
143
- .kyro-sidebar-logo {
144
- height: var(--kyro-header-height);
145
- display: flex;
146
- align-items: center;
147
- padding: 0 20px;
148
- border-bottom: 1px solid var(--kyro-sidebar-border);
149
- }
150
- .kyro-sidebar-logo-text {
151
- font-size: 16px;
152
- font-weight: 600;
153
- color: var(--kyro-sidebar-text-active);
154
- letter-spacing: -0.02em;
155
- }
156
- .kyro-sidebar-nav {
157
- flex: 1;
158
- overflow-y: auto;
159
- padding: 12px 0;
160
- }
161
- .kyro-sidebar-section {
162
- margin-bottom: 8px;
163
- }
164
- .kyro-sidebar-section-title {
165
- padding: 8px 20px;
166
- font-size: 11px;
167
- font-weight: 600;
168
- text-transform: none;
169
- letter-spacing: 0.05em;
170
- color: var(--kyro-gray-500);
171
- }
172
- .kyro-sidebar-divider {
173
- height: 1px;
174
- background: var(--kyro-sidebar-border);
175
- margin: 12px 20px;
176
- }
177
- .kyro-sidebar-item {
178
- display: flex;
179
- align-items: center;
180
- gap: 12px;
181
- width: 100%;
182
- padding: 10px 20px;
183
- font-size: 14px;
184
- font-weight: 500;
185
- color: var(--kyro-sidebar-text);
186
- background: transparent;
187
- border: none;
188
- cursor: pointer;
189
- transition: all 150ms ease;
190
- text-align: left;
191
- text-decoration: none;
192
- }
193
- .kyro-sidebar-item:hover {
194
- color: var(--kyro-black);
195
- background: var(--kyro-gray-50);
196
- }
197
- .kyro-sidebar-item.active {
198
- color: var(--kyro-sidebar-text-active);
199
- background: var(--kyro-sidebar-active);
200
- }
201
- .kyro-sidebar-item svg {
202
- width: 18px;
203
- height: 18px;
204
- flex-shrink: 0;
205
- opacity: 0.7;
206
- }
207
- .kyro-sidebar-item.active svg,
208
- .kyro-sidebar-item:hover svg {
209
- opacity: 1;
210
- }
211
- .kyro-sidebar-footer {
212
- padding: 12px 20px;
213
- border-top: 1px solid var(--kyro-sidebar-border);
214
- }
215
- .kyro-sidebar.collapsed {
216
- width: 72px;
217
- }
218
- .kyro-sidebar.collapsed .kyro-sidebar-item {
219
- justify-content: center;
220
- padding: 12px;
221
- }
222
- .kyro-sidebar.collapsed .kyro-sidebar-item span {
223
- display: none;
224
- }
225
- .kyro-sidebar.collapsed .kyro-sidebar-section-title {
226
- display: none;
227
- }
228
- .kyro-sidebar.collapsed .kyro-sidebar-logo {
229
- justify-content: center;
230
- padding: 0;
231
- }
232
- .kyro-admin-main {
233
- flex: 1;
234
- display: flex;
235
- flex-direction: column;
236
- overflow: hidden;
237
- pointer-events: auto;
238
- }
239
- .kyro-admin-content {
240
- flex: 1;
241
- overflow-y: auto;
242
- padding: 24px;
243
- pointer-events: auto;
244
- }
245
- .kyro-btn {
246
- display: inline-flex;
247
- align-items: center;
248
- justify-content: center;
249
- gap: 6px;
250
- font-weight: 500;
251
- border-radius: 9999px;
252
- cursor: pointer;
253
- transition: all 150ms ease;
254
- border: 1px solid transparent;
255
- font-family: inherit;
256
- white-space: nowrap;
257
- text-decoration: none;
258
- }
259
- .kyro-btn:disabled {
260
- opacity: 0.5;
261
- cursor: not-allowed;
262
- }
263
- .kyro-btn-sm {
264
- padding: 6px 10px;
265
- font-size: 12px;
266
- }
267
- .kyro-btn-md {
268
- padding: 8px 14px;
269
- font-size: 13px;
270
- }
271
- .kyro-btn-lg {
272
- padding: 10px 18px;
273
- font-size: 14px;
274
- }
275
- .kyro-btn-primary {
276
- background: var(--kyro-black);
277
- color: var(--kyro-sidebar-text-active);
278
- border-color: var(--kyro-black);
279
- }
280
- .kyro-btn-primary:hover:not(:disabled) {
281
- background: var(--kyro-black-hover);
282
- border-color: var(--kyro-black-hover);
283
- }
284
- .kyro-btn-secondary {
285
- background: var(--kyro-surface);
286
- color: var(--kyro-text-primary);
287
- border-color: var(--kyro-border);
288
- }
289
- .kyro-btn-secondary:hover:not(:disabled) {
290
- background: var(--kyro-gray-50);
291
- border-color: var(--kyro-gray-300);
292
- }
293
- .kyro-btn-danger {
294
- background: var(--kyro-surface);
295
- color: var(--kyro-text-primary);
296
- border-color: var(--kyro-text-primary);
297
- }
298
- .kyro-btn-danger:hover:not(:disabled) {
299
- background: var(--kyro-gray-900);
300
- color: var(--kyro-sidebar-text-active);
301
- }
302
- .kyro-btn-ghost {
303
- background: transparent;
304
- color: var(--kyro-gray-500);
305
- }
306
- .kyro-btn-ghost:hover:not(:disabled) {
307
- background: var(--kyro-gray-100);
308
- color: var(--kyro-text-primary);
309
- }
310
- .kyro-btn-success {
311
- background: var(--kyro-success);
312
- color: white;
313
- border-color: var(--kyro-success);
314
- }
315
- .kyro-btn-success:hover:not(:disabled) {
316
- filter: brightness(0.85);
317
- }
318
- .kyro-btn-success:disabled {
319
- background: var(--kyro-gray-300);
320
- border-color: var(--kyro-gray-300);
321
- color: var(--kyro-gray-500);
322
- }
323
- .kyro-btn-warning {
324
- background: var(--kyro-warning);
325
- color: white;
326
- border-color: var(--kyro-warning);
327
- }
328
- .kyro-btn-warning:hover:not(:disabled) {
329
- filter: brightness(0.85);
330
- }
331
- .surface-tile {
332
- box-shadow: var(--kyro-shadow-tile);
333
- padding: 24px;
334
- background: var(--kyro-surface);
335
- border-radius: var(--kyro-radius-tile);
336
- }
337
- .kyro-card {
338
- border: 1px solid var(--kyro-border);
339
- box-shadow: var(--kyro-shadow-tile);
340
- padding: 24px;
341
- background: var(--kyro-surface);
342
- border-radius: var(--kyro-radius-lg);
343
- }
344
- .kyro-card-header {
345
- display: flex;
346
- align-items: center;
347
- justify-content: space-between;
348
- padding: 24px 32px;
349
- }
350
- .kyro-card-title {
351
- font-size: 24px;
352
- font-weight: 700;
353
- color: var(--kyro-text-primary);
354
- letter-spacing: -0.01em;
355
- }
356
- .kyro-card-content {
357
- padding: 0 32px 32px;
358
- }
359
- .kyro-list {
360
- display: flex;
361
- flex-direction: column;
362
- gap: 20px;
363
- }
364
- .kyro-list-header {
365
- display: flex;
366
- align-items: center;
367
- justify-content: space-between;
368
- }
369
- .kyro-list-title {
370
- font-size: 18px;
371
- font-weight: 600;
372
- color: var(--kyro-text-primary);
373
- }
374
- .kyro-table {
375
- width: 100%;
376
- border-collapse: collapse;
377
- background: white;
378
- border-radius: 8px;
379
- overflow: hidden;
380
- border: 1px solid var(--kyro-border);
381
- }
382
- .kyro-table th {
383
- padding: 12px 16px;
384
- font-size: 12px;
385
- font-weight: 600;
386
- text-transform: none;
387
- letter-spacing: 0.03em;
388
- color: var(--kyro-gray-500);
389
- background: var(--kyro-gray-50);
390
- border-bottom: 1px solid var(--kyro-border);
391
- text-align: left;
392
- }
393
- .kyro-table td {
394
- padding: 14px 16px;
395
- border-bottom: 1px solid var(--kyro-gray-100);
396
- font-size: 14px;
397
- color: var(--kyro-text-primary);
398
- }
399
- .kyro-table tr:last-child td {
400
- border-bottom: none;
401
- }
402
- .kyro-table tr:hover td {
403
- background: var(--kyro-gray-50);
404
- }
405
- .kyro-table-actions {
406
- display: flex;
407
- gap: 4px;
408
- }
409
- .kyro-table-action {
410
- display: flex;
411
- align-items: center;
412
- justify-content: center;
413
- width: 32px;
414
- height: 32px;
415
- border: none;
416
- background: transparent;
417
- color: var(--kyro-gray-500);
418
- border-radius: 6px;
419
- cursor: pointer;
420
- transition: all 150ms ease;
421
- }
422
- .kyro-table-action:hover {
423
- background: var(--kyro-gray-100);
424
- color: var(--kyro-text-primary);
425
- }
426
- .kyro-table-action.danger:hover {
427
- background: var(--kyro-surface-accent);
428
- color: var(--kyro-black);
429
- }
430
- .kyro-empty {
431
- padding: 48px 24px;
432
- text-align: center;
433
- color: var(--kyro-gray-500);
434
- }
435
- .kyro-empty-icon {
436
- width: 40px;
437
- height: 40px;
438
- margin: 0 auto 12px;
439
- color: var(--kyro-gray-400);
440
- }
441
- .kyro-empty-title {
442
- font-size: 14px;
443
- font-weight: 600;
444
- color: var(--kyro-text-primary);
445
- margin-bottom: 4px;
446
- }
447
- .kyro-empty-text {
448
- font-size: 13px;
449
- color: var(--kyro-gray-500);
450
- }
451
- .kyro-detail {
452
- display: flex;
453
- flex-direction: column;
454
- gap: 20px;
455
- }
456
- .kyro-detail-header {
457
- display: flex;
458
- align-items: center;
459
- gap: 12px;
460
- }
461
- .kyro-detail-back {
462
- display: flex;
463
- align-items: center;
464
- justify-content: center;
465
- width: 36px;
466
- height: 36px;
467
- border: 1px solid var(--kyro-border);
468
- background: var(--kyro-surface);
469
- color: var(--kyro-text-secondary);
470
- border-radius: 6px;
471
- cursor: pointer;
472
- transition: all 150ms ease;
473
- text-decoration: none;
474
- }
475
- .kyro-detail-back:hover {
476
- background: var(--kyro-gray-50);
477
- color: var(--kyro-text-primary);
478
- }
479
- .kyro-detail-title {
480
- font-size: 18px;
481
- font-weight: 600;
482
- color: var(--kyro-text-primary);
483
- }
484
- .kyro-detail-meta {
485
- font-size: 13px;
486
- color: var(--kyro-gray-500);
487
- font-family: monospace;
488
- }
489
- .kyro-detail-actions {
490
- margin-left: auto;
491
- display: flex;
492
- gap: 8px;
493
- }
494
- .kyro-detail-body {
495
- display: grid;
496
- grid-template-columns: 1fr 300px;
497
- gap: 20px;
498
- }
499
- @media (max-width: 1024px) {
500
- .kyro-detail-body {
501
- grid-template-columns: 1fr;
502
- }
503
- }
504
- .kyro-meta-card {
505
- display: flex;
506
- flex-direction: column;
507
- gap: 16px;
508
- height: fit-content;
509
- }
510
- .kyro-meta-item {
511
- display: flex;
512
- flex-direction: column;
513
- gap: 4px;
514
- }
515
- .kyro-meta-label {
516
- font-size: 11px;
517
- font-weight: 600;
518
- text-transform: none;
519
- letter-spacing: 0.03em;
520
- color: var(--kyro-gray-500);
521
- }
522
- .kyro-meta-value {
523
- font-size: 14px;
524
- color: var(--kyro-text-primary);
525
- }
526
- .kyro-form {
527
- display: flex;
528
- flex-direction: column;
529
- gap: 12px;
530
- }
531
- .kyro-form-field {
532
- display: flex;
533
- flex-direction: column;
534
- gap: 4px;
535
- }
536
- .kyro-form-label {
537
- font-size: 12px;
538
- font-weight: 500;
539
- color: var(--kyro-text-primary);
540
- display: flex;
541
- align-items: center;
542
- gap: 3px;
543
- }
544
- .kyro-form-label-required {
545
- color: var(--kyro-gray-400);
546
- font-weight: 400;
547
- }
548
- .kyro-form-input {
549
- width: 100%;
550
- padding: 6px 10px;
551
- font-size: 13px;
552
- color: var(--kyro-text-primary);
553
- background: var(--kyro-input-bg);
554
- border: 1px solid var(--kyro-input-border);
555
- border-radius: 6px;
556
- transition: all 150ms ease;
557
- font-family: inherit;
558
- pointer-events: auto !important;
559
- position: relative;
560
- z-index: 1;
561
- }
562
- .kyro-form-input:disabled {
563
- pointer-events: none !important;
564
- opacity: 0.5;
565
- }
566
- .kyro-form-input[disabled] {
567
- pointer-events: none !important;
568
- opacity: 0.5;
569
- }
570
- textarea.kyro-form-input,
571
- textarea.kyro-form-textarea {
572
- pointer-events: auto !important;
573
- cursor: text;
574
- }
575
- input[type=text],
576
- input[type=email],
577
- input[type=password],
578
- input[type=number],
579
- input[type=search],
580
- input[type=url],
581
- input[type=tel],
582
- select.kyro-form-input {
583
- pointer-events: auto !important;
584
- cursor: text;
585
- }
586
- .kyro-form-input:hover {
587
- border-color: var(--kyro-gray-300);
588
- }
589
- .kyro-form-input:focus {
590
- outline: none;
591
- border-color: var(--kyro-black);
592
- box-shadow: 0 0 0 3px var(--kyro-sidebar-border);
593
- }
594
- .kyro-form-input::placeholder {
595
- color: var(--kyro-gray-400);
596
- }
597
- .kyro-form-input-error {
598
- border-color: var(--kyro-gray-900) !important;
599
- }
600
- .kyro-form-textarea {
601
- min-height: 100px;
602
- resize: vertical;
603
- }
604
- .kyro-form-number {
605
- font-variant-numeric: tabular-nums;
606
- }
607
- .kyro-form-select {
608
- appearance: none;
609
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
610
- background-repeat: no-repeat;
611
- background-position: right 10px center;
612
- padding-right: 36px;
613
- }
614
- .kyro-form-checkbox {
615
- display: flex;
616
- align-items: center;
617
- gap: 8px;
618
- cursor: pointer;
619
- }
620
- .kyro-form-checkbox input {
621
- width: 16px;
622
- height: 16px;
623
- accent-color: var(--kyro-black);
624
- }
625
- .kyro-form-checkbox-label {
626
- font-size: 14px;
627
- color: var(--kyro-text-primary);
628
- }
629
- .kyro-form-radio-group {
630
- display: flex;
631
- flex-direction: column;
632
- gap: 8px;
633
- }
634
- .kyro-form-radio {
635
- display: flex;
636
- align-items: center;
637
- gap: 8px;
638
- cursor: pointer;
639
- font-size: 14px;
640
- color: var(--kyro-gray-700);
641
- }
642
- .kyro-form-radio input {
643
- accent-color: var(--kyro-black);
644
- }
645
- .kyro-form-row {
646
- display: grid;
647
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
648
- gap: 16px;
649
- }
650
- .kyro-form-group {
651
- border: 1px solid var(--kyro-border);
652
- border-radius: 8px;
653
- overflow: hidden;
654
- }
655
- .kyro-form-group-header {
656
- padding: 12px 16px;
657
- background: var(--kyro-surface-accent);
658
- border-bottom: 1px solid var(--kyro-border);
659
- }
660
- .kyro-form-group-title {
661
- font-size: 13px;
662
- font-weight: 600;
663
- color: var(--kyro-text-primary);
664
- padding: 12px 16px;
665
- background: var(--kyro-surface-accent);
666
- border-bottom: 1px solid var(--kyro-border);
667
- }
668
- .kyro-form-group-fields {
669
- padding: 16px;
670
- display: flex;
671
- flex-direction: column;
672
- gap: 16px;
673
- }
674
- .kyro-form-group-content {
675
- padding: 16px;
676
- display: flex;
677
- flex-direction: column;
678
- gap: 16px;
679
- }
680
- .kyro-form-error {
681
- font-size: 12px;
682
- color: var(--kyro-gray-600);
683
- font-style: italic;
684
- }
685
- .kyro-form-help {
686
- font-size: 12px;
687
- color: var(--kyro-gray-500);
688
- }
689
- .kyro-form-unsupported {
690
- font-size: 12px;
691
- color: var(--kyro-gray-400);
692
- font-style: italic;
693
- }
694
- .kyro-form-color-wrapper {
695
- display: flex;
696
- align-items: center;
697
- gap: 12px;
698
- }
699
- .kyro-form-color {
700
- width: 42px;
701
- height: 42px;
702
- border: 1px solid var(--kyro-border);
703
- border-radius: 6px;
704
- cursor: pointer;
705
- padding: 2px;
706
- }
707
- .kyro-form-color-value {
708
- font-size: 13px;
709
- font-family: monospace;
710
- color: var(--kyro-gray-600);
711
- }
712
- .kyro-form-richtext {
713
- min-height: 200px;
714
- font-family: inherit;
715
- }
716
- .kyro-form-code {
717
- font-family:
718
- "SF Mono",
719
- "Fira Code",
720
- monospace;
721
- font-size: 13px;
722
- tab-size: 2;
723
- }
724
- .kyro-form-relationship {
725
- border: 1px solid var(--kyro-border);
726
- border-radius: 6px;
727
- cursor: pointer;
728
- transition: all 150ms ease;
729
- }
730
- .kyro-form-relationship:hover {
731
- border-color: var(--kyro-gray-300);
732
- }
733
- .kyro-form-relationship-header {
734
- padding: 8px 12px;
735
- display: flex;
736
- align-items: center;
737
- justify-content: space-between;
738
- background: var(--kyro-surface-accent);
739
- border-bottom: 1px solid var(--kyro-border);
740
- border-radius: 5px 5px 0 0;
741
- }
742
- .kyro-form-relationship-type {
743
- font-size: 11px;
744
- font-weight: 600;
745
- color: var(--kyro-gray-500);
746
- text-transform: none;
747
- letter-spacing: 0.03em;
748
- }
749
- .kyro-form-relationship-badge {
750
- font-size: 10px;
751
- padding: 2px 6px;
752
- background: var(--kyro-gray-100);
753
- color: var(--kyro-text-secondary);
754
- border-radius: 3px;
755
- font-weight: 600;
756
- }
757
- .kyro-form-relationship-value {
758
- padding: 10px 12px;
759
- font-size: 14px;
760
- color: var(--kyro-text-primary);
761
- }
762
- .kyro-form-relationship-empty {
763
- padding: 10px 12px;
764
- font-size: 14px;
765
- color: var(--kyro-gray-400);
766
- }
767
- .kyro-form-array {
768
- display: flex;
769
- flex-direction: column;
770
- gap: 6px;
771
- }
772
- .kyro-form-array-empty {
773
- padding: 12px;
774
- text-align: center;
775
- background: var(--kyro-surface);
776
- border: 2px dashed var(--kyro-border);
777
- border-radius: 6px;
778
- color: var(--kyro-text-muted);
779
- font-size: 12px;
780
- }
781
- .kyro-form-array-item {
782
- background: var(--kyro-surface);
783
- border: 1px solid var(--kyro-border);
784
- border-radius: 6px;
785
- overflow: hidden;
786
- padding: 6px;
787
- }
788
- .kyro-form-array-item-header {
789
- display: flex;
790
- align-items: center;
791
- justify-content: space-between;
792
- padding: 4px 6px;
793
- background: var(--kyro-surface-accent);
794
- border-bottom: 1px solid var(--kyro-border);
795
- }
796
- .kyro-form-array-item-number {
797
- font-size: 10px;
798
- font-weight: 600;
799
- color: var(--kyro-gray-500);
800
- background: var(--kyro-surface);
801
- padding: 1px 4px;
802
- border-radius: 3px;
803
- }
804
- .kyro-form-array-item-remove {
805
- display: flex;
806
- align-items: center;
807
- justify-content: center;
808
- width: 18px;
809
- height: 18px;
810
- border: none;
811
- background: transparent;
812
- color: var(--kyro-gray-400);
813
- cursor: pointer;
814
- border-radius: 3px;
815
- transition: all 150ms ease;
816
- }
817
- .kyro-form-array-item-remove:hover {
818
- background: #fee2e2;
819
- color: #dc2626;
820
- }
821
- .kyro-form-array-item-fields {
822
- padding: 6px;
823
- display: flex;
824
- flex-direction: column;
825
- gap: 6px;
826
- }
827
- .kyro-form-array-item-fields .kyro-form-label {
828
- font-size: 10px;
829
- margin-bottom: 1px;
830
- }
831
- .kyro-form-array-item-fields .kyro-form-input {
832
- padding: 4px 6px;
833
- font-size: 11px;
834
- }
835
- .kyro-form-array-add {
836
- display: inline-flex;
837
- align-items: center;
838
- gap: 4px;
839
- padding: 6px 10px;
840
- font-size: 11px;
841
- font-weight: 600;
842
- color: var(--kyro-text-secondary);
843
- background: var(--kyro-surface-accent);
844
- border: 1px dashed var(--kyro-border);
845
- border-radius: 6px;
846
- cursor: pointer;
847
- transition: all 150ms ease;
848
- }
849
- .kyro-form-array-add:hover {
850
- background: var(--kyro-surface);
851
- border-color: var(--kyro-sidebar-active);
852
- color: var(--kyro-sidebar-active);
853
- }
854
- .kyro-form-array--compact .kyro-form-field {
855
- margin-bottom: 0 !important;
856
- }
857
- .kyro-form-array--compact .kyro-form-field > div > :not([hidden]) ~ :not([hidden]) {
858
- margin-top: 2px !important;
859
- }
860
- .kyro-form-array--compact label {
861
- font-size: 9px;
862
- letter-spacing: 0.08em;
863
- margin-bottom: 0;
864
- opacity: 0.6;
865
- display: block;
866
- }
867
- .kyro-form-array--compact input:not([type=checkbox]):not([type=radio]),
868
- .kyro-form-array--compact textarea,
869
- .kyro-form-array--compact select {
870
- padding: 3px 6px !important;
871
- font-size: 11px !important;
872
- min-height: 26px !important;
873
- border-radius: 4px !important;
874
- }
875
- .kyro-form-array--compact label > span {
876
- display: none;
877
- }
878
- .kyro-form-array--compact [class*=description] {
879
- display: none !important;
880
- }
881
- .kyro-form-blocks {
882
- display: flex;
883
- flex-direction: column;
884
- gap: 12px;
885
- }
886
- .kyro-form-blocks-empty {
887
- padding: 32px;
888
- text-align: center;
889
- background: var(--kyro-surface);
890
- border: 2px dashed var(--kyro-border);
891
- border-radius: 8px;
892
- color: var(--kyro-text-muted);
893
- font-size: 13px;
894
- }
895
- .kyro-form-block-item {
896
- background: var(--kyro-surface);
897
- border: 1px solid var(--kyro-border);
898
- border-radius: 8px;
899
- overflow: hidden;
900
- padding: 10px;
901
- }
902
- .kyro-form-block-item-header {
903
- display: flex;
904
- align-items: center;
905
- justify-content: space-between;
906
- padding: 10px 12px;
907
- background: var(--kyro-surface-accent);
908
- border-bottom: 1px solid var(--kyro-border);
909
- }
910
- .kyro-form-block-item-type {
911
- font-size: 12px;
912
- font-weight: 600;
913
- color: var(--kyro-gray-700);
914
- }
915
- .kyro-form-block-item-actions {
916
- display: flex;
917
- gap: 4px;
918
- }
919
- .kyro-form-block-item-move,
920
- .kyro-form-block-item-remove {
921
- display: flex;
922
- align-items: center;
923
- justify-content: center;
924
- width: 24px;
925
- height: 24px;
926
- border: none;
927
- background: transparent;
928
- color: var(--kyro-gray-400);
929
- cursor: pointer;
930
- border-radius: 4px;
931
- transition: all 150ms ease;
932
- }
933
- .kyro-form-block-item-move:hover,
934
- .kyro-form-block-item-remove:hover {
935
- background: var(--kyro-surface-accent);
936
- color: var(--kyro-black);
937
- }
938
- .kyro-form-block-item-fields {
939
- padding: 16px;
940
- display: flex;
941
- flex-direction: column;
942
- gap: 12px;
943
- }
944
- .kyro-form-blocks-add {
945
- display: flex;
946
- align-items: center;
947
- gap: 8px;
948
- padding-top: 8px;
949
- }
950
- .kyro-form-blocks-add-label {
951
- font-size: 12px;
952
- font-weight: 500;
953
- color: var(--kyro-gray-500);
954
- }
955
- .kyro-form-blocks-add-buttons {
956
- display: flex;
957
- gap: 6px;
958
- flex-wrap: wrap;
959
- }
960
- .kyro-form-tabs {
961
- display: flex;
962
- flex-direction: column;
963
- gap: 16px;
964
- }
965
- .kyro-form-tab {
966
- border: 1px solid var(--kyro-border);
967
- border-radius: 8px;
968
- overflow: hidden;
969
- }
970
- .kyro-form-tab-title {
971
- font-size: 13px;
972
- font-weight: 600;
973
- color: var(--kyro-text-primary);
974
- padding: 10px 16px;
975
- background: var(--kyro-surface-accent);
976
- border-bottom: 1px solid var(--kyro-border);
977
- margin: 0;
978
- }
979
- .kyro-form-tab-content {
980
- padding: 16px;
981
- display: flex;
982
- flex-direction: column;
983
- gap: 16px;
984
- }
985
- .kyro-form-collapsible {
986
- border: 1px solid var(--kyro-border);
987
- border-radius: 8px;
988
- overflow: hidden;
989
- }
990
- .kyro-form-collapsible-header {
991
- display: flex;
992
- align-items: center;
993
- gap: 8px;
994
- width: 100%;
995
- padding: 12px 16px;
996
- background: var(--kyro-surface-accent);
997
- font-size: 13px;
998
- font-weight: 600;
999
- color: var(--kyro-text-primary);
1000
- border: none;
1001
- cursor: pointer;
1002
- text-align: left;
1003
- list-style: none;
1004
- }
1005
- .kyro-form-collapsible-header::-webkit-details-marker {
1006
- display: none;
1007
- }
1008
- .kyro-form-collapsible-header svg {
1009
- color: var(--kyro-gray-500);
1010
- transition: transform 150ms ease;
1011
- }
1012
- .kyro-form-collapsible[open] .kyro-form-collapsible-header svg {
1013
- transform: rotate(90deg);
1014
- }
1015
- .kyro-form-collapsible-content {
1016
- padding: 16px;
1017
- display: flex;
1018
- flex-direction: column;
1019
- gap: 16px;
1020
- }
1021
- .kyro-form-upload {
1022
- border: 2px dashed var(--kyro-border);
1023
- border-radius: 8px;
1024
- padding: 32px;
1025
- text-align: center;
1026
- cursor: pointer;
1027
- transition: all 150ms ease;
1028
- background: var(--kyro-surface);
1029
- }
1030
- .kyro-form-upload:hover,
1031
- .kyro-form-upload-dragging {
1032
- border-color: var(--kyro-black);
1033
- background: var(--kyro-surface-accent);
1034
- }
1035
- .kyro-form-upload-error {
1036
- border-color: var(--kyro-black);
1037
- }
1038
- .kyro-form-upload-input {
1039
- display: none;
1040
- }
1041
- .kyro-form-upload-placeholder {
1042
- display: flex;
1043
- flex-direction: column;
1044
- align-items: center;
1045
- gap: 8px;
1046
- color: var(--kyro-gray-500);
1047
- font-size: 14px;
1048
- }
1049
- .kyro-form-upload-placeholder svg {
1050
- color: var(--kyro-gray-400);
1051
- }
1052
- .kyro-form-upload-hint {
1053
- font-size: 12px;
1054
- color: var(--kyro-gray-400);
1055
- }
1056
- .kyro-form-upload-preview {
1057
- display: flex;
1058
- align-items: center;
1059
- gap: 12px;
1060
- }
1061
- .kyro-form-upload-image {
1062
- width: 64px;
1063
- height: 64px;
1064
- border-radius: 6px;
1065
- object-fit: cover;
1066
- border: 1px solid var(--kyro-border);
1067
- }
1068
- .kyro-form-upload-info {
1069
- display: flex;
1070
- flex-direction: column;
1071
- gap: 4px;
1072
- text-align: left;
1073
- }
1074
- .kyro-form-upload-filename {
1075
- font-size: 13px;
1076
- font-weight: 500;
1077
- color: var(--kyro-text-primary);
1078
- }
1079
- .kyro-form-upload-change {
1080
- font-size: 12px;
1081
- color: var(--kyro-gray-500);
1082
- background: none;
1083
- border: none;
1084
- padding: 0;
1085
- cursor: pointer;
1086
- text-decoration: underline;
1087
- }
1088
- .kyro-form-upload-change:hover {
1089
- color: var(--kyro-black);
1090
- }
1091
- .kyro-badge {
1092
- display: inline-flex;
1093
- align-items: center;
1094
- padding: 2px 8px;
1095
- font-size: 11px;
1096
- font-weight: 600;
1097
- border-radius: 4px;
1098
- text-transform: none;
1099
- letter-spacing: 0.02em;
1100
- }
1101
- .kyro-badge-default {
1102
- background: var(--kyro-gray-100);
1103
- color: var(--kyro-text-secondary);
1104
- }
1105
- .kyro-badge-success {
1106
- background: var(--kyro-gray-100);
1107
- color: var(--kyro-text-primary);
1108
- }
1109
- .kyro-badge-warning {
1110
- background: var(--kyro-gray-200);
1111
- color: var(--kyro-text-primary);
1112
- }
1113
- .kyro-badge-danger {
1114
- background: var(--kyro-gray-200);
1115
- color: var(--kyro-text-primary);
1116
- }
1117
- .kyro-badge-info {
1118
- background: var(--kyro-gray-100);
1119
- color: var(--kyro-text-secondary);
1120
- }
1121
- .kyro-toasts-container {
1122
- position: fixed;
1123
- bottom: 16px;
1124
- right: 16px;
1125
- display: flex;
1126
- flex-direction: column;
1127
- gap: 6px;
1128
- z-index: 9999;
1129
- pointer-events: none;
1130
- }
1131
- .kyro-toast {
1132
- display: flex;
1133
- align-items: center;
1134
- gap: 8px;
1135
- min-width: 240px;
1136
- max-width: 340px;
1137
- padding: 8px 10px;
1138
- color: white;
1139
- border-radius: 8px;
1140
- box-shadow:
1141
- 0 2px 4px -1px rgba(0, 0, 0, 0.08),
1142
- 0 8px 16px -4px rgba(0, 0, 0, 0.15),
1143
- 0 16px 24px -8px rgba(0, 0, 0, 0.2);
1144
- pointer-events: auto;
1145
- position: relative;
1146
- transition: box-shadow 0.2s ease;
1147
- }
1148
- .kyro-toast-success {
1149
- background: #16a34a;
1150
- }
1151
- .kyro-toast-error {
1152
- background: #dc2626;
1153
- }
1154
- .kyro-toast-warning {
1155
- background: #d97706;
1156
- }
1157
- .kyro-toast-info {
1158
- background: #4f46e5;
1159
- }
1160
- .kyro-toast-icon-container {
1161
- flex-shrink: 0;
1162
- width: 20px;
1163
- height: 20px;
1164
- display: flex;
1165
- align-items: center;
1166
- justify-content: center;
1167
- color: rgba(255, 255, 255, 0.85);
1168
- }
1169
- .kyro-toast-content {
1170
- flex: 1;
1171
- min-width: 0;
1172
- }
1173
- .kyro-toast-message {
1174
- font-size: 12px;
1175
- font-weight: 500;
1176
- letter-spacing: -0.01em;
1177
- color: rgba(255, 255, 255, 0.92);
1178
- line-height: 1.3;
1179
- }
1180
- .kyro-toast-close {
1181
- padding: 3px;
1182
- border-radius: 4px;
1183
- color: rgba(255, 255, 255, 0.35);
1184
- transition: all 0.15s ease;
1185
- flex-shrink: 0;
1186
- }
1187
- .kyro-toast-close:hover {
1188
- background: rgba(255, 255, 255, 0.15);
1189
- color: white;
1190
- }
1191
- .kyro-toast-accent {
1192
- display: none;
1193
- }
1194
- .kyro-spinner {
1195
- animation: spin 0.8s linear infinite;
1196
- color: var(--kyro-black);
1197
- }
1198
- .kyro-spin {
1199
- animation: spin 0.8s linear infinite;
1200
- }
1201
- .kyro-spinner-sm {
1202
- width: 14px;
1203
- height: 14px;
1204
- }
1205
- .kyro-spinner-md {
1206
- width: 20px;
1207
- height: 20px;
1208
- }
1209
- .kyro-spinner-lg {
1210
- width: 28px;
1211
- height: 28px;
1212
- }
1213
- @keyframes spin {
1214
- from {
1215
- transform: rotate(0deg);
1216
- }
1217
- to {
1218
- transform: rotate(360deg);
1219
- }
1220
- }
1221
- .kyro-loading {
1222
- display: flex;
1223
- align-items: center;
1224
- justify-content: center;
1225
- padding: 48px;
1226
- color: var(--kyro-gray-500);
1227
- }
1228
- @keyframes shimmer {
1229
- 0% {
1230
- background-position: -200% 0;
1231
- }
1232
- 100% {
1233
- background-position: 200% 0;
1234
- }
1235
- }
1236
- .kyro-shimmer {
1237
- background:
1238
- linear-gradient(
1239
- 90deg,
1240
- var(--kyro-surface-accent) 25%,
1241
- var(--kyro-border) 50%,
1242
- var(--kyro-surface-accent) 75%);
1243
- background-size: 200% 100%;
1244
- animation: shimmer 1.5s ease-in-out infinite;
1245
- }
1246
- .kyro-modal-overlay {
1247
- position: fixed;
1248
- inset: 0;
1249
- background: rgba(11, 18, 34, 0.6);
1250
- display: flex;
1251
- align-items: center;
1252
- justify-content: center;
1253
- z-index: 9999;
1254
- backdrop-filter: blur(4px);
1255
- pointer-events: auto;
1256
- }
1257
- .kyro-modal {
1258
- background: var(--kyro-surface);
1259
- border-radius: 10px;
1260
- padding: 24px;
1261
- max-width: 400px;
1262
- width: 100%;
1263
- animation: modal-in 0.2s ease;
1264
- }
1265
- @keyframes modal-in {
1266
- from {
1267
- transform: scale(0.95);
1268
- opacity: 0;
1269
- }
1270
- to {
1271
- transform: scale(1);
1272
- opacity: 1;
1273
- }
1274
- }
1275
- .kyro-modal h3 {
1276
- margin: 0 0 8px;
1277
- font-size: 18px;
1278
- font-weight: 600;
1279
- color: var(--kyro-text-primary);
1280
- }
1281
- .kyro-modal p {
1282
- margin: 0 0 16px;
1283
- color: var(--kyro-text-secondary);
1284
- font-size: 14px;
1285
- }
1286
- .kyro-modal-actions {
1287
- display: flex;
1288
- justify-content: flex-end;
1289
- gap: 8px;
1290
- }
1291
- .kyro-relation-modal {
1292
- background: var(--kyro-surface);
1293
- border-radius: 12px;
1294
- max-width: 520px;
1295
- width: 100%;
1296
- max-height: 80vh;
1297
- display: flex;
1298
- flex-direction: column;
1299
- animation: modal-in 0.2s ease;
1300
- overflow: hidden;
1301
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
1302
- }
1303
- .kyro-relation-modal-header {
1304
- padding: 20px 24px 0;
1305
- display: flex;
1306
- flex-direction: column;
1307
- gap: 16px;
1308
- }
1309
- .kyro-relation-modal-header h3 {
1310
- font-size: 16px;
1311
- font-weight: 600;
1312
- color: var(--kyro-text-primary);
1313
- margin: 0;
1314
- }
1315
- .kyro-relation-modal-search {
1316
- width: 100%;
1317
- padding: 10px 12px;
1318
- font-size: 14px;
1319
- color: var(--kyro-text-primary);
1320
- background: var(--kyro-surface-accent);
1321
- border: 1px solid var(--kyro-border);
1322
- border-radius: 6px;
1323
- transition: all 150ms ease;
1324
- font-family: inherit;
1325
- }
1326
- .kyro-relation-modal-search:focus {
1327
- outline: none;
1328
- border-color: var(--kyro-black);
1329
- box-shadow: 0 0 0 3px var(--kyro-sidebar-border);
1330
- background: var(--kyro-surface);
1331
- }
1332
- .kyro-relation-modal-search::placeholder {
1333
- color: var(--kyro-gray-400);
1334
- }
1335
- .kyro-relation-modal-list {
1336
- flex: 1;
1337
- overflow-y: auto;
1338
- padding: 8px;
1339
- max-height: 320px;
1340
- }
1341
- .kyro-relation-modal-item {
1342
- display: flex;
1343
- align-items: center;
1344
- gap: 12px;
1345
- width: 100%;
1346
- padding: 10px 16px;
1347
- font-size: 14px;
1348
- color: var(--kyro-text-primary);
1349
- background: transparent;
1350
- border: none;
1351
- border-radius: 6px;
1352
- cursor: pointer;
1353
- transition: all 100ms ease;
1354
- text-align: left;
1355
- font-family: inherit;
1356
- }
1357
- .kyro-relation-modal-item:hover {
1358
- background: var(--kyro-surface-accent);
1359
- }
1360
- .kyro-relation-modal-item.selected {
1361
- background: var(--kyro-black);
1362
- color: var(--kyro-sidebar-text-active);
1363
- }
1364
- .kyro-relation-modal-item-id {
1365
- font-size: 11px;
1366
- color: var(--kyro-gray-400);
1367
- font-family: monospace;
1368
- }
1369
- .kyro-relation-modal-item.selected .kyro-relation-modal-item-id {
1370
- color: rgba(255, 255, 255, 0.6);
1371
- }
1372
- .kyro-relation-modal-empty {
1373
- padding: 32px;
1374
- text-align: center;
1375
- color: var(--kyro-gray-400);
1376
- font-size: 13px;
1377
- }
1378
- .kyro-relation-modal-footer {
1379
- padding: 16px 24px;
1380
- border-top: 1px solid var(--kyro-border);
1381
- display: flex;
1382
- justify-content: flex-end;
1383
- gap: 8px;
1384
- }
1385
- .kyro-color {
1386
- display: flex;
1387
- align-items: center;
1388
- gap: 12px;
1389
- }
1390
- .kyro-color-swatch {
1391
- width: 36px;
1392
- height: 36px;
1393
- border-radius: 6px;
1394
- border: 1px solid var(--kyro-border);
1395
- cursor: pointer;
1396
- padding: 0;
1397
- overflow: hidden;
1398
- }
1399
- .kyro-color-swatch::-webkit-color-swatch-wrapper {
1400
- padding: 0;
1401
- }
1402
- .kyro-color-swatch::-webkit-color-swatch {
1403
- border: none;
1404
- border-radius: 5px;
1405
- }
1406
- .kyro-login-page {
1407
- min-height: 100vh;
1408
- display: flex;
1409
- align-items: center;
1410
- justify-content: center;
1411
- background: var(--kyro-bg);
1412
- padding: 20px;
1413
- }
1414
- .kyro-login-container {
1415
- width: 100%;
1416
- max-width: 400px;
1417
- background: var(--kyro-surface);
1418
- border-radius: var(--kyro-radius-lg);
1419
- box-shadow: var(--kyro-shadow-tile);
1420
- padding: 40px 32px;
1421
- }
1422
- .kyro-login-header {
1423
- text-align: center;
1424
- margin-bottom: 32px;
1425
- }
1426
- .kyro-login-title {
1427
- font-size: 24px;
1428
- font-weight: 700;
1429
- color: var(--kyro-text-primary);
1430
- margin: 0 0 8px;
1431
- letter-spacing: -0.02em;
1432
- }
1433
- .kyro-login-subtitle {
1434
- font-size: 14px;
1435
- color: var(--kyro-gray-500);
1436
- margin: 0;
1437
- }
1438
- .kyro-login-form {
1439
- display: flex;
1440
- flex-direction: column;
1441
- gap: 20px;
1442
- }
1443
- .kyro-login-form .kyro-form-group {
1444
- display: flex;
1445
- flex-direction: column;
1446
- gap: 6px;
1447
- }
1448
- .kyro-login-form .kyro-form-group label {
1449
- font-size: 13px;
1450
- font-weight: 500;
1451
- color: var(--kyro-text-primary);
1452
- }
1453
- .kyro-login-form .kyro-form-group input {
1454
- width: 100%;
1455
- padding: 10px 12px;
1456
- font-size: 14px;
1457
- color: var(--kyro-text-primary);
1458
- background: var(--kyro-input-bg);
1459
- border: 1px solid var(--kyro-input-border);
1460
- border-radius: 6px;
1461
- transition: all 150ms ease;
1462
- font-family: inherit;
1463
- }
1464
- .kyro-login-form .kyro-form-group input:hover {
1465
- border-color: var(--kyro-gray-300);
1466
- }
1467
- .kyro-login-form .kyro-form-group input:focus {
1468
- outline: none;
1469
- border-color: var(--kyro-black);
1470
- box-shadow: 0 0 0 3px var(--kyro-sidebar-border);
1471
- }
1472
- .kyro-login-form .kyro-form-group input::placeholder {
1473
- color: var(--kyro-gray-400);
1474
- }
1475
- .kyro-login-form button[type=submit] {
1476
- width: 100%;
1477
- margin-top: 8px;
1478
- }
1479
- .kyro-login-footer {
1480
- margin-top: 24px;
1481
- text-align: center;
1482
- }
1483
- .kyro-login-footer p {
1484
- font-size: 14px;
1485
- color: var(--kyro-gray-500);
1486
- margin: 0;
1487
- }
1488
- .kyro-login-link {
1489
- background: none;
1490
- border: none;
1491
- color: var(--kyro-text-primary);
1492
- font-weight: 600;
1493
- cursor: pointer;
1494
- font-size: 14px;
1495
- padding: 0;
1496
- text-decoration: underline;
1497
- font-family: inherit;
1498
- }
1499
- .kyro-login-link:hover {
1500
- color: var(--kyro-black-hover);
1501
- text-decoration: none;
1502
- }
1503
- .kyro-sidebar-user-info {
1504
- padding: 8px;
1505
- border-top: 1px solid var(--kyro-sidebar-border);
1506
- margin-bottom: 4px;
1507
- }
1508
- .kyro-sidebar-user-email {
1509
- font-size: 12px;
1510
- font-weight: 500;
1511
- color: var(--kyro-gray-700);
1512
- white-space: nowrap;
1513
- overflow: hidden;
1514
- text-overflow: ellipsis;
1515
- }
1516
- .kyro-sidebar-user-role {
1517
- font-size: 10px;
1518
- font-weight: 600;
1519
- text-transform: none;
1520
- letter-spacing: 0.05em;
1521
- color: var(--kyro-gray-500);
1522
- margin-bottom: 4px;
1523
- }
1524
- .kyro-sidebar-logout {
1525
- color: var(--kyro-gray-400) !important;
1526
- }
1527
- .kyro-sidebar-logout:hover {
1528
- color: var(--kyro-black) !important;
1529
- background: var(--kyro-surface-accent);
1530
- }
1531
- }
1532
- .tiptap-editor-wrapper .ProseMirror {
1533
- outline: none;
1534
- }
1535
- .tiptap-editor-wrapper .ProseMirror > * + * {
1536
- margin-top: 0.75em;
1537
- }
1538
- .tiptap-editor-wrapper [data-node-view-wrapper],
1539
- .tiptap-editor-wrapper [data-node-view-wrapper] * {
1540
- isolation: isolate;
1541
- position: relative;
1542
- }
1543
- .tiptap-editor-wrapper .tiptap-hero-block,
1544
- .tiptap-editor-wrapper .tiptap-heading-block,
1545
- .tiptap-editor-wrapper .tiptap-paragraph-block,
1546
- .tiptap-editor-wrapper .tiptap-quote-block,
1547
- .tiptap-editor-wrapper .tiptap-code-block,
1548
- .tiptap-editor-wrapper .tiptap-image-block,
1549
- .tiptap-editor-wrapper .tiptap-video-block,
1550
- .tiptap-editor-wrapper .tiptap-divider-block,
1551
- .tiptap-editor-wrapper .tiptap-button-block,
1552
- .tiptap-editor-wrapper .tiptap-callout-block {
1553
- position: relative;
1554
- z-index: 1;
1555
- }
1556
- .tiptap-editor-wrapper .tiptap-columns-block,
1557
- .tiptap-editor-wrapper .tiptap-stack-block,
1558
- .tiptap-editor-wrapper .tiptap-column-block,
1559
- .tiptap-editor-wrapper .tiptap-group-block,
1560
- .tiptap-editor-wrapper .tiptap-card-block,
1561
- .tiptap-editor-wrapper .tiptap-repeater-block,
1562
- .tiptap-editor-wrapper .tiptap-accordion-block {
1563
- position: relative;
1564
- z-index: 1;
1565
- isolation: isolate;
1566
- }
1567
- .tiptap-editor-wrapper .tiptap-columns-grid[data-node-view-content] {
1568
- display: flex;
1569
- flex-wrap: wrap;
1570
- gap: 0.75rem;
1571
- align-items: start;
1572
- font-size: 0;
1573
- }
1574
- .tiptap-editor-wrapper .tiptap-columns-grid[data-node-view-content] > * {
1575
- font-size: 0.875rem;
1576
- min-width: 0;
1577
- }
1578
- .tiptap-editor-wrapper .tiptap-columns-grid--1[data-node-view-content] {
1579
- display: block;
1580
- }
1581
- .tiptap-editor-wrapper .tiptap-columns-grid--2[data-node-view-content] {
1582
- display: flex;
1583
- }
1584
- .tiptap-editor-wrapper .tiptap-columns-grid--3[data-node-view-content] {
1585
- display: flex;
1586
- }
1587
- .tiptap-editor-wrapper .tiptap-columns-grid--4[data-node-view-content] {
1588
- display: flex;
1589
- }
1590
- .tiptap-editor-wrapper .tiptap-columns-grid--5[data-node-view-content] {
1591
- display: flex;
1592
- }
1593
- .tiptap-editor-wrapper .tiptap-columns-grid--6[data-node-view-content] {
1594
- display: flex;
1595
- }
1596
- .tiptap-editor-wrapper .tiptap-column-block {
1597
- display: inline-block;
1598
- font-size: 0.875rem;
1599
- flex: 0 0 auto;
1600
- min-width: 0;
1601
- height: 100%;
1602
- vertical-align: top;
1603
- }
1604
- .tiptap-editor-wrapper .tiptap-column-content[data-node-view-content] {
1605
- display: block;
1606
- min-height: 84px;
1607
- }
1608
- .tiptap-editor-wrapper .tiptap-column-content[data-node-view-content] > *:first-child {
1609
- margin-top: 0;
1610
- }
1611
- .tiptap-editor-wrapper .tiptap-column-content[data-node-view-content] > *:last-child {
1612
- margin-bottom: 0;
1613
- }
1614
- .tiptap-editor-wrapper .tiptap-stack-block [data-node-view-content],
1615
- .tiptap-editor-wrapper .tiptap-group-block [data-node-view-content],
1616
- .tiptap-editor-wrapper .tiptap-card-block [data-node-view-content] {
1617
- display: contents;
1618
- }
1619
- .tiptap-editor-wrapper .tiptap-columns-block--1 .tiptap-column-block {
1620
- width: 100%;
1621
- flex-basis: 100%;
1622
- }
1623
- .tiptap-editor-wrapper .tiptap-columns-block--1 .tiptap-columns-grid[data-node-view-content] > * {
1624
- width: 100%;
1625
- flex: 0 0 100%;
1626
- }
1627
- .tiptap-editor-wrapper .tiptap-columns-block--2 .tiptap-column-block {
1628
- width: calc(50% - 0.375rem);
1629
- flex-basis: calc(50% - 0.375rem);
1630
- }
1631
- .tiptap-editor-wrapper .tiptap-columns-block--2 .tiptap-columns-grid[data-node-view-content] > * {
1632
- width: calc(50% - 0.375rem);
1633
- flex: 0 0 calc(50% - 0.375rem);
1634
- }
1635
- .tiptap-editor-wrapper .tiptap-columns-block--3 .tiptap-column-block {
1636
- width: calc(33.333% - 0.5rem);
1637
- flex-basis: calc(33.333% - 0.5rem);
1638
- }
1639
- .tiptap-editor-wrapper .tiptap-columns-block--3 .tiptap-columns-grid[data-node-view-content] > * {
1640
- width: calc(33.333% - 0.5rem);
1641
- flex: 0 0 calc(33.333% - 0.5rem);
1642
- }
1643
- .tiptap-editor-wrapper .tiptap-columns-block--4 .tiptap-column-block {
1644
- width: calc(25% - 0.5625rem);
1645
- flex-basis: calc(25% - 0.5625rem);
1646
- }
1647
- .tiptap-editor-wrapper .tiptap-columns-block--4 .tiptap-columns-grid[data-node-view-content] > * {
1648
- width: calc(25% - 0.5625rem);
1649
- flex: 0 0 calc(25% - 0.5625rem);
1650
- }
1651
- .tiptap-editor-wrapper .tiptap-columns-block--5 .tiptap-column-block {
1652
- width: calc(20% - 0.6rem);
1653
- flex-basis: calc(20% - 0.6rem);
1654
- }
1655
- .tiptap-editor-wrapper .tiptap-columns-block--5 .tiptap-columns-grid[data-node-view-content] > * {
1656
- width: calc(20% - 0.6rem);
1657
- flex: 0 0 calc(20% - 0.6rem);
1658
- }
1659
- .tiptap-editor-wrapper .tiptap-columns-block--6 .tiptap-column-block {
1660
- width: calc(16.666% - 0.625rem);
1661
- flex-basis: calc(16.666% - 0.625rem);
1662
- }
1663
- .tiptap-editor-wrapper .tiptap-columns-block--6 .tiptap-columns-grid[data-node-view-content] > * {
1664
- width: calc(16.666% - 0.625rem);
1665
- flex: 0 0 calc(16.666% - 0.625rem);
1666
- }
1667
- @media (max-width: 720px) {
1668
- .tiptap-editor-wrapper .tiptap-columns-grid[data-node-view-content] {
1669
- display: block !important;
1670
- }
1671
- }
1672
- .tiptap-editor-wrapper .group:hover .drag-handle,
1673
- .tiptap-editor-wrapper .group:hover .tiptap-drag-handle {
1674
- opacity: 1;
1675
- }
1676
- .tiptap-editor-wrapper .ProseMirror .node--component {
1677
- display: block;
1678
- }
1679
- #kyro-fab {
1680
- animation: fab-enter 0.3s ease-out;
1681
- }
1682
- #kyro-fab.fab-hidden {
1683
- opacity: 0;
1684
- transform: scale(0.8);
1685
- pointer-events: none;
1686
- transition: opacity 200ms ease, transform 200ms ease;
1687
- }
1688
- @keyframes fab-enter {
1689
- from {
1690
- opacity: 0;
1691
- transform: scale(0.5) translateY(16px);
1692
- }
1693
- to {
1694
- opacity: 1;
1695
- transform: scale(1) translateY(0);
1696
- }
1697
- }
1698
- /*# sourceMappingURL=index.css.map */
1
+ @import"tailwindcss";@custom-variant dark (&:where(.dark,.dark *));@source "../../src/**/*.{astro,html,js,jsx,ts,tsx}";:root{--kyro-black: #0b1222;--kyro-black-light: #1a2332;--kyro-black-hover: #2a3342;--kyro-gray-50: #f9fafb;--kyro-gray-100: #f3f4f6;--kyro-gray-200: #e5e7eb;--kyro-gray-300: #d1d5db;--kyro-gray-400: #9ca3af;--kyro-gray-500: #6b7280;--kyro-gray-600: #4b5563;--kyro-gray-700: #374151;--kyro-gray-800: #1f2937;--kyro-gray-900: #111827;--kyro-bg: #eaeff2;--kyro-surface: #ffffff;--kyro-surface-accent: #f9fafb;--kyro-sidebar-bg: #ffffff;--kyro-sidebar-active: #0b1222;--kyro-sidebar-text: #64748b;--kyro-sidebar-text-active: #ffffff;--kyro-sidebar-border: rgba(0, 0, 0, .05);--kyro-text-primary: #0b1222;--kyro-text-secondary: #64748b;--kyro-text-muted: #94a3b8;--kyro-border: #f3f4f6;--kyro-input-bg: #ffffff;--kyro-input-border: #e5e7eb;--kyro-radius-tile: 32px;--kyro-radius-lg: 16px;--kyro-radius-xl: 48px;--kyro-shadow-tile: 0 10px 40px -10px rgba(0, 0, 0, .04);--kyro-primary: #0b1222;--kyro-primary-hover: #1a2332;--kyro-success: #22c55e;--kyro-success-bg: rgba(34, 197, 94, .1);--kyro-danger: #ef4444;--kyro-danger-bg: rgba(239, 68, 68, .1);--kyro-error: #ef4444;--kyro-warning: #ffae00;--kyro-warning-bg: rgba(255, 174, 0, .1);--kyro-border-active: #0b1222;--kyro-bg-secondary: #f3f4f6;--kyro-sidebar-width: 320px;--kyro-header-height: 80px}:root.dark{--kyro-bg: #050912;--kyro-surface: #0b1222;--kyro-surface-accent: #111a2e;--kyro-sidebar-bg: #0b1222;--kyro-sidebar-active: #ffffff;--kyro-sidebar-text: #94a3b8;--kyro-sidebar-text-active: #0b1222;--kyro-sidebar-border: rgba(255, 255, 255, .05);--kyro-text-primary: #ffffff;--kyro-text-secondary: #94a3b8;--kyro-text-muted: #64748b;--kyro-border: #1a2332;--kyro-input-bg: #111a2e;--kyro-input-border: #1e293b;--kyro-black: #ffffff;--kyro-black-light: #f3f4f6;--kyro-black-hover: #e5e7eb;--kyro-gray-50: #1a2332;--kyro-gray-100: #1e293b;--kyro-gray-200: #334155;--kyro-primary: var(--kyro-sidebar-active);--kyro-primary-hover: var(--kyro-sidebar-text-active);--kyro-success: #22c55e;--kyro-success-bg: rgba(34, 197, 94, .15);--kyro-danger: #f87171;--kyro-danger-bg: rgba(248, 113, 113, .15);--kyro-error: #f87171;--kyro-warning: #ffae00;--kyro-warning-bg: rgba(255, 174, 0, .15);--kyro-border-active: #ffffff;--kyro-bg-secondary: #111a2e;color-scheme:dark}@theme{ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --color-primary: var(--kyro-black); --color-primary-hover: var(--kyro-black-hover); --color-primary-light: var(--kyro-gray-100); --color-gray-50: var(--kyro-gray-50); --color-gray-100: var(--kyro-gray-100); --color-gray-200: var(--kyro-gray-200); --color-gray-400: var(--kyro-gray-400); --color-gray-500: var(--kyro-gray-500); --radius-tile: var(--kyro-radius-tile); --radius-lg: var(--kyro-radius-lg); --radius-xl: var(--kyro-radius-xl); --shadow-tile: var(--kyro-shadow-tile); --animate-slide-in-from-right: slide-in-from-right .2s ease-out; @keyframes slide-in-from-right { from { transform: translateX(100%); } to { transform: translateX(0); } } }@layer base{html{font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--kyro-text-primary);background:var(--kyro-bg);transition:background-color .3s ease,color .3s ease}*{scrollbar-width:none;-ms-overflow-style:none}*::-webkit-scrollbar{display:none}a,button,[role=button],input[type=button],input[type=submit],input[type=reset]{cursor:pointer}.kyro-glass{background:#ffffffb3;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.3)}.dark .kyro-glass{background:#0b1222b3;border:1px solid rgba(255,255,255,.05)}.font-bold{font-weight:900;letter-spacing:-.05em;line-height:1.1}}@layer components{.kyro-admin{display:flex;height:100vh;padding:16px;gap:16px;background:var(--kyro-bg)}.kyro-sidebar{width:var(--kyro-sidebar-width);background:var(--kyro-sidebar-bg);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.kyro-sidebar-logo{height:var(--kyro-header-height);display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--kyro-sidebar-border)}.kyro-sidebar-logo-text{font-size:16px;font-weight:600;color:var(--kyro-sidebar-text-active);letter-spacing:-.02em}.kyro-sidebar-nav{flex:1;overflow-y:auto;padding:12px 0}.kyro-sidebar-section{margin-bottom:8px}.kyro-sidebar-section-title{padding:8px 20px;font-size:11px;font-weight:600;text-transform:none;letter-spacing:.05em;color:var(--kyro-gray-500)}.kyro-sidebar-divider{height:1px;background:var(--kyro-sidebar-border);margin:12px 20px}.kyro-sidebar-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 20px;font-size:14px;font-weight:500;color:var(--kyro-sidebar-text);background:transparent;border:none;cursor:pointer;transition:all .15s ease;text-align:left;text-decoration:none}.kyro-sidebar-item:hover{color:var(--kyro-black);background:var(--kyro-gray-50)}.kyro-sidebar-item.active{color:var(--kyro-sidebar-text-active);background:var(--kyro-sidebar-active)}.kyro-sidebar-item svg{width:18px;height:18px;flex-shrink:0;opacity:.7}.kyro-sidebar-item.active svg,.kyro-sidebar-item:hover svg{opacity:1}.kyro-sidebar-footer{padding:12px 20px;border-top:1px solid var(--kyro-sidebar-border)}.kyro-sidebar.collapsed{width:72px}.kyro-sidebar.collapsed .kyro-sidebar-item{justify-content:center;padding:12px}.kyro-sidebar.collapsed .kyro-sidebar-item span,.kyro-sidebar.collapsed .kyro-sidebar-section-title{display:none}.kyro-sidebar.collapsed .kyro-sidebar-logo{justify-content:center;padding:0}.kyro-admin-main{flex:1;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto}.kyro-admin-content{flex:1;overflow-y:auto;padding:24px;pointer-events:auto}.kyro-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:500;border-radius:9999px;cursor:pointer;transition:all .15s ease;border:1px solid transparent;font-family:inherit;white-space:nowrap;text-decoration:none}.kyro-btn:disabled{opacity:.5;cursor:not-allowed}.kyro-btn-sm{padding:6px 10px;font-size:12px}.kyro-btn-md{padding:8px 14px;font-size:13px}.kyro-btn-lg{padding:10px 18px;font-size:14px}.kyro-btn-primary{background:var(--kyro-black);color:var(--kyro-sidebar-text-active);border-color:var(--kyro-black)}.kyro-btn-primary:hover:not(:disabled){background:var(--kyro-black-hover);border-color:var(--kyro-black-hover)}.kyro-btn-secondary{background:var(--kyro-surface);color:var(--kyro-text-primary);border-color:var(--kyro-border)}.kyro-btn-secondary:hover:not(:disabled){background:var(--kyro-gray-50);border-color:var(--kyro-gray-300)}.kyro-btn-danger{background:var(--kyro-surface);color:var(--kyro-text-primary);border-color:var(--kyro-text-primary)}.kyro-btn-danger:hover:not(:disabled){background:var(--kyro-gray-900);color:var(--kyro-sidebar-text-active)}.kyro-btn-ghost{background:transparent;color:var(--kyro-gray-500)}.kyro-btn-ghost:hover:not(:disabled){background:var(--kyro-gray-100);color:var(--kyro-text-primary)}.kyro-btn-success{background:var(--kyro-success);color:#fff;border-color:var(--kyro-success)}.kyro-btn-success:hover:not(:disabled){filter:brightness(.85)}.kyro-btn-success:disabled{background:var(--kyro-gray-300);border-color:var(--kyro-gray-300);color:var(--kyro-gray-500)}.kyro-btn-warning{background:var(--kyro-warning);color:#fff;border-color:var(--kyro-warning)}.kyro-btn-warning:hover:not(:disabled){filter:brightness(.85)}.surface-tile{box-shadow:var(--kyro-shadow-tile);padding:24px;background:var(--kyro-surface);border-radius:var(--kyro-radius-tile)}.kyro-card{border:1px solid var(--kyro-border);box-shadow:var(--kyro-shadow-tile);padding:24px;background:var(--kyro-surface);border-radius:var(--kyro-radius-lg)}.kyro-card-header{display:flex;align-items:center;justify-content:space-between;padding:24px 32px}.kyro-card-title{font-size:24px;font-weight:700;color:var(--kyro-text-primary);letter-spacing:-.01em}.kyro-card-content{padding:0 32px 32px}.kyro-list{display:flex;flex-direction:column;gap:20px}.kyro-list-header{display:flex;align-items:center;justify-content:space-between}.kyro-list-title{font-size:18px;font-weight:600;color:var(--kyro-text-primary)}.kyro-table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;border:1px solid var(--kyro-border)}.kyro-table th{padding:12px 16px;font-size:12px;font-weight:600;text-transform:none;letter-spacing:.03em;color:var(--kyro-gray-500);background:var(--kyro-gray-50);border-bottom:1px solid var(--kyro-border);text-align:left}.kyro-table td{padding:14px 16px;border-bottom:1px solid var(--kyro-gray-100);font-size:14px;color:var(--kyro-text-primary)}.kyro-table tr:last-child td{border-bottom:none}.kyro-table tr:hover td{background:var(--kyro-gray-50)}.kyro-table-actions{display:flex;gap:4px}.kyro-table-action{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;color:var(--kyro-gray-500);border-radius:6px;cursor:pointer;transition:all .15s ease}.kyro-table-action:hover{background:var(--kyro-gray-100);color:var(--kyro-text-primary)}.kyro-table-action.danger:hover{background:var(--kyro-surface-accent);color:var(--kyro-black)}.kyro-empty{padding:48px 24px;text-align:center;color:var(--kyro-gray-500)}.kyro-empty-icon{width:40px;height:40px;margin:0 auto 12px;color:var(--kyro-gray-400)}.kyro-empty-title{font-size:14px;font-weight:600;color:var(--kyro-text-primary);margin-bottom:4px}.kyro-empty-text{font-size:13px;color:var(--kyro-gray-500)}.kyro-detail{display:flex;flex-direction:column;gap:20px}.kyro-detail-header{display:flex;align-items:center;gap:12px}.kyro-detail-back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--kyro-border);background:var(--kyro-surface);color:var(--kyro-text-secondary);border-radius:6px;cursor:pointer;transition:all .15s ease;text-decoration:none}.kyro-detail-back:hover{background:var(--kyro-gray-50);color:var(--kyro-text-primary)}.kyro-detail-title{font-size:18px;font-weight:600;color:var(--kyro-text-primary)}.kyro-detail-meta{font-size:13px;color:var(--kyro-gray-500);font-family:monospace}.kyro-detail-actions{margin-left:auto;display:flex;gap:8px}.kyro-detail-body{display:grid;grid-template-columns:1fr 300px;gap:20px}@media(max-width:1024px){.kyro-detail-body{grid-template-columns:1fr}}.kyro-meta-card{display:flex;flex-direction:column;gap:16px;height:fit-content}.kyro-meta-item{display:flex;flex-direction:column;gap:4px}.kyro-meta-label{font-size:11px;font-weight:600;text-transform:none;letter-spacing:.03em;color:var(--kyro-gray-500)}.kyro-meta-value{font-size:14px;color:var(--kyro-text-primary)}.kyro-form{display:flex;flex-direction:column;gap:12px}.kyro-form-field{display:flex;flex-direction:column;gap:4px}.kyro-form-label{font-size:12px;font-weight:500;color:var(--kyro-text-primary);display:flex;align-items:center;gap:3px}.kyro-form-label-required{color:var(--kyro-gray-400);font-weight:400}.kyro-form-input{width:100%;padding:6px 10px;font-size:13px;color:var(--kyro-text-primary);background:var(--kyro-input-bg);border:1px solid var(--kyro-input-border);border-radius:6px;transition:all .15s ease;font-family:inherit;pointer-events:auto!important;position:relative;z-index:1}.kyro-form-input:disabled{pointer-events:none!important;opacity:.5}.kyro-form-input[disabled]{pointer-events:none!important;opacity:.5}textarea.kyro-form-input,textarea.kyro-form-textarea,input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=url],input[type=tel],select.kyro-form-input{pointer-events:auto!important;cursor:text}.kyro-form-input:hover{border-color:var(--kyro-gray-300)}.kyro-form-input:focus{outline:none;border-color:var(--kyro-black);box-shadow:0 0 0 3px var(--kyro-sidebar-border)}.kyro-form-input::placeholder{color:var(--kyro-gray-400)}.kyro-form-input-error{border-color:var(--kyro-gray-900)!important}.kyro-form-textarea{min-height:100px;resize:vertical}.kyro-form-number{font-variant-numeric:tabular-nums}.kyro-form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:36px}.kyro-form-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer}.kyro-form-checkbox input{width:16px;height:16px;accent-color:var(--kyro-black)}.kyro-form-checkbox-label{font-size:14px;color:var(--kyro-text-primary)}.kyro-form-radio-group{display:flex;flex-direction:column;gap:8px}.kyro-form-radio{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--kyro-gray-700)}.kyro-form-radio input{accent-color:var(--kyro-black)}.kyro-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.kyro-form-group{border:1px solid var(--kyro-border);border-radius:8px;overflow:hidden}.kyro-form-group-header{padding:12px 16px;background:var(--kyro-surface-accent);border-bottom:1px solid var(--kyro-border)}.kyro-form-group-title{font-size:13px;font-weight:600;color:var(--kyro-text-primary);padding:12px 16px;background:var(--kyro-surface-accent);border-bottom:1px solid var(--kyro-border)}.kyro-form-group-fields,.kyro-form-group-content{padding:16px;display:flex;flex-direction:column;gap:16px}.kyro-form-error{font-size:12px;color:var(--kyro-gray-600);font-style:italic}.kyro-form-help{font-size:12px;color:var(--kyro-gray-500)}.kyro-form-unsupported{font-size:12px;color:var(--kyro-gray-400);font-style:italic}.kyro-form-color-wrapper{display:flex;align-items:center;gap:12px}.kyro-form-color{width:42px;height:42px;border:1px solid var(--kyro-border);border-radius:6px;cursor:pointer;padding:2px}.kyro-form-color-value{font-size:13px;font-family:monospace;color:var(--kyro-gray-600)}.kyro-form-richtext{min-height:200px;font-family:inherit}.kyro-form-code{font-family:SF Mono,Fira Code,monospace;font-size:13px;tab-size:2}.kyro-form-relationship{border:1px solid var(--kyro-border);border-radius:6px;cursor:pointer;transition:all .15s ease}.kyro-form-relationship:hover{border-color:var(--kyro-gray-300)}.kyro-form-relationship-header{padding:8px 12px;display:flex;align-items:center;justify-content:space-between;background:var(--kyro-surface-accent);border-bottom:1px solid var(--kyro-border);border-radius:5px 5px 0 0}.kyro-form-relationship-type{font-size:11px;font-weight:600;color:var(--kyro-gray-500);text-transform:none;letter-spacing:.03em}.kyro-form-relationship-badge{font-size:10px;padding:2px 6px;background:var(--kyro-gray-100);color:var(--kyro-text-secondary);border-radius:3px;font-weight:600}.kyro-form-relationship-value{padding:10px 12px;font-size:14px;color:var(--kyro-text-primary)}.kyro-form-relationship-empty{padding:10px 12px;font-size:14px;color:var(--kyro-gray-400)}.kyro-form-array{display:flex;flex-direction:column;gap:6px}.kyro-form-array-empty{padding:12px;text-align:center;background:var(--kyro-surface);border:2px dashed var(--kyro-border);border-radius:6px;color:var(--kyro-text-muted);font-size:12px}.kyro-form-array-item{background:var(--kyro-surface);border:1px solid var(--kyro-border);border-radius:6px;overflow:hidden;padding:6px}.kyro-form-array-item-header{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;background:var(--kyro-surface-accent);border-bottom:1px solid var(--kyro-border)}.kyro-form-array-item-number{font-size:10px;font-weight:600;color:var(--kyro-gray-500);background:var(--kyro-surface);padding:1px 4px;border-radius:3px}.kyro-form-array-item-remove{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:transparent;color:var(--kyro-gray-400);cursor:pointer;border-radius:3px;transition:all .15s ease}.kyro-form-array-item-remove:hover{background:#fee2e2;color:#dc2626}.kyro-form-array-item-fields{padding:6px;display:flex;flex-direction:column;gap:6px}.kyro-form-array-item-fields .kyro-form-label{font-size:10px;margin-bottom:1px}.kyro-form-array-item-fields .kyro-form-input{padding:4px 6px;font-size:11px}.kyro-form-array-add{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;font-size:11px;font-weight:600;color:var(--kyro-text-secondary);background:var(--kyro-surface-accent);border:1px dashed var(--kyro-border);border-radius:6px;cursor:pointer;transition:all .15s ease}.kyro-form-array-add:hover{background:var(--kyro-surface);border-color:var(--kyro-sidebar-active);color:var(--kyro-sidebar-active)}.kyro-form-array--compact .kyro-form-field{margin-bottom:0!important}.kyro-form-array--compact .kyro-form-field>div>:not([hidden])~:not([hidden]){margin-top:2px!important}.kyro-form-array--compact label{font-size:9px;letter-spacing:.08em;margin-bottom:0;opacity:.6;display:block}.kyro-form-array--compact input:not([type=checkbox]):not([type=radio]),.kyro-form-array--compact textarea,.kyro-form-array--compact select{padding:3px 6px!important;font-size:11px!important;min-height:26px!important;border-radius:4px!important}.kyro-form-array--compact label>span{display:none}.kyro-form-array--compact [class*=description]{display:none!important}.kyro-form-blocks{display:flex;flex-direction:column;gap:12px}.kyro-form-blocks-empty{padding:32px;text-align:center;background:var(--kyro-surface);border:2px dashed var(--kyro-border);border-radius:8px;color:var(--kyro-text-muted);font-size:13px}.kyro-form-block-item{background:var(--kyro-surface);border:1px solid var(--kyro-border);border-radius:8px;overflow:hidden;padding:10px}.kyro-form-block-item-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--kyro-surface-accent);border-bottom:1px solid var(--kyro-border)}.kyro-form-block-item-type{font-size:12px;font-weight:600;color:var(--kyro-gray-700)}.kyro-form-block-item-actions{display:flex;gap:4px}.kyro-form-block-item-move,.kyro-form-block-item-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:var(--kyro-gray-400);cursor:pointer;border-radius:4px;transition:all .15s ease}.kyro-form-block-item-move:hover,.kyro-form-block-item-remove:hover{background:var(--kyro-surface-accent);color:var(--kyro-black)}.kyro-form-block-item-fields{padding:16px;display:flex;flex-direction:column;gap:12px}.kyro-form-blocks-add{display:flex;align-items:center;gap:8px;padding-top:8px}.kyro-form-blocks-add-label{font-size:12px;font-weight:500;color:var(--kyro-gray-500)}.kyro-form-blocks-add-buttons{display:flex;gap:6px;flex-wrap:wrap}.kyro-form-tabs{display:flex;flex-direction:column;gap:16px}.kyro-form-tab{border:1px solid var(--kyro-border);border-radius:8px;overflow:hidden}.kyro-form-tab-title{font-size:13px;font-weight:600;color:var(--kyro-text-primary);padding:10px 16px;background:var(--kyro-surface-accent);border-bottom:1px solid var(--kyro-border);margin:0}.kyro-form-tab-content{padding:16px;display:flex;flex-direction:column;gap:16px}.kyro-form-collapsible{border:1px solid var(--kyro-border);border-radius:8px;overflow:hidden}.kyro-form-collapsible-header{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;background:var(--kyro-surface-accent);font-size:13px;font-weight:600;color:var(--kyro-text-primary);border:none;cursor:pointer;text-align:left;list-style:none}.kyro-form-collapsible-header::-webkit-details-marker{display:none}.kyro-form-collapsible-header svg{color:var(--kyro-gray-500);transition:transform .15s ease}.kyro-form-collapsible[open] .kyro-form-collapsible-header svg{transform:rotate(90deg)}.kyro-form-collapsible-content{padding:16px;display:flex;flex-direction:column;gap:16px}.kyro-form-upload{border:2px dashed var(--kyro-border);border-radius:8px;padding:32px;text-align:center;cursor:pointer;transition:all .15s ease;background:var(--kyro-surface)}.kyro-form-upload:hover,.kyro-form-upload-dragging{border-color:var(--kyro-black);background:var(--kyro-surface-accent)}.kyro-form-upload-error{border-color:var(--kyro-black)}.kyro-form-upload-input{display:none}.kyro-form-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--kyro-gray-500);font-size:14px}.kyro-form-upload-placeholder svg{color:var(--kyro-gray-400)}.kyro-form-upload-hint{font-size:12px;color:var(--kyro-gray-400)}.kyro-form-upload-preview{display:flex;align-items:center;gap:12px}.kyro-form-upload-image{width:64px;height:64px;border-radius:6px;object-fit:cover;border:1px solid var(--kyro-border)}.kyro-form-upload-info{display:flex;flex-direction:column;gap:4px;text-align:left}.kyro-form-upload-filename{font-size:13px;font-weight:500;color:var(--kyro-text-primary)}.kyro-form-upload-change{font-size:12px;color:var(--kyro-gray-500);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}.kyro-form-upload-change:hover{color:var(--kyro-black)}.kyro-badge{display:inline-flex;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;border-radius:4px;text-transform:none;letter-spacing:.02em}.kyro-badge-default{background:var(--kyro-gray-100);color:var(--kyro-text-secondary)}.kyro-badge-success{background:var(--kyro-gray-100);color:var(--kyro-text-primary)}.kyro-badge-warning,.kyro-badge-danger{background:var(--kyro-gray-200);color:var(--kyro-text-primary)}.kyro-badge-info{background:var(--kyro-gray-100);color:var(--kyro-text-secondary)}.kyro-toasts-container{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;gap:6px;z-index:9999;pointer-events:none}.kyro-toast{display:flex;align-items:center;gap:8px;min-width:240px;max-width:340px;padding:8px 10px;color:#fff;border-radius:8px;box-shadow:0 2px 4px -1px #00000014,0 8px 16px -4px #00000026,0 16px 24px -8px #0003;pointer-events:auto;position:relative;transition:box-shadow .2s ease}.kyro-toast-success{background:#16a34a}.kyro-toast-error{background:#dc2626}.kyro-toast-warning{background:#d97706}.kyro-toast-info{background:#4f46e5}.kyro-toast-icon-container{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#ffffffd9}.kyro-toast-content{flex:1;min-width:0}.kyro-toast-message{font-size:12px;font-weight:500;letter-spacing:-.01em;color:#ffffffeb;line-height:1.3}.kyro-toast-close{padding:3px;border-radius:4px;color:#ffffff59;transition:all .15s ease;flex-shrink:0}.kyro-toast-close:hover{background:#ffffff26;color:#fff}.kyro-toast-accent{display:none}.kyro-spinner{animation:spin .8s linear infinite;color:var(--kyro-black)}.kyro-spin{animation:spin .8s linear infinite}.kyro-spinner-sm{width:14px;height:14px}.kyro-spinner-md{width:20px;height:20px}.kyro-spinner-lg{width:28px;height:28px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.kyro-loading{display:flex;align-items:center;justify-content:center;padding:48px;color:var(--kyro-gray-500)}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.kyro-shimmer{background:linear-gradient(90deg,var(--kyro-surface-accent) 25%,var(--kyro-border) 50%,var(--kyro-surface-accent) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}.kyro-modal-overlay{position:fixed;inset:0;background:#0b122299;display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(4px);pointer-events:auto}.kyro-modal{background:var(--kyro-surface);border-radius:10px;padding:24px;max-width:400px;width:100%;animation:modal-in .2s ease}@keyframes modal-in{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.kyro-modal h3{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--kyro-text-primary)}.kyro-modal p{margin:0 0 16px;color:var(--kyro-text-secondary);font-size:14px}.kyro-modal-actions{display:flex;justify-content:flex-end;gap:8px}.kyro-relation-modal{background:var(--kyro-surface);border-radius:12px;max-width:520px;width:100%;max-height:80vh;display:flex;flex-direction:column;animation:modal-in .2s ease;overflow:hidden;box-shadow:0 25px 50px -12px #00000040}.kyro-relation-modal-header{padding:20px 24px 0;display:flex;flex-direction:column;gap:16px}.kyro-relation-modal-header h3{font-size:16px;font-weight:600;color:var(--kyro-text-primary);margin:0}.kyro-relation-modal-search{width:100%;padding:10px 12px;font-size:14px;color:var(--kyro-text-primary);background:var(--kyro-surface-accent);border:1px solid var(--kyro-border);border-radius:6px;transition:all .15s ease;font-family:inherit}.kyro-relation-modal-search:focus{outline:none;border-color:var(--kyro-black);box-shadow:0 0 0 3px var(--kyro-sidebar-border);background:var(--kyro-surface)}.kyro-relation-modal-search::placeholder{color:var(--kyro-gray-400)}.kyro-relation-modal-list{flex:1;overflow-y:auto;padding:8px;max-height:320px}.kyro-relation-modal-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;font-size:14px;color:var(--kyro-text-primary);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .1s ease;text-align:left;font-family:inherit}.kyro-relation-modal-item:hover{background:var(--kyro-surface-accent)}.kyro-relation-modal-item.selected{background:var(--kyro-black);color:var(--kyro-sidebar-text-active)}.kyro-relation-modal-item-id{font-size:11px;color:var(--kyro-gray-400);font-family:monospace}.kyro-relation-modal-item.selected .kyro-relation-modal-item-id{color:#fff9}.kyro-relation-modal-empty{padding:32px;text-align:center;color:var(--kyro-gray-400);font-size:13px}.kyro-relation-modal-footer{padding:16px 24px;border-top:1px solid var(--kyro-border);display:flex;justify-content:flex-end;gap:8px}.kyro-color{display:flex;align-items:center;gap:12px}.kyro-color-swatch{width:36px;height:36px;border-radius:6px;border:1px solid var(--kyro-border);cursor:pointer;padding:0;overflow:hidden}.kyro-color-swatch::-webkit-color-swatch-wrapper{padding:0}.kyro-color-swatch::-webkit-color-swatch{border:none;border-radius:5px}.kyro-login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--kyro-bg);padding:20px}.kyro-login-container{width:100%;max-width:400px;background:var(--kyro-surface);border-radius:var(--kyro-radius-lg);box-shadow:var(--kyro-shadow-tile);padding:40px 32px}.kyro-login-header{text-align:center;margin-bottom:32px}.kyro-login-title{font-size:24px;font-weight:700;color:var(--kyro-text-primary);margin:0 0 8px;letter-spacing:-.02em}.kyro-login-subtitle{font-size:14px;color:var(--kyro-gray-500);margin:0}.kyro-login-form{display:flex;flex-direction:column;gap:20px}.kyro-login-form .kyro-form-group{display:flex;flex-direction:column;gap:6px}.kyro-login-form .kyro-form-group label{font-size:13px;font-weight:500;color:var(--kyro-text-primary)}.kyro-login-form .kyro-form-group input{width:100%;padding:10px 12px;font-size:14px;color:var(--kyro-text-primary);background:var(--kyro-input-bg);border:1px solid var(--kyro-input-border);border-radius:6px;transition:all .15s ease;font-family:inherit}.kyro-login-form .kyro-form-group input:hover{border-color:var(--kyro-gray-300)}.kyro-login-form .kyro-form-group input:focus{outline:none;border-color:var(--kyro-black);box-shadow:0 0 0 3px var(--kyro-sidebar-border)}.kyro-login-form .kyro-form-group input::placeholder{color:var(--kyro-gray-400)}.kyro-login-form button[type=submit]{width:100%;margin-top:8px}.kyro-login-footer{margin-top:24px;text-align:center}.kyro-login-footer p{font-size:14px;color:var(--kyro-gray-500);margin:0}.kyro-login-link{background:none;border:none;color:var(--kyro-text-primary);font-weight:600;cursor:pointer;font-size:14px;padding:0;text-decoration:underline;font-family:inherit}.kyro-login-link:hover{color:var(--kyro-black-hover);text-decoration:none}.kyro-sidebar-user-info{padding:8px;border-top:1px solid var(--kyro-sidebar-border);margin-bottom:4px}.kyro-sidebar-user-email{font-size:12px;font-weight:500;color:var(--kyro-gray-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kyro-sidebar-user-role{font-size:10px;font-weight:600;text-transform:none;letter-spacing:.05em;color:var(--kyro-gray-500);margin-bottom:4px}.kyro-sidebar-logout{color:var(--kyro-gray-400)!important}.kyro-sidebar-logout:hover{color:var(--kyro-black)!important;background:var(--kyro-surface-accent)}}.tiptap-editor-wrapper .ProseMirror{outline:none}.tiptap-editor-wrapper .ProseMirror>*+*{margin-top:.75em}.tiptap-editor-wrapper [data-node-view-wrapper],.tiptap-editor-wrapper [data-node-view-wrapper] *{isolation:isolate;position:relative}.tiptap-editor-wrapper .tiptap-hero-block,.tiptap-editor-wrapper .tiptap-heading-block,.tiptap-editor-wrapper .tiptap-paragraph-block,.tiptap-editor-wrapper .tiptap-quote-block,.tiptap-editor-wrapper .tiptap-code-block,.tiptap-editor-wrapper .tiptap-image-block,.tiptap-editor-wrapper .tiptap-video-block,.tiptap-editor-wrapper .tiptap-divider-block,.tiptap-editor-wrapper .tiptap-button-block,.tiptap-editor-wrapper .tiptap-callout-block{position:relative;z-index:1}.tiptap-editor-wrapper .tiptap-columns-block,.tiptap-editor-wrapper .tiptap-stack-block,.tiptap-editor-wrapper .tiptap-column-block,.tiptap-editor-wrapper .tiptap-group-block,.tiptap-editor-wrapper .tiptap-card-block,.tiptap-editor-wrapper .tiptap-repeater-block,.tiptap-editor-wrapper .tiptap-accordion-block{position:relative;z-index:1;isolation:isolate}.tiptap-editor-wrapper .tiptap-columns-grid[data-node-view-content]{display:flex;flex-wrap:wrap;gap:.75rem;align-items:start;font-size:0}.tiptap-editor-wrapper .tiptap-columns-grid[data-node-view-content]>*{font-size:.875rem;min-width:0}.tiptap-editor-wrapper .tiptap-columns-grid--1[data-node-view-content]{display:block}.tiptap-editor-wrapper .tiptap-columns-grid--2[data-node-view-content],.tiptap-editor-wrapper .tiptap-columns-grid--3[data-node-view-content],.tiptap-editor-wrapper .tiptap-columns-grid--4[data-node-view-content],.tiptap-editor-wrapper .tiptap-columns-grid--5[data-node-view-content],.tiptap-editor-wrapper .tiptap-columns-grid--6[data-node-view-content]{display:flex}.tiptap-editor-wrapper .tiptap-column-block{display:inline-block;font-size:.875rem;flex:0 0 auto;min-width:0;height:100%;vertical-align:top}.tiptap-editor-wrapper .tiptap-column-content[data-node-view-content]{display:block;min-height:84px}.tiptap-editor-wrapper .tiptap-column-content[data-node-view-content]>*:first-child{margin-top:0}.tiptap-editor-wrapper .tiptap-column-content[data-node-view-content]>*:last-child{margin-bottom:0}.tiptap-editor-wrapper .tiptap-stack-block [data-node-view-content],.tiptap-editor-wrapper .tiptap-group-block [data-node-view-content],.tiptap-editor-wrapper .tiptap-card-block [data-node-view-content]{display:contents}.tiptap-editor-wrapper .tiptap-columns-block--1 .tiptap-column-block{width:100%;flex-basis:100%}.tiptap-editor-wrapper .tiptap-columns-block--1 .tiptap-columns-grid[data-node-view-content]>*{width:100%;flex:0 0 100%}.tiptap-editor-wrapper .tiptap-columns-block--2 .tiptap-column-block{width:calc(50% - .375rem);flex-basis:calc(50% - .375rem)}.tiptap-editor-wrapper .tiptap-columns-block--2 .tiptap-columns-grid[data-node-view-content]>*{width:calc(50% - .375rem);flex:0 0 calc(50% - .375rem)}.tiptap-editor-wrapper .tiptap-columns-block--3 .tiptap-column-block{width:calc(33.333% - .5rem);flex-basis:calc(33.333% - .5rem)}.tiptap-editor-wrapper .tiptap-columns-block--3 .tiptap-columns-grid[data-node-view-content]>*{width:calc(33.333% - .5rem);flex:0 0 calc(33.333% - .5rem)}.tiptap-editor-wrapper .tiptap-columns-block--4 .tiptap-column-block{width:calc(25% - .5625rem);flex-basis:calc(25% - .5625rem)}.tiptap-editor-wrapper .tiptap-columns-block--4 .tiptap-columns-grid[data-node-view-content]>*{width:calc(25% - .5625rem);flex:0 0 calc(25% - .5625rem)}.tiptap-editor-wrapper .tiptap-columns-block--5 .tiptap-column-block{width:calc(20% - .6rem);flex-basis:calc(20% - .6rem)}.tiptap-editor-wrapper .tiptap-columns-block--5 .tiptap-columns-grid[data-node-view-content]>*{width:calc(20% - .6rem);flex:0 0 calc(20% - .6rem)}.tiptap-editor-wrapper .tiptap-columns-block--6 .tiptap-column-block{width:calc(16.666% - .625rem);flex-basis:calc(16.666% - .625rem)}.tiptap-editor-wrapper .tiptap-columns-block--6 .tiptap-columns-grid[data-node-view-content]>*{width:calc(16.666% - .625rem);flex:0 0 calc(16.666% - .625rem)}@media(max-width:720px){.tiptap-editor-wrapper .tiptap-columns-grid[data-node-view-content]{display:block!important}}.tiptap-editor-wrapper .group:hover .drag-handle,.tiptap-editor-wrapper .group:hover .tiptap-drag-handle{opacity:1}.tiptap-editor-wrapper .ProseMirror .node--component{display:block}#kyro-fab{animation:fab-enter .3s ease-out}#kyro-fab.fab-hidden{opacity:0;transform:scale(.8);pointer-events:none;transition:opacity .2s ease,transform .2s ease}@keyframes fab-enter{0%{opacity:0;transform:scale(.5) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}