@font-face{font-family:Manrope;src:url('./fonts/manrope.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:Sarasa;src:url('./fonts/sarasa-regular.woff') format('woff');font-weight:400 500;font-display:swap}
@font-face{font-family:Sarasa;src:url('./fonts/sarasa-semibold.woff') format('woff');font-weight:550 800;font-display:swap}
@font-face{font-family:ValumiHangul;src:url('./fonts/hangul-Regular.woff') format('woff');font-weight:400 500;font-display:swap}
@font-face{font-family:ValumiHangul;src:url('./fonts/hangul-SemiBold.woff') format('woff');font-weight:550 800;font-display:swap}
:root{font-family:Manrope,system-ui,sans-serif;--press-time:110ms;--move-time:300ms;--settle:cubic-bezier(.2,.82,.23,1.06);--soft-ease:cubic-bezier(.2,.65,.3,1)}
:root:lang(zh){font-family:Manrope,Sarasa,"PingFang SC","Microsoft YaHei",sans-serif}
:root:lang(ko){font-family:Manrope,ValumiHangul,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.brand{display:inline-grid;align-content:center;justify-items:start;gap:4px;padding:0 10px;font:600 30px/.98 Manrope,sans-serif;letter-spacing:-.065em;color:var(--ink);width:max-content}
.brand span{font:inherit;color:inherit;vertical-align:baseline}
.brand small{font:600 11px/1.3 Manrope,sans-serif;letter-spacing:.025em;color:var(--muted)}
.auth-brand{padding:0;margin-bottom:7px}
.header h1{line-height:1.15;font-family:inherit;font-weight:650;font-size:clamp(25px,4vw,30px);letter-spacing:-.04em}
.header{margin-bottom:24px}
.btn{border-radius:13px;transition:transform var(--press-time) var(--soft-ease),background-color 180ms,color 180ms}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:not(.primary):hover{background:var(--paper)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 90%,white)}
.account-entry{display:inline-flex;gap:7px;align-items:center;justify-content:center;padding-inline:13px;font-size:13px;white-space:nowrap}
.account-entry svg{width:17px;height:17px}
#home-account{padding:0 10px}
aside{gap:30px}
.nav-track{display:grid;gap:4px}
.nav-track svg{width:21px;height:21px;flex:none}
.nav-indicator{display:none}
nav a{border-radius:13px;transition:color 170ms,background-color 170ms}
nav a:hover{background:var(--paper)}
.transaction{grid-template-columns:minmax(0,1fr) minmax(0,44%);padding-inline:4px;border-radius:10px}
.transaction:active{background:var(--wash);transform:none}
.joined .transaction{background:transparent;border-radius:10px;border-bottom:1px solid var(--edge);margin:0}
.joined .transaction:last-child{border-bottom:0}
.hero .total{font-size:clamp(34px,6vw,46px);font-weight:650}
.settings-layout{display:grid;gap:18px}
.settings-layout>.section{margin:0;padding:20px clamp(16px,4vw,28px)}
.settings-group>h2{margin-bottom:12px}
.settings-group>.field,.setting-toggle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px;align-items:center;border-top:1px solid var(--edge);padding:9px 0;font-size:14px;min-height:54px}
.setting-toggle{display:flex;gap:9px}
.settings-layout .listline{align-items:center;min-height:50px;padding:5px 0}
#cloud-panel{scroll-margin:16px}
.fx-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:23px;overflow:hidden;border:1px solid var(--edge)}
.fx-zone{min-width:0;padding:22px 28px;background:var(--white)}
.fx-to{background:var(--wash)}
.fx-direction{display:block;font-size:12px;font-weight:650;color:var(--muted);margin-bottom:4px}
.fx-currency{display:flex;width:100%;align-items:center;text-align:left;gap:9px;padding:6px 10px;margin:0 0 12px;background:color-mix(in srgb,var(--white) 82%,transparent)}
.fx-currency strong{font-size:15px}
.fx-currency span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px}
.fx-currency svg{width:16px;height:16px;margin-inline-start:auto;flex:none}
.fx-zone .field input{background:transparent;border-color:transparent;border-bottom-color:var(--edge);font-size:clamp(28px,5vw,40px);font-weight:650;letter-spacing:-.04em;padding:2px 7px 5px;border-radius:10px}
.swap-control{position:absolute;z-index:1;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;border-radius:50%;width:44px;height:44px;padding:0}
.swap-control svg{width:20px;height:20px}
.fx-meta{display:grid;gap:8px;padding:20px 3px}
.fx-meta .field{max-width:220px}
.fx-meta .quote{margin:6px 0 0;font-weight:650;line-height:1.55}
.currency-sheet .section-title{margin:0}
.currency-results{overflow:auto;overscroll-behavior:contain;max-height:min(50dvh,390px)}
.currency-result{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:center;text-align:left;min-height:46px;padding:8px 10px;border:0;border-bottom:1px solid var(--edge);border-radius:9px;background:transparent}
.currency-result[aria-pressed=true],.currency-result:hover{background:var(--wash)}
dialog[open]{animation:sheet-in 240ms var(--soft-ease)}
@keyframes sheet-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(max-width:720px){
  aside{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding-inline:clamp(12px,5vw,20px);align-items:center}
  .brand{padding:0;font-size:28px}
  #home-account{padding:0;grid-column:2;grid-row:1}
  #connection{grid-column:2;grid-row:2;text-align:right;font-size:11px}
  .frame main{padding-inline:clamp(12px,5vw,20px);padding-bottom:calc(146px + env(safe-area-inset-bottom))}
  nav{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));padding:4px;border:1px solid var(--edge);border-radius:999px;box-shadow:0 5px 22px #17281823;background:var(--white);display:block}
  @supports(backdrop-filter:blur(14px)){nav{background:color-mix(in srgb,var(--white) 83%,transparent);backdrop-filter:blur(14px) saturate(1.15)}}
  .nav-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;touch-action:none}
  .nav-indicator{display:block;position:absolute;inset:0 auto 0 0;width:20%;border-radius:999px;background:var(--wash);transform:translateX(var(--drag-offset,var(--active-offset,0%)));transition:transform var(--move-time) var(--settle);pointer-events:none}
  .dragging .nav-indicator{transition:none}
  nav a,nav a[aria-current]{position:relative;display:flex;flex-direction:column;gap:3px;min-height:50px;justify-content:center;box-shadow:none;background:transparent;border-radius:999px;touch-action:none;padding:4px 1px;font-size:clamp(9px,2.55vw,11px);line-height:1.1}
  nav a span{text-wrap:balance}
  nav a:active svg{transform:scale(.92)}
  .quick-add{bottom:calc(79px + env(safe-area-inset-bottom))}
  #toast{bottom:calc(131px + env(safe-area-inset-bottom))}
  .fx-panel{grid-template-columns:1fr}
  .fx-zone{padding:17px 18px 21px}
  .fx-to{padding-top:26px}
  .swap-control{top:50%;left:auto;right:16px;translate:0 -50%}
  .swap-control svg{rotate:90deg}
  .settings-layout>.section{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn:active:not(:disabled),nav a:active svg{transform:none}
}