} .container{ width:95%; max-width:1400px; margin:20px auto; } .header{ background:#0757d5; color:#fff; padding:18px; font-size:30px; font-weight:bold; text-align:center; border-radius:10px; margin-bottom:20px; } .main{ display:grid; grid-template-columns:420px 1fr; gap:20px; } .left{ background:#fff; padding:20px; border-radius:10px; box-shadow:0 5px 20px rgba(0,0,0,.15); } .right{ background:#fff; padding:20px; border-radius:10px; box-shadow:0 5px 20px rgba(0,0,0,.15); } h2{ margin-bottom:10px; color:#0757d5; } textarea{ width:100%; height:650px; resize:none; padding:15px; font-size:15px; border:1px solid #ccc; border-radius:8px; line-height:1.8; } .buttons{ margin-top:15px; display:flex; gap:10px; flex-wrap:wrap; } button{ border:none; padding:12px 18px; border-radius:7px; font-weight:bold; cursor:pointer; color:#fff; } #generate{ background:#0757d5; } #copy{ background:#16a34a; } #download{ background:#dc2626; } #clear{ background:#555; } .preview{ border:1px solid #ddd; padding:20px; min-height:650px; background:#fff; } @media(max-width:900px){ .main{ grid-template-columns:1fr; } textarea{ height:350px; } .preview{ min-height:350px; } }