margin.at
1:root {
2 --bg-primary: #0c0a14;
3 --bg-secondary: #110e1c;
4 --bg-tertiary: #1a1528;
5 --bg-card: #14111f;
6 --bg-hover: #1e1932;
7 --bg-elevated: #1a1528;
8
9 --text-primary: #f4f0ff;
10 --text-secondary: #a89ec8;
11 --text-tertiary: #6b5f8a;
12
13 --accent: #a855f7;
14 --accent-hover: #c084fc;
15 --accent-subtle: rgba(168, 85, 247, 0.15);
16
17 --border: #2d2640;
18 --border-hover: #3d3560;
19
20 --success: #22c55e;
21 --error: #ef4444;
22 --warning: #f59e0b;
23
24 --radius-sm: 6px;
25 --radius-md: 10px;
26 --radius-lg: 16px;
27 --radius-full: 9999px;
28
29 --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
30 --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
31 --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 40px rgba(168, 85, 247, 0.1);
32 --shadow-glow: 0 0 20px rgba(168, 85, 247, 0.3);
33
34 --font-sans:
35 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
36}
37
38* {
39 margin: 0;
40 padding: 0;
41 box-sizing: border-box;
42}
43
44html {
45 font-size: 16px;
46}
47
48body {
49 font-family: var(--font-sans);
50 background: var(--bg-primary);
51 color: var(--text-primary);
52 line-height: 1.6;
53 min-height: 100vh;
54 -webkit-font-smoothing: antialiased;
55 -moz-osx-font-smoothing: grayscale;
56}
57
58a {
59 color: var(--accent);
60 text-decoration: none;
61 transition: color 0.15s ease;
62}
63
64a:hover {
65 color: var(--accent-hover);
66}
67
68button {
69 font-family: inherit;
70 cursor: pointer;
71 border: none;
72 background: none;
73}
74
75input,
76textarea {
77 font-family: inherit;
78 font-size: inherit;
79}
80
81.app {
82 min-height: 100vh;
83 display: flex;
84 flex-direction: column;
85}
86
87.main-content {
88 flex: 1;
89 max-width: 680px;
90 width: 100%;
91 margin: 0 auto;
92 padding: 24px 16px;
93}
94
95.btn {
96 display: inline-flex;
97 align-items: center;
98 justify-content: center;
99 gap: 8px;
100 padding: 10px 20px;
101 font-size: 0.9rem;
102 font-weight: 500;
103 border-radius: var(--radius-md);
104 transition: all 0.15s ease;
105}
106
107.btn-primary {
108 background: var(--accent);
109 color: white;
110}
111
112.btn-primary:hover {
113 background: var(--accent-hover);
114 transform: translateY(-1px);
115 box-shadow: var(--shadow-md);
116}
117
118.btn-secondary {
119 background: var(--bg-tertiary);
120 color: var(--text-primary);
121 border: 1px solid var(--border);
122}
123
124.btn-secondary:hover {
125 background: var(--bg-hover);
126 border-color: var(--border-hover);
127}
128
129.btn-ghost {
130 color: var(--text-secondary);
131 padding: 8px 12px;
132}
133
134.btn-ghost:hover {
135 color: var(--text-primary);
136 background: var(--bg-tertiary);
137}
138
139.card {
140 background: var(--bg-card);
141 border: 1px solid var(--border);
142 border-radius: var(--radius-lg);
143 padding: 24px;
144 transition: all 0.2s ease;
145 position: relative;
146}
147
148.card:hover {
149 border-color: var(--border-hover);
150 box-shadow: var(--shadow-md);
151 transform: translateY(-1px);
152}
153
154.annotation-card {
155 display: flex;
156 flex-direction: column;
157 gap: 16px;
158}
159
160.annotation-header {
161 display: flex;
162 justify-content: space-between;
163 align-items: flex-start;
164 gap: 12px;
165}
166
167.annotation-header-left {
168 display: flex;
169 align-items: center;
170 gap: 12px;
171 flex: 1;
172 min-width: 0;
173}
174
175.annotation-avatar {
176 width: 40px;
177 height: 40px;
178 min-width: 40px;
179 border-radius: var(--radius-full);
180 background: linear-gradient(135deg, var(--accent), #a855f7);
181 display: flex;
182 align-items: center;
183 justify-content: center;
184 font-weight: 600;
185 font-size: 0.95rem;
186 color: white;
187 overflow: hidden;
188 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
189}
190
191.annotation-avatar img {
192 width: 100%;
193 height: 100%;
194 object-fit: cover;
195}
196
197.annotation-meta {
198 display: flex;
199 flex-direction: column;
200 justify-content: center;
201 line-height: 1.3;
202}
203
204.annotation-avatar-link {
205 text-decoration: none;
206 border-radius: var(--radius-full);
207 transition: transform 0.15s ease;
208}
209
210.annotation-avatar-link:hover {
211 transform: scale(1.05);
212}
213
214.annotation-author-row {
215 display: flex;
216 align-items: center;
217 gap: 6px;
218 flex-wrap: wrap;
219}
220
221.annotation-author {
222 font-weight: 600;
223 color: var(--text-primary);
224 font-size: 0.95rem;
225}
226
227.annotation-handle {
228 font-size: 0.85rem;
229 color: var(--text-tertiary);
230 text-decoration: none;
231 display: flex;
232 align-items: center;
233 gap: 3px;
234}
235
236.annotation-handle:hover {
237 color: var(--accent);
238}
239
240.annotation-time {
241 font-size: 0.8rem;
242 color: var(--text-tertiary);
243}
244
245.annotation-content {
246 display: flex;
247 flex-direction: column;
248 gap: 12px;
249}
250
251.annotation-source {
252 display: inline-flex;
253 align-items: center;
254 gap: 6px;
255 font-size: 0.8rem;
256 color: var(--text-tertiary);
257 text-decoration: none;
258 padding: 4px 10px;
259 background: var(--bg-tertiary);
260 border-radius: var(--radius-full);
261 width: fit-content;
262 transition: all 0.15s ease;
263 max-width: 100%;
264 overflow: hidden;
265 text-overflow: ellipsis;
266 white-space: nowrap;
267}
268
269.annotation-source:hover {
270 color: var(--text-primary);
271 background: var(--bg-hover);
272}
273
274.annotation-source-title {
275 color: var(--text-secondary);
276 opacity: 0.8;
277}
278
279.annotation-highlight {
280 display: block;
281 position: relative;
282 padding: 16px 20px;
283 background: linear-gradient(
284 135deg,
285 rgba(79, 70, 229, 0.03),
286 rgba(168, 85, 247, 0.03)
287 );
288 border-left: 3px solid var(--accent);
289 border-radius: 4px var(--radius-md) var(--radius-md) 4px;
290 text-decoration: none;
291 transition: all 0.2s ease;
292 margin: 4px 0;
293}
294
295.annotation-highlight:hover {
296 background: linear-gradient(
297 135deg,
298 rgba(79, 70, 229, 0.08),
299 rgba(168, 85, 247, 0.08)
300 );
301 transform: translateX(2px);
302}
303
304.annotation-highlight mark {
305 background: transparent;
306 color: var(--text-primary);
307 font-style: italic;
308 font-size: 1.05rem;
309 line-height: 1.6;
310 font-weight: 400;
311 display: inline;
312}
313
314.annotation-text {
315 font-size: 1rem;
316 line-height: 1.65;
317 color: var(--text-primary);
318 white-space: pre-wrap;
319}
320
321.annotation-actions {
322 display: flex;
323 align-items: center;
324 justify-content: space-between;
325 padding-top: 16px;
326 margin-top: 8px;
327 border-top: 1px solid rgba(255, 255, 255, 0.03);
328}
329
330.annotation-actions-left {
331 display: flex;
332 align-items: center;
333 gap: 8px;
334}
335
336.annotation-action {
337 display: flex;
338 align-items: center;
339 gap: 6px;
340 color: var(--text-tertiary);
341 font-size: 0.85rem;
342 font-weight: 500;
343 padding: 6px 10px;
344 border-radius: var(--radius-md);
345 transition: all 0.2s ease;
346 background: transparent;
347 cursor: pointer;
348}
349
350.annotation-action:hover {
351 color: var(--text-secondary);
352 background: var(--bg-elevated);
353}
354
355.annotation-action.liked {
356 color: #ef4444;
357 background: rgba(239, 68, 68, 0.05);
358}
359
360.annotation-action.liked:hover {
361 background: rgba(239, 68, 68, 0.1);
362}
363
364.annotation-action.active {
365 color: var(--accent);
366 background: var(--accent-subtle);
367}
368
369.action-icon-only {
370 padding: 8px;
371}
372
373.annotation-delete {
374 background: none;
375 border: none;
376 cursor: pointer;
377 padding: 8px;
378 font-size: 1rem;
379 color: var(--text-tertiary);
380 transition: all 0.2s ease;
381 border-radius: var(--radius-md);
382 opacity: 0.6;
383}
384
385.annotation-delete:hover {
386 color: var(--error);
387 background: rgba(239, 68, 68, 0.1);
388 opacity: 1;
389}
390
391.annotation-delete:disabled {
392 cursor: not-allowed;
393 opacity: 0.3;
394}
395
396.share-menu-container {
397 position: relative;
398}
399
400.share-menu {
401 position: absolute;
402 top: 100%;
403 right: 0;
404 margin-top: 8px;
405 background: var(--bg-primary);
406 border: 1px solid var(--border);
407 border-radius: var(--radius-lg);
408 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
409 min-width: 180px;
410 padding: 8px 0;
411 z-index: 100;
412 animation: fadeInUp 0.15s ease;
413}
414
415@keyframes fadeInUp {
416 from {
417 opacity: 0;
418 transform: translateY(-8px);
419 }
420
421 to {
422 opacity: 1;
423 transform: translateY(0);
424 }
425}
426
427.share-menu-section {
428 display: flex;
429 flex-direction: column;
430}
431
432.share-menu-label {
433 padding: 4px 12px 8px;
434 font-size: 0.7rem;
435 font-weight: 600;
436 text-transform: uppercase;
437 letter-spacing: 0.05em;
438 color: var(--text-tertiary);
439}
440
441.share-menu-item {
442 display: flex;
443 align-items: center;
444 gap: 10px;
445 padding: 10px 14px;
446 background: none;
447 border: none;
448 width: 100%;
449 text-align: left;
450 font-size: 0.9rem;
451 color: var(--text-primary);
452 cursor: pointer;
453 transition: all 0.1s ease;
454}
455
456.share-menu-item:hover {
457 background: var(--bg-tertiary);
458}
459
460.share-menu-icon {
461 font-size: 1.1rem;
462 width: 24px;
463 text-align: center;
464}
465
466.share-menu-divider {
467 height: 1px;
468 background: var(--border);
469 margin: 6px 0;
470}
471
472.feed {
473 display: flex;
474 flex-direction: column;
475 gap: 16px;
476}
477
478.feed-header {
479 display: flex;
480 align-items: center;
481 justify-content: space-between;
482 margin-bottom: 8px;
483}
484
485.feed-title {
486 font-size: 1.5rem;
487 font-weight: 700;
488}
489
490.page-header {
491 margin-bottom: 32px;
492}
493
494.page-title {
495 font-size: 2rem;
496 font-weight: 700;
497 margin-bottom: 8px;
498}
499
500.page-description {
501 color: var(--text-secondary);
502 font-size: 1.1rem;
503}
504
505.url-input-wrapper {
506 margin-bottom: 32px;
507}
508
509.url-input-container {
510 display: flex;
511 gap: 12px;
512}
513
514.url-input {
515 flex: 1;
516 padding: 14px 18px;
517 background: var(--bg-secondary);
518 border: 1px solid var(--border);
519 border-radius: var(--radius-md);
520 color: var(--text-primary);
521 font-size: 1rem;
522 transition: all 0.15s ease;
523}
524
525.url-input:focus {
526 outline: none;
527 border-color: var(--accent);
528 box-shadow: 0 0 0 3px var(--accent-subtle);
529}
530
531.url-input::placeholder {
532 color: var(--text-tertiary);
533}
534
535.empty-state {
536 text-align: center;
537 padding: 60px 20px;
538 color: var(--text-secondary);
539}
540
541.empty-state-icon {
542 font-size: 3rem;
543 margin-bottom: 16px;
544 opacity: 0.5;
545}
546
547.empty-state-title {
548 font-size: 1.25rem;
549 font-weight: 600;
550 color: var(--text-primary);
551 margin-bottom: 8px;
552}
553
554.empty-state-text {
555 font-size: 1rem;
556 max-width: 400px;
557 margin: 0 auto;
558}
559
560.feed-filters {
561 display: flex;
562 gap: 8px;
563 margin-bottom: 24px;
564 padding: 4px;
565 background: var(--bg-tertiary);
566 border-radius: var(--radius-lg);
567 width: fit-content;
568}
569
570.login-page {
571 display: flex;
572 flex-direction: column;
573 align-items: center;
574 justify-content: center;
575 min-height: 70vh;
576 padding: 60px 20px;
577 width: 100%;
578 max-width: 500px;
579 margin: 0 auto;
580}
581
582.login-at-logo {
583 font-size: 5rem;
584 font-weight: 800;
585 color: var(--accent);
586 margin-bottom: 24px;
587 line-height: 1;
588}
589
590.login-heading {
591 font-size: 1.5rem;
592 font-weight: 600;
593 margin-bottom: 32px;
594 display: flex;
595 align-items: center;
596 gap: 10px;
597 text-align: center;
598 line-height: 1.4;
599}
600
601.login-help-btn {
602 background: none;
603 border: none;
604 color: var(--text-tertiary);
605 cursor: pointer;
606 padding: 4px;
607 display: flex;
608 align-items: center;
609 transition: color 0.15s;
610 flex-shrink: 0;
611}
612
613.login-help-btn:hover {
614 color: var(--accent);
615}
616
617.login-help-text {
618 background: var(--bg-elevated);
619 border: 1px solid var(--border);
620 border-radius: var(--radius-md);
621 padding: 16px 20px;
622 margin-bottom: 24px;
623 font-size: 0.95rem;
624 color: var(--text-secondary);
625 line-height: 1.6;
626 text-align: center;
627}
628
629.login-help-text code {
630 background: var(--bg-tertiary);
631 padding: 2px 8px;
632 border-radius: var(--radius-sm);
633 font-size: 0.9rem;
634}
635
636.login-form {
637 display: flex;
638 flex-direction: column;
639 gap: 20px;
640 width: 100%;
641}
642
643.login-input-wrapper {
644 position: relative;
645}
646
647.login-input {
648 width: 100%;
649 padding: 18px 20px;
650 background: var(--bg-elevated);
651 border: 2px solid var(--border);
652 border-radius: var(--radius-lg);
653 color: var(--text-primary);
654 font-size: 1.1rem;
655 transition:
656 border-color 0.15s,
657 box-shadow 0.15s;
658}
659
660.login-input:focus {
661 outline: none;
662 border-color: var(--accent);
663 box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
664}
665
666.login-input::placeholder {
667 color: var(--text-tertiary);
668}
669
670.login-suggestions {
671 position: absolute;
672 top: calc(100% + 8px);
673 left: 0;
674 right: 0;
675 background: var(--bg-card);
676 border: 1px solid var(--border);
677 border-radius: var(--radius-lg);
678 box-shadow: var(--shadow-lg);
679 overflow: hidden;
680 z-index: 100;
681}
682
683.login-suggestion {
684 display: flex;
685 align-items: center;
686 gap: 14px;
687 width: 100%;
688 padding: 14px 18px;
689 background: transparent;
690 border: none;
691 cursor: pointer;
692 text-align: left;
693 color: var(--text-primary);
694 transition: background 0.1s;
695}
696
697.login-suggestion:hover,
698.login-suggestion.selected {
699 background: var(--bg-elevated);
700}
701
702.login-suggestion-avatar {
703 width: 44px;
704 height: 44px;
705 border-radius: var(--radius-full);
706 background: linear-gradient(135deg, var(--accent), #a855f7);
707 display: flex;
708 align-items: center;
709 justify-content: center;
710 flex-shrink: 0;
711 overflow: hidden;
712 font-size: 0.9rem;
713 font-weight: 600;
714 color: white;
715}
716
717.login-suggestion-avatar img {
718 width: 100%;
719 height: 100%;
720 object-fit: cover;
721}
722
723.login-suggestion-info {
724 display: flex;
725 flex-direction: column;
726 gap: 2px;
727 min-width: 0;
728}
729
730.login-suggestion-name {
731 font-weight: 600;
732 font-size: 1rem;
733 color: var(--text-primary);
734 white-space: nowrap;
735 overflow: hidden;
736 text-overflow: ellipsis;
737}
738
739.login-suggestion-handle {
740 font-size: 0.9rem;
741 color: var(--text-secondary);
742 white-space: nowrap;
743 overflow: hidden;
744 text-overflow: ellipsis;
745}
746
747.login-error {
748 padding: 12px 16px;
749 background: rgba(239, 68, 68, 0.1);
750 border: 1px solid rgba(239, 68, 68, 0.3);
751 border-radius: var(--radius-md);
752 color: #ef4444;
753 font-size: 0.9rem;
754 text-align: center;
755}
756
757.login-submit {
758 padding: 18px 32px;
759 font-size: 1.1rem;
760 font-weight: 600;
761}
762
763.login-avatar-large {
764 width: 100px;
765 height: 100px;
766 border-radius: var(--radius-full);
767 background: linear-gradient(135deg, var(--accent), #a855f7);
768 display: flex;
769 align-items: center;
770 justify-content: center;
771 margin-bottom: 20px;
772 font-weight: 700;
773 font-size: 2rem;
774 color: white;
775 overflow: hidden;
776}
777
778.login-avatar-large img {
779 width: 100%;
780 height: 100%;
781 object-fit: cover;
782}
783
784.login-welcome {
785 font-size: 1.5rem;
786 font-weight: 600;
787 margin-bottom: 32px;
788 text-align: center;
789}
790
791.login-actions {
792 display: flex;
793 flex-direction: column;
794 gap: 12px;
795 width: 100%;
796}
797
798.login-avatar {
799 width: 72px;
800 height: 72px;
801 border-radius: var(--radius-full);
802 background: linear-gradient(135deg, var(--accent), #a855f7);
803 display: flex;
804 align-items: center;
805 justify-content: center;
806 margin: 0 auto 16px;
807 font-weight: 700;
808 font-size: 1.5rem;
809 color: white;
810 overflow: hidden;
811}
812
813.login-avatar img {
814 width: 100%;
815 height: 100%;
816 object-fit: cover;
817}
818
819.login-welcome-name {
820 font-size: 1.25rem;
821 font-weight: 600;
822 margin-bottom: 24px;
823}
824
825.login-actions {
826 display: flex;
827 flex-direction: column;
828 gap: 12px;
829}
830
831.btn-bluesky {
832 background: #0085ff;
833 color: white;
834 display: flex;
835 align-items: center;
836 justify-content: center;
837 gap: 10px;
838 transition:
839 background 0.2s,
840 transform 0.2s;
841}
842
843.btn-bluesky:hover {
844 background: #0070dd;
845 transform: translateY(-1px);
846}
847
848.login-btn {
849 width: 100%;
850 padding: 14px 24px;
851 font-size: 1rem;
852 font-weight: 600;
853}
854
855.login-brand {
856 display: flex;
857 align-items: center;
858 justify-content: center;
859 gap: 12px;
860 margin-bottom: 24px;
861}
862
863.login-brand-icon {
864 width: 48px;
865 height: 48px;
866 background: linear-gradient(135deg, var(--accent), #a855f7);
867 border-radius: var(--radius-lg);
868 display: flex;
869 align-items: center;
870 justify-content: center;
871 font-size: 1.75rem;
872 font-weight: 800;
873 color: white;
874}
875
876.login-brand-name {
877 font-size: 1.75rem;
878 font-weight: 700;
879}
880
881.login-form {
882 display: flex;
883 flex-direction: column;
884 gap: 16px;
885}
886
887.login-input-wrapper {
888 position: relative;
889}
890
891.login-input {
892 width: 100%;
893 padding: 14px 16px;
894 background: var(--bg-elevated);
895 border: 1px solid var(--border);
896 border-radius: var(--radius-md);
897 color: var(--text-primary);
898 font-size: 1rem;
899 transition:
900 border-color 0.15s,
901 box-shadow 0.15s;
902}
903
904.login-input:focus {
905 outline: none;
906 border-color: var(--accent);
907 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
908}
909
910.login-input::placeholder {
911 color: var(--text-tertiary);
912}
913
914.login-suggestions {
915 position: absolute;
916 top: calc(100% + 4px);
917 left: 0;
918 right: 0;
919 background: var(--bg-card);
920 border: 1px solid var(--border);
921 border-radius: var(--radius-md);
922 box-shadow: var(--shadow-lg);
923 overflow: hidden;
924 z-index: 100;
925}
926
927.login-suggestion {
928 display: flex;
929 align-items: center;
930 gap: 12px;
931 width: 100%;
932 padding: 12px 16px;
933 background: transparent;
934 border: none;
935 cursor: pointer;
936 text-align: left;
937 transition: background 0.1s;
938}
939
940.login-suggestion:hover,
941.login-suggestion.selected {
942 background: var(--bg-elevated);
943}
944
945.login-suggestion-avatar {
946 width: 40px;
947 height: 40px;
948 border-radius: var(--radius-full);
949 background: linear-gradient(135deg, var(--accent), #a855f7);
950 display: flex;
951 align-items: center;
952 justify-content: center;
953 flex-shrink: 0;
954 overflow: hidden;
955 font-size: 0.875rem;
956 font-weight: 600;
957 color: white;
958}
959
960.login-suggestion-avatar img {
961 width: 100%;
962 height: 100%;
963 object-fit: cover;
964}
965
966.login-suggestion-info {
967 display: flex;
968 flex-direction: column;
969 min-width: 0;
970}
971
972.login-suggestion-name {
973 font-weight: 600;
974 color: var(--text-primary);
975 white-space: nowrap;
976 overflow: hidden;
977 text-overflow: ellipsis;
978}
979
980.login-suggestion-handle {
981 font-size: 0.875rem;
982 color: var(--text-secondary);
983 white-space: nowrap;
984 overflow: hidden;
985 text-overflow: ellipsis;
986}
987
988.login-error {
989 padding: 12px 16px;
990 background: rgba(239, 68, 68, 0.1);
991 border: 1px solid rgba(239, 68, 68, 0.3);
992 border-radius: var(--radius-md);
993 color: #ef4444;
994 font-size: 0.875rem;
995}
996
997.login-legal {
998 font-size: 0.75rem;
999 color: var(--text-tertiary);
1000 line-height: 1.5;
1001 margin-top: 16px;
1002}
1003
1004.profile-header {
1005 display: flex;
1006 align-items: center;
1007 gap: 20px;
1008 margin-bottom: 32px;
1009 padding-bottom: 24px;
1010 border-bottom: 1px solid var(--border);
1011}
1012
1013.profile-avatar {
1014 width: 80px;
1015 height: 80px;
1016 min-width: 80px;
1017 border-radius: var(--radius-full);
1018 background: linear-gradient(135deg, var(--accent), #a855f7);
1019 display: flex;
1020 align-items: center;
1021 justify-content: center;
1022 font-weight: 700;
1023 font-size: 2rem;
1024 color: white;
1025 overflow: hidden;
1026}
1027
1028.profile-avatar img {
1029 width: 100%;
1030 height: 100%;
1031 object-fit: cover;
1032}
1033
1034.profile-avatar-link {
1035 text-decoration: none;
1036}
1037
1038.profile-info {
1039 flex: 1;
1040}
1041
1042.profile-name {
1043 font-size: 1.5rem;
1044 font-weight: 700;
1045}
1046
1047.profile-handle-link {
1048 color: var(--text-secondary);
1049 text-decoration: none;
1050}
1051
1052.profile-handle-link:hover {
1053 color: var(--accent);
1054 text-decoration: underline;
1055}
1056
1057.profile-bluesky-link {
1058 display: inline-flex;
1059 align-items: center;
1060 gap: 6px;
1061 color: #0085ff;
1062 text-decoration: none;
1063 font-size: 0.95rem;
1064 padding: 4px 10px;
1065 border-radius: var(--radius-md);
1066 background: rgba(0, 133, 255, 0.1);
1067 transition: all 0.15s ease;
1068}
1069
1070.profile-bluesky-link:hover {
1071 background: rgba(0, 133, 255, 0.2);
1072 color: #0070dd;
1073}
1074
1075.profile-stats {
1076 display: flex;
1077 gap: 24px;
1078 margin-top: 8px;
1079}
1080
1081.profile-stat {
1082 color: var(--text-secondary);
1083 font-size: 0.9rem;
1084}
1085
1086.profile-stat strong {
1087 color: var(--text-primary);
1088}
1089
1090.profile-tabs {
1091 display: flex;
1092 gap: 0;
1093 margin-bottom: 24px;
1094 border-bottom: 1px solid var(--border);
1095}
1096
1097.profile-tab {
1098 padding: 12px 20px;
1099 font-size: 0.9rem;
1100 font-weight: 500;
1101 color: var(--text-secondary);
1102 background: transparent;
1103 border: none;
1104 border-bottom: 2px solid transparent;
1105 cursor: pointer;
1106 transition: all 0.15s ease;
1107 margin-bottom: -1px;
1108}
1109
1110.profile-tab:hover {
1111 color: var(--text-primary);
1112 background: var(--bg-tertiary);
1113}
1114
1115.profile-tab.active {
1116 color: var(--accent);
1117 border-bottom-color: var(--accent);
1118}
1119
1120.bookmark-description {
1121 font-size: 0.9rem;
1122 color: var(--text-secondary);
1123 margin: 0;
1124 line-height: 1.5;
1125}
1126
1127.bookmark-meta {
1128 display: flex;
1129 align-items: center;
1130 gap: 12px;
1131 margin-top: 12px;
1132 font-size: 0.85rem;
1133 color: var(--text-tertiary);
1134}
1135
1136.bookmark-time {
1137 color: var(--text-tertiary);
1138}
1139
1140.composer {
1141 margin-bottom: 24px;
1142}
1143
1144.composer-textarea {
1145 width: 100%;
1146 min-height: 120px;
1147 padding: 16px;
1148 background: var(--bg-secondary);
1149 border: 1px solid var(--border);
1150 border-radius: var(--radius-md);
1151 color: var(--text-primary);
1152 font-size: 1rem;
1153 resize: vertical;
1154 transition: all 0.15s ease;
1155}
1156
1157.composer-textarea:focus {
1158 outline: none;
1159 border-color: var(--accent);
1160 box-shadow: 0 0 0 3px var(--accent-subtle);
1161}
1162
1163.composer-footer {
1164 display: flex;
1165 justify-content: space-between;
1166 align-items: center;
1167 margin-top: 12px;
1168}
1169
1170.composer-char-count {
1171 font-size: 0.85rem;
1172 color: var(--text-tertiary);
1173}
1174
1175.composer-char-count.warning {
1176 color: var(--warning);
1177}
1178
1179.composer-char-count.error {
1180 color: var(--error);
1181}
1182
1183.composer-add-quote {
1184 width: 100%;
1185 padding: 12px 16px;
1186 margin-bottom: 12px;
1187 background: var(--bg-tertiary);
1188 border: 1px dashed var(--border);
1189 border-radius: var(--radius-md);
1190 color: var(--text-secondary);
1191 font-size: 0.9rem;
1192 cursor: pointer;
1193 transition: all 0.15s ease;
1194}
1195
1196.composer-add-quote:hover {
1197 border-color: var(--accent);
1198 color: var(--accent);
1199 background: var(--accent-subtle);
1200}
1201
1202.composer-quote-input-wrapper {
1203 margin-bottom: 12px;
1204}
1205
1206.composer-quote-input {
1207 width: 100%;
1208 padding: 12px 16px;
1209 background: linear-gradient(
1210 135deg,
1211 rgba(79, 70, 229, 0.05),
1212 rgba(168, 85, 247, 0.05)
1213 );
1214 border: 1px solid var(--border);
1215 border-left: 3px solid var(--accent);
1216 border-radius: 0 var(--radius-md) var(--radius-md) 0;
1217 color: var(--text-primary);
1218 font-size: 0.95rem;
1219 font-style: italic;
1220 resize: vertical;
1221 font-family: inherit;
1222 transition: all 0.15s ease;
1223}
1224
1225.composer-quote-input:focus {
1226 outline: none;
1227 border-color: var(--accent);
1228}
1229
1230.composer-quote-input::placeholder {
1231 color: var(--text-tertiary);
1232 font-style: italic;
1233}
1234
1235.composer-quote-remove-btn {
1236 margin-top: 8px;
1237 padding: 6px 12px;
1238 background: none;
1239 border: none;
1240 color: var(--text-tertiary);
1241 font-size: 0.85rem;
1242 cursor: pointer;
1243}
1244
1245.composer-quote-remove-btn:hover {
1246 color: var(--error);
1247}
1248
1249@keyframes shimmer {
1250 0% {
1251 background-position: -200% 0;
1252 }
1253
1254 100% {
1255 background-position: 200% 0;
1256 }
1257}
1258
1259.skeleton {
1260 background: linear-gradient(
1261 90deg,
1262 var(--bg-tertiary) 25%,
1263 var(--bg-hover) 50%,
1264 var(--bg-tertiary) 75%
1265 );
1266 background-size: 200% 100%;
1267 animation: shimmer 1.5s infinite;
1268 border-radius: var(--radius-sm);
1269}
1270
1271.skeleton-text {
1272 height: 1em;
1273 margin-bottom: 8px;
1274}
1275
1276.skeleton-text:last-child {
1277 width: 60%;
1278}
1279
1280@media (max-width: 640px) {
1281 .main-content {
1282 padding: 16px 12px;
1283 }
1284
1285 .navbar-inner {
1286 padding: 0 16px;
1287 }
1288
1289 .page-title {
1290 font-size: 1.5rem;
1291 }
1292
1293 .url-input-container {
1294 flex-direction: column;
1295 }
1296
1297 .profile-header {
1298 flex-direction: column;
1299 text-align: center;
1300 }
1301
1302 .profile-stats {
1303 justify-content: center;
1304 }
1305}
1306
1307.main {
1308 flex: 1;
1309 width: 100%;
1310}
1311
1312.page-container {
1313 max-width: 680px;
1314 margin: 0 auto;
1315 padding: 24px 16px;
1316}
1317
1318.navbar-logo {
1319 width: 32px;
1320 height: 32px;
1321 background: linear-gradient(135deg, var(--accent), #8b5cf6);
1322 border-radius: var(--radius-sm);
1323 display: flex;
1324 align-items: center;
1325 justify-content: center;
1326 font-weight: 700;
1327 font-size: 1rem;
1328 color: white;
1329}
1330
1331.navbar-user {
1332 display: flex;
1333 align-items: center;
1334 gap: 8px;
1335}
1336
1337.navbar-avatar {
1338 width: 36px;
1339 height: 36px;
1340 border-radius: var(--radius-full);
1341 background: linear-gradient(135deg, var(--accent), #a855f7);
1342 display: flex;
1343 align-items: center;
1344 justify-content: center;
1345 font-weight: 600;
1346 font-size: 0.85rem;
1347 color: white;
1348 text-decoration: none;
1349}
1350
1351.btn-sm {
1352 padding: 6px 12px;
1353 font-size: 0.85rem;
1354}
1355
1356.composer-url {
1357 font-size: 0.85rem;
1358 color: var(--text-secondary);
1359 word-break: break-all;
1360}
1361
1362.composer-quote {
1363 position: relative;
1364 padding: 12px 16px;
1365 padding-right: 36px;
1366 background: var(--bg-secondary);
1367 border-left: 3px solid var(--accent);
1368 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
1369 margin-bottom: 16px;
1370 font-style: italic;
1371 color: var(--text-secondary);
1372}
1373
1374.composer-quote-remove {
1375 position: absolute;
1376 top: 8px;
1377 right: 8px;
1378 width: 24px;
1379 height: 24px;
1380 border-radius: var(--radius-full);
1381 background: var(--bg-tertiary);
1382 color: var(--text-secondary);
1383 font-size: 1rem;
1384 display: flex;
1385 align-items: center;
1386 justify-content: center;
1387}
1388
1389.composer-quote-remove:hover {
1390 background: var(--bg-hover);
1391 color: var(--text-primary);
1392}
1393
1394.composer-input {
1395 width: 100%;
1396 min-height: 120px;
1397 padding: 16px;
1398 background: var(--bg-secondary);
1399 border: 1px solid var(--border);
1400 border-radius: var(--radius-md);
1401 color: var(--text-primary);
1402 font-size: 1rem;
1403 resize: vertical;
1404 transition: all 0.15s ease;
1405}
1406
1407.composer-input:focus {
1408 outline: none;
1409 border-color: var(--accent);
1410 box-shadow: 0 0 0 3px var(--accent-subtle);
1411}
1412
1413.composer-input::placeholder {
1414 color: var(--text-tertiary);
1415}
1416
1417.composer-tags {
1418 margin-top: 12px;
1419}
1420
1421.composer-tags-input {
1422 width: 100%;
1423 padding: 12px 16px;
1424 background: var(--bg-secondary);
1425 border: 1px solid var(--border);
1426 border-radius: var(--radius-md);
1427 color: var(--text-primary);
1428 font-size: 0.95rem;
1429 transition: all 0.15s ease;
1430}
1431
1432.composer-tags-input:focus {
1433 outline: none;
1434 border-color: var(--accent);
1435 box-shadow: 0 0 0 3px var(--accent-subtle);
1436}
1437
1438.composer-tags-input::placeholder {
1439 color: var(--text-tertiary);
1440}
1441
1442.composer-footer {
1443 display: flex;
1444 justify-content: space-between;
1445 align-items: center;
1446 margin-top: 12px;
1447}
1448
1449.composer-count {
1450 font-size: 0.85rem;
1451 color: var(--text-tertiary);
1452}
1453
1454.composer-actions {
1455 display: flex;
1456 gap: 8px;
1457}
1458
1459.composer-error {
1460 margin-top: 12px;
1461 padding: 12px;
1462 background: rgba(239, 68, 68, 0.1);
1463 border: 1px solid rgba(239, 68, 68, 0.3);
1464 border-radius: var(--radius-md);
1465 color: var(--error);
1466 font-size: 0.9rem;
1467}
1468
1469.annotation-tags {
1470 display: flex;
1471 flex-wrap: wrap;
1472 gap: 6px;
1473 margin-top: 12px;
1474 margin-bottom: 8px;
1475}
1476
1477.annotation-tag {
1478 display: inline-flex;
1479 align-items: center;
1480 padding: 4px 10px;
1481 background: var(--bg-tertiary);
1482 color: var(--text-secondary);
1483 font-size: 0.8rem;
1484 font-weight: 500;
1485 border-radius: var(--radius-full);
1486 transition: all 0.15s ease;
1487 border: 1px solid transparent;
1488 text-decoration: none;
1489}
1490
1491.annotation-tag:hover {
1492 background: var(--bg-hover);
1493 color: var(--text-primary);
1494 border-color: var(--border);
1495 transform: translateY(-1px);
1496}
1497
1498.url-input-wrapper {
1499 margin-bottom: 24px;
1500}
1501
1502.url-input {
1503 width: 100%;
1504 padding: 16px;
1505 background: var(--bg-secondary);
1506 border: 1px solid var(--border);
1507 border-radius: var(--radius-md);
1508 color: var(--text-primary);
1509 font-size: 1.1rem;
1510 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1511 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
1512}
1513
1514.url-input:focus {
1515 outline: none;
1516 border-color: var(--accent);
1517 box-shadow: 0 0 0 4px var(--accent-subtle);
1518 background: var(--bg-primary);
1519}
1520
1521.url-input::placeholder {
1522 color: var(--text-tertiary);
1523}
1524
1525.annotation-detail-page {
1526 max-width: 680px;
1527 margin: 0 auto;
1528 padding: 24px 16px;
1529}
1530
1531.annotation-detail-header {
1532 margin-bottom: 24px;
1533}
1534
1535.back-link {
1536 color: var(--text-secondary);
1537 text-decoration: none;
1538 font-size: 0.9rem;
1539}
1540
1541.back-link:hover {
1542 color: var(--accent);
1543}
1544
1545.replies-section {
1546 margin-top: 32px;
1547}
1548
1549.replies-title {
1550 font-size: 1.1rem;
1551 font-weight: 600;
1552 margin-bottom: 16px;
1553 color: var(--text-primary);
1554}
1555
1556.reply-form {
1557 margin-bottom: 24px;
1558}
1559
1560.reply-input {
1561 width: 100%;
1562 padding: 12px;
1563 border: 1px solid var(--border);
1564 border-radius: var(--radius-md);
1565 font-size: 0.95rem;
1566 resize: vertical;
1567 margin-bottom: 12px;
1568 font-family: inherit;
1569}
1570
1571.reply-input:focus {
1572 outline: none;
1573 border-color: var(--accent);
1574 box-shadow: 0 0 0 3px var(--accent-subtle);
1575}
1576
1577.replies-list {
1578 display: flex;
1579 flex-direction: column;
1580 gap: 12px;
1581}
1582
1583.reply-card {
1584 padding: 16px;
1585 background: var(--bg-secondary);
1586 border-radius: var(--radius-md);
1587 border: 1px solid var(--border);
1588}
1589
1590.reply-header {
1591 display: flex;
1592 align-items: center;
1593 gap: 12px;
1594 margin-bottom: 12px;
1595}
1596
1597.reply-avatar-link {
1598 text-decoration: none;
1599}
1600
1601.reply-avatar {
1602 width: 36px;
1603 height: 36px;
1604 min-width: 36px;
1605 border-radius: var(--radius-full);
1606 background: linear-gradient(135deg, var(--accent), #a855f7);
1607 display: flex;
1608 align-items: center;
1609 justify-content: center;
1610 font-weight: 600;
1611 font-size: 0.85rem;
1612 color: white;
1613 overflow: hidden;
1614}
1615
1616.reply-avatar img {
1617 width: 100%;
1618 height: 100%;
1619 object-fit: cover;
1620}
1621
1622.reply-meta {
1623 flex: 1;
1624 min-width: 0;
1625}
1626
1627.reply-author {
1628 font-weight: 600;
1629 color: var(--text-primary);
1630}
1631
1632.reply-handle {
1633 font-size: 0.85rem;
1634 color: var(--text-tertiary);
1635 text-decoration: none;
1636 margin-left: 6px;
1637}
1638
1639.reply-handle:hover {
1640 color: var(--accent);
1641 text-decoration: underline;
1642}
1643
1644.reply-time {
1645 font-size: 0.85rem;
1646 color: var(--text-tertiary);
1647 white-space: nowrap;
1648}
1649
1650.reply-text {
1651 color: var(--text-primary);
1652 line-height: 1.5;
1653 margin: 0;
1654}
1655
1656.replies-title {
1657 display: flex;
1658 align-items: center;
1659 gap: 8px;
1660}
1661
1662.replies-title svg {
1663 color: var(--accent);
1664}
1665
1666.replies-list-threaded {
1667 display: flex;
1668 flex-direction: column;
1669 gap: 8px;
1670}
1671
1672.reply-card-threaded {
1673 padding: 16px;
1674 transition: background 0.15s ease;
1675}
1676
1677.reply-card-threaded .reply-header {
1678 margin-bottom: 8px;
1679}
1680
1681.reply-card-threaded .reply-meta {
1682 display: flex;
1683 align-items: center;
1684 gap: 6px;
1685 flex-wrap: wrap;
1686}
1687
1688.reply-dot {
1689 color: var(--text-tertiary);
1690 font-size: 0.75rem;
1691}
1692
1693.reply-actions {
1694 display: flex;
1695 gap: 4px;
1696 margin-left: auto;
1697}
1698
1699.reply-action-btn {
1700 background: none;
1701 border: none;
1702 padding: 4px 8px;
1703 color: var(--text-tertiary);
1704 cursor: pointer;
1705 border-radius: var(--radius-sm);
1706 transition: all 0.15s ease;
1707 display: flex;
1708 align-items: center;
1709 justify-content: center;
1710}
1711
1712.reply-action-btn:hover {
1713 color: var(--accent);
1714 background: var(--accent-subtle);
1715}
1716
1717.reply-action-delete:hover {
1718 color: var(--error);
1719 background: rgba(239, 68, 68, 0.1);
1720}
1721
1722.replying-to-banner {
1723 display: flex;
1724 align-items: center;
1725 justify-content: space-between;
1726 padding: 8px 12px;
1727 margin-bottom: 12px;
1728 background: var(--accent-subtle);
1729 border-radius: var(--radius-sm);
1730 font-size: 0.85rem;
1731 color: var(--text-secondary);
1732}
1733
1734.cancel-reply {
1735 background: none;
1736 border: none;
1737 font-size: 1.2rem;
1738 color: var(--text-tertiary);
1739 cursor: pointer;
1740 padding: 0 4px;
1741 line-height: 1;
1742}
1743
1744.cancel-reply:hover {
1745 color: var(--text-primary);
1746}
1747
1748.reply-form.card {
1749 padding: 16px;
1750 margin-bottom: 16px;
1751}
1752
1753.reply-form-actions {
1754 display: flex;
1755 justify-content: flex-end;
1756}
1757
1758.inline-replies {
1759 margin-top: 16px;
1760 padding-top: 16px;
1761 border-top: 1px solid var(--border);
1762 display: flex;
1763 flex-direction: column;
1764 gap: 16px;
1765}
1766
1767.main-reply-composer {
1768 margin-top: 16px;
1769 background: var(--bg-secondary);
1770 padding: 12px;
1771 border-radius: var(--radius-md);
1772}
1773
1774.reply-input {
1775 width: 100%;
1776 min-height: 80px;
1777 padding: 12px;
1778 border: 1px solid var(--border);
1779 border-radius: var(--radius-md);
1780 background: var(--bg-card);
1781 color: var(--text-primary);
1782 font-family: inherit;
1783 font-size: 0.95rem;
1784 resize: vertical;
1785 display: block;
1786}
1787
1788.reply-input:focus {
1789 border-color: var(--accent);
1790 outline: none;
1791}
1792
1793.reply-input.small {
1794 min-height: 60px;
1795 font-size: 0.9rem;
1796 margin-bottom: 8px;
1797}
1798
1799.composer-actions {
1800 display: flex;
1801 justify-content: flex-end;
1802}
1803
1804.btn-block {
1805 width: 100%;
1806 text-align: left;
1807 padding: 8px 12px;
1808 color: var(--text-secondary);
1809 background: var(--bg-tertiary);
1810 border-radius: var(--radius-md);
1811 margin-top: 8px;
1812 font-size: 0.9rem;
1813 cursor: pointer;
1814 transition: all 0.2s;
1815}
1816
1817.btn-block:hover {
1818 background: var(--border);
1819 color: var(--text-primary);
1820}
1821
1822.annotation-action.active {
1823 color: var(--accent);
1824}
1825
1826.new-page {
1827 max-width: 600px;
1828 margin: 0 auto;
1829 display: flex;
1830 flex-direction: column;
1831 gap: 32px;
1832}
1833
1834.loading-spinner {
1835 width: 32px;
1836 height: 32px;
1837 border: 3px solid var(--border);
1838 border-top-color: var(--accent);
1839 border-radius: 50%;
1840 animation: spin 0.8s linear infinite;
1841 margin: 60px auto;
1842}
1843
1844@keyframes spin {
1845 to {
1846 transform: rotate(360deg);
1847 }
1848}
1849
1850.navbar {
1851 position: sticky;
1852 top: 0;
1853 z-index: 1000;
1854 background: rgba(12, 10, 20, 0.95);
1855 backdrop-filter: blur(12px);
1856 -webkit-backdrop-filter: blur(12px);
1857 border-bottom: 1px solid var(--border);
1858}
1859
1860.navbar-inner {
1861 max-width: 1200px;
1862 margin: 0 auto;
1863 padding: 12px 24px;
1864 display: flex;
1865 align-items: center;
1866 justify-content: space-between;
1867 gap: 24px;
1868}
1869
1870.navbar-brand {
1871 display: flex;
1872 align-items: center;
1873 gap: 10px;
1874 text-decoration: none;
1875 flex-shrink: 0;
1876}
1877
1878.navbar-logo {
1879 width: 32px;
1880 height: 32px;
1881 background: linear-gradient(135deg, var(--accent), #8b5cf6);
1882 border-radius: 8px;
1883 display: flex;
1884 align-items: center;
1885 justify-content: center;
1886 font-weight: 700;
1887 font-size: 1rem;
1888 color: white;
1889}
1890
1891.navbar-title {
1892 font-weight: 700;
1893 font-size: 1.25rem;
1894 color: var(--text-primary);
1895}
1896
1897.navbar-center {
1898 display: flex;
1899 align-items: center;
1900 gap: 8px;
1901 background: var(--bg-tertiary);
1902 padding: 4px;
1903 border-radius: var(--radius-lg);
1904}
1905
1906.navbar-link {
1907 display: flex;
1908 align-items: center;
1909 gap: 6px;
1910 padding: 8px 16px;
1911 font-size: 0.9rem;
1912 font-weight: 500;
1913 color: var(--text-secondary);
1914 text-decoration: none;
1915 border-radius: var(--radius-md);
1916 transition: all 0.15s ease;
1917}
1918
1919.navbar-link:hover {
1920 color: var(--text-primary);
1921 background: var(--bg-hover);
1922}
1923
1924.navbar-link.active {
1925 color: var(--text-primary);
1926 background: var(--bg-card);
1927 box-shadow: var(--shadow-sm);
1928}
1929
1930.navbar-right {
1931 display: flex;
1932 align-items: center;
1933 gap: 12px;
1934 flex-shrink: 0;
1935}
1936
1937.navbar-icon-link {
1938 display: flex;
1939 align-items: center;
1940 justify-content: center;
1941 width: 36px;
1942 height: 36px;
1943 color: var(--text-tertiary);
1944 border-radius: var(--radius-md);
1945 transition: all 0.15s ease;
1946}
1947
1948.navbar-icon-link:hover {
1949 color: var(--text-primary);
1950 background: var(--bg-tertiary);
1951}
1952
1953.navbar-icon-link.active {
1954 color: var(--accent);
1955 background: var(--accent-subtle);
1956}
1957
1958.navbar-new-btn {
1959 display: flex;
1960 align-items: center;
1961 gap: 6px;
1962 padding: 8px 14px;
1963 background: linear-gradient(135deg, var(--accent), #8b5cf6);
1964 color: white;
1965 font-size: 0.85rem;
1966 font-weight: 600;
1967 text-decoration: none;
1968 border-radius: var(--radius-full);
1969 transition: all 0.2s ease;
1970}
1971
1972.navbar-new-btn:hover {
1973 transform: translateY(-1px);
1974 box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
1975 color: white;
1976}
1977
1978.navbar-user-section {
1979 display: flex;
1980 align-items: center;
1981 gap: 4px;
1982}
1983
1984.navbar-avatar {
1985 width: 32px;
1986 height: 32px;
1987 border-radius: var(--radius-full);
1988 background: linear-gradient(135deg, var(--accent), #a855f7);
1989 display: flex;
1990 align-items: center;
1991 justify-content: center;
1992 font-weight: 600;
1993 font-size: 0.75rem;
1994 color: white;
1995 text-decoration: none;
1996 transition: transform 0.15s ease;
1997}
1998
1999.navbar-avatar:hover {
2000 transform: scale(1.05);
2001}
2002
2003.navbar-logout {
2004 width: 24px;
2005 height: 24px;
2006 border: none;
2007 background: transparent;
2008 color: var(--text-tertiary);
2009 font-size: 1.25rem;
2010 cursor: pointer;
2011 border-radius: var(--radius-sm);
2012 transition: all 0.15s ease;
2013 display: flex;
2014 align-items: center;
2015 justify-content: center;
2016}
2017
2018.navbar-logout:hover {
2019 color: var(--error);
2020 background: rgba(239, 68, 68, 0.1);
2021}
2022
2023.navbar-signin {
2024 padding: 8px 16px;
2025 background: var(--accent);
2026 color: white;
2027 font-size: 0.9rem;
2028 font-weight: 500;
2029 text-decoration: none;
2030 border-radius: var(--radius-full);
2031 transition: all 0.15s ease;
2032}
2033
2034.navbar-signin:hover {
2035 background: var(--accent-hover);
2036 color: white;
2037}
2038
2039.navbar-user-menu {
2040 position: relative;
2041}
2042
2043.navbar-avatar-btn {
2044 width: 36px;
2045 height: 36px;
2046 border-radius: var(--radius-full);
2047 background: linear-gradient(135deg, var(--accent), #a855f7);
2048 border: none;
2049 cursor: pointer;
2050 overflow: hidden;
2051 display: flex;
2052 align-items: center;
2053 justify-content: center;
2054 transition:
2055 transform 0.15s ease,
2056 box-shadow 0.15s ease;
2057}
2058
2059.navbar-avatar-btn:hover {
2060 transform: scale(1.05);
2061 box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
2062}
2063
2064.navbar-avatar-img {
2065 width: 100%;
2066 height: 100%;
2067 object-fit: cover;
2068}
2069
2070.navbar-avatar-text {
2071 font-weight: 600;
2072 font-size: 0.75rem;
2073 color: white;
2074}
2075
2076.navbar-dropdown {
2077 position: absolute;
2078 top: calc(100% + 8px);
2079 right: 0;
2080 min-width: 200px;
2081 background: var(--bg-card);
2082 border: 1px solid var(--border);
2083 border-radius: var(--radius-lg);
2084 box-shadow: var(--shadow-lg);
2085 overflow: hidden;
2086 z-index: 1001;
2087 animation: dropdownFade 0.15s ease;
2088}
2089
2090@keyframes dropdownFade {
2091 from {
2092 opacity: 0;
2093 transform: translateY(-8px);
2094 }
2095
2096 to {
2097 opacity: 1;
2098 transform: translateY(0);
2099 }
2100}
2101
2102.navbar-dropdown-header {
2103 padding: 12px 16px;
2104 background: var(--bg-secondary);
2105}
2106
2107.navbar-dropdown-name {
2108 display: block;
2109 font-weight: 600;
2110 color: var(--text-primary);
2111 font-size: 0.9rem;
2112}
2113
2114.navbar-dropdown-handle {
2115 display: block;
2116 color: var(--text-tertiary);
2117 font-size: 0.8rem;
2118 margin-top: 2px;
2119}
2120
2121.navbar-dropdown-divider {
2122 height: 1px;
2123 background: var(--border);
2124}
2125
2126.navbar-dropdown-item {
2127 display: flex;
2128 align-items: center;
2129 gap: 10px;
2130 width: 100%;
2131 padding: 12px 16px;
2132 font-size: 0.9rem;
2133 color: var(--text-primary);
2134 text-decoration: none;
2135 background: none;
2136 border: none;
2137 cursor: pointer;
2138 transition: background 0.15s ease;
2139 text-align: left;
2140}
2141
2142.navbar-dropdown-item:hover {
2143 background: var(--bg-tertiary);
2144}
2145
2146.navbar-dropdown-logout {
2147 color: var(--error);
2148 border-top: 1px solid var(--border);
2149}
2150
2151.navbar-dropdown-logout:hover {
2152 background: rgba(239, 68, 68, 0.1);
2153}
2154
2155@media (max-width: 768px) {
2156 .navbar-inner {
2157 padding: 10px 16px;
2158 }
2159
2160 .navbar-title {
2161 display: none;
2162 }
2163
2164 .navbar-center {
2165 display: none;
2166 }
2167
2168 .navbar-new-btn span {
2169 display: none;
2170 }
2171
2172 .navbar-new-btn {
2173 width: 36px;
2174 height: 36px;
2175 padding: 0;
2176 justify-content: center;
2177 }
2178}
2179
2180.collections-list {
2181 display: flex;
2182 flex-direction: column;
2183 gap: 2px;
2184 background: var(--bg-card);
2185 border: 1px solid var(--border);
2186 border-radius: var(--radius-lg);
2187 overflow: hidden;
2188}
2189
2190.collection-row {
2191 display: flex;
2192 align-items: center;
2193 background: var(--bg-card);
2194 transition: background 0.15s ease;
2195}
2196
2197.collection-row:not(:last-child) {
2198 border-bottom: 1px solid var(--border);
2199}
2200
2201.collection-row:hover {
2202 background: var(--bg-secondary);
2203}
2204
2205.collection-row-content {
2206 flex: 1;
2207 display: flex;
2208 align-items: center;
2209 gap: 16px;
2210 padding: 16px 20px;
2211 text-decoration: none;
2212 min-width: 0;
2213}
2214
2215.collection-row-icon {
2216 width: 44px;
2217 height: 44px;
2218 min-width: 44px;
2219 display: flex;
2220 align-items: center;
2221 justify-content: center;
2222 background: linear-gradient(
2223 135deg,
2224 rgba(79, 70, 229, 0.1),
2225 rgba(168, 85, 247, 0.15)
2226 );
2227 color: var(--accent);
2228 border-radius: var(--radius-md);
2229 transition: all 0.2s ease;
2230}
2231
2232.collection-row:hover .collection-row-icon {
2233 background: linear-gradient(
2234 135deg,
2235 rgba(79, 70, 229, 0.15),
2236 rgba(168, 85, 247, 0.2)
2237 );
2238 transform: scale(1.05);
2239}
2240
2241.collection-row-info {
2242 flex: 1;
2243 min-width: 0;
2244}
2245
2246.collection-row-name {
2247 font-size: 1rem;
2248 font-weight: 600;
2249 color: var(--text-primary);
2250 margin: 0 0 2px 0;
2251 white-space: nowrap;
2252 overflow: hidden;
2253 text-overflow: ellipsis;
2254}
2255
2256.collection-row:hover .collection-row-name {
2257 color: var(--accent);
2258}
2259
2260.collection-row-desc {
2261 font-size: 0.85rem;
2262 color: var(--text-secondary);
2263 margin: 0;
2264 white-space: nowrap;
2265 overflow: hidden;
2266 text-overflow: ellipsis;
2267}
2268
2269.collection-row-arrow {
2270 color: var(--text-tertiary);
2271 opacity: 0;
2272 transition: all 0.2s ease;
2273}
2274
2275.collection-row:hover .collection-row-arrow {
2276 opacity: 1;
2277 color: var(--accent);
2278 transform: translateX(2px);
2279}
2280
2281.collection-row-edit {
2282 padding: 10px;
2283 margin-right: 12px;
2284 color: var(--text-tertiary);
2285 background: none;
2286 border: none;
2287 border-radius: var(--radius-sm);
2288 cursor: pointer;
2289 opacity: 0;
2290 transition: all 0.15s ease;
2291}
2292
2293.collection-row:hover .collection-row-edit {
2294 opacity: 1;
2295}
2296
2297.collection-row-edit:hover {
2298 color: var(--text-primary);
2299 background: var(--bg-tertiary);
2300}
2301
2302.back-link {
2303 display: inline-flex;
2304 align-items: center;
2305 gap: 6px;
2306 color: var(--text-tertiary);
2307 font-size: 0.9rem;
2308 font-weight: 500;
2309 text-decoration: none;
2310 margin-bottom: 24px;
2311 transition: color 0.15s ease;
2312}
2313
2314.back-link:hover {
2315 color: var(--accent);
2316}
2317
2318.collection-detail-header {
2319 display: flex;
2320 gap: 20px;
2321 padding: 24px;
2322 background: var(--bg-card);
2323 border: 1px solid var(--border);
2324 border-radius: var(--radius-lg);
2325 margin-bottom: 32px;
2326 position: relative;
2327}
2328
2329.collection-detail-icon {
2330 width: 56px;
2331 height: 56px;
2332 min-width: 56px;
2333 display: flex;
2334 align-items: center;
2335 justify-content: center;
2336 background: linear-gradient(
2337 135deg,
2338 rgba(79, 70, 229, 0.1),
2339 rgba(168, 85, 247, 0.1)
2340 );
2341 color: var(--accent);
2342 border-radius: var(--radius-md);
2343}
2344
2345.collection-detail-info {
2346 flex: 1;
2347 min-width: 0;
2348}
2349
2350.collection-detail-visibility {
2351 display: flex;
2352 align-items: center;
2353 gap: 6px;
2354 font-size: 0.8rem;
2355 font-weight: 600;
2356 color: var(--accent);
2357 text-transform: capitalize;
2358 margin-bottom: 8px;
2359}
2360
2361.collection-detail-title {
2362 font-size: 1.5rem;
2363 font-weight: 700;
2364 color: var(--text-primary);
2365 margin-bottom: 8px;
2366 line-height: 1.3;
2367}
2368
2369.collection-detail-desc {
2370 color: var(--text-secondary);
2371 font-size: 1rem;
2372 line-height: 1.5;
2373 margin-bottom: 12px;
2374 max-width: 600px;
2375}
2376
2377.collection-detail-stats {
2378 display: flex;
2379 align-items: center;
2380 gap: 8px;
2381 font-size: 0.85rem;
2382 color: var(--text-tertiary);
2383}
2384
2385.collection-detail-actions {
2386 position: absolute;
2387 top: 20px;
2388 right: 20px;
2389 display: flex;
2390 align-items: center;
2391 gap: 8px;
2392}
2393
2394.collection-detail-actions .share-menu-container {
2395 display: flex;
2396 align-items: center;
2397}
2398
2399.collection-detail-actions .annotation-action {
2400 padding: 10px;
2401 color: var(--text-tertiary);
2402 background: none;
2403 border: none;
2404 border-radius: var(--radius-sm);
2405 cursor: pointer;
2406 transition: all 0.15s ease;
2407}
2408
2409.collection-detail-actions .annotation-action:hover {
2410 color: var(--accent);
2411 background: var(--bg-tertiary);
2412}
2413
2414.collection-detail-edit,
2415.collection-detail-delete {
2416 padding: 10px;
2417 color: var(--text-tertiary);
2418 background: none;
2419 border: none;
2420 border-radius: var(--radius-sm);
2421 cursor: pointer;
2422 transition: all 0.15s ease;
2423}
2424
2425.collection-detail-edit:hover {
2426 color: var(--accent);
2427 background: var(--bg-tertiary);
2428}
2429
2430.collection-detail-delete:hover {
2431 color: var(--error);
2432 background: rgba(239, 68, 68, 0.1);
2433}
2434
2435.collection-item-wrapper {
2436 position: relative;
2437}
2438
2439.collection-item-remove {
2440 position: absolute;
2441 top: 12px;
2442 left: -40px;
2443 z-index: 10;
2444 padding: 8px;
2445 background: var(--bg-card);
2446 border: 1px solid var(--border);
2447 border-radius: var(--radius-sm);
2448 color: var(--text-tertiary);
2449 cursor: pointer;
2450 opacity: 0;
2451 transition: all 0.15s ease;
2452}
2453
2454.collection-item-wrapper:hover .collection-item-remove {
2455 opacity: 1;
2456}
2457
2458.collection-item-remove:hover {
2459 color: var(--error);
2460 border-color: var(--error);
2461 background: rgba(239, 68, 68, 0.05);
2462}
2463
2464.modal-overlay {
2465 position: fixed;
2466 inset: 0;
2467 background: rgba(0, 0, 0, 0.5);
2468 display: flex;
2469 align-items: center;
2470 justify-content: center;
2471 padding: 16px;
2472 z-index: 50;
2473 animation: fadeIn 0.2s ease-out;
2474}
2475
2476.modal-container {
2477 background: var(--bg-secondary);
2478 border-radius: var(--radius-lg);
2479 width: 100%;
2480 max-width: 28rem;
2481 border: 1px solid var(--border);
2482 box-shadow: var(--shadow-lg);
2483 animation: zoomIn 0.2s ease-out;
2484}
2485
2486.modal-header {
2487 display: flex;
2488 align-items: center;
2489 justify-content: space-between;
2490 padding: 16px;
2491 border-bottom: 1px solid var(--border);
2492}
2493
2494.modal-title {
2495 font-size: 1.25rem;
2496 font-weight: 700;
2497 color: var(--text-primary);
2498}
2499
2500.modal-close-btn {
2501 padding: 8px;
2502 color: var(--text-tertiary);
2503 border-radius: var(--radius-md);
2504 transition: color 0.15s;
2505}
2506
2507.modal-close-btn:hover {
2508 color: var(--text-primary);
2509 background: var(--bg-hover);
2510}
2511
2512.modal-form {
2513 padding: 16px;
2514 display: flex;
2515 flex-direction: column;
2516 gap: 16px;
2517}
2518
2519.icon-picker-tabs {
2520 display: flex;
2521 gap: 4px;
2522 margin-bottom: 12px;
2523}
2524
2525.icon-picker-tab {
2526 flex: 1;
2527 padding: 8px 12px;
2528 background: var(--bg-primary);
2529 border: 1px solid var(--border);
2530 border-radius: var(--radius-md);
2531 color: var(--text-secondary);
2532 font-size: 0.85rem;
2533 font-weight: 500;
2534 cursor: pointer;
2535 transition: all 0.15s ease;
2536}
2537
2538.icon-picker-tab:hover {
2539 background: var(--bg-tertiary);
2540}
2541
2542.icon-picker-tab.active {
2543 background: var(--accent);
2544 border-color: var(--accent);
2545 color: white;
2546}
2547
2548.emoji-picker-wrapper {
2549 display: flex;
2550 flex-direction: column;
2551 gap: 10px;
2552}
2553
2554.emoji-custom-input input {
2555 width: 100%;
2556}
2557
2558.emoji-picker,
2559.icon-picker {
2560 display: flex;
2561 flex-wrap: wrap;
2562 gap: 4px;
2563 max-height: 120px;
2564 overflow-y: auto;
2565 padding: 8px;
2566 background: var(--bg-primary);
2567 border: 1px solid var(--border);
2568 border-radius: var(--radius-md);
2569}
2570
2571.emoji-option,
2572.icon-option {
2573 width: 36px;
2574 height: 36px;
2575 display: flex;
2576 align-items: center;
2577 justify-content: center;
2578 font-size: 1.2rem;
2579 background: transparent;
2580 border: 2px solid transparent;
2581 border-radius: var(--radius-sm);
2582 cursor: pointer;
2583 transition: all 0.15s ease;
2584 color: var(--text-secondary);
2585}
2586
2587.emoji-option:hover,
2588.icon-option:hover {
2589 background: var(--bg-tertiary);
2590 transform: scale(1.1);
2591 color: var(--text-primary);
2592}
2593
2594.emoji-option.selected,
2595.icon-option.selected {
2596 border-color: var(--accent);
2597 background: var(--accent-subtle);
2598 color: var(--accent);
2599}
2600
2601.form-group {
2602 margin-bottom: 0;
2603}
2604
2605.form-label {
2606 display: block;
2607 font-size: 0.875rem;
2608 font-weight: 500;
2609 color: var(--text-secondary);
2610 margin-bottom: 4px;
2611}
2612
2613.form-input,
2614.form-textarea,
2615.form-select {
2616 width: 100%;
2617 padding: 8px 12px;
2618 background: var(--bg-primary);
2619 border: 1px solid var(--border);
2620 border-radius: var(--radius-md);
2621 color: var(--text-primary);
2622 transition: all 0.15s;
2623}
2624
2625.form-input:focus,
2626.form-textarea:focus,
2627.form-select:focus {
2628 outline: none;
2629 border-color: var(--accent);
2630 box-shadow: 0 0 0 2px var(--accent-subtle);
2631}
2632
2633.form-textarea {
2634 resize: none;
2635}
2636
2637.modal-actions {
2638 display: flex;
2639 justify-content: flex-end;
2640 gap: 12px;
2641 padding-top: 8px;
2642}
2643
2644@keyframes fadeIn {
2645 from {
2646 opacity: 0;
2647 }
2648
2649 to {
2650 opacity: 1;
2651 }
2652}
2653
2654@keyframes zoomIn {
2655 from {
2656 opacity: 0;
2657 transform: scale(0.95);
2658 }
2659
2660 to {
2661 opacity: 1;
2662 transform: scale(1);
2663 }
2664}
2665
2666.annotation-detail-page {
2667 max-width: 680px;
2668 margin: 0 auto;
2669 padding: 24px 16px;
2670}
2671
2672.annotation-detail-header {
2673 margin-bottom: 24px;
2674}
2675
2676.back-link {
2677 display: inline-flex;
2678 align-items: center;
2679 gap: 8px;
2680 color: var(--text-secondary);
2681 font-size: 0.9rem;
2682 transition: color 0.15s;
2683}
2684
2685.back-link:hover {
2686 color: var(--text-primary);
2687}
2688
2689.text-secondary {
2690 color: var(--text-secondary);
2691}
2692
2693.text-error {
2694 color: var(--error);
2695}
2696
2697.text-center {
2698 text-align: center;
2699}
2700
2701.flex {
2702 display: flex;
2703}
2704
2705.items-center {
2706 align-items: center;
2707}
2708
2709.justify-center {
2710 justify-content: center;
2711}
2712
2713.justify-end {
2714 justify-content: flex-end;
2715}
2716
2717.gap-2 {
2718 gap: 8px;
2719}
2720
2721.gap-3 {
2722 gap: 12px;
2723}
2724
2725.mt-3 {
2726 margin-top: 12px;
2727}
2728
2729.mb-6 {
2730 margin-bottom: 24px;
2731}
2732
2733.btn-text {
2734 background: none;
2735 border: none;
2736 color: var(--text-secondary);
2737 font-size: 0.9rem;
2738 padding: 8px 12px;
2739 cursor: pointer;
2740 transition: color 0.15s;
2741}
2742
2743.btn-text:hover {
2744 color: var(--text-primary);
2745}
2746
2747.btn-sm {
2748 padding: 6px 12px;
2749 font-size: 0.85rem;
2750}
2751
2752.annotation-edit-btn {
2753 background: none;
2754 border: none;
2755 cursor: pointer;
2756 padding: 6px 8px;
2757 color: var(--text-tertiary);
2758 border-radius: var(--radius-sm);
2759 transition: all 0.15s ease;
2760}
2761
2762.annotation-edit-btn:hover {
2763 color: var(--accent);
2764 background: var(--accent-subtle);
2765}
2766
2767.spinner {
2768 width: 32px;
2769 height: 32px;
2770 border: 3px solid var(--border);
2771 border-top-color: var(--accent);
2772 border-radius: 50%;
2773 animation: spin 0.8s linear infinite;
2774}
2775
2776.spinner-sm {
2777 width: 16px;
2778 height: 16px;
2779 border-width: 2px;
2780}
2781
2782@keyframes spin {
2783 to {
2784 transform: rotate(360deg);
2785 }
2786}
2787
2788.collection-list-item {
2789 width: 100%;
2790 text-align: left;
2791 padding: 12px 16px;
2792 border-radius: var(--radius-md);
2793 background: var(--bg-primary);
2794 border: 1px solid transparent;
2795 color: var(--text-primary);
2796 transition: all 0.15s ease;
2797 display: flex;
2798 align-items: center;
2799 justify-content: space-between;
2800 cursor: pointer;
2801}
2802
2803.collection-list-item:hover {
2804 background: var(--bg-hover);
2805 border-color: var(--border);
2806}
2807
2808.collection-list-item:hover .collection-list-item-icon {
2809 opacity: 1;
2810}
2811
2812.collection-list-item:disabled {
2813 opacity: 0.6;
2814 cursor: not-allowed;
2815}
2816
2817.item-delete-overlay {
2818 position: absolute;
2819 top: 16px;
2820 right: 16px;
2821 z-index: 10;
2822 opacity: 0;
2823 transition: opacity 0.15s ease;
2824}
2825
2826.card:hover .item-delete-overlay,
2827div:hover > .item-delete-overlay {
2828 opacity: 1;
2829}
2830
2831.btn-icon-danger {
2832 padding: 8px;
2833 background: var(--error);
2834 color: white;
2835 border: none;
2836 border-radius: var(--radius-md);
2837 cursor: pointer;
2838 box-shadow: var(--shadow-md);
2839 transition: all 0.15s ease;
2840 display: flex;
2841 align-items: center;
2842 justify-content: center;
2843}
2844
2845.btn-icon-danger:hover {
2846 background: #dc2626;
2847 transform: scale(1.05);
2848}
2849
2850.action-buttons {
2851 display: flex;
2852 gap: 8px;
2853}
2854
2855.action-buttons-end {
2856 display: flex;
2857 justify-content: flex-end;
2858 gap: 8px;
2859}
2860
2861.filter-tab {
2862 padding: 8px 16px;
2863 font-size: 0.9rem;
2864 font-weight: 500;
2865 color: var(--text-secondary);
2866 background: transparent;
2867 border: none;
2868 border-radius: var(--radius-md);
2869 cursor: pointer;
2870 transition: all 0.15s ease;
2871}
2872
2873.filter-tab:hover {
2874 color: var(--text-primary);
2875 background: var(--bg-hover);
2876}
2877
2878.filter-tab.active {
2879 color: var(--text-primary);
2880 background: var(--bg-card);
2881 box-shadow: var(--shadow-sm);
2882}
2883
2884.inline-reply {
2885 padding: 12px 16px;
2886 border-bottom: 1px solid var(--border);
2887}
2888
2889.inline-reply:last-child {
2890 border-bottom: none;
2891}
2892
2893.inline-reply-avatar {
2894 width: 28px;
2895 height: 28px;
2896 min-width: 28px;
2897 border-radius: var(--radius-full);
2898 background: linear-gradient(135deg, var(--accent), #a855f7);
2899 display: flex;
2900 align-items: center;
2901 justify-content: center;
2902 font-weight: 600;
2903 font-size: 0.7rem;
2904 color: white;
2905 overflow: hidden;
2906}
2907
2908.inline-reply-avatar img,
2909.inline-reply-avatar-placeholder {
2910 width: 100%;
2911 height: 100%;
2912 object-fit: cover;
2913}
2914
2915.inline-reply-avatar-placeholder {
2916 display: flex;
2917 align-items: center;
2918 justify-content: center;
2919 font-weight: 600;
2920 font-size: 0.7rem;
2921 color: white;
2922}
2923
2924.inline-reply-content {
2925 flex: 1;
2926 min-width: 0;
2927}
2928
2929.inline-reply-header {
2930 display: flex;
2931 align-items: center;
2932 gap: 8px;
2933 margin-bottom: 4px;
2934}
2935
2936.inline-reply-author {
2937 font-weight: 600;
2938 font-size: 0.85rem;
2939 color: var(--text-primary);
2940}
2941
2942.inline-reply-handle {
2943 color: var(--text-tertiary);
2944 font-size: 0.8rem;
2945 text-decoration: none;
2946}
2947
2948.inline-reply-time {
2949 color: var(--text-tertiary);
2950 font-size: 0.75rem;
2951 margin-left: auto;
2952}
2953
2954.inline-reply-text {
2955 font-size: 0.9rem;
2956 color: var(--text-primary);
2957 line-height: 1.5;
2958}
2959
2960.inline-reply-action {
2961 display: flex;
2962 align-items: center;
2963 gap: 4px;
2964 padding: 4px 8px;
2965 font-size: 0.8rem;
2966 color: var(--text-tertiary);
2967 background: none;
2968 border: none;
2969 border-radius: var(--radius-sm);
2970 cursor: pointer;
2971 transition: all 0.15s ease;
2972}
2973
2974.inline-reply-action:hover {
2975 color: var(--text-secondary);
2976 background: var(--bg-hover);
2977}
2978
2979.inline-reply-composer {
2980 display: flex;
2981 align-items: flex-start;
2982 gap: 12px;
2983 padding: 12px 16px;
2984}
2985
2986.history-panel {
2987 background: var(--bg-tertiary);
2988 border: 1px solid var(--border);
2989 border-radius: var(--radius-md);
2990 padding: 1rem;
2991 margin-bottom: 1rem;
2992 font-size: 0.9rem;
2993 animation: fadeIn 0.2s ease-out;
2994}
2995
2996.history-header {
2997 display: flex;
2998 justify-content: space-between;
2999 align-items: center;
3000 margin-bottom: 1rem;
3001 padding-bottom: 0.5rem;
3002 border-bottom: 1px solid var(--border);
3003}
3004
3005.history-title {
3006 font-weight: 600;
3007 text-transform: uppercase;
3008 letter-spacing: 0.05em;
3009 font-size: 0.75rem;
3010 color: var(--text-secondary);
3011}
3012
3013.history-list {
3014 list-style: none;
3015 display: flex;
3016 flex-direction: column;
3017 gap: 1rem;
3018}
3019
3020.history-item {
3021 position: relative;
3022 padding-left: 1rem;
3023 border-left: 2px solid var(--border);
3024}
3025
3026.history-date {
3027 font-size: 0.75rem;
3028 color: var(--text-tertiary);
3029 margin-bottom: 0.25rem;
3030}
3031
3032.history-content {
3033 color: var(--text-secondary);
3034 white-space: pre-wrap;
3035}
3036
3037.history-close-btn {
3038 color: var(--text-tertiary);
3039 padding: 4px;
3040 border-radius: var(--radius-sm);
3041 transition: all 0.2s;
3042 display: flex;
3043 align-items: center;
3044 justify-content: center;
3045}
3046
3047.history-close-btn:hover {
3048 background: var(--bg-hover);
3049 color: var(--text-primary);
3050}
3051
3052.history-status {
3053 text-align: center;
3054 color: var(--text-tertiary);
3055 font-style: italic;
3056 padding: 1rem;
3057}
3058
3059.form-label {
3060 display: block;
3061 font-size: 0.85rem;
3062 font-weight: 600;
3063 color: var(--text-secondary);
3064 margin-bottom: 6px;
3065}
3066
3067.color-input-container {
3068 display: flex;
3069 align-items: center;
3070 gap: 12px;
3071 background: var(--bg-tertiary);
3072 padding: 8px 12px;
3073 border-radius: var(--radius-md);
3074 border: 1px solid var(--border);
3075 width: fit-content;
3076}
3077
3078.color-input-wrapper {
3079 position: relative;
3080 width: 32px;
3081 height: 32px;
3082 border-radius: var(--radius-full);
3083 overflow: hidden;
3084 border: 2px solid var(--border);
3085 cursor: pointer;
3086 transition: transform 0.1s;
3087}
3088
3089.color-input-wrapper:hover {
3090 transform: scale(1.1);
3091 border-color: var(--accent);
3092}
3093
3094.color-input-wrapper input[type="color"] {
3095 position: absolute;
3096 top: -50%;
3097 left: -50%;
3098 width: 200%;
3099 height: 200%;
3100 padding: 0;
3101 margin: 0;
3102 border: none;
3103 cursor: pointer;
3104 opacity: 0;
3105}
3106
3107.bookmark-card {
3108 display: flex;
3109 flex-direction: column;
3110 gap: 16px;
3111}
3112
3113.bookmark-preview {
3114 display: flex;
3115 flex-direction: column;
3116 background: var(--bg-secondary);
3117 border: 1px solid var(--border);
3118 border-radius: var(--radius-md);
3119 overflow: hidden;
3120 text-decoration: none;
3121 transition: all 0.2s ease;
3122 position: relative;
3123}
3124
3125.bookmark-preview:hover {
3126 border-color: var(--accent);
3127 box-shadow: var(--shadow-sm);
3128 transform: translateY(-1px);
3129}
3130
3131.bookmark-preview::before {
3132 content: "";
3133 position: absolute;
3134 left: 0;
3135 top: 0;
3136 bottom: 0;
3137 width: 4px;
3138 background: var(--accent);
3139 opacity: 0.7;
3140}
3141
3142.bookmark-preview-content {
3143 padding: 16px 20px;
3144 display: flex;
3145 flex-direction: column;
3146 gap: 8px;
3147}
3148
3149.bookmark-preview-header {
3150 display: flex;
3151 align-items: center;
3152 gap: 8px;
3153 margin-bottom: 4px;
3154}
3155
3156.bookmark-preview-site {
3157 font-size: 0.75rem;
3158 color: var(--accent);
3159 text-transform: uppercase;
3160 letter-spacing: 0.05em;
3161 font-weight: 700;
3162 display: flex;
3163 align-items: center;
3164 gap: 6px;
3165}
3166
3167.bookmark-preview-title {
3168 font-size: 1.15rem;
3169 font-weight: 700;
3170 color: var(--text-primary);
3171 line-height: 1.4;
3172}
3173
3174.bookmark-preview-desc {
3175 font-size: 0.95rem;
3176 color: var(--text-secondary);
3177 line-height: 1.6;
3178}
3179
3180.bookmark-preview-arrow {
3181 display: none;
3182}
3183
3184.bookmark-preview:hover {
3185 background: var(--bg-tertiary);
3186 border-color: var(--accent-subtle);
3187 transform: translateY(-1px);
3188}
3189
3190.bookmark-preview-content {
3191 flex: 1;
3192 min-width: 0;
3193 display: flex;
3194 flex-direction: column;
3195 gap: 6px;
3196}
3197
3198.bookmark-preview-site {
3199 display: flex;
3200 align-items: center;
3201 gap: 6px;
3202 font-size: 0.75rem;
3203 font-weight: 600;
3204 color: var(--accent);
3205 text-transform: uppercase;
3206 letter-spacing: 0.03em;
3207}
3208
3209.bookmark-preview-title {
3210 font-size: 1rem;
3211 font-weight: 600;
3212 line-height: 1.4;
3213 color: var(--text-primary);
3214 margin: 0;
3215 display: -webkit-box;
3216 -webkit-line-clamp: 2;
3217 line-clamp: 2;
3218 -webkit-box-orient: vertical;
3219 overflow: hidden;
3220}
3221
3222.bookmark-preview-desc {
3223 font-size: 0.875rem;
3224 color: var(--text-secondary);
3225 line-height: 1.5;
3226 margin: 0;
3227 display: -webkit-box;
3228 -webkit-line-clamp: 2;
3229 line-clamp: 2;
3230 -webkit-box-orient: vertical;
3231 overflow: hidden;
3232}
3233
3234.bookmark-preview-arrow {
3235 display: flex;
3236 align-items: center;
3237 justify-content: center;
3238 color: var(--text-tertiary);
3239 padding: 0 4px;
3240 transition: all 0.2s ease;
3241}
3242
3243.bookmark-preview:hover .bookmark-preview-arrow {
3244 color: var(--accent);
3245 transform: translateX(2px);
3246}
3247
3248.navbar-logo-img {
3249 width: 24px;
3250 height: 24px;
3251 object-fit: contain;
3252}
3253
3254.login-logo-img {
3255 width: 80px;
3256 height: 80px;
3257 margin-bottom: 24px;
3258 object-fit: contain;
3259}
3260
3261.legal-content {
3262 max-width: 800px;
3263 margin: 0 auto;
3264 padding: 20px;
3265}
3266
3267.legal-content h1 {
3268 font-size: 2rem;
3269 margin-bottom: 8px;
3270 color: var(--text-primary);
3271}
3272
3273.legal-content h2 {
3274 font-size: 1.4rem;
3275 margin-top: 32px;
3276 margin-bottom: 12px;
3277 color: var(--text-primary);
3278}
3279
3280.legal-content h3 {
3281 font-size: 1.1rem;
3282 margin-top: 20px;
3283 margin-bottom: 8px;
3284 color: var(--text-primary);
3285}
3286
3287.legal-content p {
3288 color: var(--text-secondary);
3289 line-height: 1.7;
3290 margin-bottom: 12px;
3291}
3292
3293.legal-content ul {
3294 color: var(--text-secondary);
3295 line-height: 1.7;
3296 margin-left: 24px;
3297 margin-bottom: 12px;
3298}
3299
3300.legal-content li {
3301 margin-bottom: 6px;
3302}
3303
3304.legal-content a {
3305 color: var(--accent);
3306 text-decoration: none;
3307}
3308
3309.legal-content a:hover {
3310 text-decoration: underline;
3311}
3312
3313.legal-content section {
3314 margin-bottom: 24px;
3315}
3316
3317.input {
3318 width: 100%;
3319 padding: 12px 14px;
3320 font-size: 0.95rem;
3321 color: var(--text-primary);
3322 background: var(--bg-secondary);
3323 border: 1px solid var(--border);
3324 border-radius: var(--radius-md);
3325 outline: none;
3326 transition: all 0.15s ease;
3327}
3328
3329.input:focus {
3330 border-color: var(--accent);
3331 box-shadow: 0 0 0 3px var(--accent-subtle);
3332}
3333
3334.input::placeholder {
3335 color: var(--text-tertiary);
3336}
3337
3338.notifications-page {
3339 max-width: 680px;
3340 margin: 0 auto;
3341}
3342
3343.notifications-list {
3344 display: flex;
3345 flex-direction: column;
3346 gap: 12px;
3347}
3348
3349.notification-item {
3350 display: flex;
3351 gap: 16px;
3352 align-items: flex-start;
3353 text-decoration: none;
3354 color: inherit;
3355}
3356
3357.notification-item:hover {
3358 background: var(--bg-hover);
3359}
3360
3361.notification-icon {
3362 width: 36px;
3363 height: 36px;
3364 border-radius: var(--radius-full);
3365 display: flex;
3366 align-items: center;
3367 justify-content: center;
3368 background: var(--bg-tertiary);
3369 color: var(--text-secondary);
3370 flex-shrink: 0;
3371}
3372
3373.notification-icon[data-type="like"] {
3374 color: #ef4444;
3375 background: rgba(239, 68, 68, 0.1);
3376}
3377
3378.notification-icon[data-type="reply"] {
3379 color: #3b82f6;
3380 background: rgba(59, 130, 246, 0.1);
3381}
3382
3383.notification-content {
3384 flex: 1;
3385 min-width: 0;
3386}
3387
3388.notification-text {
3389 font-size: 0.95rem;
3390 margin-bottom: 4px;
3391 line-height: 1.4;
3392 color: var(--text-primary);
3393}
3394
3395.notification-text strong {
3396 font-weight: 600;
3397}
3398
3399.notification-time {
3400 font-size: 0.85rem;
3401 color: var(--text-tertiary);
3402}
3403
3404.notification-link {
3405 position: relative;
3406}
3407
3408.notification-badge {
3409 position: absolute;
3410 top: -2px;
3411 right: -2px;
3412 background: var(--error);
3413 color: white;
3414 font-size: 0.7rem;
3415 font-weight: 700;
3416 min-width: 16px;
3417 height: 16px;
3418 border-radius: var(--radius-full);
3419 display: flex;
3420 align-items: center;
3421 justify-content: center;
3422 padding: 0 4px;
3423 border: 2px solid var(--bg-primary);
3424}