@import "https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap";@import "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap";:root{--primary:#70e693;--primary-dark:#2c6d34;--accent:#eef08b;--highlight:#43e97b;--bg:#0f0f1a;--surface:#1a1a2e;--surface-hover:#22223a;--border:#1636e954;--text:#fff;--muted:#a3a778;--font-display:"ZCOOL KuaiLe";--font-body:"Nunito"}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh}.app{max-width:760px;margin:0 auto;padding:60px 24px 80px}.app-header{text-align:center;margin-bottom:56px;animation:.6s both fadeUp}.app-header h1{font-family:var(--font-display);background:linear-gradient(150deg, var(--primary), var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:4rem;font-weight:900;line-height:1.2}.app-header p{color:var(--muted);font-size:1.1rem}.step-card{background:var(--surface);border:2px solid var(--border);border-radius:18px;margin-bottom:20px;padding:28px 32px;animation:.6s both fadeUp}.step-card:hover{border-color:var(--primary);background:var(--surface-hover)}.step-card:nth-child(2){animation-delay:.1s}.step-card:nth-child(3){animation-delay:.2s}.step-card:nth-child(4){animation-delay:.3s}.step-label{align-items:flex-start;gap:12px;margin-bottom:16px;display:flex}.step-number{background:linear-gradient(150deg, var(--primary), var(--accent));width:33px;height:33px;font-family:var(--font-display);border-radius:40%;flex-shrink:0;justify-content:center;align-items:center;font-size:.9rem;font-weight:700;display:flex}.step-label h2{font-family:var(--font-display);color:var(--text);font-size:1.1rem;font-weight:700}.step-label p{color:var(--muted);margin-top:2px;font-size:.85rem}label{color:var(--muted);margin-bottom:8px;font-size:.85rem;font-weight:500;display:block}input[type=file]{background:var(--border);border:1px solid var(--border);width:100%;color:var(--muted);font-family:var(--font-body);cursor:pointer;border-radius:10px;padding:12px 16px;font-size:.9rem;transition:border-color .2s}input[type=file]:hover{border-color:var(--primary);color:var(--text)}textarea{background:var(--border);border:1px solid var(--border);width:100%;color:var(--text);font-family:var(--font-body);resize:vertical;border-radius:10px;padding:14px 16px;font-size:.95rem;line-height:1.6;transition:border-color .2s,box-shadow .2s}textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6c63ff26}textarea::placeholder{color:var(--muted);opacity:.6}.generate-btn{background:linear-gradient(150deg, var(--primary), var(--accent));color:#fff;width:70%;font-family:var(--font-display);cursor:pointer;border:none;border-radius:14px;margin-top:12px;padding:18px;font-size:1.1rem;font-weight:700;transition:transform .2s,box-shadow .2s,opacity .2s;animation:.6s .4s both fadeUp}.generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 32px #6c63ff66}.generate-btn:active:not(:disabled){transform:translateY(0)}.generate-btn:disabled{opacity:.5;cursor:not-allowed}.generate-btn.loading{animation:1.2s ease-in-out infinite pulse}.output{background:var(--surface);border:1px solid var(--border);border-radius:16px;margin-top:40px;padding:32px;animation:.5s both fadeUp}.output h2{font-family:var(--font-display);background:linear-gradient(135deg, var(--highlight), var(--primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:20px;font-size:1.3rem;font-weight:700}.output pre{white-space:pre-wrap;word-wrap:break-word;font-family:var(--font-body);color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:10px;margin-bottom:20px;padding:24px;font-size:.95rem;line-height:1.8}.download-btn,.copy-btn,.nxt-btn{background:linear-gradient(150deg, var(--primary), var(--accent));color:#fff;width:50%;font-family:var(--font-display);cursor:pointer;border:none;border-radius:14px;margin-top:12px;padding:12px 18px;font-size:1.1rem;font-weight:700;transition:transform .2s,box-shadow .2s,opacity .2s;animation:.6s .4s both fadeUp}.download-btn{margin-left:20px}.copy-btn:hover,.download-btn:hover,.nxt-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px #6c63ff66}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}
