.app {
--input-height:60px;
}

.app header .wallet { font-weight:600; margin:-6px 0 -6px auto; display:flex; align-items:center; column-gap:9px; background:#f1f2f3; padding:8px 16px 8px 20px; border-radius:99px; font-size:15px; line-height:20px; cursor:pointer; user-select:none; white-space:nowrap; }
.app header .wallet:focus-visible { outline:2px solid #000; outline-offset:2px; }
.app header .wallet:hover { background:#e7e8e9; }
.app header .wallet:active { background:#f1f2f3; transform:scale(97%); }
.app header .wallet .avatar { border-radius:50%; overflow:hidden; margin-left:-6px; }
.app header .wallet .address { margin:0 0 -1px; }

.app main { padding-top:80px; padding-bottom:120px; width:100%; max-width:100%; }

.app h1 { font-size:28px; line-height:36px; margin-bottom:30px; }

.app .form { border-radius:14px; padding:44px; box-shadow:0 0 30px rgba(0,0,0,0.12); width:100%; max-width:100%; }

.app .form h3 { font-size:16px; line-height:22px; margin-bottom:12px; font-weight:600; }

.app .has-pick { margin-bottom:20px; display:flex; width:100%; max-width:100%; }
.app .has-pick > p { flex:1 1 auto; min-width:0; margin:0 -1px 0 0; }
.app .has-pick > p > input { width:100%; min-width:0; font-size:24px; height:var(--input-height); padding:0 14px; border-radius:7px; border-top-right-radius:0; border-bottom-right-radius:0; position:relative; z-index:2; border-right-color:#eee; }
.app .has-pick > p > input:focus { z-index:5; }

.app .pick { margin-bottom:20px; }
.app .pick button { height:var(--input-height); padding:0 15px 0 16px; column-gap:14px; border-radius:7px; }
.app .pick button > div { display:flex; align-items:center; column-gap:11px; overflow:visible; }
.app .pick button .asset { width:32px; height:32px; flex-shrink:0; }
.app .pick button p.title { margin-bottom:0; }
.app .pick button p.title b { display:block; font-size:18px; line-height:24px; }
.app .pick button p.title i { display:block; font-size:14px; line-height:20px; font-style:normal; color:rgba(0,0,0,.6); }
.app .pick ul { padding:8px 0; max-height:calc(52px * 6 + 16px); white-space:nowrap; border-radius:7px; }
.app .pick#from_pick ul { max-height:calc(52px * 6 + 8px); }
.app .pick ul li { padding:4px 17px; display:flex; align-items:center; column-gap:11px; }
.app .pick ul li .asset { width:32px; height:32px; flex-shrink:0; }
.app .pick ul li p.title { margin-bottom:0; }
.app .pick ul li p.title b { display:block; font-size:18px; line-height:24px; }
.app .pick ul li p.title i { display:block; font-size:14px; line-height:20px; font-style:normal; color:rgba(0,0,0,.6); }

.app .has-pick .pick { min-width:180px; flex-shrink:0; margin-bottom:0; }
.app .has-pick .pick:hover, .app .has-pick .pick.focus, .app .has-pick .pick.s { z-index:3; }
.app .has-pick .pick button { border-top-left-radius:0; border-bottom-left-radius:0; }

.app p.balance { font-size:14px; text-align:right; margin-top:-5px; }
.app p.balance + h3 { margin-top:-20px; }
.app #to_pick + p.balance.invisible { margin-bottom:-6px; }

.app .form .info { padding-top:6px; margin-bottom:16px; width:100%; }
.app .form .info li { display:flex; justify-content:space-between; }
.app .form .info li span { font-weight:600; }

.app .form p.button.vivid { padding-top:16px; width:100%; }
.app .form p.button.vivid button { width:100%; font-size:20px; line-height:58px; border-radius:99px; }
.app .form p.button.vivid button:focus-visible { outline-offset:3px; }
.app .form p.button.vivid button:active { transform:scale(97%); }

.app .form p.cancel { text-align:center; margin:30px 0 0; }
.app .form p.cancel a { color:rgba(0,0,0,.4); }
.app .form p.cancel a:hover { color:inherit; }

.app #swap_form .error { font-size:14px; word-wrap:break-word; margin-top:40px; border-top:1px solid #ddd; padding-top:30px; font-family: monospace; }

.app h2 { text-align:center; font-size:18px; line-height:26px; margin-bottom:20px; font-family:inherit; }

.app #confirm_form .amount { display:flex; align-items:center; justify-content:space-between; column-gap:20px; padding:10px 0; width:100%; }
.app #confirm_form .amount p { margin-bottom:0; }
.app #confirm_form .amount > div { font-size:20px; font-weight:600; display:flex; align-items:center; column-gap:9px; }
.app #confirm_form .amount > div .asset { width:32px; height:32px; }
.app #confirm_form .amount + .amount { border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; }
.app #confirm_form .amount + .info { margin-top:10px; }

.app #process_form { text-align:center; width:100%; }
.app #process_form p.processamount { font-size:26px; padding:12px 0; font-weight:600; }
.app #process_form p.proceed { padding-top:20px; }

.app #process_form .pendingicon { width:60px; height:60px; margin:12px auto 30px; position:relative; }
.app #process_form .pendingicon:after { content:''; border:3px solid #f3f3f3; border-right-color:hsl(157,80%,35%); position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; border-radius:50%; animation:pendingicon 2s infinite linear; }
@keyframes pendingicon {from { transform: rotate(0deg); } to { transform: rotate(359deg); }}

.app #completed_form { text-align:center; width:100%; }
.app #completed_form .icon { margin:12px 0 30px; }
.app #completed_form .icon svg { margin:0 auto; }
.app #completed_form p.processamount { font-size:26px; padding:12px 0; font-weight:600; }

.app .form p.return { padding-top:20px; }
.app .form p.return a { color:rgba(0,0,0,.4); }
.app .form p.return a:hover { color:inherit; }

.walletconnect-backdrop {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:999;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease;
}
.walletconnect-backdrop.on {
  opacity:1;
  pointer-events:auto;
}

.walletconnect {
  position:fixed; top:16px; bottom:16px; right:0; z-index:1000;
  background:#fff; padding:36px;
  width:calc(100% - 32px); max-width:320px; box-sizing:border-box;
  text-align:left; border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.16);
  overflow:auto; pointer-events:none;
  transform:translateX(110%);
  transition:transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.walletconnect.on { pointer-events:auto;
transform:translateX(-16px); }

.walletconnect h2 { margin-bottom:30px; }
.walletconnect .wallets { padding:12px 0; margin-bottom:9px; }
.walletconnect .wallets p button { width:100%; font-size:17px; height:50px; font-weight:600; display:flex; align-items:center; justify-content:flex-start; }
.walletconnect .wallets p button:active { transform:scale(96%); }
.walletconnect .wallets p button:before { content:''; width:32px; height:32px; background-size:cover; background-repeat:no-repeat; margin:0 14px 0 12px; }
.walletconnect .wallets p.wallet-metamask button:before { background-image:url(/assets/svg/app/wallet-metamask.svg); }
.walletconnect .wallets p.wallet-trezor button:before { background-image:url(/assets/svg/app/wallet-trezor.svg); }
.walletconnect .wallets p.wallet-ledger button:before { background-image:url(/assets/svg/app/wallet-ledger.svg); }
.walletconnect .wallets p.wallet-coinbase button:before { background-image:url(/assets/svg/app/wallet-coinbase.svg); }
.walletconnect .wallets p.wallet-walletconnect button:before { background-image:url(/assets/svg/app/wallet-walletconnect.svg); }
.walletconnect p.note { font-size:15px; padding-top:6px; color:rgba(0,0,0,0.6); }
.walletconnect p.agree { font-size:14px; color:rgba(0,0,0,0.5); }
.walletconnect p.close { position:absolute; margin-bottom:0; top:14px; right:14px; }
.walletconnect p.close button { border:none; padding:0; font-size:0; line-height:0; width:36px; height:36px; min-width:0; border-radius:50%; position:relative; }
.walletconnect p.close button:before, .walletconnect p.close button:after { content:''; position:absolute; height:calc(100% - 16px); top:8px; left:calc(50% - 1px); width:2px; background-color:#000; }
.walletconnect p.close button:before { transform:rotate(45deg); }
.walletconnect p.close button:after { transform:rotate(-45deg); }
.walletconnect p.close button:hover { background:#f3f3f3; }
.walletconnect p.close button:active { transform:scale(90%); }

@media screen and (max-width:600px) {
.app {
--input-height:56px;
}
.app header .wallet { padding:6px 12px 6px 14px; font-size:13px; max-width:calc(100vw - 140px); }
.app h1 { font-size:28px; }
.app main { padding-top:90px; padding-bottom:80px; }
.app .form { padding-left:18px; padding-right:18px; }
.app .has-pick .pick { min-width:clamp(120px, 36vw, 150px); }
.app .has-pick > p > input { font-size:19px; padding:0 10px; }
.app .pick button { padding:0 8px 0 10px; column-gap:6px; }
.app .pick button .asset { width:26px; height:26px; }
.app .pick button p.title b { font-size:14px; line-height:18px; }
.app .pick button p.title i { font-size:12px; line-height:15px; }
.app .pick ul li p.title b { font-size:15px; line-height:20px; }
.app .pick ul { padding:4px 0; }
.app .form p.button.vivid button { font-size:18px; line-height:56px; }
.walletconnect { padding:24px 20px; }
.walletconnect p.close { top:10px; right:10px; }
}