:root{--blue:#3b82f6;--cyan:#06b6d4;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--bg:#f8fafc}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:radial-gradient(1200px 500px at 50% -200px,rgba(6,182,212,.12),transparent),var(--bg);min-height:100vh}.wrap{max-width:640px;margin:0 auto;padding:3rem 1.5rem 5rem}.brand{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem}.brand img{width:40px;height:40px}.brand-name{font-weight:700;font-size:1.15rem}.brand-sub{color:var(--muted);font-size:.85rem}h1{font-size:1.9rem;line-height:1.2;margin:0 0 .5rem;background:linear-gradient(120deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}.lead{color:var(--muted);margin:0 0 2rem}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.75rem;box-shadow:0 10px 30px rgba(2,6,23,.05)}label{display:block;font-weight:600;font-size:.9rem;margin:1rem 0 .4rem}label:first-child{margin-top:0}.hint{font-weight:400;color:var(--muted);font-size:.8rem}input,textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--line);border-radius:10px;font-size:.95rem;font-family:inherit;background:#fff}input:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}button{margin-top:1.5rem;width:100%;padding:.8rem 1rem;border:0;border-radius:10px;font-size:1rem;font-weight:600;color:#fff;cursor:pointer;background:linear-gradient(120deg,var(--blue),var(--cyan))}button:disabled{opacity:.6;cursor:default}.result{margin-top:1.5rem}.code{display:flex;align-items:center;gap:.5rem;justify-content:space-between;background:var(--ink);color:#e2e8f0;padding:.75rem .9rem;border-radius:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;word-break:break-all}.code button{margin:0;width:auto;padding:.4rem .7rem;font-size:.8rem;background:rgba(255,255,255,.12)}.note{color:var(--muted);font-size:.85rem;margin-top:.75rem}.error{color:#dc2626;font-size:.9rem;margin-top:1rem}.ok{color:#059669;font-weight:600}a{color:var(--blue)}.steps{font-size:.9rem;color:var(--muted);line-height:1.6}.steps code{background:#eef2f7;padding:.1rem .35rem;border-radius:5px}