body{margin:0;min-height:100vh;background:#0a0a1a}#root{min-height:100vh}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark: #0a0a1a;--bg-card: rgba(255, 255, 255, .05);--bg-card-hover: rgba(255, 255, 255, .08);--border: rgba(255, 255, 255, .1);--border-focus: rgba(139, 92, 246, .7);--text-primary: #f0f0ff;--text-secondary: rgba(240, 240, 255, .6);--text-muted: rgba(240, 240, 255, .35);--accent-1: #8b5cf6;--accent-2: #06b6d4;--accent-3: #ec4899;--gradient-main: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ec4899 100%);--gradient-btn: linear-gradient(135deg, #8b5cf6, #ec4899);--shadow-card: 0 8px 32px rgba(0, 0, 0, .4);--shadow-glow: 0 0 40px rgba(139, 92, 246, .3);--radius: 16px;--radius-sm: 10px;font-family:Segoe UI,system-ui,-apple-system,sans-serif}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--accent-1);border-radius:3px}.app{min-height:100vh;background:var(--bg-dark);background-image:radial-gradient(ellipse at 20% 20%,rgba(139,92,246,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(236,72,153,.15) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(6,182,212,.08) 0%,transparent 60%);color:var(--text-primary);position:relative;overflow-x:hidden;padding-bottom:60px}.particle-field{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.particle{position:absolute;border-radius:50%;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));animation:float linear infinite}@keyframes float{0%{transform:translateY(0) translate(0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:.5}to{transform:translateY(-100vh) translate(40px) rotate(360deg);opacity:0}}.header{position:relative;text-align:center;padding:60px 20px 40px;z-index:1}.header-glow{position:absolute;top:0;left:50%;transform:translate(-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(139,92,246,.25) 0%,transparent 70%);pointer-events:none;animation:pulse-glow 4s ease-in-out infinite}@keyframes pulse-glow{0%,to{opacity:.6;transform:translate(-50%) scale(1)}50%{opacity:1;transform:translate(-50%) scale(1.1)}}.logo-wrapper{display:inline-flex;align-items:center;gap:12px;animation:slide-down .8s cubic-bezier(.16,1,.3,1) both}@keyframes slide-down{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.logo-icon{font-size:2.4rem;animation:spin-slow 8s linear infinite}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.logo-text{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;letter-spacing:-1px;background:var(--gradient-main);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.logo-accent{font-style:italic}.tagline{margin-top:12px;color:var(--text-secondary);font-size:1rem;letter-spacing:.05em;animation:slide-down .8s .2s cubic-bezier(.16,1,.3,1) both}.main{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:24px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:28px;animation:card-enter .6s .3s cubic-bezier(.16,1,.3,1) both;transition:box-shadow .3s ease,border-color .3s ease}.card:hover{box-shadow:var(--shadow-card),var(--shadow-glow);border-color:#8b5cf633}@keyframes card-enter{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.field-group{display:flex;flex-direction:column;gap:10px}.field-label{font-size:.9rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:8px}.label-icon{font-size:1rem}.field-hint{font-size:.78rem;color:var(--text-muted);margin-top:4px}.input,.textarea{width:100%;background:#ffffff0f;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.95rem;padding:12px 16px;transition:border-color .25s,background .25s,box-shadow .25s;outline:none;resize:vertical}.input::placeholder,.textarea::placeholder{color:var(--text-muted)}.input:focus,.textarea:focus{border-color:var(--border-focus);background:#8b5cf60f;box-shadow:0 0 0 3px #8b5cf61f}.api-key-wrapper{position:relative;display:flex;align-items:center}.api-key-wrapper .input{padding-right:48px}.toggle-btn{position:absolute;right:12px;background:none;border:none;cursor:pointer;font-size:1.1rem;line-height:1;padding:4px;border-radius:6px;transition:background .2s;color:inherit}.toggle-btn:hover{background:#ffffff14}.option-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}@media(max-width:520px){.option-grid{grid-template-columns:repeat(2,1fr)}}.option-btn{background:#ffffff0a;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;transition:all .2s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.option-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-btn);opacity:0;transition:opacity .25s}.option-btn:hover{transform:translateY(-2px);border-color:#8b5cf666}.option-btn:active{transform:scale(.97)}.option-btn.active{border-color:var(--accent-1);background:#8b5cf626;box-shadow:0 0 16px #8b5cf640}.option-btn.active:before{opacity:.08}.option-icon{font-size:1.4rem;position:relative;z-index:1}.option-label{font-size:.82rem;font-weight:700;position:relative;z-index:1;letter-spacing:.02em}.option-desc{font-size:.72rem;color:var(--text-muted);position:relative;z-index:1}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}@media(max-width:600px){.level-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:380px){.level-grid{grid-template-columns:repeat(2,1fr)}}.level-btn{background:#ffffff0a;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.level-btn:hover{transform:translateY(-3px) scale(1.03);border-color:#ffffff40}.level-btn:active{transform:scale(.97)}.level-btn.active{border-color:var(--level-color, var(--accent-1));background:color-mix(in srgb,var(--level-color, var(--accent-1)) 15%,transparent);box-shadow:0 0 20px color-mix(in srgb,var(--level-color, var(--accent-1)) 40%,transparent)}.level-icon{font-size:1.5rem}.level-label{font-size:.78rem;font-weight:700;letter-spacing:.02em}.level-desc{font-size:.68rem;color:var(--text-muted);text-align:center}.error-box{background:#ef44441f;border:1px solid rgba(239,68,68,.4);border-radius:var(--radius-sm);color:#fca5a5;font-size:.88rem;padding:12px 16px;display:flex;align-items:center;gap:8px;animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.submit-btn{background:var(--gradient-btn);border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;font-size:1rem;font-weight:700;letter-spacing:.04em;padding:16px 24px;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.submit-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:opacity .25s}.submit-btn:hover:not(:disabled){transform:translateY(-2px) scale(1.01);box-shadow:0 8px 30px #8b5cf680}.submit-btn:hover:after{opacity:1}.submit-btn:active:not(:disabled){transform:scale(.98)}.submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.result-card{background:var(--bg-card);border:1px solid rgba(139,92,246,.3);border-radius:var(--radius);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-card),0 0 60px #8b5cf626;overflow:hidden;animation:result-enter .5s cubic-bezier(.16,1,.3,1) both}@keyframes result-enter{0%{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.result-header{padding:24px 28px 20px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#8b5cf61a,#ec489914)}.result-badges{display:flex;gap:8px;margin-bottom:10px}.badge{background:#ffffff14;border:1px solid var(--border);border-radius:20px;color:var(--text-secondary);font-size:.78rem;font-weight:600;padding:4px 12px}.result-topic{font-size:1.2rem;font-weight:700;color:var(--text-primary);background:var(--gradient-main);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.result-body{padding:28px}.result-text{line-height:1.8;font-size:.97rem;color:var(--text-primary);white-space:pre-wrap}.cursor{color:var(--accent-1);font-weight:100;animation:none}.cursor.hidden{opacity:0}.cursor.visible{opacity:1}.result-footer{padding:16px 28px 24px;display:flex;gap:12px;justify-content:flex-end}.copy-btn,.new-btn{background:#ffffff0f;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:.85rem;font-weight:600;padding:10px 18px;transition:all .2s;display:flex;align-items:center;gap:6px}.copy-btn:hover{background:#ffffff1a;color:var(--text-primary)}.new-btn{background:#8b5cf626;border-color:#8b5cf64d;color:#c4b5fd}.new-btn:hover{background:#8b5cf640;color:#fff;box-shadow:0 0 16px #8b5cf64d}.footer{position:relative;z-index:1;text-align:center;padding:40px 20px 20px;color:var(--text-muted);font-size:.82rem}