:root{--bg: #f4f6f8;--card: #ffffff;--text: #000000;--accent: #2563eb}[data-theme=dark]{--bg: #0f172a;--card: #1e293b;--text: #f8fafc;--accent: #38bdf8}body{margin:0;background:var(--bg);color:var(--text);font-family:Segoe UI,Arial,sans-serif}button{cursor:pointer;border-radius:8px;border:none;font-size:14px}textarea{font-family:inherit}.card{background:var(--card);padding:20px;border-radius:12px;margin-top:20px}@media(max-width:768px){body{font-size:15px}.card{padding:15px}textarea{height:90px;font-size:15px}}@media(max-width:480px){body{font-size:14px}.card{padding:12px}textarea{height:80px}}.textarea{width:100%;height:100px;padding:12px;font-size:16px;border-radius:10px;border:1px solid #ccc;resize:none}.input-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}.submit-btn{background:var(--accent);color:#fff;padding:10px 18px;border-radius:8px;border:none;cursor:pointer}.sample-box{margin-top:20px}.sample-title{font-weight:600;margin-bottom:8px}.sample-grid{display:flex;flex-wrap:wrap;gap:8px}.sample-btn{background:#f1f5f9;border:none;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:14px}.sample-btn:hover{background:#e2e8f0}@media(max-width:600px){.textarea{height:80px}.sample-btn{width:100%;text-align:left}}