/* Parawise custom styles (Tailwind handles most; these are extras) */
:root { --pw-bg: #F4FBFB; --pw-card: #ffffff; --pw-border: rgba(11,119,128,0.10); }
.dark { --pw-bg: #0A1A1D; --pw-card: #10262A; --pw-border: rgba(255,255,255,0.08); }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
.card { background: var(--pw-card); border: 1px solid var(--pw-border); }
.skeleton { position: relative; overflow: hidden; background: rgba(11,119,128,0.08); }
.dark .skeleton { background: rgba(255,255,255,0.06); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent); animation: shimmer 1.4s infinite; }
.dark .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.fade-in { animation: fadeIn .25s ease-out both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none;} }
.pop { animation: pop .3s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop { 0% { transform: scale(.7);} 100% { transform: scale(1);} }
.post-content a { color: #0B7780; font-weight: 600; }
.dark .post-content a { color: #6FC9CA; }
.post-content a:hover { text-decoration: underline; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
textarea { field-sizing: content; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.masonry { column-count: 1; column-gap: 1rem; }
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
.masonry > * { break-inside: avoid; margin-bottom: 1rem; }
.nav-active { color: #0B7780; }
.dark .nav-active { color: #6FC9CA; }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
input[type="file"] { display: none; }
.toast { pointer-events: auto; }
@media (max-width: 767px) { .hide-mobile { display: none !important; } }