@media (max-width: 860px) .builder-grid grid-template-columns: 1fr; gap: 1.5rem; .hero h1 font-size: 2rem; body padding: 1.2rem;
/* main container */ .app-container max-width: 1400px; margin: 0 auto; @media (max-width: 860px)
.post-footer padding: 1rem 1.5rem 1.3rem; border-top: 1px solid #edf2f7; font-size: 0.75rem; color: #6b8a9e; display: flex; justify-content: space-between; align-items: center; background: #fbfdff; .hero h1 font-size: 2rem
<script> // DOM elements const titleInput = document.getElementById('postTitle'); const categoryInput = document.getElementById('postCategory'); const authorInput = document.getElementById('postAuthor'); const dateInput = document.getElementById('postDate'); const contentTextarea = document.getElementById('postContent'); const tagsInput = document.getElementById('postTags'); const generateBtn = document.getElementById('generatePostBtn'); const previewContainer = document.getElementById('previewContainer'); const toast = document.getElementById('toastMsg'); body padding: 1.2rem
// Helper: show temporary toast function showToast(message = '📋 Copied to clipboard!') toast.textContent = message; toast.style.opacity = '1'; setTimeout(() => toast.style.opacity = '0'; , 2000);
.copy-btn:hover background: #eef3fc; border-color: #2d6a9f;
label display: block; font-weight: 600; margin-bottom: 0.5rem; color: #1f3b4c; font-size: 0.85rem; letter-spacing: 0.3px; text-transform: uppercase;