full update

src/app/globals.css

@@ -404,6 +404,37 @@ select {
   transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
+/* ─── Reels / post feed vertical scroll (Instagram-like snap) ─── */
+.reels-vertical-scroll {
+  scroll-snap-type: y mandatory;
+  scroll-behavior: auto;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.reels-vertical-scroll > * {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+.reels-vertical-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.reels-horizontal-scroll {
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.reels-horizontal-scroll > * {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+.reels-horizontal-scroll::-webkit-scrollbar {
+  display: none;
+}
+
 /* ─── Chat scrollbar ─── */
 .custom-scrollbar::-webkit-scrollbar {
   width: 4px;
@@ -656,4 +687,88 @@ select {
 .profile-avatar {
   aspect-ratio: 1 / 1;
   object-fit: cover;
+}
+
+/* ─── Design system: buttons & modals ─── */
+:root {
+  --btn-border-color: #C3C3C3;
+  --btn-accent: #FC8EAC;
+  --btn-accent-hover: #f07898;
+  --btn-accent-text: #ffffff;
+}
+
+.btn-modern {
+  border: 1px solid var(--btn-border-color);
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+.btn-modern:hover:not(:disabled) {
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
+}
+.btn-modern:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.dark .btn-modern {
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
+}
+.dark .btn-modern:hover:not(:disabled) {
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
+}
+
+.btn-modern--primary {
+  background: var(--btn-accent);
+  color: var(--btn-accent-text);
+  border-color: var(--btn-border-color);
+}
+.btn-modern--primary:hover:not(:disabled) {
+  background: var(--btn-accent-hover);
+}
+
+.btn-modern--selected {
+  background: var(--btn-accent);
+  color: var(--btn-accent-text);
+  border-color: var(--btn-accent);
+}
+.btn-modern--selected:hover:not(:disabled) {
+  background: var(--btn-accent-hover);
+  border-color: var(--btn-accent-hover);
+}
+
+.glass-modal-overlay {
+  background: rgba(8, 8, 10, 0.52);
+  backdrop-filter: blur(20px) saturate(120%);
+  -webkit-backdrop-filter: blur(20px) saturate(120%);
+}
+.dark .glass-modal-overlay {
+  background: rgba(0, 0, 0, 0.62);
+  backdrop-filter: blur(22px) saturate(110%);
+  -webkit-backdrop-filter: blur(22px) saturate(110%);
+}
+.glass-modal-overlay--dark {
+  background: rgba(0, 0, 0, 0.72);
+  backdrop-filter: blur(24px) saturate(110%);
+  -webkit-backdrop-filter: blur(24px) saturate(110%);
+}
+.dark .glass-modal-overlay--dark {
+  background: rgba(0, 0, 0, 0.82);
+}
+
+.glass-modal-panel {
+  background: rgba(255, 255, 255, 0.78);
+  backdrop-filter: blur(28px) saturate(180%);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
+}
+.dark .glass-modal-panel {
+  background: rgba(28, 28, 30, 0.84);
+  border-color: rgba(255, 255, 255, 0.14);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.48);
+}
+
+.glass-modal-panel--sheet {
+  border-radius: 1.5rem 1.5rem 0 0;
+}
+.glass-modal-panel--center {
+  border-radius: 1.5rem;
 }