*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#fff;
 background:linear-gradient(160deg,#4338ca 0%,#7c3aed 45%,#db2777 100%) fixed;min-height:100dvh;
 display:flex;flex-direction:column;align-items:center;
 padding:calc(env(safe-area-inset-top) + 28px) 20px calc(env(safe-area-inset-bottom) + 24px)}
header{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;margin-bottom:24px}
header img{width:44px;height:44px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
header h1{font-size:22px;font-weight:800;letter-spacing:-.3px}
header p{font-size:13px;opacity:.8}
main{width:100%;max-width:560px;display:flex;flex-direction:column;gap:16px}
.card{background:rgba(255,255,255,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:24px 20px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.center{text-align:center}
.emoji{font-size:56px;line-height:1;margin-bottom:12px}
h2{font-size:24px;font-weight:800;letter-spacing:-.4px;margin-bottom:8px}
.sub{font-size:16px;opacity:.88;line-height:1.45;margin-bottom:18px}
.btn{display:block;width:100%;border:0;border-radius:16px;padding:17px;font-size:18px;font-weight:700;cursor:pointer;
 background:#fff;color:#5b21b6;text-decoration:none;text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.2);transition:transform .1s}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.6}
input,textarea{width:100%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.15);color:#fff;border-radius:14px;
 padding:15px 16px;font-size:17px;margin-bottom:12px;outline:none;font-family:inherit}
textarea{min-height:110px;resize:vertical}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.7)}
input:focus,textarea:focus{border-color:#fff}
input.pin{text-align:center;font-size:28px;letter-spacing:10px}
.sizes{display:flex;gap:8px;margin-bottom:14px}
.sizes label{flex:1;text-align:center;padding:11px 6px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.2);cursor:pointer;font-weight:600}
.sizes input{display:none}
.sizes label:has(input:checked){background:#fff;color:#5b21b6}
#status,.msg{min-height:1.4em;font-size:15px;opacity:.95;margin-top:12px}
#result img{width:100%;border-radius:18px;display:block;box-shadow:0 14px 34px rgba(0,0,0,.3)}
#result .btn{margin-top:12px}
#history{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
#history img{width:100%;border-radius:10px;cursor:pointer;display:block}