*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}.page{position:relative;min-height:100vh;max-width:480px;margin:0 auto;padding:0 22px 40px;background:#f5f7fb;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;color:#16223d}.deco{position:absolute;border-radius:50%;pointer-events:none;z-index:0}.deco-a{width:240px;height:240px;top:-70px;right:-80px;background:radial-gradient(circle,rgba(143,179,255,.32),transparent 65%)}.deco-b{width:280px;height:280px;bottom:-60px;left:-100px;background:radial-gradient(circle,rgba(120,196,255,.2),transparent 65%)}.topbar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:18px 0 6px;animation:rise .55s cubic-bezier(.22,.61,.36,1) both}.icon-btn{width:38px;height:38px;border:none;border-radius:12px;background:#fff;color:#42536f;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #1f4fd80f;transition:transform .15s ease,box-shadow .2s ease}.icon-btn:active{transform:scale(.92);box-shadow:0 2px 6px #1f4fd814}.topbar-title{position:absolute;left:50%;transform:translate(-50%);font-size:15px;font-weight:600;color:#7c8aa8;letter-spacing:.5px}.topbar-spacer{width:38px}.hero{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin:16px 2px 24px;animation:rise .55s cubic-bezier(.22,.61,.36,1) .06s both}.hero-title{margin:0 0 6px;font-size:30px;font-weight:800;letter-spacing:1px;color:#16223d;line-height:1.2}.hero-sub{margin:0;font-size:14px;font-weight:500;color:#93a0bb;letter-spacing:.8px}.hero-art{width:96px;height:96px;flex-shrink:0;transform:rotate(-4deg);animation:floaty 5s ease-in-out infinite}.hero-art svg{width:100%;height:100%}.preview-area{position:relative;z-index:1;animation:rise .55s cubic-bezier(.22,.61,.36,1) .14s both}.card-stage{height:318px;display:flex;align-items:center;justify-content:center}.bankcard{--cw: 300px;--ch: 189px;position:relative;width:var(--cw);height:var(--ch);max-width:calc(100vw - 56px);border-radius:18px;overflow:hidden;box-shadow:0 20px 44px #1f4fd82e,0 6px 16px #1f4fd814;transition:width .5s cubic-bezier(.25,.8,.35,1),height .5s cubic-bezier(.25,.8,.35,1),border-radius .4s ease,box-shadow .4s ease}.bankcard.vertical{--cw: 176px;--ch: 279px;border-radius:22px;box-shadow:0 22px 48px #1f4fd833,0 8px 18px #1f4fd814}.card-photo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;animation:fadeIn .45s ease both}.card-logo{position:absolute;top:7%;left:6%;width:32px;height:32px;color:#ffffffeb;filter:drop-shadow(0 1px 2px rgba(20,30,60,.35));transition:all .4s ease}.card-logo svg{width:100%;height:100%}.bankcard.vertical .card-logo{width:26px;height:26px}.card-chip{position:absolute;left:6%;bottom:7%;width:30px;height:22px;border-radius:5px;background:linear-gradient(135deg,#f6d78b,#d9ab52);box-shadow:inset 0 1px 1px #ffffff8c;transition:all .4s ease}.card-chip:before{content:"";position:absolute;top:4px;right:5px;bottom:4px;left:5px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(140,95,20,.5) 0 1px,transparent 1px 5px)}.bankcard.vertical .card-chip{width:26px;height:19px}.card-badge{position:absolute;right:6%;bottom:7%;padding:4px 8px;border-radius:6px;background:#101a3080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:#fff;font-size:9px;font-weight:700;letter-spacing:1.6px;transition:all .4s ease}.card-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#e3ecff,#c9d9ff 55%,#b8cdff);animation:fadeIn .45s ease both}.ph-art{height:56%;aspect-ratio:1;filter:drop-shadow(0 6px 14px rgba(46,90,180,.12))}.ph-tip{margin-top:12px;max-width:94%;display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:#ffffff94;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#6f84b8;font-size:13px;font-weight:500;letter-spacing:.4px;white-space:nowrap}.ph-icon{width:16px;height:16px;color:#5b7cc4}.segmented{display:flex;justify-content:center;margin-top:6px;animation:rise .55s cubic-bezier(.22,.61,.36,1) .22s both}.seg-btn{border:none;background:#eef1f7;color:#7b88a6;font-size:14px;font-weight:600;letter-spacing:1px;padding:10px 30px;border-radius:999px;cursor:pointer;transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .12s ease}.seg-btn+.seg-btn{margin-left:6px}.seg-btn.active{color:#ff3b30;background:#ffeceb;box-shadow:0 3px 10px #ff3b3029}.seg-btn:active{transform:scale(.96)}.status{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;padding:12px 16px;border-radius:14px;font-size:14px;font-weight:600;letter-spacing:.4px}.status.success{background:#e6f8ef;color:#14925a}.status.error{background:#ffeceb;color:#d13b33}.actions{position:relative;z-index:1;margin-top:18px;animation:rise .55s cubic-bezier(.22,.61,.36,1) .3s both}.btn{width:100%;border:none;border-radius:18px;padding:16px;font-size:16px;font-weight:600;letter-spacing:1.5px;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease;-webkit-user-select:none;user-select:none}.btn+.btn{margin-top:12px}.btn:active{transform:scale(.97)}.btn-secondary{display:flex;align-items:center;justify-content:center;gap:8px;background:#e7efff;color:#1f4fd8}.btn-secondary:active{box-shadow:inset 0 3px 8px #1f4fd81f}.btn-primary{background:linear-gradient(180deg,#2b5cff,#1f4fd8);color:#fff;box-shadow:0 12px 26px #1f4fd847}.btn-primary:active{box-shadow:0 6px 14px #1f4fd83d}.btn-primary:disabled{opacity:.45;filter:saturate(.55);cursor:not-allowed;box-shadow:none}.file-input{display:none}.footnote{position:relative;z-index:1;margin:22px 0 0;text-align:center;font-size:12px;color:#aab6d0;letter-spacing:.5px;animation:rise .55s cubic-bezier(.22,.61,.36,1) .38s both}.error-state{position:relative;z-index:1;display:flex;justify-content:center;padding-top:11vh;animation:rise .6s cubic-bezier(.22,.61,.36,1) .1s both}.error-card{width:100%;max-width:320px;text-align:center;background:#fff;border:1px solid #e8edf7;border-radius:24px;padding:42px 32px 38px;box-shadow:0 18px 44px #1f4fd814}.qr-wrap{position:relative;width:84px;height:84px;margin:0 auto 22px}.qr-wrap svg{width:100%;height:100%}.qr-badge{position:absolute;right:-6px;bottom:-6px;width:26px;height:26px;border-radius:50%;background:#ff3b30;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px #ff3b3059}.error-title{margin:0 0 8px;font-size:18px;font-weight:700;color:#16223d;letter-spacing:.5px}.error-desc{margin:0;font-size:14px;color:#93a0bb;letter-spacing:.6px}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes floaty{0%,to{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-5px)}}.pop-enter-active{transition:all .3s ease}.pop-enter-from{opacity:0;transform:translateY(8px) scale(.97)}@media (max-width: 360px){.bankcard{--cw: 260px;--ch: 164px}.bankcard.vertical{--cw: 152px;--ch: 241px}.card-stage{height:286px}.hero-title{font-size:27px}.hero-art{width:84px;height:84px}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%}body{background:#f5f7fb;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Helvetica Neue,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}#app{width:100%;min-height:100%}