*{box-sizing:border-box;margin:0;padding:0}body{color:#f1f5f9;background:#0a0f1e;justify-content:center;align-items:center;min-height:100vh;padding:32px 16px;font-family:Inter,system-ui,sans-serif;display:flex}#app{width:100%;max-width:860px}.page{flex-direction:column;align-items:center;gap:36px;display:flex}.page-title{color:#38bdf8;letter-spacing:.12em;text-transform:uppercase;font-size:1.1rem;font-weight:700}.form-card{background:#131c2f;border:1px solid #1e3a5f;border-radius:16px;flex-direction:column;gap:20px;width:100%;padding:32px;display:flex}.field{flex-direction:column;gap:8px;display:flex}label{color:#64748b;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:600}input{color:#f1f5f9;background:#0a0f1e;border:1px solid #1e3a5f;border-radius:8px;outline:none;padding:13px 16px;font-family:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}input:focus{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf826}input::placeholder{color:#334155}.btn-generate{color:#0a0f1e;cursor:pointer;background:#38bdf8;border:none;border-radius:8px;align-self:flex-start;padding:14px 32px;font-family:inherit;font-size:.95rem;font-weight:700;transition:background .2s,transform .1s}.btn-generate:hover{background:#7dd3fc}.btn-generate:active{transform:scale(.97)}.preview-section{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.preview-section canvas{border:1px solid #1e3a5f;border-radius:12px;width:100%;height:auto;display:block;box-shadow:0 20px 60px #00000080}.btn-download{color:#fff;cursor:pointer;background:#22c55e;border:none;border-radius:8px;padding:13px 32px;font-family:inherit;font-size:.95rem;font-weight:700;transition:background .2s,transform .1s}.btn-download:hover{background:#16a34a}.btn-download:active{transform:scale(.97)}.loader-section{flex-direction:column;align-items:center;gap:16px;padding:24px;display:flex}.loader-spinner{border:3px solid #1e3a5f;border-top-color:#38bdf8;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loader-text{color:#64748b;letter-spacing:.04em;font-size:.9rem}
