/* Smooth fade-in for flash messages */
.flash-msg {
    animation: flash-in 0.3s ease-out, flash-out 0.3s ease-in 4.7s forwards;
}

@keyframes flash-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes flash-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Prose styles for blog posts (Tailwind Typography-like) */
.prose h1 { font-size: 2.25rem; margin-top: 0; margin-bottom: 0.8em; line-height: 1.2; }
.prose h2 { font-size: 1.5rem; margin-top: 2em; margin-bottom: 0.8em; line-height: 1.3; }
.prose h3 { font-size: 1.25rem; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.4; }
.prose p { margin-bottom: 1.25em; }
.prose ul, .prose ol { margin-bottom: 1.25em; padding-left: 1.5em; }
.prose li { margin-bottom: 0.5em; }
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose blockquote { border-left: 4px solid; padding-left: 1em; margin: 1.5em 0; font-style: italic; }
.prose pre { padding: 1.25em; overflow-x: auto; margin: 1.5em 0; }
.prose pre code { background: none; padding: 0; }
.prose img { margin: 1.5em 0; }
.prose hr { border: none; border-top: 1px solid #e5e7eb; margin: 2em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.prose th, .prose td { border: 1px solid #e5e7eb; padding: 0.75em 1em; text-align: left; }
.prose th { background: #f9fafb; font-weight: 600; }