The codebase that powers boop.cat
boop.cat
scanash.com
1.compatCard {
2 margin-top: 12px;
3 padding: 16px;
4 border-radius: 18px;
5 background: rgba(255, 255, 255, 0.82);
6 border: 1px solid rgba(232, 137, 120, 0.18);
7 box-shadow: 0 8px 18px rgba(45, 20, 15, 0.12);
8}
9
10[data-theme='dark'] .compatCard {
11 background: rgba(12, 18, 32, 0.88);
12 border-color: rgba(255, 255, 255, 0.08);
13 box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
14}
15
16.compatHint {
17 font-size: 13px;
18 color: var(--muted);
19}
20
21[data-theme='dark'] .compatHint {
22 color: rgba(226, 232, 240, 0.7);
23}
24
25.compatBadgeRow {
26 display: flex;
27 align-items: center;
28 gap: 12px;
29 margin-bottom: 6px;
30}
31
32.compatBadge {
33 padding: 4px 12px;
34 border-radius: 999px;
35 font-size: 12px;
36 font-weight: 600;
37 background: rgba(34, 197, 94, 0.16);
38 color: #166534;
39}
40
41.compatBadge.warn {
42 background: rgba(248, 113, 113, 0.2);
43 color: #b91c1c;
44}
45
46[data-theme='dark'] .compatBadge {
47 background: rgba(34, 197, 94, 0.22);
48 color: #bbf7d0;
49}
50
51[data-theme='dark'] .compatBadge.warn {
52 background: rgba(248, 113, 113, 0.25);
53 color: #fecaca;
54}
55
56.compatStatus {
57 font-size: 13px;
58 color: var(--muted);
59}
60
61[data-theme='dark'] .compatStatus {
62 color: rgba(226, 232, 240, 0.65);
63}
64
65.compatHeadline {
66 font-size: 14px;
67 font-weight: 600;
68 margin-bottom: 8px;
69 color: var(--card-text);
70}
71
72[data-theme='dark'] .compatHeadline {
73 color: var(--card-text-light);
74}
75
76.compatSuggestion {
77 font-size: 13px;
78 padding: 8px 10px;
79 border-radius: 10px;
80 background: rgba(248, 113, 113, 0.12);
81 color: #b91c1c;
82 margin-bottom: 8px;
83}
84
85[data-theme='dark'] .compatSuggestion {
86 background: rgba(248, 113, 113, 0.25);
87 color: #fecaca;
88}
89
90.compatError {
91 font-size: 13px;
92 color: #b91c1c;
93}
94
95[data-theme='dark'] .compatError {
96 color: #fecaca;
97}
98
99.compatSignals {
100 margin-top: 10px;
101}
102
103.compatSignals.warn .compatSignalsLabel {
104 color: #b91c1c;
105}
106
107.compatSignalsLabel {
108 font-size: 12px;
109 font-weight: 600;
110 margin-bottom: 6px;
111 color: var(--muted);
112 text-transform: uppercase;
113 letter-spacing: 0.05em;
114}
115
116[data-theme='dark'] .compatSignalsLabel {
117 color: rgba(226, 232, 240, 0.7);
118}
119
120.compatSignals.warn .compatSignalsLabel {
121 color: #b91c1c;
122}
123
124[data-theme='dark'] .compatSignals.warn .compatSignalsLabel {
125 color: #feb2b2;
126}
127
128.compatSignalPills {
129 display: flex;
130 gap: 6px;
131 flex-wrap: wrap;
132}
133
134.compatPill {
135 padding: 4px 8px;
136 border-radius: 999px;
137 background: rgba(232, 137, 120, 0.15);
138 color: #c45a47;
139 font-size: 12px;
140}
141
142.compatPill.pillWarn {
143 background: rgba(248, 113, 113, 0.18);
144 color: #991b1b;
145}
146
147[data-theme='dark'] .compatPill {
148 background: rgba(244, 162, 149, 0.3);
149 color: #f4a295;
150}
151
152[data-theme='dark'] .compatPill.pillWarn {
153 background: rgba(248, 113, 113, 0.3);
154 color: #fecdd3;
155}
156
157:root {
158 --bg-gradient-1: #fff5f2;
159 --bg-gradient-2: #ffeee8;
160 --bg-gradient-3: #ffe4dc;
161 --card-text: #2d1f1c;
162 --card-text-light: #7a5a52;
163 --card-bg: rgba(255, 255, 255, 0.75);
164 --card-bg-solid: rgba(255, 255, 255, 0.85);
165 --card-border: rgba(255, 255, 255, 0.8);
166 --glass-bg: color-mix(in srgb, #f8ded6 60%, white 40%);
167 --glass-border: rgba(232, 137, 120, 0.15);
168 --input-bg: rgba(255, 255, 255, 0.8);
169 --input-border: rgba(232, 137, 120, 0.15);
170 --sidebar-bg: color-mix(in srgb, #f8ded6 60%, white 40%);
171 --sidebar-border: rgba(232, 137, 120, 0.15);
172 --sidebar-hover: rgba(255, 255, 255, 0.6);
173 --sidebar-active-bg: linear-gradient(135deg, #f4a295 0%, #e88978 100%);
174 --dropdown-bg: #fff;
175 --dropdown-border: #f0e2de;
176 --dropdown-hover: #fdf5f3;
177 --accent: #e88978;
178 --accent-gradient: linear-gradient(135deg, #f4a295 0%, #e88978 100%);
179 --radius-card: 24px;
180 --radius-btn: 14px;
181 --blue: #1d9bf0;
182 --orange: #ff7a00;
183 --fg: #2d1f1c;
184 --muted: rgba(45, 31, 28, 0.55);
185 --border: rgba(45, 31, 28, 0.08);
186 --shadow: 0 4px 24px rgba(45, 20, 15, 0.06);
187 --shadow-hover: 0 12px 40px rgba(45, 20, 15, 0.1);
188 --divider: rgba(0, 0, 0, 0.06);
189 --code-bg: #fdfaf9;
190 --modal-bg: color-mix(in srgb, #fce8e2 70%, white 30%);
191 --modal-border: rgba(255, 255, 255, 0.6);
192 --modal-inset: rgba(255, 255, 255, 0.6);
193 --modal-header-bg: rgba(255, 255, 255, 0.5);
194 --modal-header-border: rgba(232, 137, 120, 0.12);
195 --icon-btn-bg: rgba(255, 255, 255, 0.6);
196 --notice-bg: #fef3c7;
197 --notice-border: #fcd34d;
198 --notice-text: #92400e;
199 --error-bg: rgba(254, 226, 226, 0.6);
200 --error-border: rgba(252, 165, 165, 0.5);
201 --error-text: #b91c1c;
202}
203
204[data-theme='dark'] .deployRow {
205 background: color-mix(in srgb, var(--card-bg) 80%, rgba(255, 255, 255, 0.04) 20%);
206 border-color: rgba(255, 255, 255, 0.08);
207}
208
209.deployRowMain {
210 display: flex;
211 flex-direction: column;
212 gap: 6px;
213 flex: 1;
214}
215
216.deployRowTop {
217 display: flex;
218 align-items: center;
219 gap: 10px;
220 flex-wrap: wrap;
221}
222
223.statusPill {
224 padding: 4px 10px;
225 border-radius: 999px;
226 font-size: 12px;
227 font-weight: 600;
228 letter-spacing: 0.02em;
229 background: rgba(232, 137, 120, 0.15);
230 color: #c45a47;
231}
232
233.status-building {
234 background: rgba(245, 158, 11, 0.12);
235 color: #b45309;
236}
237
238.status-running {
239 background: rgba(34, 197, 94, 0.14);
240 color: #15803d;
241}
242
243.status-failed {
244 background: rgba(239, 68, 68, 0.14);
245 color: #b91c1c;
246}
247
248.status-stopped {
249 background: rgba(148, 163, 184, 0.16);
250 color: #475569;
251}
252
253[data-theme='dark'] .statusPill {
254 background: rgba(244, 162, 149, 0.18);
255 color: #f4a295;
256}
257
258[data-theme='dark'] .status-building {
259 background: rgba(245, 158, 11, 0.18);
260 color: #fcd34d;
261}
262
263[data-theme='dark'] .status-running {
264 background: rgba(34, 197, 94, 0.18);
265 color: #86efac;
266}
267
268[data-theme='dark'] .status-failed {
269 background: rgba(239, 68, 68, 0.18);
270 color: #fecdd3;
271}
272
273[data-theme='dark'] .status-stopped {
274 background: rgba(148, 163, 184, 0.18);
275 color: #cbd5e1;
276}
277
278.deployTime {
279 font-size: 12px;
280}
281
282.deployLinks {
283 display: flex;
284 gap: 8px;
285 flex-wrap: wrap;
286}
287
288.linkChip {
289 display: inline-flex;
290 align-items: center;
291 gap: 4px;
292 padding: 6px 10px;
293 background: rgba(0, 0, 0, 0.03);
294 border-radius: 10px;
295 font-size: 13px;
296}
297
298[data-theme='dark'] .linkChip {
299 background: rgba(255, 255, 255, 0.05);
300}
301
302.deployCommit {
303 display: flex;
304 align-items: center;
305 gap: 8px;
306 flex-wrap: wrap;
307 font-size: 13px;
308 color: var(--muted);
309}
310
311.commitAvatar {
312 width: 28px;
313 height: 28px;
314 border-radius: 50%;
315 object-fit: cover;
316 border: 1px solid var(--border);
317}
318
319.commitBadge {
320 font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
321 background: rgba(0, 0, 0, 0.05);
322 padding: 4px 8px;
323 border-radius: 8px;
324 letter-spacing: 0.02em;
325 color: var(--card-text);
326 text-decoration: none;
327}
328
329[data-theme='dark'] .commitBadge {
330 background: rgba(255, 255, 255, 0.08);
331 color: #e5edff;
332}
333
334.commitMessage {
335 max-width: 320px;
336 white-space: nowrap;
337 overflow: hidden;
338 text-overflow: ellipsis;
339 color: var(--card-text);
340}
341
342[data-theme='dark'] .commitMessage {
343 color: var(--card-text-light);
344}
345
346.commitAuthor {
347 color: var(--muted);
348}
349
350[data-theme='dark'] .commitAuthor {
351 color: #7a8ba8;
352}
353
354.commitAuthorInfo {
355 display: flex;
356 align-items: center;
357 gap: 6px;
358}
359
360.commitAuthorName {
361 font-weight: 600;
362 font-size: 13px;
363 color: #1e293b;
364}
365
366[data-theme='dark'] .commitAuthorName {
367 color: #f1f5f9;
368}
369
370.actions .btn.ghost {
371 border-color: var(--border);
372}
373
374[data-theme='dark'] {
375 --bg-gradient-1: #1a0f0d;
376 --bg-gradient-2: #1f1412;
377 --bg-gradient-3: #251916;
378 --card-text: #f5ebe8;
379 --card-text-light: #d6b4a9;
380 --card-bg: rgba(32, 18, 14, 0.82);
381 --card-bg-solid: rgba(32, 18, 14, 0.94);
382 --card-border: rgba(255, 255, 255, 0.14);
383 --glass-bg: color-mix(in srgb, #26140d 70%, rgba(32, 18, 14, 0.9) 30%);
384 --glass-border: rgba(255, 255, 255, 0.16);
385 --input-bg: rgba(32, 18, 14, 0.78);
386 --input-border: rgba(255, 255, 255, 0.14);
387 --sidebar-bg: rgba(26, 14, 10, 0.95);
388 --sidebar-border: rgba(255, 255, 255, 0.12);
389 --sidebar-hover: rgba(255, 255, 255, 0.08);
390 --sidebar-active-bg: linear-gradient(135deg, #f4a295 0%, #e88978 100%);
391 --dropdown-bg: #1f1210;
392 --dropdown-border: rgba(255, 255, 255, 0.14);
393 --dropdown-hover: rgba(255, 255, 255, 0.08);
394 --accent: #f4a295;
395 --accent-gradient: linear-gradient(135deg, #f4a295 0%, #e88978 100%);
396 --shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
397 --shadow-hover: 0 14px 46px rgba(0, 0, 0, 0.45);
398 --divider: rgba(255, 255, 255, 0.12);
399 --code-bg: rgba(32, 18, 14, 0.65);
400 --modal-bg: rgba(30, 17, 14, 0.96);
401 --modal-border: rgba(255, 255, 255, 0.14);
402 --modal-inset: rgba(255, 255, 255, 0.08);
403 --modal-header-bg: rgba(36, 20, 16, 0.7);
404 --modal-header-border: rgba(255, 255, 255, 0.12);
405 --icon-btn-bg: rgba(255, 255, 255, 0.14);
406 --notice-bg: rgba(251, 191, 36, 0.25);
407 --notice-border: rgba(251, 191, 36, 0.45);
408 --notice-text: #f7e3a3;
409 --error-bg: rgba(239, 68, 68, 0.28);
410 --error-border: rgba(239, 68, 68, 0.45);
411 --error-text: #fca5a5;
412}
413
414.repoGrid {
415 display: flex;
416 flex-direction: column;
417 gap: 12px;
418 margin-top: 16px;
419 max-height: 600px;
420 overflow-y: auto;
421 padding: 12px;
422 margin-left: -12px;
423 margin-right: -12px;
424}
425
426.repoGrid::-webkit-scrollbar {
427 width: 6px;
428}
429
430.repoGrid::-webkit-scrollbar-track {
431 background: transparent;
432}
433
434.repoGrid::-webkit-scrollbar-thumb {
435 background: var(--border);
436 border-radius: 99px;
437}
438
439.repoGrid::-webkit-scrollbar-thumb:hover {
440 background: var(--muted);
441}
442
443.repoItem {
444 display: flex;
445 flex-direction: row;
446 align-items: center;
447 width: 100%;
448 padding: 16px;
449 gap: 16px;
450 background: rgba(255, 255, 255, 0.65);
451 border: 1px solid rgba(255, 255, 255, 0.8);
452 border-radius: 18px;
453 text-align: left;
454 cursor: pointer;
455 transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
456 position: relative;
457 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
458}
459
460.repoItem:hover {
461 background: rgba(255, 255, 255, 0.95);
462 transform: scale(1.005);
463 box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.08);
464 border-color: rgba(255, 255, 255, 1);
465 z-index: 2;
466}
467
468[data-theme='dark'] .repoItem {
469 background: rgba(15, 23, 42, 0.6);
470 border-color: rgba(255, 255, 255, 0.06);
471 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
472}
473
474[data-theme='dark'] .repoItem:hover {
475 background: rgba(30, 41, 59, 1);
476 border-color: rgba(244, 162, 149, 0.3);
477 box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.4);
478}
479
480.repoItemIcon {
481 display: flex;
482 align-items: center;
483 justify-content: center;
484 width: 42px;
485 height: 42px;
486 background: white;
487 border-radius: 12px;
488 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
489 border: 1px solid rgba(0, 0, 0, 0.04);
490 color: #171717;
491 flex-shrink: 0;
492}
493
494[data-theme='dark'] .repoItemIcon {
495 background: #1e293b;
496 border-color: rgba(255, 255, 255, 0.1);
497 color: #e2e8f0;
498 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
499}
500
501.repoItemContent {
502 display: flex;
503 flex-direction: column;
504 flex: 1;
505 min-width: 0;
506 gap: 4px;
507}
508
509.repoItemName {
510 font-weight: 600;
511 font-size: 15px;
512 color: var(--card-text);
513 white-space: nowrap;
514 overflow: hidden;
515 text-overflow: ellipsis;
516}
517
518[data-theme='dark'] .repoItemName {
519 color: var(--card-text-light);
520}
521
522.repoItemDesc {
523 font-size: 13px;
524 color: var(--muted);
525 line-height: 1.4;
526 white-space: nowrap;
527 overflow: hidden;
528 text-overflow: ellipsis;
529}
530
531[data-theme='dark'] .repoItemDesc {
532 color: rgba(148, 163, 184, 0.7);
533}
534
535.repoItemMetaColumn {
536 display: flex;
537 flex-direction: column;
538 align-items: flex-end;
539 gap: 6px;
540 flex-shrink: 0;
541 margin-left: auto;
542}
543
544.repoItemPrivate {
545 background: rgba(245, 158, 11, 0.1);
546 color: #b45309;
547 padding: 2px 8px;
548 border-radius: 99px;
549 font-size: 11px;
550 font-weight: 600;
551 display: inline-flex;
552 align-items: center;
553 gap: 4px;
554}
555
556[data-theme='dark'] .repoItemPrivate {
557 background: rgba(245, 158, 11, 0.15);
558 color: #fbbf24;
559}
560
561.repoItemMetaRow {
562 display: flex;
563 align-items: center;
564 gap: 12px;
565 font-size: 12px;
566 color: var(--muted);
567}
568
569[data-theme='dark'] .repoItemMetaRow {
570 color: rgba(148, 163, 184, 0.9);
571}
572
573.repoItemMetaRow span {
574 display: flex;
575 align-items: center;
576 gap: 4px;
577}
578
579.repoLangDot {
580 width: 8px;
581 height: 8px;
582 border-radius: 50%;
583 background-color: var(--accent);
584 display: inline-block;
585}
586
587[data-theme='dark'] .repoItem:hover {
588 background: rgba(12, 18, 32, 0.9);
589 border-color: var(--accent);
590}
591
592.repoArrow {
593 color: var(--muted);
594 opacity: 0.5;
595 margin-left: 8px;
596}
597
598[data-theme='dark'] .repoArrow {
599 color: #fbbf24;
600 opacity: 0.8;
601}
602
603[data-theme='dark'] .repoItemPrivate {
604 background: rgba(255, 255, 255, 0.1);
605 color: var(--card-text-light);
606}
607
608.searchIcon {
609 color: var(--muted);
610 pointer-events: none;
611}
612
613.repoLoadingState,
614.repoEmptyState {
615 color: var(--muted);
616}
617
618[data-theme='dark'] .searchIcon,
619html[data-theme='dark'] .searchIcon,
620[data-theme='dark'] .repoLoadingState,
621html[data-theme='dark'] .repoLoadingState,
622[data-theme='dark'] .repoEmptyState,
623html[data-theme='dark'] .repoEmptyState {
624 color: #94a3b8 !important;
625 opacity: 1 !important;
626}
627
628* {
629 box-sizing: border-box;
630}
631
632html {
633 scroll-behavior: smooth;
634 background: linear-gradient(160deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 50%, var(--bg-gradient-3) 100%);
635 background-color: var(--bg-gradient-3);
636}
637
638html,
639body {
640 height: 100%;
641 margin: 0;
642}
643
644body {
645 font-family:
646 'Kumbh Sans',
647 'Inter',
648 ui-sans-serif,
649 system-ui,
650 -apple-system,
651 sans-serif;
652 background: linear-gradient(160deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 50%, var(--bg-gradient-3) 100%);
653 color: var(--card-text);
654 line-height: 1.6;
655 transition:
656 background 0.3s ease,
657 color 0.3s ease;
658}
659
660a {
661 color: inherit;
662 text-decoration: none;
663}
664
665a:hover {
666 text-decoration: none;
667}
668
669.themeToggle {
670 display: flex;
671 align-items: center;
672 justify-content: center;
673 width: 40px;
674 height: 40px;
675 border-radius: 12px;
676 border: none;
677 background: var(--card-bg);
678 backdrop-filter: blur(12px);
679 -webkit-backdrop-filter: blur(12px);
680 cursor: pointer;
681 color: var(--card-text);
682 transition: all 0.2s ease;
683 position: relative;
684 overflow: hidden;
685}
686
687.themeToggle:hover {
688 background: var(--sidebar-hover);
689 transform: scale(1.05);
690}
691
692.themeToggle svg {
693 width: 20px;
694 height: 20px;
695 transition:
696 transform 0.3s ease,
697 opacity 0.3s ease;
698}
699
700.themeToggle .sunIcon {
701 position: absolute;
702 opacity: 0;
703 transform: rotate(-90deg) scale(0.5);
704}
705
706.themeToggle .moonIcon {
707 opacity: 1;
708 transform: rotate(0deg) scale(1);
709}
710
711[data-theme='dark'] .themeToggle .sunIcon {
712 opacity: 1;
713 transform: rotate(0deg) scale(1);
714}
715
716[data-theme='dark'] .themeToggle .moonIcon {
717 opacity: 0;
718 transform: rotate(90deg) scale(0.5);
719}
720
721.landing-page {
722 min-height: 100vh;
723 color: var(--card-text);
724}
725
726.navbar-frame {
727 position: fixed;
728 top: 16px;
729 left: 50%;
730 transform: translateX(-50%) translateY(0);
731 z-index: 100;
732 width: calc(100% - 32px);
733 max-width: 1100px;
734 transition:
735 transform 0.3s ease,
736 opacity 0.3s ease;
737}
738
739.navbar-frame.nav-hidden {
740 transform: translateX(-50%) translateY(-120%);
741 opacity: 0;
742 pointer-events: none;
743}
744
745.navbar-content {
746 display: flex;
747 justify-content: space-between;
748 align-items: center;
749 background: var(--card-bg);
750 backdrop-filter: blur(20px);
751 -webkit-backdrop-filter: blur(20px);
752 padding: 12px 20px;
753 border-radius: 20px;
754 box-shadow: var(--shadow);
755 border: 1px solid var(--card-border);
756 transition:
757 background 0.3s ease,
758 border 0.3s ease;
759}
760
761.navbar-logo {
762 display: flex;
763 align-items: center;
764 gap: 10px;
765 font-weight: 700;
766 font-size: 1.1rem;
767 color: var(--card-text);
768}
769
770.navbar-logo svg {
771 color: var(--accent);
772}
773
774.navbar-buttons {
775 display: flex;
776 gap: 8px;
777 align-items: center;
778}
779
780.glass-btn {
781 display: inline-flex;
782 align-items: center;
783 gap: 8px;
784 padding: 10px 16px;
785 background: var(--card-bg);
786 border: 1px solid var(--card-border);
787 border-radius: var(--radius-btn);
788 color: var(--card-text);
789 font-weight: 600;
790 font-size: 0.9rem;
791 text-decoration: none;
792 cursor: pointer;
793 transition: all 0.2s ease;
794}
795
796.glass-btn:hover {
797 background: var(--sidebar-hover);
798 transform: translateY(-1px);
799}
800
801.tangled-icon {
802 width: 20px;
803 height: 20px;
804 display: block;
805}
806
807.tangled-nav-link {
808 display: flex;
809 align-items: center;
810 justify-content: center;
811 width: 40px;
812 height: 40px;
813 border-radius: 12px;
814 background: var(--card-bg);
815 border: 1px solid var(--card-border);
816 transition: all 0.2s ease;
817}
818
819.tangled-nav-link:hover {
820 background: var(--sidebar-hover);
821 transform: scale(1.05);
822}
823
824.tangled-footer-link,
825.footer-external-link {
826 display: inline-flex;
827 align-items: center;
828 gap: 6px;
829 transition: opacity 0.2s ease;
830}
831
832.tangled-footer-link:hover,
833.footer-external-link:hover {
834 opacity: 0.8;
835}
836
837.tangled-footer-link .tangled-icon,
838.footer-external-link svg {
839 width: 16px;
840 height: 16px;
841}
842
843.dark-only {
844 display: none;
845}
846
847[data-theme='dark'] .dark-only {
848 display: block;
849}
850
851[data-theme='dark'] .light-only {
852 display: none;
853}
854
855.glass-btn.accent {
856 background: var(--accent-gradient);
857 color: white;
858}
859
860.glass-btn.accent:hover {
861 background: linear-gradient(135deg, #f4a295 0%, #e88978 100%);
862 box-shadow: 0 4px 16px rgba(232, 137, 120, 0.3);
863}
864
865.glass-btn.large {
866 padding: 14px 24px;
867 font-size: 1rem;
868 border-radius: 16px;
869}
870
871.page-frame {
872 max-width: 1100px;
873 margin: 0 auto;
874 padding: 100px 24px 40px;
875}
876
877.content-section {
878 margin-bottom: 80px;
879}
880
881.section-title {
882 font-size: 1.75rem;
883 font-weight: 700;
884 text-align: center;
885 margin: 0 0 32px;
886 color: var(--card-text);
887}
888
889.hero-section {
890 text-align: center;
891 padding: 60px 0 80px;
892 animation: fadeInUp 0.7s ease-out;
893}
894
895.hero-icon {
896 display: inline-flex;
897 align-items: center;
898 justify-content: center;
899 margin-bottom: 32px;
900 animation: float 4s ease-in-out infinite;
901}
902
903.hero-icon img {
904 width: 80px;
905 height: 80px;
906 image-rendering: pixelated;
907}
908
909@keyframes float {
910 0%,
911 100% {
912 transform: translateY(0);
913 }
914
915 50% {
916 transform: translateY(-10px);
917 }
918}
919
920@keyframes fadeInUp {
921 from {
922 opacity: 0;
923 transform: translateY(24px);
924 }
925
926 to {
927 opacity: 1;
928 transform: translateY(0);
929 }
930}
931
932.hero-section h1 {
933 font-size: 3rem;
934 font-weight: 800;
935 margin: 0 0 16px;
936 color: var(--card-text);
937}
938
939.hero-desc {
940 font-size: 1.2rem;
941 color: var(--card-text-light);
942 max-width: 480px;
943 margin: 0 auto 32px;
944 line-height: 1.6;
945}
946
947.hero-buttons {
948 display: flex;
949 justify-content: center;
950 gap: 12px;
951 flex-wrap: wrap;
952}
953
954.block-card,
955.step-card,
956.cta-card {
957 --card-color: #d0e4f8;
958 background: color-mix(in srgb, var(--card-color) 60%, transparent 40%);
959 backdrop-filter: blur(12px);
960 -webkit-backdrop-filter: blur(12px);
961 border-radius: var(--radius-card);
962 border: 1px solid color-mix(in srgb, var(--card-color) 40%, white 60%);
963 padding: 28px;
964 position: relative;
965 box-shadow: var(--shadow);
966 transition:
967 transform 0.3s ease,
968 box-shadow 0.3s ease,
969 background 0.3s ease;
970}
971
972[data-theme='dark'] .block-card,
973[data-theme='dark'] .step-card,
974[data-theme='dark'] .cta-card {
975 background: color-mix(in srgb, var(--card-color) 65%, rgba(12, 18, 32, 0.6) 35%);
976 border: 1px solid color-mix(in srgb, var(--card-color) 60%, rgba(255, 255, 255, 0.1) 40%);
977}
978
979.block-card:hover,
980.step-card:hover {
981 transform: translateY(-6px);
982 box-shadow: var(--shadow-hover);
983}
984
985.features-row {
986 display: grid;
987 grid-template-columns: repeat(4, 1fr);
988 gap: 16px;
989}
990
991@media (max-width: 900px) {
992 .features-row {
993 grid-template-columns: repeat(2, 1fr);
994 }
995}
996
997@media (max-width: 560px) {
998 .features-row {
999 grid-template-columns: 1fr;
1000 }
1001
1002 .hero-section h1 {
1003 font-size: 2.25rem;
1004 }
1005}
1006
1007html[data-theme='dark'] .landing-page .block-card {
1008 --card-color: #4cc9f0 !important;
1009}
1010
1011html[data-theme='dark'] .landing-page .block-card:nth-child(2) {
1012 --card-color: #7bf1a8 !important;
1013}
1014
1015html[data-theme='dark'] .landing-page .block-card:nth-child(3) {
1016 --card-color: #f5a524 !important;
1017}
1018
1019html[data-theme='dark'] .landing-page .block-card:nth-child(4) {
1020 --card-color: #ff6fb1 !important;
1021}
1022
1023html[data-theme='dark'] .landing-page .step-card {
1024 --card-color: #6bd1ff !important;
1025}
1026
1027html[data-theme='dark'] .landing-page .step-card:nth-of-type(2) {
1028 --card-color: #9cff6b !important;
1029}
1030
1031html[data-theme='dark'] .landing-page .step-card:nth-of-type(3) {
1032 --card-color: #ffb86b !important;
1033}
1034
1035html[data-theme='dark'] .landing-page .framework-chip:nth-child(1) {
1036 background: #61dafb33 !important;
1037}
1038
1039html[data-theme='dark'] .landing-page .framework-chip:nth-child(2) {
1040 background: #42b88333 !important;
1041}
1042
1043html[data-theme='dark'] .landing-page .framework-chip:nth-child(3) {
1044 background: #ff3e0033 !important;
1045}
1046
1047html[data-theme='dark'] .landing-page .framework-chip:nth-child(4) {
1048 background: #ff5d0133 !important;
1049}
1050
1051html[data-theme='dark'] .landing-page .framework-chip:nth-child(5) {
1052 background: #00000022 !important;
1053}
1054
1055html[data-theme='dark'] .landing-page .framework-chip:nth-child(6) {
1056 background: #646cff33 !important;
1057}
1058
1059html[data-theme='dark'] .landing-page .block-card,
1060html[data-theme='dark'] .landing-page .step-card,
1061html[data-theme='dark'] .landing-page .cta-card {
1062 background: color-mix(in srgb, var(--card-color) 55%, rgba(8, 12, 24, 0.75) 45%);
1063 border: 1px solid color-mix(in srgb, var(--card-color) 50%, rgba(255, 255, 255, 0.08) 50%);
1064}
1065
1066.block-card .card-icon-wrap {
1067 display: inline-flex;
1068 align-items: center;
1069 justify-content: center;
1070 width: 48px;
1071 height: 48px;
1072 background: color-mix(in srgb, var(--card-color) 70%, white 30%);
1073 border-radius: 14px;
1074 margin-bottom: 16px;
1075 color: var(--card-text);
1076}
1077
1078[data-theme='dark'] .block-card .card-icon-wrap {
1079 background: color-mix(in srgb, var(--card-color) 75%, rgba(15, 22, 40, 0.7) 25%);
1080}
1081
1082.block-card h3 {
1083 font-size: 1.05rem;
1084 font-weight: 700;
1085 margin: 0 0 8px;
1086 color: var(--card-text);
1087}
1088
1089.block-card p {
1090 font-size: 0.9rem;
1091 color: var(--card-text-light);
1092 line-height: 1.5;
1093 margin: 0;
1094}
1095
1096[data-theme='dark'] .landing-page .block-card h3 {
1097 color: #f6f8ff;
1098}
1099
1100[data-theme='dark'] .landing-page .block-card p {
1101 color: color-mix(in srgb, #e5edff 90%, #9fb4d6 10%);
1102}
1103
1104.steps-row {
1105 display: flex;
1106 align-items: center;
1107 justify-content: center;
1108 gap: 16px;
1109 flex-wrap: wrap;
1110}
1111
1112.step-card {
1113 flex: 1;
1114 min-width: 200px;
1115 max-width: 280px;
1116 text-align: center;
1117}
1118
1119.step-num {
1120 display: inline-flex;
1121 align-items: center;
1122 justify-content: center;
1123 width: 40px;
1124 height: 40px;
1125 background: color-mix(in srgb, var(--card-color) 70%, white 30%);
1126 border-radius: 12px;
1127 font-weight: 800;
1128 font-size: 1.1rem;
1129 margin-bottom: 12px;
1130 color: var(--card-text);
1131}
1132
1133[data-theme='dark'] .step-num {
1134 background: color-mix(in srgb, var(--card-color) 75%, rgba(15, 22, 40, 0.7) 25%);
1135}
1136
1137.step-card h3 {
1138 font-size: 1rem;
1139 font-weight: 700;
1140 margin: 0 0 6px;
1141 color: var(--card-text);
1142}
1143
1144.step-card p {
1145 font-size: 0.85rem;
1146 color: var(--card-text-light);
1147 margin: 0;
1148 line-height: 1.4;
1149}
1150
1151.step-arrow {
1152 color: var(--card-text-light);
1153 opacity: 0.4;
1154}
1155
1156@media (max-width: 700px) {
1157 .step-arrow {
1158 display: none;
1159 }
1160
1161 .steps-row {
1162 flex-direction: column;
1163 }
1164
1165 .step-card {
1166 max-width: 100%;
1167 }
1168}
1169
1170.frameworks-row {
1171 display: flex;
1172 justify-content: center;
1173 gap: 12px;
1174 flex-wrap: wrap;
1175}
1176
1177.framework-chip {
1178 padding: 10px 20px;
1179 border-radius: 12px;
1180 font-weight: 600;
1181 font-size: 0.95rem;
1182 color: var(--card-text);
1183 transition: transform 0.2s ease;
1184}
1185
1186.framework-chip:hover {
1187 transform: scale(1.05);
1188}
1189
1190.cta-section {
1191 margin-bottom: 60px;
1192}
1193
1194.cta-card {
1195 text-align: center;
1196 padding: 48px 32px;
1197 max-width: 600px;
1198 margin: 0 auto;
1199}
1200
1201.cta-card svg {
1202 color: var(--card-text);
1203 opacity: 0.7;
1204 margin-bottom: 20px;
1205}
1206
1207.cta-card h2 {
1208 font-size: 1.5rem;
1209 font-weight: 700;
1210 margin: 0 0 12px;
1211 color: var(--card-text);
1212}
1213
1214.cta-card p {
1215 font-size: 1rem;
1216 color: var(--card-text-light);
1217 margin: 0 0 24px;
1218 line-height: 1.5;
1219}
1220
1221.site-footer {
1222 padding: 24px;
1223 border-top: 1px solid rgba(0, 0, 0, 0.05);
1224}
1225
1226.footer-inner {
1227 max-width: 1100px;
1228 margin: 0 auto;
1229 display: flex;
1230 justify-content: space-between;
1231 align-items: center;
1232 font-size: 0.85rem;
1233 color: var(--card-text-light);
1234 flex-wrap: wrap;
1235 gap: 16px;
1236}
1237
1238.footer-links {
1239 display: flex;
1240 gap: 20px;
1241}
1242
1243.footer-links a {
1244 color: var(--card-text);
1245 text-decoration: none;
1246 font-weight: 500;
1247 transition: opacity 0.2s;
1248}
1249
1250.footer-links a:hover {
1251 opacity: 0.6;
1252}
1253
1254@media (max-width: 640px) {
1255 .footer-inner {
1256 flex-direction: column;
1257 gap: 20px;
1258 text-align: center;
1259 }
1260
1261 .footer-links {
1262 flex-wrap: wrap;
1263 justify-content: center;
1264 gap: 16px 24px;
1265 }
1266}
1267
1268.content-section {
1269 animation: fadeInUp 0.6s ease-out backwards;
1270}
1271
1272.content-section:nth-child(2) {
1273 animation-delay: 0.1s;
1274}
1275
1276.content-section:nth-child(3) {
1277 animation-delay: 0.2s;
1278}
1279
1280.content-section:nth-child(4) {
1281 animation-delay: 0.3s;
1282}
1283
1284.block-card,
1285.step-card {
1286 animation: fadeInUp 0.5s ease-out backwards;
1287}
1288
1289.features-row .block-card:nth-child(1) {
1290 animation-delay: 0.1s;
1291}
1292
1293.features-row .block-card:nth-child(2) {
1294 animation-delay: 0.15s;
1295}
1296
1297.features-row .block-card:nth-child(3) {
1298 animation-delay: 0.2s;
1299}
1300
1301.features-row .block-card:nth-child(4) {
1302 animation-delay: 0.25s;
1303}
1304
1305.auth-page {
1306 min-height: 100vh;
1307 display: flex;
1308 align-items: center;
1309 justify-content: center;
1310 padding: 32px;
1311 position: relative;
1312}
1313
1314.auth-theme-toggle {
1315 position: absolute;
1316 top: 24px;
1317 right: 24px;
1318}
1319
1320.auth-card {
1321 width: min(440px, 100%);
1322 background: var(--glass-bg);
1323 backdrop-filter: blur(16px);
1324 -webkit-backdrop-filter: blur(16px);
1325 border: 1px solid var(--card-border);
1326 border-radius: 28px;
1327 padding: 40px;
1328 box-shadow: var(--shadow);
1329 animation: fadeInUp 0.5s ease-out;
1330 transition:
1331 background 0.3s ease,
1332 border 0.3s ease;
1333}
1334
1335.auth-card h1 {
1336 font-size: 2rem;
1337 font-weight: 800;
1338 margin: 0 0 8px;
1339 text-align: center;
1340 color: var(--card-text);
1341}
1342
1343.auth-card .subtitle {
1344 text-align: center;
1345 color: var(--card-text-light);
1346 margin-bottom: 28px;
1347 font-size: 0.95rem;
1348}
1349
1350.auth-divider {
1351 display: flex;
1352 align-items: center;
1353 gap: 16px;
1354 margin: 20px 0;
1355 color: var(--card-text-light);
1356 font-size: 0.85rem;
1357}
1358
1359.auth-divider::before,
1360.auth-divider::after {
1361 content: '';
1362 flex: 1;
1363 height: 1px;
1364 background: var(--glass-border);
1365}
1366
1367.auth-footer {
1368 text-align: center;
1369 margin-top: 24px;
1370 font-size: 0.9rem;
1371 color: var(--card-text-light);
1372}
1373
1374.auth-footer a {
1375 color: var(--accent);
1376 font-weight: 600;
1377}
1378
1379.auth-footer a:hover {
1380 text-decoration: underline;
1381}
1382
1383.center {
1384 min-height: 100vh;
1385 display: flex;
1386 flex-direction: column;
1387 align-items: center;
1388 justify-content: center;
1389 padding: 32px;
1390 text-align: center;
1391}
1392
1393.title {
1394 font-size: 2.5rem;
1395 line-height: 1.1;
1396 margin: 0 0 20px;
1397 letter-spacing: -0.03em;
1398 font-weight: 800;
1399 color: var(--card-text);
1400}
1401
1402.buttons {
1403 display: flex;
1404 gap: 12px;
1405 flex-wrap: wrap;
1406 justify-content: center;
1407}
1408
1409.btn {
1410 display: inline-flex;
1411 align-items: center;
1412 justify-content: center;
1413 gap: 8px;
1414 border-radius: 14px;
1415 border: none;
1416 padding: 12px 20px;
1417 font-weight: 600;
1418 text-decoration: none;
1419 cursor: pointer;
1420 background: var(--card-bg);
1421 color: var(--card-text);
1422 min-width: 140px;
1423 font-size: 14px;
1424 transition: all 0.2s ease;
1425}
1426
1427.btn:hover {
1428 transform: translateY(-2px);
1429 background: var(--sidebar-hover);
1430 box-shadow: var(--shadow);
1431}
1432
1433.btn:disabled {
1434 opacity: 0.5;
1435 cursor: not-allowed;
1436 transform: none;
1437}
1438
1439.btn.primary {
1440 background: var(--accent-gradient);
1441 color: white;
1442}
1443
1444.btn.primary:hover {
1445 box-shadow: 0 4px 20px rgba(232, 137, 120, 0.4);
1446}
1447
1448.btn.accent {
1449 background: linear-gradient(135deg, #e8a36b 0%, #d89058 100%);
1450 color: white;
1451}
1452
1453.btn.accent:hover {
1454 background: linear-gradient(135deg, #f0b07a 0%, #e09860 100%);
1455 box-shadow: 0 4px 20px rgba(212, 143, 90, 0.3);
1456}
1457
1458.btn.ghost {
1459 background: var(--card-bg);
1460 border: 1px solid var(--glass-border);
1461}
1462
1463.btn.ghost:hover {
1464 background: var(--sidebar-hover);
1465}
1466
1467.btn.danger {
1468 background: rgba(220, 38, 38, 0.1);
1469 color: #b91c1c;
1470}
1471
1472.btn.danger:hover {
1473 background: rgba(220, 38, 38, 0.18);
1474}
1475
1476.form {
1477 width: 100%;
1478 display: flex;
1479 flex-direction: column;
1480 gap: 14px;
1481}
1482
1483.input {
1484 border-radius: 14px;
1485 border: 1px solid var(--input-border);
1486 padding: 14px 16px;
1487 font-size: 15px;
1488 background: var(--input-bg);
1489 color: var(--card-text);
1490 transition: all 0.2s ease;
1491}
1492
1493.input:focus {
1494 outline: none;
1495 border-color: var(--accent);
1496 background: var(--card-bg-solid);
1497 box-shadow: 0 0 0 4px rgba(232, 137, 120, 0.15);
1498}
1499
1500.input:disabled {
1501 background: var(--sidebar-hover);
1502 cursor: not-allowed;
1503 opacity: 0.6;
1504}
1505
1506.input::placeholder {
1507 color: var(--card-text-light);
1508}
1509
1510.oauth {
1511 display: flex;
1512 flex-direction: column;
1513 gap: 10px;
1514}
1515
1516.oauth-providers {
1517 display: flex;
1518 gap: 10px;
1519 justify-content: center;
1520}
1521
1522.oauth-btn {
1523 flex: 1;
1524 display: flex;
1525 flex-direction: column;
1526 align-items: center;
1527 justify-content: center;
1528 gap: 8px;
1529 padding: 16px 12px;
1530 background: var(--card-bg);
1531 border: 1px solid var(--glass-border);
1532 border-radius: 14px;
1533 color: var(--card-text);
1534 font-weight: 600;
1535 font-size: 13px;
1536 text-decoration: none;
1537 cursor: pointer;
1538 transition: all 0.2s ease;
1539 min-width: 0;
1540}
1541
1542.oauth-btn:hover {
1543 background: var(--sidebar-hover);
1544 border-color: var(--accent);
1545 transform: translateY(-2px);
1546 box-shadow: var(--shadow);
1547}
1548
1549.oauth-btn svg {
1550 flex-shrink: 0;
1551}
1552
1553.oauth-btn span {
1554 white-space: nowrap;
1555 overflow: hidden;
1556 text-overflow: ellipsis;
1557}
1558
1559@media (max-width: 400px) {
1560 .oauth-providers {
1561 gap: 8px;
1562 }
1563
1564 .oauth-btn {
1565 padding: 14px 8px;
1566 }
1567
1568 .oauth-btn span {
1569 font-size: 11px;
1570 }
1571}
1572
1573.error {
1574 color: #b91c1c;
1575 font-weight: 600;
1576 font-size: 14px;
1577 padding: 12px 16px;
1578 background: rgba(220, 38, 38, 0.08);
1579 border-radius: 12px;
1580 border: 1px solid rgba(220, 38, 38, 0.12);
1581}
1582
1583.muted {
1584 color: var(--card-text-light);
1585 font-size: 14px;
1586}
1587
1588.muted a {
1589 color: var(--accent);
1590 font-weight: 600;
1591}
1592
1593.muted a:hover {
1594 text-decoration: underline;
1595}
1596
1597.legal-page {
1598 min-height: 100vh;
1599 padding: 40px 24px;
1600 position: relative;
1601}
1602
1603.legal-theme-toggle {
1604 position: absolute;
1605 top: 24px;
1606 right: 24px;
1607}
1608
1609.legal-container {
1610 max-width: 800px;
1611 margin: 0 auto;
1612}
1613
1614.legal-header {
1615 margin-bottom: 32px;
1616}
1617
1618.legal-header h1 {
1619 font-size: 2.25rem;
1620 font-weight: 800;
1621 margin: 0 0 8px;
1622 color: var(--card-text);
1623}
1624
1625.legal-header .date,
1626.legal-date {
1627 color: var(--card-text-light);
1628 font-size: 0.9rem;
1629}
1630
1631.legal-card {
1632 background: var(--glass-bg);
1633 backdrop-filter: blur(12px);
1634 -webkit-backdrop-filter: blur(12px);
1635 border: 1px solid var(--card-border);
1636 border-radius: 24px;
1637 padding: 32px;
1638 box-shadow: var(--shadow);
1639 color: var(--card-text);
1640 max-width: 860px;
1641 margin: 0 auto;
1642 transition:
1643 background 0.3s ease,
1644 border 0.3s ease;
1645}
1646
1647.legal-card a {
1648 color: var(--accent);
1649 font-weight: 500;
1650}
1651
1652.legal-card a:hover {
1653 text-decoration: underline;
1654}
1655
1656.legal-callout {
1657 margin: 16px 0;
1658 padding: 16px 20px;
1659 background: var(--card-bg);
1660 border: 1px solid var(--glass-border);
1661 border-radius: 14px;
1662 font-size: 14px;
1663 color: var(--card-text);
1664}
1665
1666.legal-callout a {
1667 color: var(--accent);
1668 font-weight: 600;
1669}
1670
1671.legal-content {
1672 line-height: 1.7;
1673}
1674
1675.legal-content h2 {
1676 font-size: 1.15rem;
1677 font-weight: 700;
1678 margin: 24px 0 10px;
1679 color: var(--card-text);
1680}
1681
1682.legal-content h2:first-child {
1683 margin-top: 0;
1684}
1685
1686.legal-content p {
1687 margin: 0 0 12px;
1688 color: var(--card-text-light);
1689}
1690
1691.legal-content ul {
1692 margin: 8px 0 16px 20px;
1693 padding: 0;
1694}
1695
1696.legal-content li {
1697 margin-bottom: 6px;
1698 color: var(--card-text-light);
1699}
1700
1701.legal-content a {
1702 color: #e88978;
1703 font-weight: 500;
1704}
1705
1706.legal-content a:hover {
1707 text-decoration: underline;
1708}
1709
1710.legal-footer {
1711 margin-top: 24px;
1712}
1713
1714.legal-footer a {
1715 display: inline-flex;
1716 align-items: center;
1717 gap: 6px;
1718 color: var(--card-text-light);
1719 font-weight: 500;
1720 font-size: 0.9rem;
1721}
1722
1723.legal-footer a:hover {
1724 color: var(--card-text);
1725}
1726
1727.dashWrapper {
1728 min-height: 100vh;
1729 display: flex;
1730 position: relative;
1731 background: linear-gradient(180deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 100%);
1732 transition: background 0.3s ease;
1733}
1734
1735@keyframes spin {
1736 from {
1737 transform: rotate(0deg);
1738 }
1739
1740 to {
1741 transform: rotate(360deg);
1742 }
1743}
1744
1745.animate-spin {
1746 animation: spin 1s linear infinite;
1747 display: inline-block;
1748}
1749
1750.sidebarUser {
1751 display: flex;
1752 align-items: center;
1753 gap: 10px;
1754 padding: 12px;
1755 margin: auto 12px 12px;
1756 border-radius: 12px;
1757 background: var(--sidebar-hover);
1758 transition: background 0.3s ease;
1759}
1760
1761.sidebarUserInfo {
1762 display: flex;
1763 align-items: center;
1764 gap: 10px;
1765 min-width: 0;
1766 flex: 1;
1767}
1768
1769.sidebarAvatar {
1770 width: 32px;
1771 height: 32px;
1772 border-radius: 10px;
1773 object-fit: cover;
1774 flex-shrink: 0;
1775}
1776
1777.sidebarAvatarPlaceholder {
1778 width: 32px;
1779 height: 32px;
1780 border-radius: 10px;
1781 background: var(--card-bg);
1782 display: flex;
1783 align-items: center;
1784 justify-content: center;
1785 color: var(--accent);
1786 flex-shrink: 0;
1787}
1788
1789.sidebarUserText {
1790 display: flex;
1791 flex-direction: column;
1792 min-width: 0;
1793 gap: 1px;
1794}
1795
1796.sidebarUserName {
1797 font-weight: 600;
1798 font-size: 13px;
1799 color: var(--card-text);
1800 white-space: nowrap;
1801 overflow: hidden;
1802 text-overflow: ellipsis;
1803}
1804
1805.sidebarUserEmail {
1806 font-size: 11px;
1807 color: var(--card-text-light);
1808 white-space: nowrap;
1809 overflow: hidden;
1810 text-overflow: ellipsis;
1811}
1812
1813.sidebarLogout {
1814 display: flex;
1815 align-items: center;
1816 justify-content: center;
1817 width: 28px;
1818 height: 28px;
1819 border-radius: 8px;
1820 border: none;
1821 background: transparent;
1822 color: var(--card-text-light);
1823 cursor: pointer;
1824 transition: all 0.15s ease;
1825 flex-shrink: 0;
1826}
1827
1828.sidebarLogout:hover {
1829 background: rgba(220, 38, 38, 0.15);
1830 color: #dc2626;
1831}
1832
1833.sidebar.collapsed .sidebarUser {
1834 flex-direction: column;
1835 padding: 10px 8px;
1836 margin: auto 8px 12px;
1837 gap: 6px;
1838}
1839
1840.sidebar.collapsed .sidebarUserText {
1841 display: none;
1842}
1843
1844.sidebar {
1845 position: fixed;
1846 left: 0;
1847 top: 0;
1848 bottom: 0;
1849 width: 260px;
1850 background: var(--sidebar-bg);
1851 backdrop-filter: blur(16px);
1852 -webkit-backdrop-filter: blur(16px);
1853 border-right: 1px solid var(--sidebar-border);
1854 display: flex;
1855 flex-direction: column;
1856 transition:
1857 width 0.25s ease,
1858 background 0.3s ease,
1859 border 0.3s ease;
1860 z-index: 40;
1861 overflow: hidden;
1862}
1863
1864.sidebar.collapsed {
1865 width: 72px;
1866}
1867
1868.sidebarHeader {
1869 display: flex;
1870 align-items: center;
1871 justify-content: flex-start;
1872 padding: 24px 20px;
1873 border-bottom: 1px solid var(--sidebar-border);
1874 min-height: 72px;
1875}
1876
1877.sidebar.collapsed .sidebarHeader {
1878 justify-content: center;
1879 padding: 24px 12px;
1880}
1881
1882.brand {
1883 display: flex;
1884 align-items: center;
1885 gap: 12px;
1886 font-weight: 700;
1887 font-size: 16px;
1888 color: var(--card-text);
1889 white-space: nowrap;
1890 text-decoration: none;
1891 transition: opacity 0.15s;
1892}
1893
1894.brand:hover {
1895 opacity: 0.8;
1896}
1897
1898.brand svg {
1899 flex-shrink: 0;
1900 color: var(--accent);
1901}
1902
1903.sidebar.collapsed .brand span {
1904 display: none;
1905}
1906
1907.sidebarFooter {
1908 padding: 12px 14px;
1909 border-top: 1px solid var(--sidebar-border);
1910}
1911
1912.sidebarToggle {
1913 width: 100%;
1914 display: flex;
1915 align-items: center;
1916 justify-content: center;
1917 gap: 10px;
1918 padding: 10px 14px;
1919 border-radius: 12px;
1920 border: none;
1921 background: var(--sidebar-hover);
1922 cursor: pointer;
1923 color: var(--card-text-light);
1924 font-weight: 600;
1925 font-size: 13px;
1926 transition: all 0.2s ease;
1927}
1928
1929.sidebarToggle:hover {
1930 background: var(--card-bg);
1931 color: var(--card-text);
1932}
1933
1934.sidebar.collapsed .sidebarToggle span {
1935 display: none;
1936}
1937
1938.sidebar.collapsed .sidebarToggle {
1939 padding: 12px;
1940}
1941
1942.sidebarNav {
1943 display: flex;
1944 flex-direction: column;
1945 gap: 4px;
1946 padding: 16px 12px;
1947}
1948
1949.sidebarLink {
1950 display: flex;
1951 align-items: center;
1952 gap: 12px;
1953 padding: 12px 14px;
1954 border-radius: 12px;
1955 color: var(--card-text-light);
1956 text-decoration: none;
1957 font-weight: 600;
1958 font-size: 14px;
1959 transition: all 0.15s ease;
1960 white-space: nowrap;
1961}
1962
1963.sidebarLink:hover {
1964 background: var(--sidebar-hover);
1965 color: var(--card-text);
1966 text-decoration: none;
1967}
1968
1969.sidebarLink.active {
1970 background: var(--sidebar-active-bg);
1971 color: #fff;
1972 box-shadow: 0 4px 12px rgba(232, 137, 120, 0.25);
1973}
1974
1975.sidebarLink svg {
1976 flex-shrink: 0;
1977 color: inherit;
1978 opacity: 0.7;
1979 transition: opacity 0.15s;
1980}
1981
1982.sidebarLink:hover svg {
1983 opacity: 1;
1984}
1985
1986.sidebarLink.active svg {
1987 color: #fff;
1988 opacity: 1;
1989}
1990
1991.sidebar.collapsed .sidebarLink {
1992 justify-content: center;
1993 padding: 12px;
1994}
1995
1996.sidebar.collapsed .sidebarLink span {
1997 display: none;
1998}
1999
2000.sidebarSection {
2001 padding: 12px 12px;
2002 border-top: 1px solid var(--sidebar-border);
2003 margin-top: 8px;
2004 flex: 1;
2005 min-height: 0;
2006 display: flex;
2007 flex-direction: column;
2008 overflow: hidden;
2009}
2010
2011.sidebarLabel {
2012 font-size: 10px;
2013 font-weight: 700;
2014 color: var(--card-text-light);
2015 text-transform: uppercase;
2016 letter-spacing: 0.08em;
2017 padding: 8px 14px 12px;
2018 white-space: nowrap;
2019}
2020
2021.sidebarProjects {
2022 display: flex;
2023 flex-direction: column;
2024 gap: 2px;
2025 flex: 1;
2026 min-height: 0;
2027 overflow-y: auto;
2028}
2029
2030.sidebarProjects::-webkit-scrollbar {
2031 width: 4px;
2032}
2033
2034.sidebarProjects::-webkit-scrollbar-track {
2035 background: transparent;
2036}
2037
2038.sidebarProjects::-webkit-scrollbar-thumb {
2039 background: var(--glass-border);
2040 border-radius: 4px;
2041}
2042
2043.sidebarProject {
2044 display: flex;
2045 align-items: center;
2046 gap: 12px;
2047 padding: 10px 14px;
2048 border-radius: 10px;
2049 color: var(--card-text-light);
2050 text-decoration: none;
2051 transition: all 0.15s ease;
2052}
2053
2054.sidebarProject:hover {
2055 background: var(--sidebar-hover);
2056 color: var(--card-text);
2057 text-decoration: none;
2058}
2059
2060.sidebarProject.active {
2061 background: var(--card-bg);
2062 color: var(--accent);
2063}
2064
2065.sidebarProject svg {
2066 flex-shrink: 0;
2067 color: var(--card-text-light);
2068}
2069
2070.sidebarProject.active svg,
2071.sidebarProject:hover svg {
2072 color: var(--accent);
2073}
2074
2075.sidebarProjectInfo {
2076 display: flex;
2077 flex-direction: column;
2078 min-width: 0;
2079 gap: 2px;
2080}
2081
2082.sidebarProjectName {
2083 font-weight: 600;
2084 font-size: 13px;
2085 white-space: nowrap;
2086 overflow: hidden;
2087 text-overflow: ellipsis;
2088 color: inherit;
2089}
2090
2091.sidebarProjectUrl {
2092 font-size: 11px;
2093 color: var(--card-text-light);
2094 white-space: nowrap;
2095 overflow: hidden;
2096 text-overflow: ellipsis;
2097}
2098
2099.dashMain {
2100 flex: 1;
2101 margin-left: 260px;
2102 padding: 24px 32px 32px;
2103 min-height: 100vh;
2104 transition: margin-left 0.25s ease;
2105}
2106
2107.dashHeader {
2108 display: flex;
2109 justify-content: flex-end;
2110 align-items: center;
2111 margin-bottom: 24px;
2112}
2113
2114.dashWrapper.sidebarCollapsed .dashMain {
2115 margin-left: 72px;
2116}
2117
2118.sidebar.collapsed .sidebarProject {
2119 justify-content: center;
2120 padding: 10px;
2121}
2122
2123.sidebar.collapsed .sidebarProject .sidebarProjectInfo {
2124 display: none;
2125}
2126
2127.sidebar.collapsed .sidebarSection {
2128 padding: 12px 8px;
2129}
2130
2131.sidebar.collapsed .sidebarLabel {
2132 display: none;
2133}
2134
2135.mobileMenuBtn {
2136 display: none;
2137 align-items: center;
2138 justify-content: center;
2139 width: 40px;
2140 height: 40px;
2141 border-radius: 12px;
2142 border: none;
2143 background: var(--card-bg);
2144 backdrop-filter: blur(12px);
2145 -webkit-backdrop-filter: blur(12px);
2146 cursor: pointer;
2147 color: var(--card-text);
2148 transition: all 0.2s ease;
2149}
2150
2151.mobileMenuBtn:hover {
2152 background: var(--sidebar-hover);
2153}
2154
2155.sidebarOverlay {
2156 display: none;
2157 position: fixed;
2158 inset: 0;
2159 background: rgba(0, 0, 0, 0.5);
2160 backdrop-filter: blur(4px);
2161 -webkit-backdrop-filter: blur(4px);
2162 z-index: 39;
2163 opacity: 0;
2164 transition: opacity 0.3s ease;
2165}
2166
2167.sidebarOverlay.visible {
2168 opacity: 1;
2169}
2170
2171@media (max-width: 768px) {
2172 .mobileMenuBtn {
2173 display: flex;
2174 }
2175
2176 .sidebarOverlay {
2177 display: block;
2178 pointer-events: none;
2179 }
2180
2181 .sidebarOverlay.visible {
2182 pointer-events: auto;
2183 }
2184
2185 .sidebar {
2186 width: 280px;
2187 transform: translateX(-100%);
2188 transition:
2189 transform 0.3s ease,
2190 width 0.25s ease;
2191 z-index: 50;
2192 }
2193
2194 .sidebar.mobileOpen {
2195 transform: translateX(0);
2196 }
2197
2198 .sidebar.collapsed {
2199 width: 280px;
2200 }
2201
2202 .sidebar.collapsed .sidebarLink span,
2203 .sidebar.collapsed .sidebarSection .sidebarLabel,
2204 .sidebar.collapsed .sidebarProjectInfo,
2205 .sidebar.collapsed .sidebarUserText,
2206 .sidebar.collapsed .brand span {
2207 display: unset;
2208 }
2209
2210 .sidebar.collapsed .sidebarLink,
2211 .sidebar.collapsed .sidebarProject {
2212 justify-content: flex-start;
2213 }
2214
2215 .sidebar.collapsed .sidebarHeader {
2216 justify-content: flex-start;
2217 padding: 24px 20px;
2218 }
2219
2220 .sidebar.collapsed .sidebarUser {
2221 flex-direction: row;
2222 padding: 12px;
2223 margin: auto 12px 12px;
2224 gap: 10px;
2225 }
2226
2227 .sidebar .sidebarFooter {
2228 display: none;
2229 }
2230
2231 .dashMain {
2232 margin-left: 0;
2233 padding: 16px;
2234 }
2235
2236 .dashWrapper.sidebarCollapsed .dashMain {
2237 margin-left: 0;
2238 }
2239
2240 .dashHeader {
2241 justify-content: space-between;
2242 gap: 12px;
2243 }
2244}
2245
2246@media (max-width: 560px) {
2247 .dashMain {
2248 padding: 12px;
2249 }
2250
2251 .dashHeader {
2252 margin-bottom: 16px;
2253 }
2254}
2255
2256.userDropdown {
2257 position: relative;
2258}
2259
2260.userDropdownTrigger {
2261 display: flex;
2262 align-items: center;
2263 gap: 8px;
2264 padding: 4px;
2265 border-radius: 999px;
2266 border: 1px solid var(--card-border);
2267 background: var(--dropdown-bg);
2268 cursor: pointer;
2269 transition: all 0.15s ease;
2270 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
2271}
2272
2273.userDropdownTrigger:hover {
2274 border-color: var(--sidebar-border);
2275 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
2276}
2277
2278.userDropdownTrigger .userInfo {
2279 display: none;
2280}
2281
2282.avatar {
2283 width: 36px;
2284 height: 36px;
2285 border-radius: 50%;
2286 object-fit: cover;
2287}
2288
2289.avatarPlaceholder {
2290 width: 36px;
2291 height: 36px;
2292 border-radius: 50%;
2293 background: #e0f2fe;
2294 display: flex;
2295 align-items: center;
2296 justify-content: center;
2297 color: #0284c7;
2298}
2299
2300.userInfo {
2301 text-align: left;
2302}
2303
2304.userName {
2305 display: block;
2306 font-weight: 600;
2307 font-size: 13px;
2308 color: var(--card-text);
2309}
2310
2311.userEmail {
2312 display: block;
2313 font-size: 11px;
2314 color: var(--card-text-light);
2315 max-width: 150px;
2316 overflow: hidden;
2317 text-overflow: ellipsis;
2318 white-space: nowrap;
2319}
2320
2321.chevron {
2322 display: none;
2323 color: #94a3b8;
2324 transition: transform 0.2s ease;
2325}
2326
2327.chevron.open {
2328 transform: rotate(180deg);
2329}
2330
2331.dropdownOverlay {
2332 position: fixed;
2333 inset: 0;
2334 z-index: 99;
2335}
2336
2337.dropdownMenu {
2338 position: absolute;
2339 top: calc(100% + 8px);
2340 right: 0;
2341 min-width: 180px;
2342 background: var(--dropdown-bg);
2343 border: 1px solid var(--dropdown-border);
2344 border-radius: 12px;
2345 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
2346 overflow: hidden;
2347 z-index: 100;
2348 animation: dropdownFadeIn 0.15s ease;
2349 padding: 6px;
2350}
2351
2352@keyframes dropdownFadeIn {
2353 from {
2354 opacity: 0;
2355 transform: translateY(-4px);
2356 }
2357
2358 to {
2359 opacity: 1;
2360 transform: translateY(0);
2361 }
2362}
2363
2364.dropdownItem {
2365 display: flex;
2366 align-items: center;
2367 gap: 10px;
2368 width: 100%;
2369 padding: 10px 12px;
2370 border: none;
2371 background: transparent;
2372 text-align: left;
2373 font-size: 14px;
2374 font-weight: 500;
2375 color: var(--card-text-light);
2376 cursor: pointer;
2377 text-decoration: none;
2378 transition: all 0.1s ease;
2379 border-radius: 8px;
2380}
2381
2382.dropdownItem:hover {
2383 background: var(--dropdown-hover);
2384 text-decoration: none;
2385 color: var(--card-text);
2386}
2387
2388.dropdownItem svg {
2389 color: var(--card-text-light);
2390}
2391
2392.page {
2393 display: flex;
2394 flex-direction: column;
2395 gap: 24px;
2396}
2397
2398.pageHeader {
2399 display: flex;
2400 align-items: flex-end;
2401 justify-content: space-between;
2402 gap: 20px;
2403}
2404
2405@media (max-width: 768px) {
2406 .pageHeader {
2407 flex-direction: column;
2408 align-items: stretch;
2409 }
2410}
2411
2412.h {
2413 font-size: 1.75rem;
2414 font-weight: 700;
2415 letter-spacing: -0.02em;
2416 line-height: 1.2;
2417 color: var(--card-text);
2418}
2419
2420.topActions {
2421 display: flex;
2422 gap: 10px;
2423 align-items: center;
2424 justify-content: flex-end;
2425}
2426
2427.crumbs {
2428 display: flex;
2429 gap: 8px;
2430 align-items: center;
2431 margin-bottom: 6px;
2432 font-size: 13px;
2433}
2434
2435.crumb {
2436 font-weight: 600;
2437 color: var(--accent);
2438}
2439
2440.panel {
2441 background: var(--card-bg);
2442 backdrop-filter: blur(12px);
2443 -webkit-backdrop-filter: blur(12px);
2444 border: 1px solid var(--card-border);
2445 border-radius: 20px;
2446 padding: 24px;
2447 box-shadow: var(--shadow);
2448 transition:
2449 background 0.3s ease,
2450 border 0.3s ease;
2451}
2452
2453.panel:hover {
2454 box-shadow: var(--shadow-hover);
2455}
2456
2457.panelTitle {
2458 font-weight: 700;
2459 font-size: 16px;
2460 margin-bottom: 10px;
2461 color: var(--card-text);
2462 display: flex;
2463 align-items: center;
2464}
2465
2466.panelActions {
2467 display: flex;
2468 justify-content: flex-end;
2469 gap: 10px;
2470 margin-top: 20px;
2471}
2472
2473.box {
2474 background: var(--card-bg);
2475 backdrop-filter: blur(12px);
2476 -webkit-backdrop-filter: blur(12px);
2477 border: 1px solid var(--card-border);
2478 border-radius: 20px;
2479 padding: 24px;
2480 box-shadow: var(--shadow);
2481 transition:
2482 background 0.3s ease,
2483 border 0.3s ease;
2484}
2485
2486.divider {
2487 height: 1px;
2488 background: var(--glass-border);
2489 margin: 20px 0;
2490}
2491
2492.gridCards {
2493 display: grid;
2494 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
2495 gap: 16px;
2496}
2497
2498.grid2 {
2499 display: grid;
2500 grid-template-columns: repeat(2, 1fr);
2501 gap: 16px;
2502 align-items: start;
2503}
2504
2505@media (max-width: 900px) {
2506 .grid2 {
2507 grid-template-columns: 1fr;
2508 }
2509}
2510
2511.projectCard {
2512 display: block;
2513 position: relative;
2514 background: var(--card-bg);
2515 backdrop-filter: blur(12px);
2516 -webkit-backdrop-filter: blur(12px);
2517 border: 1px solid var(--card-border);
2518 border-radius: 16px;
2519 padding: 20px;
2520 box-shadow: var(--shadow);
2521 text-decoration: none;
2522 color: var(--card-text);
2523 transition: all 0.2s ease;
2524}
2525
2526.projectCard:hover {
2527 transform: translateY(-4px);
2528 box-shadow: var(--shadow-hover);
2529 text-decoration: none;
2530}
2531
2532.projectTitle {
2533 font-weight: 700;
2534 font-size: 16px;
2535 letter-spacing: -0.01em;
2536 color: var(--card-text);
2537}
2538
2539.projectMeta {
2540 display: flex;
2541 gap: 8px;
2542 flex-wrap: wrap;
2543 margin-top: 12px;
2544}
2545
2546.chip {
2547 font-size: 11px;
2548 font-weight: 600;
2549 padding: 5px 12px;
2550 border-radius: 999px;
2551 background: var(--card-bg);
2552 color: var(--card-text-light);
2553}
2554
2555.badge {
2556 display: inline-flex;
2557 align-items: center;
2558 justify-content: center;
2559 padding: 5px 12px;
2560 border-radius: 999px;
2561 background: var(--card-bg);
2562 font-weight: 600;
2563 font-size: 11px;
2564 color: var(--card-text-light);
2565}
2566
2567.field {
2568 display: flex;
2569 flex-direction: column;
2570 margin-bottom: 4px;
2571 min-width: 0;
2572}
2573
2574.label {
2575 font-size: 12px;
2576 font-weight: 600;
2577 color: var(--card-text);
2578 margin-bottom: 8px;
2579 letter-spacing: 0.01em;
2580}
2581
2582.row {
2583 display: grid;
2584 grid-template-columns: 1fr 1fr;
2585 gap: 16px;
2586}
2587
2588.row .field .input {
2589 min-width: 0;
2590 width: 100%;
2591}
2592
2593@media (max-width: 560px) {
2594 .row {
2595 grid-template-columns: 1fr;
2596 }
2597}
2598
2599.textarea {
2600 width: 100%;
2601 min-height: 160px;
2602 border-radius: 10px;
2603 border: 1px solid var(--card-border);
2604 padding: 14px;
2605 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2606 font-size: 13px;
2607 background: var(--input-bg);
2608 color: var(--card-text);
2609 resize: vertical;
2610 transition: all 0.15s ease;
2611}
2612
2613.textarea:focus {
2614 outline: none;
2615 border-color: #e88978;
2616 box-shadow: 0 0 0 3px rgba(232, 137, 120, 0.1);
2617}
2618
2619.tabs {
2620 display: flex;
2621 gap: 4px;
2622 align-items: center;
2623 flex-wrap: wrap;
2624 padding: 4px;
2625 background: var(--code-bg);
2626 border-radius: 10px;
2627 margin-bottom: 20px;
2628}
2629
2630.tab {
2631 display: inline-flex;
2632 align-items: center;
2633 background: transparent;
2634 border: none;
2635 border-radius: 8px;
2636 padding: 10px 16px;
2637 font-weight: 600;
2638 font-size: 13px;
2639 cursor: pointer;
2640 color: var(--card-text-light);
2641 transition: all 0.15s ease;
2642}
2643
2644.tab:hover {
2645 color: var(--card-text);
2646}
2647
2648.tab.active {
2649 background: var(--card-bg);
2650 color: var(--card-text);
2651 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
2652}
2653
2654.subTabs {
2655 display: inline-flex;
2656 padding: 4px;
2657 background: var(--code-bg);
2658 border-radius: 10px;
2659 margin: 12px 0 16px;
2660 gap: 4px;
2661}
2662
2663.subTab {
2664 background: transparent;
2665 border: none;
2666 border-radius: 8px;
2667 padding: 8px 14px;
2668 font-weight: 600;
2669 font-size: 13px;
2670 cursor: pointer;
2671 color: var(--card-text-light);
2672 transition: all 0.15s ease;
2673}
2674
2675.subTab:hover {
2676 color: var(--card-text);
2677}
2678
2679.subTab.active {
2680 background: var(--card-bg);
2681 color: var(--card-text);
2682 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
2683}
2684
2685[data-theme='dark'] .tabs {
2686 background: color-mix(in srgb, var(--sidebar-bg) 70%, #0b1221 30%);
2687 border: 1px solid var(--sidebar-border);
2688}
2689
2690[data-theme='dark'] .tab {
2691 color: color-mix(in srgb, var(--card-text-light) 70%, #f5cdc6 30%);
2692}
2693
2694[data-theme='dark'] .tab.active {
2695 background: color-mix(in srgb, var(--card-bg) 70%, rgba(244, 162, 149, 0.3) 30%);
2696 box-shadow:
2697 0 0 0 1px color-mix(in srgb, var(--card-color, #f4a295) 35%, rgba(255, 255, 255, 0.25) 65%),
2698 0 6px 20px rgba(0, 0, 0, 0.35);
2699 color: #fff5f2;
2700}
2701
2702[data-theme='dark'] .subTabs {
2703 background: color-mix(in srgb, var(--sidebar-bg) 70%, #0b1221 30%);
2704 border: 1px solid var(--sidebar-border);
2705}
2706
2707[data-theme='dark'] .subTab {
2708 color: color-mix(in srgb, var(--card-text-light) 70%, #f5cdc6 30%);
2709}
2710
2711[data-theme='dark'] .subTab.active {
2712 background: color-mix(in srgb, var(--card-bg) 70%, rgba(244, 162, 149, 0.25) 30%);
2713 color: #fff5f2;
2714 box-shadow:
2715 0 0 0 1px color-mix(in srgb, var(--card-color, #f4a295) 35%, rgba(255, 255, 255, 0.2) 65%),
2716 0 6px 20px rgba(0, 0, 0, 0.25);
2717}
2718
2719.deployList {
2720 display: flex;
2721 flex-direction: column;
2722 gap: 8px;
2723}
2724
2725.deployRow {
2726 display: flex;
2727 align-items: flex-start;
2728 justify-content: space-between;
2729 gap: 16px;
2730 background: var(--card-bg);
2731 border: 1px solid var(--card-border);
2732 border-radius: 12px;
2733 padding: 16px;
2734 transition: all 0.15s ease;
2735}
2736
2737.deployRow:hover {
2738 border-color: var(--sidebar-border);
2739 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
2740}
2741
2742.deployRow .siteName {
2743 font-weight: 600;
2744 font-size: 14px;
2745 color: var(--card-text);
2746}
2747
2748.envHeader {
2749 display: flex;
2750 align-items: center;
2751 justify-content: space-between;
2752 margin-top: 0;
2753 margin-bottom: 10px;
2754 gap: 12px;
2755}
2756
2757.envHeaderLeft {
2758 display: flex;
2759 align-items: center;
2760 gap: 10px;
2761}
2762
2763.envHeaderRight {
2764 display: flex;
2765 gap: 8px;
2766}
2767
2768.envCount {
2769 display: inline-flex;
2770 align-items: center;
2771 justify-content: center;
2772 min-width: 24px;
2773 height: 24px;
2774 padding: 0 8px;
2775 background: var(--accent);
2776 color: white;
2777 border-radius: 12px;
2778 font-size: 12px;
2779 font-weight: 700;
2780}
2781
2782.envContainer {
2783 display: flex;
2784 flex-direction: column;
2785 gap: 16px;
2786}
2787
2788.envDescription {
2789 padding-left: 0;
2790 margin-bottom: 16px;
2791}
2792
2793.envDescription code {
2794 background: var(--code-bg);
2795 padding: 2px 6px;
2796 border-radius: 4px;
2797 font-size: 12px;
2798}
2799
2800.envEmptyState {
2801 display: flex;
2802 flex-direction: column;
2803 align-items: center;
2804 justify-content: center;
2805 padding: 48px 24px;
2806 text-align: center;
2807 background: var(--code-bg);
2808 border: 1px dashed var(--card-border);
2809 border-radius: 12px;
2810}
2811
2812.envEmptyIcon {
2813 width: 64px;
2814 height: 64px;
2815 display: flex;
2816 align-items: center;
2817 justify-content: center;
2818 background: var(--card-bg);
2819 border-radius: 16px;
2820 margin-bottom: 16px;
2821 color: var(--card-text-light);
2822}
2823
2824.envEmptyTitle {
2825 font-size: 16px;
2826 font-weight: 600;
2827 color: var(--card-text);
2828 margin-bottom: 4px;
2829}
2830
2831.envEmptyDesc {
2832 font-size: 14px;
2833 color: var(--card-text-light);
2834 margin-bottom: 20px;
2835 max-width: 320px;
2836}
2837
2838.envTable {
2839 border: 1px solid var(--card-border);
2840 border-radius: 12px;
2841 overflow: hidden;
2842 background: var(--card-bg);
2843}
2844
2845.envTableHeader {
2846 display: grid;
2847 grid-template-columns: 200px 1fr 120px;
2848 background: var(--code-bg);
2849 border-bottom: 1px solid var(--card-border);
2850 padding: 12px 16px;
2851 font-size: 12px;
2852 font-weight: 600;
2853 color: var(--card-text-light);
2854 text-transform: uppercase;
2855 letter-spacing: 0.03em;
2856}
2857
2858.envTableRow {
2859 display: grid;
2860 grid-template-columns: 200px 1fr 120px;
2861 padding: 12px 16px;
2862 border-bottom: 1px solid var(--card-border);
2863 transition: background 0.15s ease;
2864}
2865
2866.envTableRow:last-child {
2867 border-bottom: none;
2868}
2869
2870.envTableRow:hover {
2871 background: var(--code-bg);
2872}
2873
2874.envTableCell {
2875 display: flex;
2876 align-items: center;
2877 min-width: 0;
2878}
2879
2880.envTableName {
2881 font-weight: 500;
2882}
2883
2884.envKeyCode {
2885 background: var(--code-bg);
2886 padding: 4px 8px;
2887 border-radius: 6px;
2888 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2889 font-size: 13px;
2890 color: var(--accent);
2891 white-space: nowrap;
2892 overflow: hidden;
2893 text-overflow: ellipsis;
2894 max-width: 100%;
2895}
2896
2897.envValueContainer {
2898 min-width: 0;
2899 overflow: hidden;
2900}
2901
2902.envValueCode {
2903 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2904 font-size: 13px;
2905 color: var(--card-text);
2906 word-break: break-all;
2907 white-space: pre-wrap;
2908}
2909
2910.envMasked {
2911 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2912 font-size: 13px;
2913 color: var(--card-text-light);
2914 letter-spacing: 2px;
2915 opacity: 0.6;
2916}
2917
2918.envTableActions {
2919 display: flex;
2920 align-items: center;
2921 justify-content: flex-end;
2922 gap: 4px;
2923}
2924
2925.envActionBtn {
2926 display: flex;
2927 align-items: center;
2928 justify-content: center;
2929 width: 32px;
2930 height: 32px;
2931 border: none;
2932 background: transparent;
2933 border-radius: 8px;
2934 color: var(--card-text-light);
2935 cursor: pointer;
2936 transition: all 0.15s ease;
2937}
2938
2939.envActionBtn:hover {
2940 background: var(--sidebar-hover);
2941 color: var(--card-text);
2942}
2943
2944.envActionBtnDanger:hover {
2945 background: rgba(220, 38, 38, 0.1);
2946 color: #dc2626;
2947}
2948
2949.envFooter {
2950 display: flex;
2951 align-items: center;
2952 justify-content: space-between;
2953 gap: 12px;
2954 padding-top: 4px;
2955}
2956
2957.envRawTextarea {
2958 min-height: 300px;
2959 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2960 font-size: 13px;
2961 line-height: 1.6;
2962 resize: vertical;
2963}
2964
2965.envModal .envKeyInput {
2966 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2967 text-transform: uppercase;
2968}
2969
2970.envModal .envValueInput {
2971 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2972 min-height: 100px;
2973}
2974
2975[data-theme='dark'] .envCount {
2976 background: var(--accent);
2977}
2978
2979[data-theme='dark'] .envEmptyState {
2980 background: color-mix(in srgb, var(--card-bg) 50%, transparent 50%);
2981 border-color: rgba(255, 255, 255, 0.1);
2982}
2983
2984[data-theme='dark'] .envEmptyIcon {
2985 background: var(--sidebar-bg);
2986}
2987
2988[data-theme='dark'] .envTable {
2989 background: color-mix(in srgb, var(--card-bg) 80%, rgba(255, 255, 255, 0.02) 20%);
2990 border-color: rgba(255, 255, 255, 0.08);
2991}
2992
2993[data-theme='dark'] .envTableHeader {
2994 background: var(--sidebar-bg);
2995 border-color: rgba(255, 255, 255, 0.08);
2996}
2997
2998[data-theme='dark'] .envTableRow {
2999 border-color: rgba(255, 255, 255, 0.06);
3000}
3001
3002[data-theme='dark'] .envTableRow:hover {
3003 background: rgba(255, 255, 255, 0.03);
3004}
3005
3006[data-theme='dark'] .envKeyCode {
3007 background: rgba(255, 255, 255, 0.06);
3008 color: var(--accent);
3009}
3010
3011[data-theme='dark'] .envActionBtn:hover {
3012 background: rgba(255, 255, 255, 0.08);
3013}
3014
3015[data-theme='dark'] .envActionBtnDanger:hover {
3016 background: rgba(248, 113, 113, 0.15);
3017 color: #f87171;
3018}
3019
3020@media (max-width: 768px) {
3021 .envHeader {
3022 flex-direction: column;
3023 align-items: flex-start;
3024 }
3025
3026 .envTableHeader {
3027 display: none;
3028 }
3029
3030 .envTableRow {
3031 display: flex;
3032 flex-direction: column;
3033 gap: 8px;
3034 padding: 16px;
3035 }
3036
3037 .envTableCell {
3038 width: 100%;
3039 }
3040
3041 .envTableName {
3042 order: 1;
3043 }
3044
3045 .envTableValue {
3046 order: 2;
3047 padding: 8px 0;
3048 }
3049
3050 .envTableActions {
3051 order: 3;
3052 justify-content: flex-start;
3053 padding-top: 8px;
3054 border-top: 1px solid var(--card-border);
3055 }
3056
3057 .envFooter {
3058 flex-direction: column;
3059 }
3060
3061 .envFooter .btn {
3062 width: 100%;
3063 }
3064}
3065
3066.envList {
3067 display: flex;
3068 flex-direction: column;
3069 gap: 8px;
3070 margin: 12px 0 16px;
3071}
3072
3073.envListItem {
3074 background: var(--card-bg);
3075 border: 1px solid var(--card-border);
3076 border-radius: 12px;
3077 padding: 12px 16px;
3078 display: flex;
3079 align-items: center;
3080 justify-content: space-between;
3081 gap: 12px;
3082 transition: all 0.15s ease;
3083}
3084
3085.envListItem:hover {
3086 border-color: var(--sidebar-border);
3087 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
3088}
3089
3090.envListItemMain {
3091 display: flex;
3092 align-items: center;
3093 gap: 16px;
3094 flex: 1;
3095 min-width: 0;
3096}
3097
3098.envListItemRight {
3099 display: flex;
3100 align-items: center;
3101 gap: 8px;
3102}
3103
3104.envKey {
3105 font-weight: 600;
3106 font-size: 14px;
3107 color: var(--card-text);
3108 white-space: nowrap;
3109 overflow: hidden;
3110 text-overflow: ellipsis;
3111 max-width: 200px;
3112}
3113
3114.envValue {
3115 flex: 1;
3116 min-width: 0;
3117}
3118
3119.envValueText {
3120 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
3121 font-size: 13px;
3122 color: var(--card-text);
3123 word-break: break-all;
3124}
3125
3126.maskedPlaceholder {
3127 color: var(--muted);
3128 font-style: italic;
3129}
3130
3131.envMaskedPill {
3132 display: flex;
3133 align-items: center;
3134 justify-content: center;
3135 padding: 8px 12px;
3136 background: var(--code-bg);
3137 border: 1px solid var(--card-border);
3138 border-radius: 0;
3139 min-width: 120px;
3140 max-width: 300px;
3141 min-height: 40px;
3142 font-size: 16px;
3143 color: var(--muted);
3144}
3145
3146.envMaskedPill.clickable {
3147 cursor: pointer;
3148 transition: all 0.15s ease;
3149}
3150
3151.envMaskedPill.clickable:hover {
3152 background: var(--card-bg);
3153 border-color: var(--sidebar-border);
3154}
3155
3156.envMaskedPill.clickable:active {
3157 transform: scale(0.98);
3158}
3159
3160.inlineTextarea {
3161 width: 100%;
3162 min-width: 120px;
3163 max-width: 300px;
3164 height: auto;
3165 min-height: 32px;
3166 padding: 4px 0;
3167 border: none;
3168 border-radius: 0;
3169 background: transparent;
3170 resize: none;
3171 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
3172 font-size: 15px;
3173 line-height: 1.2;
3174}
3175
3176.maskCircles {
3177 font-size: 16px;
3178 color: var(--muted);
3179 opacity: 0.6;
3180 letter-spacing: 0;
3181}
3182
3183.maskValue {
3184 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
3185 font-size: 12px;
3186 color: var(--card-text);
3187 white-space: nowrap;
3188 overflow: hidden;
3189 text-overflow: ellipsis;
3190 max-width: 120px;
3191}
3192
3193.envListItemActions {
3194 display: flex;
3195 align-items: center;
3196 gap: 6px;
3197}
3198
3199.dropdownWrapper {
3200 position: relative;
3201}
3202
3203.dropdownMenu {
3204 position: absolute;
3205 top: 100%;
3206 right: 0;
3207 margin-top: 4px;
3208 background: var(--dropdown-bg);
3209 border: 1px solid var(--dropdown-border);
3210 border-radius: 8px;
3211 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
3212 z-index: 10;
3213 min-width: 140px;
3214 overflow: hidden;
3215}
3216
3217.dropdownItem {
3218 display: flex;
3219 align-items: center;
3220 gap: 8px;
3221 width: 100%;
3222 padding: 8px 12px;
3223 background: none;
3224 border: none;
3225 font-size: 13px;
3226 color: var(--card-text);
3227 cursor: pointer;
3228 transition: background 0.15s ease;
3229}
3230
3231.dropdownItem:hover {
3232 background: var(--dropdown-hover);
3233}
3234
3235.dropdownItem.danger {
3236 color: #dc2626;
3237}
3238
3239.dropdownItem.danger:hover {
3240 background: rgba(220, 38, 38, 0.1);
3241}
3242
3243[data-theme='dark'] .envListItem {
3244 background: color-mix(in srgb, var(--card-bg) 80%, rgba(255, 255, 255, 0.04) 20%);
3245 border-color: rgba(255, 255, 255, 0.08);
3246 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
3247}
3248
3249[data-theme='dark'] .envListItem:hover {
3250 border-color: rgba(255, 255, 255, 0.14);
3251 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
3252}
3253
3254[data-theme='dark'] .envValueText {
3255 color: var(--card-text-light);
3256}
3257
3258[data-theme='dark'] .maskedPlaceholder {
3259 color: var(--card-text-light);
3260}
3261
3262[data-theme='dark'] .envMaskedPill {
3263 background: var(--code-bg);
3264 border-color: var(--card-border);
3265 color: var(--card-text-light);
3266}
3267
3268[data-theme='dark'] .envMaskedPill.clickable:hover {
3269 background: var(--card-bg);
3270 border-color: rgba(255, 255, 255, 0.14);
3271}
3272
3273[data-theme='dark'] .inlineTextarea {
3274 color: var(--card-text-light);
3275}
3276
3277[data-theme='dark'] .maskCircles {
3278 color: var(--card-text-light);
3279 opacity: 0.5;
3280}
3281
3282[data-theme='dark'] .maskValue {
3283 color: var(--card-text-light);
3284}
3285
3286[data-theme='dark'] .dropdownMenu {
3287 background: var(--dropdown-bg);
3288 border-color: var(--dropdown-border);
3289 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
3290}
3291
3292[data-theme='dark'] .dropdownItem:hover {
3293 background: var(--dropdown-hover);
3294}
3295
3296[data-theme='dark'] .dropdownItem.danger:hover {
3297 background: rgba(248, 113, 113, 0.2);
3298}
3299
3300.envToolbar {
3301 display: flex;
3302 align-items: center;
3303 justify-content: space-between;
3304 gap: 12px;
3305 padding: 12px;
3306 background: var(--code-bg);
3307 border-radius: 12px;
3308 border: 1px solid var(--card-border);
3309 margin-bottom: 12px;
3310}
3311
3312.envToolbarActions {
3313 display: flex;
3314 gap: 8px;
3315 flex-wrap: wrap;
3316}
3317
3318.envRawArea {
3319 min-height: 220px;
3320 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
3321}
3322
3323.pill {
3324 display: inline-flex;
3325 align-items: center;
3326 gap: 6px;
3327 border-radius: 999px;
3328 padding: 4px 10px;
3329 font-weight: 600;
3330 font-size: 12px;
3331 border: 1px solid var(--border);
3332 background: rgba(0, 0, 0, 0.02);
3333 color: var(--muted);
3334}
3335
3336.mutedChip {
3337 background: rgba(15, 23, 42, 0.04);
3338 border-color: rgba(15, 23, 42, 0.08);
3339}
3340
3341.softPill {
3342 background: rgba(232, 137, 120, 0.12);
3343 border-color: rgba(232, 137, 120, 0.2);
3344 color: #c45a47;
3345}
3346
3347[data-theme='dark'] .pill {
3348 border-color: rgba(255, 255, 255, 0.12);
3349 background: rgba(255, 255, 255, 0.05);
3350 color: var(--card-text-light);
3351}
3352
3353[data-theme='dark'] .mutedChip {
3354 background: rgba(255, 255, 255, 0.06);
3355 border-color: rgba(255, 255, 255, 0.1);
3356}
3357
3358[data-theme='dark'] .softPill {
3359 background: rgba(244, 162, 149, 0.18);
3360 border-color: rgba(244, 162, 149, 0.3);
3361 color: #f4a295;
3362}
3363
3364[data-theme='dark'] .envCard {
3365 background: color-mix(in srgb, var(--card-bg) 80%, rgba(255, 255, 255, 0.04) 20%);
3366 border-color: rgba(255, 255, 255, 0.08);
3367 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
3368}
3369
3370.actions {
3371 display: flex;
3372 gap: 8px;
3373 flex-wrap: wrap;
3374 justify-content: flex-end;
3375}
3376
3377.notice {
3378 background: var(--notice-bg);
3379 border: 1px solid var(--notice-border);
3380 padding: 14px 18px;
3381 border-radius: 10px;
3382 font-weight: 500;
3383 color: var(--notice-text);
3384 font-size: 14px;
3385 display: flex;
3386 align-items: center;
3387 gap: 10px;
3388}
3389
3390.notice::before {
3391 content: '⚡';
3392 font-size: 16px;
3393}
3394
3395.errorBox {
3396 background: var(--error-bg);
3397 border: 1px solid var(--error-border);
3398 padding: 14px 18px;
3399 border-radius: 12px;
3400 font-weight: 500;
3401 color: var(--error-text);
3402 font-size: 14px;
3403}
3404
3405.modalOverlay {
3406 position: fixed;
3407 inset: 0;
3408 background: rgba(15, 23, 42, 0.4);
3409 backdrop-filter: blur(8px);
3410 -webkit-backdrop-filter: blur(8px);
3411 display: flex;
3412 align-items: center;
3413 justify-content: center;
3414 padding: 24px;
3415 z-index: 100;
3416 animation: modalOverlayIn 0.2s ease;
3417}
3418
3419@keyframes modalOverlayIn {
3420 from {
3421 opacity: 0;
3422 }
3423
3424 to {
3425 opacity: 1;
3426 }
3427}
3428
3429.modal {
3430 width: min(540px, 96vw);
3431 max-height: calc(100vh - 48px);
3432 overflow-y: auto;
3433 background: var(--modal-bg);
3434 backdrop-filter: blur(20px);
3435 -webkit-backdrop-filter: blur(20px);
3436 border: 1px solid var(--modal-border);
3437 border-radius: 24px;
3438 box-shadow:
3439 0 24px 80px rgba(0, 0, 0, 0.15),
3440 inset 0 1px 1px var(--modal-inset);
3441 animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
3442}
3443
3444@keyframes modalIn {
3445 from {
3446 opacity: 0;
3447 transform: translateY(20px) scale(0.96);
3448 }
3449
3450 to {
3451 opacity: 1;
3452 transform: translateY(0) scale(1);
3453 }
3454}
3455
3456.modalHeader {
3457 display: flex;
3458 align-items: center;
3459 justify-content: space-between;
3460 padding: 24px 28px;
3461 border-bottom: 1px solid var(--modal-header-border);
3462 background: var(--modal-header-bg);
3463}
3464
3465.modalTitle {
3466 font-weight: 700;
3467 font-size: 18px;
3468 display: flex;
3469 align-items: center;
3470 gap: 10px;
3471 color: var(--card-text);
3472}
3473
3474.iconBtn {
3475 width: 36px;
3476 height: 36px;
3477 border-radius: 12px;
3478 border: none;
3479 background: var(--icon-btn-bg);
3480 cursor: pointer;
3481 font-size: 20px;
3482 line-height: 1;
3483 display: flex;
3484 align-items: center;
3485 justify-content: center;
3486 transition: all 0.15s ease;
3487 color: var(--card-text-light);
3488}
3489
3490.iconBtn:hover {
3491 background: rgba(220, 38, 38, 0.12);
3492 color: #dc2626;
3493}
3494
3495.modalBody {
3496 padding: 28px;
3497 display: flex;
3498 flex-direction: column;
3499 gap: 24px;
3500}
3501
3502.modalActions {
3503 display: flex;
3504 justify-content: flex-end;
3505 gap: 12px;
3506 margin-top: 8px;
3507 padding-top: 20px;
3508 border-top: 1px solid var(--modal-header-border);
3509}
3510
3511.errorModal .modalHeader {
3512 background: rgba(254, 226, 226, 0.5);
3513}
3514
3515.errorContent {
3516 display: flex;
3517 flex-direction: column;
3518 gap: 16px;
3519}
3520
3521.errorMessage {
3522 font-size: 15px;
3523 color: var(--card-text);
3524 line-height: 1.6;
3525 margin: 0;
3526}
3527
3528.statusPill.status-ready,
3529.statusPill.status-active,
3530.statusPill.status-success {
3531 background: rgba(34, 197, 94, 0.1);
3532 color: #22c55e;
3533 border: 1px solid rgba(34, 197, 94, 0.2);
3534}
3535
3536.errorSuggestion {
3537 display: flex;
3538 align-items: flex-start;
3539 gap: 10px;
3540 background: rgba(220, 252, 231, 0.6);
3541 border: 1px solid rgba(134, 239, 172, 0.5);
3542 border-radius: 12px;
3543 padding: 14px;
3544}
3545
3546.errorSuggestion svg {
3547 color: #15803d;
3548 flex-shrink: 0;
3549 margin-top: 2px;
3550}
3551
3552.errorSuggestion strong {
3553 color: #15803d;
3554 font-size: 13px;
3555}
3556
3557.errorSuggestion p {
3558 margin: 4px 0 0;
3559 color: #166534;
3560 font-size: 14px;
3561}
3562
3563.errorDetails {
3564 margin-top: 8px;
3565}
3566
3567.errorDetails summary {
3568 cursor: pointer;
3569 font-size: 13px;
3570 color: var(--card-text-light);
3571 font-weight: 600;
3572}
3573
3574.errorDetails pre {
3575 background: var(--code-bg);
3576 border-radius: 8px;
3577 padding: 12px;
3578 font-size: 12px;
3579 overflow-x: auto;
3580 margin-top: 8px;
3581 color: var(--card-text);
3582}
3583
3584.logsModal {
3585 width: min(900px, 96vw);
3586 max-height: 80vh;
3587 display: flex;
3588 flex-direction: column;
3589}
3590
3591.logsModal .modalBody {
3592 flex: 1;
3593 overflow: hidden;
3594 display: flex;
3595 flex-direction: column;
3596 gap: 12px;
3597}
3598
3599.logsInfo {
3600 display: flex;
3601 align-items: center;
3602 gap: 12px;
3603 flex-wrap: wrap;
3604}
3605
3606.logsLoading {
3607 padding: 24px;
3608 text-align: center;
3609 color: var(--card-text-light);
3610}
3611
3612.logsContent {
3613 flex: 1;
3614 margin: 0;
3615 padding: 14px;
3616 background: var(--code-bg);
3617 border-radius: 10px;
3618 border: 1px solid var(--card-border);
3619 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
3620 font-size: 12px;
3621 line-height: 1.6;
3622 overflow: auto;
3623 white-space: pre-wrap;
3624 word-break: break-all;
3625 max-height: 60vh;
3626 color: var(--card-text);
3627}
3628
3629.turnstile-container {
3630 display: flex;
3631 justify-content: center;
3632 margin: 8px 0;
3633}
3634
3635.toast {
3636 position: fixed;
3637 bottom: 24px;
3638 right: 24px;
3639 padding: 14px 20px;
3640 background: var(--card-bg-solid);
3641 color: var(--card-text);
3642 border: 1px solid var(--card-border);
3643 border-radius: 12px;
3644 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
3645 font-size: 14px;
3646 font-weight: 500;
3647 z-index: 9999;
3648 animation: toastIn 0.25s ease;
3649 display: flex;
3650 align-items: center;
3651 gap: 10px;
3652 backdrop-filter: blur(12px);
3653 -webkit-backdrop-filter: blur(12px);
3654}
3655
3656.toast svg {
3657 color: #4ade80;
3658}
3659
3660@keyframes toastIn {
3661 from {
3662 transform: translateY(16px) scale(0.95);
3663 opacity: 0;
3664 }
3665
3666 to {
3667 transform: translateY(0) scale(1);
3668 opacity: 1;
3669 }
3670}
3671
3672@media (max-width: 768px) {
3673 .pageHeader {
3674 flex-direction: column;
3675 align-items: stretch;
3676 gap: 16px;
3677 }
3678
3679 .pageHeader .topActions {
3680 flex-wrap: wrap;
3681 }
3682
3683 .h {
3684 font-size: 1.5rem;
3685 }
3686
3687 .crumbs {
3688 font-size: 12px;
3689 }
3690}
3691
3692@media (max-width: 768px) {
3693 .panel {
3694 padding: 16px;
3695 border-radius: 16px;
3696 }
3697
3698 .panelTitle {
3699 font-size: 15px;
3700 }
3701
3702 .panelActions {
3703 flex-direction: column;
3704 }
3705
3706 .panelActions .btn {
3707 width: 100%;
3708 }
3709}
3710
3711@media (max-width: 768px) {
3712 .gridCards {
3713 grid-template-columns: 1fr;
3714 gap: 12px;
3715 }
3716}
3717
3718@media (max-width: 560px) {
3719 .gridCards {
3720 gap: 10px;
3721 }
3722}
3723
3724@media (max-width: 560px) {
3725 .projectCard {
3726 padding: 16px;
3727 border-radius: 14px;
3728 }
3729
3730 .projectTitle {
3731 font-size: 15px;
3732 }
3733
3734 .projectMeta {
3735 margin-top: 10px;
3736 }
3737}
3738
3739@media (max-width: 768px) {
3740 .tabs {
3741 width: 100%;
3742 overflow-x: auto;
3743 -webkit-overflow-scrolling: touch;
3744 scrollbar-width: none;
3745 -ms-overflow-style: none;
3746 }
3747
3748 .tabs::-webkit-scrollbar {
3749 display: none;
3750 }
3751
3752 .tab {
3753 flex-shrink: 0;
3754 padding: 10px 14px;
3755 font-size: 13px;
3756 }
3757}
3758
3759@media (max-width: 768px) {
3760 .deployRow {
3761 flex-direction: column;
3762 align-items: stretch;
3763 gap: 12px;
3764 padding: 14px;
3765 }
3766
3767 .deployRowMain {
3768 gap: 8px;
3769 }
3770
3771 .deployRowTop {
3772 flex-wrap: wrap;
3773 gap: 8px;
3774 }
3775
3776 .deployLinks {
3777 flex-direction: column;
3778 gap: 6px;
3779 }
3780
3781 .linkChip {
3782 width: 100%;
3783 justify-content: flex-start;
3784 padding: 8px 10px;
3785 font-size: 12px;
3786 word-break: break-all;
3787 }
3788
3789 .deployCommit {
3790 flex-direction: column;
3791 align-items: flex-start;
3792 gap: 6px;
3793 }
3794
3795 .commitMessage {
3796 max-width: 100%;
3797 }
3798
3799 .actions {
3800 width: 100%;
3801 justify-content: stretch;
3802 }
3803
3804 .actions .btn {
3805 flex: 1;
3806 justify-content: center;
3807 }
3808}
3809
3810@media (max-width: 560px) {
3811 .deployRow {
3812 padding: 12px;
3813 border-radius: 10px;
3814 }
3815
3816 .statusPill {
3817 padding: 3px 8px;
3818 font-size: 11px;
3819 }
3820
3821 .deployTime {
3822 font-size: 11px;
3823 }
3824}
3825
3826@media (max-width: 560px) {
3827 .row {
3828 grid-template-columns: 1fr;
3829 gap: 12px;
3830 }
3831
3832 .field .input {
3833 font-size: 16px;
3834 }
3835
3836 .textarea {
3837 font-size: 14px;
3838 min-height: 120px;
3839 }
3840}
3841
3842@media (max-width: 560px) {
3843 .btn {
3844 padding: 12px 16px;
3845 font-size: 14px;
3846 min-width: unset;
3847 }
3848
3849 .topActions {
3850 width: 100%;
3851 }
3852
3853 .topActions .btn {
3854 flex: 1;
3855 justify-content: center;
3856 }
3857}
3858
3859@media (max-width: 768px) {
3860 .modalOverlay {
3861 padding: 16px;
3862 align-items: flex-end;
3863 }
3864
3865 .modal {
3866 width: 100%;
3867 max-height: 90vh;
3868 border-radius: 20px 20px 0 0;
3869 animation: modalMobileIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
3870 }
3871
3872 @keyframes modalMobileIn {
3873 from {
3874 opacity: 0;
3875 transform: translateY(100%);
3876 }
3877
3878 to {
3879 opacity: 1;
3880 transform: translateY(0);
3881 }
3882 }
3883
3884 .modalHeader {
3885 padding: 20px;
3886 }
3887
3888 .modalTitle {
3889 font-size: 16px;
3890 }
3891
3892 .modalBody {
3893 padding: 20px;
3894 gap: 16px;
3895 }
3896
3897 .modalActions {
3898 flex-direction: column-reverse;
3899 gap: 10px;
3900 }
3901
3902 .modalActions .btn {
3903 width: 100%;
3904 }
3905
3906 .logsModal {
3907 width: 100%;
3908 max-height: 90vh;
3909 }
3910
3911 .logsContent {
3912 font-size: 11px;
3913 max-height: 50vh;
3914 }
3915}
3916
3917@media (max-width: 560px) {
3918 .modalOverlay {
3919 padding: 0;
3920 }
3921
3922 .modal {
3923 border-radius: 16px 16px 0 0;
3924 }
3925
3926 .modalHeader {
3927 padding: 16px;
3928 }
3929
3930 .modalBody {
3931 padding: 16px;
3932 }
3933}
3934
3935@media (max-width: 560px) {
3936 .toast {
3937 left: 12px;
3938 right: 12px;
3939 bottom: 12px;
3940 width: auto;
3941 justify-content: center;
3942 }
3943}
3944
3945@media (max-width: 560px) {
3946 .notice {
3947 padding: 12px 14px;
3948 font-size: 13px;
3949 border-radius: 10px;
3950 }
3951
3952 .errorBox {
3953 padding: 12px 14px;
3954 font-size: 13px;
3955 }
3956}
3957
3958@media (max-width: 768px) {
3959 .grid2 {
3960 grid-template-columns: 1fr;
3961 gap: 12px;
3962 }
3963}
3964
3965@media (max-width: 560px) {
3966 .box {
3967 padding: 16px;
3968 border-radius: 14px;
3969 }
3970}
3971
3972@media (max-width: 560px) {
3973 .chip {
3974 padding: 4px 10px;
3975 font-size: 10px;
3976 }
3977
3978 .badge {
3979 padding: 4px 10px;
3980 font-size: 10px;
3981 }
3982}
3983
3984@media (max-width: 768px) {
3985 .userDropdown {
3986 order: 2;
3987 }
3988
3989 .dropdownMenu {
3990 right: 0;
3991 min-width: 160px;
3992 }
3993}
3994
3995@media (max-width: 768px) {
3996 .errorModal .modalBody {
3997 padding: 16px;
3998 }
3999
4000 .errorSuggestion {
4001 padding: 12px;
4002 }
4003
4004 .errorMessage {
4005 font-size: 14px;
4006 }
4007}
4008
4009@media (max-width: 768px) {
4010 .sidebarProjects {
4011 max-height: calc(100vh - 320px);
4012 }
4013}
4014
4015@media (max-width: 560px) {
4016 .panel .row {
4017 flex-direction: column;
4018 align-items: stretch;
4019 }
4020
4021 .panel .row .field {
4022 align-self: stretch;
4023 }
4024
4025 .panel .row .field .btn {
4026 width: 100%;
4027 }
4028}
4029
4030@media (max-width: 768px) {
4031 .topbar {
4032 flex-direction: column;
4033 align-items: stretch;
4034 gap: 16px;
4035 }
4036
4037 .topbar .topActions {
4038 width: 100%;
4039 display: flex;
4040 }
4041
4042 .topbar .topActions .btn {
4043 flex: 1;
4044 }
4045}
4046
4047@media (max-width: 560px) {
4048 .panel .divider {
4049 margin: 16px 0;
4050 }
4051}
4052
4053@supports (padding-bottom: env(safe-area-inset-bottom)) {
4054 @media (max-width: 768px) {
4055 .modal {
4056 padding-bottom: env(safe-area-inset-bottom);
4057 }
4058
4059 .sidebar {
4060 padding-bottom: env(safe-area-inset-bottom);
4061 }
4062
4063 .toast {
4064 bottom: calc(12px + env(safe-area-inset-bottom));
4065 }
4066 }
4067}
4068
4069.settingsContainer {
4070 display: flex;
4071 flex-direction: column;
4072 gap: 20px;
4073 padding-top: 16px;
4074}
4075
4076.settingsSection {
4077 background: var(--code-bg);
4078 border: 1px solid var(--card-border);
4079 border-radius: 16px;
4080 padding: 20px;
4081 transition: all 0.2s ease;
4082}
4083
4084.settingsSection:hover {
4085 border-color: var(--glass-border);
4086}
4087
4088.settingsSectionHeader {
4089 display: flex;
4090 align-items: flex-start;
4091 gap: 14px;
4092 margin-bottom: 20px;
4093}
4094
4095.settingsSectionIcon {
4096 width: 40px;
4097 height: 40px;
4098 display: flex;
4099 align-items: center;
4100 justify-content: center;
4101 background: var(--accent);
4102 color: white;
4103 border-radius: 10px;
4104 flex-shrink: 0;
4105}
4106
4107.settingsSectionTitle {
4108 font-size: 16px;
4109 font-weight: 700;
4110 color: var(--card-text);
4111 margin-bottom: 2px;
4112}
4113
4114.settingsSectionDesc {
4115 font-size: 13px;
4116 color: var(--card-text-light);
4117}
4118
4119.settingsGrid {
4120 display: grid;
4121 grid-template-columns: repeat(2, 1fr);
4122 gap: 16px;
4123}
4124
4125.settingsField {
4126 display: flex;
4127 flex-direction: column;
4128 gap: 6px;
4129}
4130
4131.settingsFieldFull {
4132 display: flex;
4133 flex-direction: column;
4134 gap: 6px;
4135 margin-bottom: 16px;
4136}
4137
4138.settingsLabel {
4139 font-size: 13px;
4140 font-weight: 600;
4141 color: var(--card-text);
4142}
4143
4144.settingsFieldHint {
4145 font-size: 11px;
4146 color: var(--card-text-light);
4147 margin-top: 2px;
4148}
4149
4150.settingsInputGroup {
4151 display: flex;
4152 align-items: stretch;
4153 width: 100%;
4154}
4155
4156.settingsInputGroup .input {
4157 border-top-right-radius: 0;
4158 border-bottom-right-radius: 0;
4159 flex: 1;
4160 min-width: 0;
4161}
4162
4163.settingsInputSuffix {
4164 display: flex;
4165 align-items: center;
4166 padding: 0 14px;
4167 background: var(--card-bg);
4168 border: 1px solid var(--input-border);
4169 border-left: 0;
4170 border-radius: 0 14px 14px 0;
4171 font-size: 13px;
4172 color: var(--card-text-light);
4173 white-space: nowrap;
4174 flex-shrink: 0;
4175}
4176
4177.settingsActions {
4178 display: flex;
4179 justify-content: flex-end;
4180 padding-top: 4px;
4181}
4182
4183.settingsDanger {
4184 background: rgba(239, 68, 68, 0.04);
4185 border-color: rgba(239, 68, 68, 0.15);
4186}
4187
4188.settingsDanger:hover {
4189 border-color: rgba(239, 68, 68, 0.25);
4190}
4191
4192.settingsDangerIcon {
4193 background: rgba(239, 68, 68, 0.12) !important;
4194 color: #dc2626 !important;
4195}
4196
4197.settingsDangerContent {
4198 display: flex;
4199 align-items: center;
4200 justify-content: space-between;
4201 gap: 20px;
4202}
4203
4204.settingsDangerTitle {
4205 font-size: 14px;
4206 font-weight: 600;
4207 color: var(--card-text);
4208 margin-bottom: 4px;
4209}
4210
4211.settingsDangerDesc {
4212 font-size: 13px;
4213 color: var(--card-text-light);
4214 max-width: 400px;
4215}
4216
4217[data-theme='dark'] .settingsSection {
4218 background: color-mix(in srgb, var(--card-bg) 60%, transparent 40%);
4219 border-color: rgba(255, 255, 255, 0.08);
4220}
4221
4222[data-theme='dark'] .settingsSection:hover {
4223 border-color: rgba(255, 255, 255, 0.14);
4224}
4225
4226[data-theme='dark'] .settingsSectionIcon {
4227 background: rgba(244, 162, 149, 0.2);
4228 color: #f4a295;
4229}
4230
4231[data-theme='dark'] .settingsInputSuffix {
4232 background: var(--sidebar-bg);
4233 border-color: var(--input-border);
4234}
4235
4236[data-theme='dark'] .settingsDanger {
4237 background: rgba(248, 113, 113, 0.06);
4238 border-color: rgba(248, 113, 113, 0.15);
4239}
4240
4241[data-theme='dark'] .settingsDanger:hover {
4242 border-color: rgba(248, 113, 113, 0.25);
4243}
4244
4245[data-theme='dark'] .settingsDangerIcon {
4246 background: rgba(248, 113, 113, 0.15) !important;
4247 color: #f87171 !important;
4248}
4249
4250@media (max-width: 768px) {
4251 .settingsGrid {
4252 grid-template-columns: 1fr;
4253 }
4254
4255 .settingsDangerContent {
4256 flex-direction: column;
4257 align-items: flex-start;
4258 gap: 16px;
4259 }
4260
4261 .settingsDangerContent .btn {
4262 width: 100%;
4263 }
4264
4265 .settingsDangerDesc {
4266 max-width: none;
4267 }
4268}
4269
4270@media (max-width: 560px) {
4271 .settingsSection {
4272 padding: 16px;
4273 border-radius: 12px;
4274 }
4275
4276 .settingsSectionHeader {
4277 gap: 12px;
4278 margin-bottom: 16px;
4279 }
4280
4281 .settingsSectionIcon {
4282 width: 36px;
4283 height: 36px;
4284 }
4285
4286 .settingsSectionTitle {
4287 font-size: 15px;
4288 }
4289
4290 .settingsActions {
4291 flex-direction: column;
4292 }
4293
4294 .settingsActions .btn {
4295 width: 100%;
4296 }
4297}
4298
4299/* ApiDocs Responsive Styles */
4300.api-stats-grid {
4301 display: flex;
4302 gap: 12px;
4303 flex-wrap: wrap;
4304}
4305
4306.api-stat-card {
4307 padding: 8px 16px;
4308 background: var(--bg-secondary);
4309 border-radius: 8px;
4310 font-size: 13px;
4311}
4312
4313.api-endpoint-item {
4314 border-bottom: 1px solid var(--border);
4315 padding-bottom: 24px;
4316 margin-bottom: 24px;
4317}
4318
4319.api-endpoint-item:last-child {
4320 border-bottom: none;
4321 padding-bottom: 0;
4322 margin-bottom: 0;
4323}
4324
4325.api-endpoint-header {
4326 display: flex;
4327 align-items: center;
4328 gap: 12px;
4329 margin-bottom: 8px;
4330 flex-wrap: wrap;
4331}
4332
4333.api-method-badge {
4334 padding: 4px 10px;
4335 border-radius: 6px;
4336 font-size: 12px;
4337 font-weight: 700;
4338 font-family: monospace;
4339}
4340
4341.api-path {
4342 font-size: 14px;
4343 font-weight: 500;
4344 word-break: break-all;
4345}
4346
4347.api-example-header {
4348 display: flex;
4349 justify-content: space-between;
4350 align-items: center;
4351 margin-bottom: 6px;
4352}
4353
4354.api-code-block {
4355 background: var(--bg-tertiary, #1e1e1e);
4356 padding: 16px;
4357 border-radius: 8px;
4358 font-family: monospace;
4359 font-size: 12px;
4360 color: var(--code-text, #e0e0e0);
4361 overflow-x: auto;
4362 margin: 0;
4363 white-space: pre-wrap;
4364 word-break: break-word;
4365}
4366
4367.api-copy-btn {
4368 width: 28px;
4369 height: 28px;
4370 border-radius: 50%;
4371 background: var(--bg-secondary);
4372 border: none;
4373 display: flex;
4374 align-items: center;
4375 justify-content: center;
4376 cursor: pointer;
4377 color: var(--card-text);
4378 transition: background 0.2s;
4379}
4380
4381.api-copy-btn:hover {
4382 background: var(--sidebar-hover);
4383}
4384
4385@media (max-width: 600px) {
4386 .api-stats-grid {
4387 flex-direction: column;
4388 gap: 8px;
4389 }
4390
4391 .api-stat-card {
4392 width: 100%;
4393 }
4394
4395 .api-example-header {
4396 margin-bottom: 8px;
4397 }
4398}