*{margin:0;padding:0;box-sizing:border-box}html,body{height:calc(var(--vh, 1vh) * 100);flex-direction:column}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#f8fafc,#e9ecf3);min-height:calc(var(--vh, 1vh) * 100);display:flex;align-items:center;justify-content:center;color:#333}.container{margin-top:auto;margin-bottom:auto;background:#ffffffb3;padding:2rem;border-radius:16px;box-shadow:0 20px 40px #00000014;text-align:center;max-width:400px;width:90%;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.4)}h1{margin-bottom:2rem;color:#2d3748;font-weight:600;font-size:1.8rem}.qr-container{margin-bottom:2rem}#qrcode{display:flex;justify-content:center;margin-bottom:1rem}#qrcode canvas{border-radius:8px;box-shadow:0 4px 12px #0000001a}.code-text{font-size:1.2rem;font-weight:600;color:#4a5568;font-family:Courier New,monospace;background:#f7fafc;padding:.5rem 1rem;border-radius:6px;border:2px solid #e2e8f0}.generate-btn{background:#ffffff80;color:#5a5a5a;border:1px solid rgba(255,255,255,.6);padding:.75rem;border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 16px #78787814;display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto;backdrop-filter:blur(8px) saturate(180%);-webkit-backdrop-filter:blur(8px) saturate(180%)}.generate-btn svg{width:100%;height:100%;display:block;margin:0;padding:0;position:relative}.generate-btn:hover{background:#ffffffb3;color:#222;transform:translateY(-2px) scale(1.05);box-shadow:0 6px 24px #7878781f}.generate-btn:active{transform:translateY(0) scale(1)}.qr-title{margin-bottom:1.2rem;font-size:1.3rem;font-weight:600;color:#3a3a3a;letter-spacing:.04em;text-align:center;text-shadow:0 2px 8px rgba(255,255,255,.2);background:#ffffff4d;border-radius:8px;padding:.4rem 0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}@media (max-width: 480px){body{padding:1rem;min-height:calc(var(--vh, 1vh) * 100)}.container{padding:1.5rem;margin-top:auto;margin-bottom:auto;width:100%}h1{font-size:1.5rem}.code-text{font-size:1rem}}footer{text-align:center;font-size:.6rem;color:#888;margin-top:auto;margin-right:auto}