@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);--button-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--glass-bg: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .25);--text-primary: #1a1a2e;--text-secondary: #4a4a6a;--shadow-glow: 0 8px 32px rgba(102, 126, 234, .3);--shadow-soft: 0 4px 16px rgba(0, 0, 0, .1)}*{box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;margin:0;padding:20px;min-height:100vh;background-size:cover;background-position:center;background-attachment:fixed;position:relative}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eeab3,#764ba299,#f093fb80);z-index:-1}@keyframes fadeInUp{0%{opacity:0}to{opacity:1}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes pulse{0%,to{box-shadow:0 0 20px #667eea66}50%{box-shadow:0 0 30px #764ba299}}.webpage{max-width:700px;margin:0 auto}header{text-align:center;margin:40px 0 30px}header h1{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:700;letter-spacing:-.01em;color:#fffffffa;display:inline-block;padding:10px 22px;border-radius:18px;background:#ffffff2e;border:1px solid rgba(255,255,255,.3);box-shadow:0 6px 20px #0000002e;text-shadow:0 1px 8px rgba(0,0,0,.25);margin:0 0 16px}.subtitle{display:inline-block;background:#ffffff26;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);padding:8px 20px;border-radius:50px;color:#fffffff2;font-size:.95rem;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.15)}.container{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:24px;padding:40px;box-shadow:var(--shadow-glow)}#generator-form{display:flex;flex-direction:column;align-items:center;gap:20px}.form-row{display:flex;justify-content:center;align-items:stretch;gap:16px}.input-group{display:flex;align-items:center;gap:10px;background:#fff3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);padding:14px 20px;border-radius:14px;box-shadow:0 4px 16px #0000001a;transition:all .3s ease}.input-group:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:0 6px 20px #667eea40;border-color:#ffffff80}label{font-size:.95rem;font-weight:500;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2);margin:0;white-space:nowrap}input[type=number]{width:65px;padding:8px 12px;font-size:1rem;font-family:inherit;border:1px solid rgba(255,255,255,.4);border-radius:8px;background:#ffffff4d;color:var(--text-primary);transition:all .3s ease}input[type=number]:focus{outline:none;border-color:#fffc;box-shadow:0 0 0 3px #fff3;background:#fff}input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:#f0e6ff}.button-row{display:flex;width:100%;max-width:340px}button{flex:1;background:#fff3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);color:#fff;font-family:inherit;font-size:1.05rem;font-weight:600;padding:14px 24px;border-radius:14px;cursor:pointer;transition:all .3s ease;text-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 4px 16px #0000001a}button:hover{background:#ffffff4d;transform:translateY(-3px);box-shadow:0 8px 25px #667eea59;border-color:#ffffff80}button:active{transform:translateY(-1px)}.output-section{margin-top:24px}.output-label{display:inline-block;background:#ffffff26;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:500;color:#fffffff2;margin-bottom:14px;text-shadow:0 1px 2px rgba(0,0,0,.15)}#generated-text{width:100%;height:300px;padding:20px 24px;font-family:Inter,sans-serif;font-size:.95rem;line-height:1.8;color:#2d3748;background:#ffffffd9;border:1px solid rgba(255,255,255,.5);border-radius:16px;box-shadow:0 4px 20px #0000001a;resize:none;overflow:auto;transition:all .3s ease}#generated-text:focus{outline:none;background:#ffffff4d;box-shadow:0 4px 20px #0000001a,0 0 0 3px #ffffff4d}#generated-text::placeholder{color:#718096;opacity:.8}#generated-text::-webkit-scrollbar{width:8px}#generated-text::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}#generated-text::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px}@media (max-width: 600px){body{padding:15px}.container{padding:25px;border-radius:20px}.form-row{flex-direction:column;gap:15px}.input-group{width:100%;justify-content:center}button{width:100%}}.textarea-wrapper{position:relative;width:100%}.copy-btn{position:absolute;top:10px;right:10px;background:#fff6;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.5);border-radius:8px;width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:#4a5568;box-shadow:0 2px 8px #0000000d;z-index:10}.copy-btn:hover{background:#ffffffb3;transform:translateY(-2px);color:#2d3748}.copy-btn:active{transform:translateY(0)}.copy-btn svg{width:18px;height:18px;stroke-width:2}.copy-btn.copied{background:#48bb7833;color:#2f855a;border-color:#48bb7866}
