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