/* /app: the XFILL wallet. hopr's single centred column (handle, balance card, address, bracketed actions),
   drawn in the template's language: hairlines, square corners, Syne for display, Inter Tight for numbers. */
.oi-app { --head: 5.5rem; --up: #3ecf8e; }
.oi-app main { padding-top: calc(var(--head) + 1.5rem); padding-bottom: 5rem; white-space: normal; min-height: 80vh; }
.oi-app [hidden] { display: none !important; }
.oi-app .Footer-module__6O_PeW__footer { margin-top: 4rem; height: 50vh; }
.fa { --w: 34rem; padding: 0 var(--container-padding, 1rem); font-family: "Inter Tight", sans-serif; color: var(--oi-ink); }
.fa button { font: inherit; color: inherit; }
:where(.fa) a { color: inherit; }
.mono { font-family: "Inter Tight", sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- tabs */
.fa-tabs { display: flex; justify-content: center; gap: .25rem 1.6rem; flex-wrap: wrap; max-width: 54rem; margin: 0 auto 2.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--oi-line); }
.fa-tabs a { position: relative; padding: .35rem 0; font: 700 .82rem/1 "Syne", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--oi-mute); white-space: nowrap; }
.fa-tabs a:hover { color: var(--oi-ink); }
.fa-tabs a[aria-current="page"] { color: var(--oi-amber); }
.fa-tabs a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1.05rem; height: 2px; background: var(--oi-amber); }

.fa-col { max-width: var(--w); margin: 0 auto; min-width: 0; width: 100%; }
.fa { min-width: 0; max-width: 100vw; box-sizing: border-box; }
.fa-h1.fit { max-width: 100%; }
.fa-loading, .fa-empty { color: var(--oi-mute); text-align: center; margin: 3rem 0; }
.fa-kicker { margin: 0 0 .9rem; text-align: center; font: 700 .72rem/1 "Syne", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--oi-amber); }
.fa-h1 { margin: 0 0 1rem; padding-bottom: .06em; text-align: center; font: 800 clamp(2.1rem, 6.4vw, 3.4rem)/1.08 "Syne", sans-serif; letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
.fa-sub { margin: 0 auto 2rem; max-width: 28rem; text-align: center; color: var(--oi-mute); font-size: .98rem; line-height: 1.5; }

/* ---- identity */
.fa-me { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.75rem; }
.fa-avatar { width: 4.25rem; height: 4.25rem; border-radius: 50%; object-fit: cover; background: var(--oi-amber); display: grid; place-items: center; font: 800 1.6rem/1 "Syne", sans-serif; color: #0a0c11; margin-bottom: 1rem; outline: 1px solid var(--oi-line); outline-offset: 4px; }
.fa-me .fa-h1 { margin-bottom: .4rem; }
.fa-me p { margin: 0; color: var(--oi-mute); font-size: .95rem; text-align: center; }

/* ---- the balance card */
.fa-card { border: 1px solid var(--oi-line); background: var(--oi-panel); }
.fa-card + .fa-card { margin-top: 1rem; }
.fa-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--oi-line); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oi-mute); }
.fa-card-h b { font: 500 1.6rem/1 "Inter Tight", sans-serif; letter-spacing: -.02em; text-transform: none; color: var(--oi-ink); font-variant-numeric: tabular-nums; }
.fa-card-b { padding: 1rem 1.1rem; }
.fa-row { display: grid; grid-template-columns: 2.1rem 1fr auto; align-items: center; gap: .85rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--oi-line); }
.fa-row:last-child { border-bottom: 0; }
.fa-tok { width: 2.1rem; height: 2.1rem; border-radius: 50%; object-fit: cover; background: #1a1f2b; display: grid; place-items: center; font: 800 .8rem/1 "Syne", sans-serif; color: var(--oi-ink); overflow: hidden; }
.fa-row .nm { min-width: 0; }
.fa-row .nm b { display: block; font-weight: 600; font-size: 1rem; }
.fa-row .nm small { display: block; color: var(--oi-mute); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-row .amt { text-align: right; }
.fa-row .amt b { display: block; font-weight: 500; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.fa-row .amt small { display: block; color: var(--oi-mute); font-size: .8rem; font-variant-numeric: tabular-nums; }
.up { color: var(--up) !important; } .down { color: var(--oi-down) !important; }

/* ---- the address line */
.fa-label { display: block; margin: 1.75rem 0 .6rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oi-mute); }
.fa-addr { display: flex; gap: .5rem; align-items: stretch; }
.fa-addr code { flex: 1; min-width: 0; padding: .8rem .9rem; border: 1px solid var(--oi-line); background: #0d1017; font: 500 .86rem/1.2 "Inter Tight", monospace; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- bracketed actions (hopr's) */
.fa-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; margin: 2rem 0 .5rem; }
.fa-b { display: inline-flex; align-items: center; gap: .35em; padding: .2rem 0; background: none; border: 0; cursor: pointer; text-decoration: none; font: 800 clamp(1.3rem, 3.6vw, 1.75rem)/1.1 "Syne", sans-serif; letter-spacing: -.01em; color: var(--oi-ink); }
.fa-b::before { content: '['; color: var(--oi-amber); font-weight: 500; }
.fa-b::after { content: ']'; color: var(--oi-amber); font-weight: 500; }
.fa-b:hover { color: var(--oi-amber); }
.fa-b[disabled] { opacity: .4; cursor: not-allowed; color: var(--oi-ink); }
.fa-b.sm { font-size: 1rem; }
.fa-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--oi-mute); text-decoration: underline; text-underline-offset: 3px; font-size: .92rem; }
.fa-link:hover { color: var(--oi-ink); }
.fa-center { text-align: center; }
.fa-copy { flex: none; padding: 0 1rem; border: 1px solid var(--oi-amber); background: none; color: var(--oi-amber); cursor: pointer; font: 700 .8rem/1 "Syne", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.fa-copy:hover { background: var(--oi-amber); color: #0a0c11; }

/* ---- forms */
.fa-field { display: block; margin-bottom: 1.25rem; }
.fa-field > span { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oi-mute); }
.fa-field > span em { font-style: normal; letter-spacing: 0; text-transform: none; font-size: .82rem; }
.fa-in { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--oi-line); background: #0d1017; padding: 0 .9rem; min-height: 3.4rem; }
.fa-in:focus-within { border-color: var(--oi-amber); }
.fa-in input { flex: 1; min-width: 0; height: 3.3rem; border: 0; outline: 0; background: none; color: var(--oi-ink); font: 500 1.05rem "Inter Tight", sans-serif; }
.fa-in input.big { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.fa-in input::placeholder { color: #4d566b; }
.fa-max { flex: none; border: 1px solid var(--oi-line); background: none; color: var(--oi-mute); padding: .35rem .55rem; cursor: pointer; font: 700 .7rem/1 "Syne", sans-serif; letter-spacing: .1em; }
.fa-max:hover { color: var(--oi-amber); border-color: var(--oi-amber); }
.fa-pick { flex: none; display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--oi-line); background: var(--oi-panel); padding: .45rem .65rem; cursor: pointer; font-weight: 600; max-width: 11rem; }
.fa-pick:hover { border-color: var(--oi-amber); }
.fa-pick .fa-tok { width: 1.5rem; height: 1.5rem; font-size: .6rem; }
.fa-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-pick svg { width: .7rem; height: .7rem; flex: none; opacity: .6; }
.fa-hint { margin: .5rem 0 0; font-size: .85rem; color: var(--oi-mute); min-height: 1.2em; }
.fa-hint.ok { color: var(--up); } .fa-hint.err { color: var(--oi-down); }
.fa-err { margin: 1rem 0 0; padding: .8rem 1rem; border: 1px solid rgba(239,91,91,.4); color: #ff8a8a; font-size: .92rem; }
.fa-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fa-chip { border: 1px solid var(--oi-line); background: none; color: var(--oi-ink); padding: .55rem .85rem; cursor: pointer; font: 600 .92rem "Inter Tight", sans-serif; }
.fa-chip:hover { border-color: var(--oi-mute); }
.fa-chip[aria-pressed="true"] { border-color: var(--oi-amber); color: var(--oi-amber); }
.fa-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--oi-line); margin-bottom: 1.75rem; }
.fa-seg button { padding: .9rem; background: none; border: 0; cursor: pointer; font: 700 .8rem/1 "Syne", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--oi-mute); }
.fa-seg button + button { border-left: 1px solid var(--oi-line); }
.fa-seg button[aria-selected="true"] { background: var(--oi-amber); color: #0a0c11; }

/* ---- swap */
.fa-flip { display: grid; place-items: center; margin: -.5rem 0 .75rem; }
.fa-flip button { width: 2.6rem; height: 2.6rem; border: 1px solid var(--oi-line); background: var(--oi-panel); cursor: pointer; display: grid; place-items: center; }
.fa-flip button:hover { border-color: var(--oi-amber); color: var(--oi-amber); }
.fa-flip svg { width: 1rem; height: 1rem; }
.fa-quote { margin: 0 0 1.5rem; border: 1px solid var(--oi-line); }
.fa-quote div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--oi-line); font-size: .88rem; }
.fa-quote div:last-child { border-bottom: 0; }
.fa-quote span { color: var(--oi-mute); }
.fa-out { font: 500 1.6rem "Inter Tight", sans-serif; font-variant-numeric: tabular-nums; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .8rem 0; }

/* ---- the token picker */
.fa-list { max-height: 22rem; overflow: auto; margin: 0 -1.25rem; }
.fa-list button { display: grid; grid-template-columns: 2.1rem 1fr auto; gap: .8rem; align-items: center; width: 100%; padding: .7rem 1.25rem; background: none; border: 0; border-bottom: 1px solid var(--oi-line); cursor: pointer; text-align: left; }
.fa-list button:hover, .fa-list button:focus-visible { background: #161a24; outline: 0; }
.fa-list small { color: var(--oi-mute); }

/* ---- QR */
.fa-qr { display: grid; place-items: center; padding: 1.25rem; background: #eef1f7; width: min(15rem, 70vw); margin: 0 auto 1.5rem; }
.fa-qr svg { width: 100%; height: auto; display: block; }

/* ---- trade by post */
.fa-toggle { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem; }
.fa-toggle b { display: block; font: 700 1.05rem "Syne", sans-serif; }
.fa-toggle small { color: var(--oi-mute); font-size: .88rem; }
.fa-switch { flex: none; position: relative; width: 3.4rem; height: 1.9rem; border: 1px solid var(--oi-line); background: #0d1017; cursor: pointer; }
.fa-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: calc(1.9rem - 8px); height: calc(1.9rem - 8px); background: var(--oi-mute); transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s; }
.fa-switch[aria-checked="true"] { border-color: var(--oi-amber); }
.fa-switch[aria-checked="true"]::after { transform: translateX(1.5rem); background: var(--oi-amber); }
.fa-post { position: relative; padding: 1.1rem 1.1rem 1.1rem 1.1rem; border-left: 2px solid var(--oi-amber); background: #0d1017; font: 500 1.05rem/1.45 "Inter Tight", sans-serif; overflow-wrap: anywhere; }
.fa-post .tag { color: var(--oi-amber); }
.fa-cmds { list-style: none; margin: 0; padding: 0; }
.fa-cmds li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--oi-line); }
.fa-cmds li:last-child { border-bottom: 0; }
.fa-cmds code { font: 500 .92rem "Inter Tight", sans-serif; overflow-wrap: anywhere; }
.fa-cmds a { flex: none; font: 700 .72rem/1 "Syne", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--oi-amber); text-decoration: none; }
.fa-cmds a:hover { text-decoration: underline; }

/* ---- activity */
.fa-act { display: grid; grid-template-columns: 2.1rem 1fr auto; gap: .85rem; align-items: center; padding: .85rem 1.1rem; border-bottom: 1px solid var(--oi-line); }
.fa-act:last-child { border-bottom: 0; }
.fa-act .ic { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: 1px solid var(--oi-line); color: var(--oi-amber); }
.fa-act .ic svg { width: 1rem; height: 1rem; }
.fa-act b { display: block; font-weight: 600; font-size: .96rem; overflow-wrap: anywhere; }
.fa-act small { display: block; color: var(--oi-mute); font-size: .8rem; margin-top: .15rem; }
.fa-act .r { text-align: right; font-size: .82rem; }
.fa-act .r a { color: var(--oi-amber); text-decoration: none; }
.fa-act .r a:hover { text-decoration: underline; }
.fa-st { display: inline-block; font: 700 .66rem/1 "Syne", sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .4rem; border: 1px solid currentColor; }
.fa-st.pending { color: var(--oi-amber); } .fa-st.failed { color: var(--oi-down); } .fa-st.completed { color: var(--up); }
.fa-x { display: inline-block; width: .8rem; height: .8rem; background: currentColor; -webkit-mask: url(/images/common/icon_x.svg) center / contain no-repeat; mask: url(/images/common/icon_x.svg) center / contain no-repeat; vertical-align: -1px; }

/* ---- sign in */
.fa-signin { text-align: center; }
.fa .fa-xbtn, .fa-xbtn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; max-width: 22rem; height: 3.6rem; margin: .5rem auto 0; border: 1px solid var(--oi-ink); background: var(--oi-ink); color: #0a0c11; font: 800 1rem/1 "Syne", sans-serif; letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.fa .fa-xbtn:hover, .fa-xbtn:hover { background: var(--oi-amber); border-color: var(--oi-amber); color: #0a0c11; }
.fa-xbtn .fa-x { width: 1.05rem; height: 1.05rem; }
.fa-steps { counter-reset: s; list-style: none; padding: 0; margin: 2.5rem auto 0; max-width: 26rem; text-align: left; border-top: 1px solid var(--oi-line); }
.fa-steps li { counter-increment: s; display: grid; grid-template-columns: 2.4rem 1fr; padding: .9rem 0; border-bottom: 1px solid var(--oi-line); color: var(--oi-mute); font-size: .95rem; line-height: 1.45; }
.fa-steps li::before { content: '0' counter(s); font: 800 .9rem "Syne", sans-serif; color: var(--oi-amber); }
.fa-steps b { color: var(--oi-ink); font-weight: 600; }

/* ---- confirm sheet + slide to confirm */
.fa-sheet { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgba(5,6,10,.72); backdrop-filter: blur(6px); }
.fa-sheet-card { width: min(28rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; background: #0e1118; border: 1px solid var(--oi-line); padding: 1.6rem 1.25rem 1.25rem; font-family: "Inter Tight", sans-serif; color: var(--oi-ink); }
.fa-sheet-card h2 { margin: 0 0 .3rem; text-align: center; font: 700 .72rem/1 "Syne", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--oi-mute); }
.fa-sheet-card .big { margin: .9rem 0 .3rem; text-align: center; font: 500 clamp(1.8rem, 7vw, 2.4rem)/1.1 "Inter Tight", sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fa-sheet-card .to { text-align: center; font-weight: 600; margin: 0 0 .9rem; overflow-wrap: anywhere; }
.fa-sheet-card .note { text-align: center; color: var(--oi-mute); font-size: .88rem; margin: 0 0 1.3rem; line-height: 1.45; }
.fa-sheet-card .fa-quote { margin-bottom: 1.25rem; }
.fa-sheet-card .cancel { display: block; margin: 1rem auto 0; }
.fa-slide { position: relative; height: 3.6rem; border: 1px solid var(--oi-line); background: #0a0c11; overflow: hidden; touch-action: none; user-select: none; }
.fa-slide .trail { position: absolute; inset: 0 auto 0 0; width: 3.6rem; background: rgba(77,109,255,.18); }
.fa-slide .lbl { position: absolute; inset: 0; display: grid; place-items: center; color: var(--oi-mute); font: 700 .8rem/1 "Syne", sans-serif; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.fa-slide .knob { position: absolute; top: 0; left: 0; width: 3.6rem; height: 100%; display: grid; place-items: center; background: var(--oi-amber); color: #0a0c11; cursor: grab; border: 0; }
.fa-slide .knob:active { cursor: grabbing; }
.fa-slide .knob svg { width: 1.2rem; height: 1.2rem; }
.fa-slide.done .knob { cursor: default; }
.fa-progress { display: grid; gap: .55rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.fa-progress li { display: flex; align-items: center; gap: .7rem; color: var(--oi-mute); font-size: .92rem; }
.fa-progress li::before { content: ''; width: .55rem; height: .55rem; border: 1px solid var(--oi-mute); flex: none; }
.fa-progress li.on { color: var(--oi-ink); } .fa-progress li.on::before { background: var(--oi-amber); border-color: var(--oi-amber); animation: fa-blink 1s steps(2) infinite; }
.fa-progress li.ok { color: var(--oi-ink); } .fa-progress li.ok::before { background: var(--up); border-color: var(--up); animation: none; }
.fa-progress li.bad { color: #ff8a8a; } .fa-progress li.bad::before { background: var(--oi-down); border-color: var(--oi-down); animation: none; }
@keyframes fa-blink { 50% { opacity: .2; } }
.fa-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 1100; transform: translateX(-50%); padding: .75rem 1.1rem; background: var(--oi-ink); color: #0a0c11; font: 600 .92rem "Inter Tight", sans-serif; max-width: calc(100vw - 2rem); }

@media (max-width: 768px) {
  .oi-app { --head: 4.5rem; }
  .oi-app main { padding-top: calc(var(--head) + .75rem); }
  .fa-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 1.3rem; margin: 0 calc(-1 * var(--container-padding, 1rem)) 2rem; padding: 0 var(--container-padding, 1rem) .9rem; scrollbar-width: none; }
  .fa-tabs::-webkit-scrollbar { display: none; }
  .fa-tabs a[aria-current="page"]::after { bottom: -.95rem; }
  .fa-card-h b { font-size: 1.35rem; }
  .fa-acts { gap: .3rem 1rem; }
  .fa-pick { max-width: 8.5rem; }
}
.fa-sheet-card a:not(.fa-b) { color: var(--oi-amber); }