*{box-sizing:border-box}
:root{--r:22px;--ease:cubic-bezier(.2,.9,.3,1.3)}
html,body{margin:0;min-height:100%}
body{font:16px/1.45 "Avenir Next","Nunito","Segoe UI",system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,var(--a),var(--b),var(--a2,var(--a)));background-size:300% 300%;animation:bgmove 18s ease infinite;-webkit-font-smoothing:antialiased}
@keyframes bgmove{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.blob{position:fixed;border-radius:50%;filter:blur(60px);opacity:.45;z-index:-1;animation:float 14s ease-in-out infinite}
@keyframes float{50%{transform:translate(30px,-40px) scale(1.15)}}
header.top{display:flex;align-items:center;gap:12px;padding:18px 18px 6px;max-width:560px;margin:auto}
header.top img{width:44px;height:44px;border-radius:12px;box-shadow:0 6px 18px #0004}
header.top h1{font-size:24px;margin:0;font-weight:900;letter-spacing:-.5px;flex:1;text-shadow:0 2px 10px #0003}
.icon-btn{width:44px;height:44px;border-radius:14px;border:0;background:#ffffff2a;color:#fff;font-size:20px;backdrop-filter:blur(10px);cursor:pointer}
main{max-width:560px;margin:auto;padding:10px 16px 40px}
.card{background:#ffffff1f;border:1px solid #ffffff33;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:var(--r);padding:18px;margin:14px 0;box-shadow:0 12px 40px #0002;animation:pop .45s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
.btn{font:inherit;font-weight:800;border:0;border-radius:16px;padding:13px 20px;cursor:pointer;color:var(--ink,#111);background:var(--acc,#fff);box-shadow:0 6px 0 #0003,0 10px 24px #0002;transition:transform .15s var(--ease),box-shadow .15s}
.btn:active{transform:translateY(4px) scale(.97);box-shadow:0 2px 0 #0003}
.btn.ghost{background:#ffffff26;color:#fff;box-shadow:none}
.btn:focus-visible,.icon-btn:focus-visible,input:focus-visible,select:focus-visible,.tap:focus-visible{outline:3px solid #fff;outline-offset:2px}
input,select{font:inherit;padding:12px 14px;border-radius:14px;border:2px solid #ffffff40;background:#00000026;color:#fff}
input::placeholder{color:#ffffffa0}
select option{color:#000}
.muted{opacity:.78;font-size:13px}
.foot{text-align:center;font-size:12px;opacity:.7;padding:10px 0 28px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}