.card-header h2 i font-size: 1.4rem;
.card-header background: #ffffffdd; padding: 1.3rem 1.8rem; border-bottom: 1px solid #eef2f8;
.toast-msg position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: #1e2f3c; color: white; padding: 0.7rem 1.6rem; border-radius: 60px; font-size: 0.85rem; font-weight: 500; z-index: 1000; opacity: 0; transition: opacity 0.25s; pointer-events: none; backdrop-filter: blur(8px); background: #1f3b4cee; box-shadow: 0 6px 14px rgba(0,0,0,0.2); .card-header h2 i font-size: 1.4rem
/* header section */ .hero text-align: center; margin-bottom: 2.5rem;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Http‑— generate a post | Smart Post Builder</title> <style> * margin: 0; padding: 0; box-sizing: border-box; .card-header background: #ffffffdd
.post-header background: #f8fafd; padding: 1.2rem 1.5rem; border-bottom: 2px solid #e2e8f0;
.hero h1 span background: #0b2b3b; color: white; font-size: 1.4rem; padding: 0.2rem 0.8rem; border-radius: 60px; background: linear-gradient(120deg, #1e4668, #0f2c44); box-shadow: 0 2px 6px rgba(0,0,0,0.1); padding: 1.3rem 1.8rem
/* main container */ .app-container max-width: 1400px; margin: 0 auto;
.tag-list display: flex; flex-wrap: wrap; gap: 0.5rem;