.page-header{background:var(--card-bg);border-bottom:1px solid var(--gray-200);padding:4rem 0 3rem}.page-header h1{margin-bottom:1rem;font-size:2.5rem}.page-header p{color:var(--gray-600);max-width:600px;font-size:1.1rem}.free-badge{background:var(--green-light);border:1px solid var(--green);border-radius:12px;align-items:center;gap:.5rem;margin-top:1.5rem;padding:.5rem 1rem;display:inline-flex}.free-badge svg{width:18px;height:18px;color:var(--green)}.free-badge p{color:#065f46;margin:0;font-size:.9rem}[data-theme=dark] .free-badge p{color:#6ee7b7}.generator-container{grid-template-columns:1fr 1fr;gap:2rem;padding:3rem 0;display:grid}.input-section,.output-section{background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;padding:2rem}.form-group{margin-bottom:1.5rem}.form-group label{margin-bottom:.5rem;font-size:.9rem;font-weight:600;display:block}.form-group input,.form-group textarea{border:1px solid var(--card-border);background:var(--bg);width:100%;color:var(--primary);border-radius:10px;padding:.75rem 1rem;font-family:inherit;font-size:.95rem;transition:border .2s}.form-group input:focus,.form-group textarea:focus{border-color:var(--accent);outline:none}.form-group textarea{resize:vertical;min-height:120px}.tone-selector{flex-wrap:wrap;gap:.5rem;display:flex}.tone-btn{border:2px solid var(--card-border);background:var(--card-bg);cursor:pointer;color:var(--primary);border-radius:100px;padding:.5rem 1rem;font-size:.85rem;transition:all .2s}.tone-btn:hover{border-color:var(--accent)}.tone-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.generate-btn{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:1rem;font-size:1rem;font-weight:600;transition:all .3s;display:flex}.generate-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #6366f14d}.generate-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.download-secondary-btn{background:var(--card-bg);width:100%;color:var(--primary);border:2px solid var(--accent);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;margin-top:.75rem;padding:.85rem;font-size:.95rem;font-weight:600;transition:all .3s;display:flex}.download-secondary-btn:hover{background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 8px 25px #6366f14d}.download-secondary-btn svg{width:18px;height:18px}.generate-btn .loading,.generate-btn.is-loading .text{display:none}.generate-btn.is-loading .loading{align-items:center;gap:.5rem;display:flex}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.output-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.output-header h3{font-size:1.1rem}.output-actions{gap:.5rem;display:flex}.output-actions button{border:1px solid var(--card-border);background:var(--card-bg);cursor:pointer;color:var(--primary);border-radius:8px;padding:.5rem 1rem;font-size:.85rem;transition:all .2s}.output-actions button:hover{border-color:var(--accent);color:var(--accent)}.download-btn{align-items:center;gap:.5rem;font-weight:600;display:flex;background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;border:none!important;padding:.6rem 1.25rem!important}.download-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #6366f14d}.download-btn svg{width:16px;height:16px}.letter-output{border:1px solid var(--card-border);white-space:pre-wrap;background:var(--bg);border-radius:12px;min-height:400px;padding:1.5rem;font-size:.95rem;line-height:1.8}.placeholder{color:var(--gray-400);text-align:center;padding:4rem 2rem}#letterContent{font-family:Inter,sans-serif}footer{background:var(--footer-bg);color:#fff;padding:5rem 0 0;position:relative}footer:before{content:"";background:linear-gradient(90deg,transparent,var(--accent),transparent);height:1px;position:absolute;top:0;left:0;right:0}.footer-main{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:3rem;padding-bottom:4rem;display:grid}.footer-brand p{color:#a1a1aa;margin:1.25rem 0;font-size:.95rem;line-height:1.8}.footer-social{gap:.75rem;margin-top:1.5rem;display:flex}.footer-social a{background:#27272a;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;transition:all .3s;display:flex}.footer-social a:hover{background:var(--accent);transform:translateY(-3px)}.footer-social svg{color:#a1a1aa;width:18px;height:18px}.footer-social a:hover svg{color:#fff}.footer-column h4{text-transform:uppercase;letter-spacing:1px;color:#fff;margin-bottom:1.5rem;font-size:.85rem;font-weight:700}.footer-column ul{list-style:none}.footer-column li{margin-bottom:.85rem}.footer-column a{color:#a1a1aa;font-size:.95rem;transition:all .2s}.footer-column a:hover{color:#fff;padding-left:5px}.footer-bottom{border-top:1px solid #27272a;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:2rem 0;display:flex}.footer-bottom p{color:#71717a;font-size:.9rem}.footer-bottom-links{gap:2rem;display:flex}.footer-bottom-links a{color:#71717a;font-size:.9rem;transition:color .2s}.footer-bottom-links a:hover{color:#fff}.made-with{color:#71717a;align-items:center;gap:.5rem;font-size:.9rem;display:flex}.made-with .heart{color:#ef4444;animation:1s infinite pulse}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@media (max-width:768px){.generator-container{grid-template-columns:1fr}.nav-links{display:none}.footer-main{text-align:center;grid-template-columns:1fr}.footer-social{justify-content:center}.footer-bottom{text-align:center;flex-direction:column}}