/* Wicked Bank — escape room prop
   Modern purple palette · Bricolage Grotesque + Plus Jakarta Sans · Spark logo.
   Recreated from the Claude Design handoff. */

:root {
  /* Brand purples */
  --wb-purple:        #6B4FE6;
  --wb-purple-hover:  #5A3FD0;
  --wb-purple-deep:   #2A1A6B;
  --wb-purple-ink:    #1F1240;
  --wb-purple-soft:   #F3EFFF;
  --wb-purple-softer: #F8F5FF;
  --wb-lavender:      #A78BFA;
  --wb-lavender-deep: #7C5BD9;

  /* Surfaces */
  --wb-cream:    #FAFAFC;
  --wb-paper:    #FFFFFF;
  --wb-line:     #ECE9F2;
  --wb-line-soft:#F4F2F8;

  /* Text */
  --wb-ink:      #1A1530;
  --wb-ink-soft: #4A4560;
  --wb-ink-mute: #867F9A;

  /* States */
  --wb-good: #2F8A6A;
  --wb-bad:  #C84A55;

  /* Type */
  --wb-display: 'Bricolage Grotesque', Georgia, serif;
  --wb-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --wb-mono:    'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --wb-display-weight: 600;
  --wb-display-track:  -0.025em;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--wb-cream); }

body {
  font-family: var(--wb-sans);
  color: var(--wb-ink);
  background: var(--wb-cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  min-height: 100vh;
}

.serif {
  font-family: var(--wb-display);
  font-weight: var(--wb-display-weight);
  letter-spacing: var(--wb-display-track);
}
.serif em { font-style: italic; }
.mono  { font-family: var(--wb-mono); font-variant-numeric: tabular-nums; }
.num   { font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ─── Logo ─────────────────────────────────────────── */
.wb-logo { display: inline-flex; align-items: center; gap: 11px; color: inherit; }
.wb-logo .mk {
  width: 32px; height: 32px;
  filter: drop-shadow(0 3px 8px rgba(107,79,230,.32));
  flex: none;
}
.wb-logo .wd {
  font-family: var(--wb-sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--wb-purple-ink);
}
.wb-logo .wd small {
  display: block;
  font-family: var(--wb-sans);
  font-size: 9px; font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wb-ink-mute);
  margin-top: 4px;
}
.on-dark .wb-logo .wd { color: #fff; }
.on-dark .wb-logo .wd small { color: rgba(255,255,255,.5); }

/* ─── Marketing top nav ────────────────────────────── */
.wb-topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 56px;
  background: var(--wb-paper);
  border-bottom: 1px solid var(--wb-line);
}
.wb-topnav ul {
  display: flex; gap: 32px; list-style: none; margin: 0; padding: 0;
  font-size: 14px; font-weight: 500; color: var(--wb-ink-soft);
}
.wb-topnav a { transition: color .15s; }
.wb-topnav a:hover { color: var(--wb-purple); }
.wb-topnav .right { display: flex; align-items: center; gap: 18px; }
.wb-topnav .menu-btn { display: none; }

/* ─── Buttons ──────────────────────────────────────── */
.wb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 0;
  font: 600 14px/1 var(--wb-sans);
  letter-spacing: .005em;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s, transform .12s, border-color .15s;
  text-decoration: none;
}
.wb-btn.primary {
  background: var(--wb-purple); color: #fff;
  box-shadow: 0 4px 14px rgba(107,79,230,.32),
              0 1px 0 rgba(255,255,255,.25) inset;
}
.wb-btn.primary:hover { background: var(--wb-purple-hover); }
.wb-btn.ghost {
  background: transparent; color: var(--wb-purple-deep);
  border: 1px solid var(--wb-line);
}
.wb-btn.ghost:hover { border-color: var(--wb-purple); color: var(--wb-purple); }
.wb-btn.sm { padding: 9px 16px; font-size: 13px; }
.wb-btn.gold {
  background: var(--wb-lavender); color: var(--wb-purple-ink);
  box-shadow: 0 4px 14px rgba(167,139,250,.35);
}
.wb-btn.gold:hover { background: var(--wb-lavender-deep); color: #fff; }
.wb-btn.outline-dark {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.28);
}
.wb-btn.outline-dark:hover { border-color: #fff; }

/* ─── Inputs ───────────────────────────────────────── */
.wb-field { display: flex; flex-direction: column; gap: 6px; }
.wb-field label {
  font-size: 12px; font-weight: 600; color: var(--wb-ink-soft);
  letter-spacing: .02em;
}
.wb-field input, .wb-field select, .wb-field textarea {
  appearance: none; -webkit-appearance: none;
  background: var(--wb-cream);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 13px 14px;
  font: 400 15px var(--wb-sans);
  color: var(--wb-ink);
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
  width: 100%;
}
.wb-field input:hover, .wb-field select:hover, .wb-field textarea:hover {
  background: var(--wb-paper); border-color: var(--wb-line);
}
.wb-field input:focus, .wb-field select:focus, .wb-field textarea:focus {
  background: #fff; border-color: var(--wb-purple);
  box-shadow: 0 0 0 4px rgba(107,79,230,.12);
}
.wb-field .hint { font-size: 11.5px; color: var(--wb-ink-mute); }

/* ─── Marketing footer ─────────────────────────────── */
.wb-footer {
  background: var(--wb-purple-ink);
  color: rgba(255,255,255,.72);
  padding: 60px 56px 28px;
  font-size: 13px;
  position: relative; overflow: hidden;
}
.wb-footer::before {
  content: ''; position: absolute;
  inset: -40% -10% auto auto;
  width: 540px; height: 540px; border-radius: 50%;
  background: radial-gradient(circle, rgba(107,79,230,.33) 0%, transparent 60%);
  pointer-events: none;
}
.wb-footer > * { position: relative; }
.wb-footer .grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.wb-footer h5 {
  font-family: var(--wb-display); font-weight: 600;
  font-size: 15px; color: #fff; margin: 0 0 16px;
  letter-spacing: -.01em;
}
.wb-footer ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.wb-footer a:hover { color: #fff; }
.wb-footer .bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font-size: 11px; color: rgba(255,255,255,.45);
  letter-spacing: .02em;
}
.wb-footer .regrow {
  display: flex; gap: 18px;
  font-family: var(--wb-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}

/* ─── App chrome (logged-in) ───────────────────────── */
.wb-app {
  display: grid; grid-template-columns: 244px 1fr;
  min-height: 100vh; background: var(--wb-cream);
}
.wb-side {
  background: var(--wb-purple-ink);
  color: rgba(255,255,255,.85);
  padding: 22px 0;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.wb-side::before {
  content: ''; position: absolute;
  inset: auto -40% -40% auto;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(107,79,230,.4) 0%, transparent 65%);
  pointer-events: none;
}
.wb-side > * { position: relative; }
.wb-side .wb-logo .mk { filter: drop-shadow(0 4px 14px rgba(167,139,250,.4)); }
.wb-side .wb-logo .wd { color: #fff; }
.wb-side .wb-logo .wd small { color: rgba(255,255,255,.5); }
.wb-side .brand {
  padding: 0 22px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.wb-side .menu-toggle { display: none; }
.wb-side nav {
  display: flex; flex-direction: column;
  padding: 18px 12px; gap: 2px; flex: 1;
}
.wb-side nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.7);
  transition: background .15s, color .15s;
}
.wb-side nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.wb-side nav a.on { background: rgba(167,139,250,.18); color: #fff; }
.wb-side nav a.on .ic { opacity: 1; color: var(--wb-lavender); }
.wb-side nav a .ic { width: 16px; height: 16px; opacity: .65; display: inline-flex; }
.wb-side .sidefoot {
  padding: 18px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 11px; color: rgba(255,255,255,.5);
  letter-spacing: .02em; line-height: 1.6;
}
.wb-side .spacer { flex: 1; }

.wb-main { display: flex; flex-direction: column; background: var(--wb-cream); min-width: 0; }
.wb-appbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 36px;
  background: var(--wb-paper);
  border-bottom: 1px solid var(--wb-line);
  gap: 16px;
}
.wb-appbar .search {
  display: flex; align-items: center; gap: 10px;
  background: var(--wb-cream);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--wb-ink-mute);
  min-width: 320px;
}
.wb-appbar .who {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--wb-ink-soft);
}
.wb-appbar .who .av {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--wb-lavender), var(--wb-purple));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
  font-family: var(--wb-display);
  box-shadow: 0 4px 10px rgba(107,79,230,.25);
}
.wb-appbar .bell {
  position: relative;
  color: var(--wb-ink-soft);
  display: inline-flex;
}
.wb-appbar .bell .dot {
  position: absolute; top: -3px; right: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wb-lavender);
  border: 2px solid var(--wb-paper);
  box-sizing: content-box;
}
.wb-appbar .who-meta {
  text-align: right; line-height: 1.25;
}
.wb-appbar .who-meta .nm { font-weight: 600; color: var(--wb-ink); font-size: 13px; }
.wb-appbar .who-meta .sub { font-size: 11px; color: var(--wb-ink-mute); }

/* ─── Cards / tables ───────────────────────────────── */
.wb-card {
  background: var(--wb-paper);
  border: 1px solid var(--wb-line);
  border-radius: 14px;
}
.wb-card.flat { background: var(--wb-paper); }
.wb-card.soft { background: var(--wb-purple-soft); border-color: transparent; }

.wb-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.wb-tbl th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  color: var(--wb-ink-mute); letter-spacing: .06em;
  text-transform: uppercase;
  padding: 14px 18px;
  border-bottom: 1px solid var(--wb-line);
  background: var(--wb-cream);
}
.wb-tbl td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--wb-line-soft);
  vertical-align: middle;
}
.wb-tbl tr:last-child td { border-bottom: 0; }
.wb-tbl tr.hi td { background: var(--wb-purple-softer); }
.wb-tbl tr.hi td:first-child { box-shadow: inset 3px 0 0 var(--wb-purple); }
.wb-tbl .amt {
  font-variant-numeric: tabular-nums; text-align: right;
  font-weight: 500; white-space: nowrap;
}
.wb-tbl .amt.in  { color: var(--wb-good); }
.wb-tbl .amt.out { color: var(--wb-ink); }

/* ─── Misc primitives ──────────────────────────────── */
.wb-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wb-purple);
}
.wb-eyebrow.good { color: var(--wb-good); }
.wb-eyebrow.lav  { color: var(--wb-lavender); }
.wb-eyebrow.bad  { color: var(--wb-bad); }
.wb-eyebrow.mute { color: var(--wb-ink-mute); letter-spacing: .12em; }

.wb-divider { height: 1px; background: var(--wb-line); }
.wb-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  background: rgba(47,138,106,.12); color: var(--wb-good);
}
.wb-pill.pending { background: rgba(167,139,250,.18); color: var(--wb-lavender-deep); }
.wb-pill.out     { background: rgba(200,74,85,.12);   color: var(--wb-bad); }
.wb-pill.lav     { background: rgba(167,139,250,.22); color: var(--wb-lavender); }

/* ─── Page-specific helpers ────────────────────────── */
.wb-hero {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  padding: 88px 56px 80px;
  background: radial-gradient(circle at 90% 10%, var(--wb-purple-soft) 0%, var(--wb-paper) 60%);
  border-bottom: 1px solid var(--wb-line);
  position: relative; overflow: hidden;
}
.wb-hero h1 {
  font-family: var(--wb-display); font-weight: 600;
  font-size: 64px; line-height: 1.02;
  margin: 20px 0 22px;
  letter-spacing: -0.02em;
}
.wb-hero h1 em { color: var(--wb-lavender-deep); }
.wb-hero p.lede {
  font-size: 18px; line-height: 1.55;
  color: var(--wb-ink-soft);
  max-width: 520px; margin: 0 0 32px;
}
.wb-hero .stats { display: flex; gap: 32px; margin-top: 44px; flex-wrap: wrap; }
.wb-hero .stats .n {
  font-family: var(--wb-display);
  font-size: 26px; color: var(--wb-purple-deep); font-weight: 600;
}
.wb-hero .stats .l {
  font-size: 12px; color: var(--wb-ink-mute);
  letter-spacing: .06em; text-transform: uppercase;
  font-weight: 500; margin-top: 4px;
}
.wb-hero .phone-wrap {
  min-height: 460px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.wb-hero .phone-wrap .glow {
  position: absolute; inset: 4% 8%;
  background: radial-gradient(circle, rgba(107,79,230,.13) 0%, transparent 65%);
  filter: blur(20px); pointer-events: none;
}

.wb-trust {
  padding: 20px 56px;
  border-bottom: 1px solid var(--wb-line);
  display: flex; align-items: center; gap: 40px;
  justify-content: space-between;
  background: var(--wb-cream);
  flex-wrap: wrap;
}
.wb-trust .label {
  font-size: 11px; font-weight: 600; color: var(--wb-ink-mute);
  letter-spacing: .16em; text-transform: uppercase;
}
.wb-trust .pub {
  font-family: var(--wb-display);
  font-size: 18px; color: var(--wb-ink-mute);
  font-weight: 600; opacity: .8;
}

.wb-why { padding: 88px 56px 72px; }
.wb-why .head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; margin-bottom: 56px;
}
.wb-why h2 {
  font-family: var(--wb-display); font-weight: 600;
  font-size: 42px; line-height: 1.05;
  margin: 14px 0 0; letter-spacing: -0.02em;
}
.wb-why h2 em { color: var(--wb-lavender-deep); }
.wb-why .head p {
  align-self: end; font-size: 16px; color: var(--wb-ink-soft);
  line-height: 1.6; max-width: 480px;
}
.wb-why .reasons {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.wb-why .reasons .card {
  padding: 32px 28px; min-height: 260px;
  background: var(--wb-paper);
  border: 1px solid var(--wb-line);
  border-radius: 14px;
}
.wb-why .reasons .num {
  font-family: var(--wb-mono);
  font-size: 11px; color: var(--wb-purple);
  letter-spacing: .14em; font-weight: 600;
}
.wb-why .reasons h3 {
  font-family: var(--wb-display);
  font-size: 22px; margin: 20px 0 12px;
  font-weight: 600; letter-spacing: -.01em;
}
.wb-why .reasons p {
  font-size: 14px; color: var(--wb-ink-soft);
  line-height: 1.6; margin: 0;
}

.wb-products {
  background: var(--wb-paper);
  padding: 88px 56px;
  border-top: 1px solid var(--wb-line);
  border-bottom: 1px solid var(--wb-line);
}
.wb-products h2 {
  font-family: var(--wb-display); font-weight: 600;
  font-size: 38px; margin: 12px 0 36px;
  letter-spacing: -.02em; max-width: 600px;
}
.wb-products .row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.wb-products .card { padding: 28px; }
.wb-products .name {
  font-family: var(--wb-display); font-size: 26px; font-weight: 600;
  margin: 14px 0 8px;
}
.wb-products .price {
  font-family: var(--wb-display);
  font-size: 18px; color: var(--wb-lavender-deep);
  margin: 0 0 16px;
}
.wb-products .desc {
  font-size: 14px; color: var(--wb-ink-soft);
  line-height: 1.6; margin: 0 0 22px; min-height: 64px;
}
.wb-products .more {
  font-size: 13px; font-weight: 600; color: var(--wb-purple-deep);
  border-bottom: 1px solid var(--wb-lavender);
  padding-bottom: 2px;
}

.wb-cta {
  background: linear-gradient(135deg, var(--wb-purple-ink) 0%, var(--wb-purple) 100%);
  color: #fff; padding: 76px 56px;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 48px; align-items: center;
  position: relative; overflow: hidden;
}
.wb-cta::before {
  content: ''; position: absolute;
  top: -40%; right: -10%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.33), transparent 60%);
  pointer-events: none;
}
.wb-cta > * { position: relative; }
.wb-cta h2 {
  font-family: var(--wb-display); font-weight: 600;
  font-size: 42px; margin: 14px 0 0;
  letter-spacing: -.02em; line-height: 1.05;
}
.wb-cta h2 em { color: var(--wb-lavender); }
.wb-cta .actions {
  display: flex; flex-direction: column; gap: 10px;
  justify-self: end;
}

/* ─── Login split layout ───────────────────────────── */
body.wb-login-page { display: flex; flex-direction: column; min-height: 100vh; }
body.wb-login-page > .wb-login { flex: 1; }

.wb-login {
  display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 80px);
}
.wb-login .pitch {
  background: var(--wb-purple-deep);
  color: var(--wb-cream);
  padding: 72px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px;
}
.wb-login .pitch h1 {
  font-family: var(--wb-display);
  font-size: 48px; line-height: 1.05;
  letter-spacing: -.02em; font-weight: 600;
  margin: 0 0 18px;
}
.wb-login .pitch h1 em { color: var(--wb-lavender); }
.wb-login .pitch p.lede {
  font-size: 16px; line-height: 1.6; max-width: 420px;
  color: rgba(250,250,252,.78); margin: 0;
}
.wb-login .pitch .trust {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 12px; color: rgba(250,250,252,.55); letter-spacing: .04em;
}
.wb-login .pitch .trust .row { display: flex; gap: 10px; align-items: center; }
.wb-login .pitch .trust .row.multi { align-items: flex-start; }
.wb-login .pitch .trust .row .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wb-lavender); flex: none;
}
.wb-login .pitch .trust .row.multi .dot { margin-top: 8px; }
.wb-login .pitch .trust strong { color: var(--wb-cream); font-weight: 600; }
.wb-login .pitch .trust .nb {
  font-size: 10px; color: rgba(250,250,252,.4);
  padding-left: 14px; font-style: italic;
}

.wb-login .form-wrap {
  background: var(--wb-paper);
  padding: 72px 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.wb-login .form-wrap .form {
  max-width: 380px; width: 100%; margin: 0 auto;
}
.wb-login .form-wrap h2 {
  font-family: var(--wb-display);
  font-size: 28px; margin: 8px 0 8px;
  font-weight: 600; letter-spacing: -.01em;
}
.wb-login .form-wrap .intro {
  font-size: 13px; color: var(--wb-ink-mute);
  margin: 0 0 24px; line-height: 1.55;
}
.wb-login .form-wrap .intro strong { color: var(--wb-ink-soft); }
.wb-login .form-wrap .fields { display: flex; flex-direction: column; gap: 18px; }
.wb-login .form-wrap .remember {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--wb-ink-soft);
}
.wb-login .form-wrap .remember input { accent-color: var(--wb-purple-deep); }
.wb-login .form-wrap .links {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 13px;
}
.wb-login .form-wrap .links a.primary {
  color: var(--wb-purple-deep); font-weight: 500;
  border-bottom: 1px solid var(--wb-lavender);
  padding-bottom: 2px;
}
.wb-login .form-wrap .links a.muted { color: var(--wb-ink-soft); }
.wb-login .form-wrap .legal {
  font-size: 11px; color: var(--wb-ink-mute);
  line-height: 1.6; margin: 0;
  letter-spacing: .01em;
}
.wb-login .form-wrap .legal strong { color: var(--wb-ink-soft); }

/* ─── Dashboard ────────────────────────────────────── */
.wb-page-pad { padding: 32px 40px 48px; display: flex; flex-direction: column; gap: 28px; }
.wb-page-pad .greet {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px;
}
.wb-page-pad .greet h1 {
  font-family: var(--wb-display);
  font-size: 34px; font-weight: 600;
  margin: 8px 0 0; letter-spacing: -.01em;
}
.wb-cards-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
.wb-current {
  padding: 28px 30px;
  background: linear-gradient(135deg, var(--wb-purple-deep) 0%, var(--wb-purple) 100%);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 14px;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 28px rgba(107,79,230,.25);
}
.wb-current::before {
  content: ''; position: absolute;
  top: -60%; right: -20%;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.33), transparent 60%);
  pointer-events: none;
}
.wb-current > * { position: relative; }
.wb-current .top {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.wb-current .top .tag { color: rgba(255,255,255,.55); }
.wb-current .iban {
  margin-top: 6px; font-size: 12px;
  color: rgba(255,255,255,.6);
  font-family: var(--wb-mono); letter-spacing: .06em;
}
.wb-current .bal {
  margin-top: 32px;
}
.wb-current .bal .label {
  font-size: 11px; color: rgba(255,255,255,.55);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.wb-current .bal .v {
  font-family: var(--wb-display); font-size: 50px; font-weight: 600;
  letter-spacing: -.02em; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.wb-current .bal .sub { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 4px; }

.wb-side-card { padding: 24px; }
.wb-side-card .v {
  font-family: var(--wb-display); font-size: 30px; font-weight: 600;
  letter-spacing: -.02em; margin-top: 26px; color: var(--wb-purple-deep);
  font-variant-numeric: tabular-nums;
}
.wb-side-card .sub { font-size: 12px; color: var(--wb-ink-mute); margin-top: 6px; }

.wb-bottom-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.wb-section-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--wb-line);
}
.wb-section-head .ttl {
  font-family: var(--wb-display); font-size: 18px; font-weight: 600;
}
.wb-section-head .more {
  font-size: 12px; font-weight: 600; color: var(--wb-purple-deep);
  border-bottom: 1px solid var(--wb-lavender);
  padding-bottom: 2px;
}
.wb-mini-type {
  font-size: 11px; color: var(--wb-lavender-deep);
  letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600;
}
.wb-qa { padding: 22px; }
.wb-qa .ttl {
  font-family: var(--wb-display); font-size: 18px; font-weight: 600;
  margin-bottom: 16px;
}
.wb-qa .grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.wb-qa .grid button {
  flex-direction: column; gap: 8px;
  padding: 18px 8px;
  border-color: var(--wb-line);
  color: var(--wb-purple-deep);
}
.wb-qa .grid button span.lab { font-size: 12px; }
.wb-inbox { padding: 22px; }
.wb-inbox .item { padding-bottom: 14px; border-bottom: 1px solid var(--wb-line-soft); }
.wb-inbox .item:last-child { border-bottom: 0; padding-bottom: 0; }
.wb-inbox .item + .item { padding-top: 14px; }
.wb-inbox .item .t { font-size: 13px; font-weight: 600; }
.wb-inbox .item .m { font-size: 12px; color: var(--wb-ink-mute); margin-top: 2px; }

/* ─── Transfer form layout ─────────────────────────── */
.wb-transfer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px;
  padding: 32px 40px 48px;
}
.wb-transfer-grid .form-card { padding: 32px 36px; }
.wb-transfer-grid h1 {
  font-family: var(--wb-display);
  font-size: 28px; font-weight: 600;
  margin: 8px 0 6px; letter-spacing: -.01em;
}
.wb-transfer-grid .lede { font-size: 13px; color: var(--wb-ink-mute); margin: 0 0 28px; }
.wb-transfer-grid .form-fields { display: flex; flex-direction: column; gap: 18px; }
.wb-transfer-grid .two { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.wb-transfer-grid .two.even { grid-template-columns: 1fr 1fr; }
.wb-transfer-grid .amount-wrap { position: relative; }
.wb-transfer-grid .amount-wrap .sym {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--wb-ink-mute); font-size: 16px; font-weight: 500;
  pointer-events: none;
}
.wb-transfer-grid .amount-wrap input { padding-left: 28px; font-size: 18px; font-weight: 500; }
.wb-transfer-grid .save-payee {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--wb-ink-soft); margin-top: 6px;
}
.wb-transfer-grid .save-payee input { accent-color: var(--wb-purple); }
.wb-transfer-grid .submit-row {
  display: flex; gap: 12px; margin-top: 14px;
  padding-top: 22px; border-top: 1px solid var(--wb-line);
}
.wb-transfer-grid .submit-row .wb-btn.primary { flex: 1; padding: 14px 22px; }
.wb-transfer-grid .summary { display: flex; flex-direction: column; gap: 16px; }
.wb-transfer-grid .summary .panel { padding: 22px; }
.wb-transfer-grid .summary table { width: 100%; margin-top: 14px; font-size: 13px; }
.wb-transfer-grid .summary table td { padding: 8px 0; }
.wb-transfer-grid .summary table td:first-child { color: var(--wb-ink-mute); }
.wb-transfer-grid .summary table td:last-child  {
  text-align: right; font-weight: 500; font-variant-numeric: tabular-nums;
}
.wb-transfer-grid .summary .total {
  display: flex; justify-content: space-between; align-items: baseline;
}
.wb-transfer-grid .summary .total .v {
  font-family: var(--wb-display);
  font-size: 24px; font-weight: 600; color: var(--wb-ink-mute);
  font-variant-numeric: tabular-nums;
}

/* ─── Confirmation ─────────────────────────────────── */
.wb-confirm-wrap {
  padding: 40px 40px 56px;
  display: flex; justify-content: center;
}
.wb-confirm {
  width: 100%; max-width: 780px;
  display: flex; flex-direction: column; gap: 22px;
}
.wb-confirm .hero {
  padding: 44px 48px 40px;
  background: var(--wb-paper);
  border: 1px solid var(--wb-line);
  border-top: 3px solid var(--wb-lavender);
  border-radius: 14px;
}
.wb-confirm .check {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wb-purple-deep); color: var(--wb-cream);
  display: flex; align-items: center; justify-content: center;
}
.wb-confirm h1 {
  font-family: var(--wb-display);
  font-size: 36px; font-weight: 600;
  letter-spacing: -.015em;
  margin: 10px 0 6px;
}
.wb-confirm p.lede { font-size: 14px; color: var(--wb-ink-soft); margin: 0; }
.wb-confirm .txn-block {
  margin-top: 36px; padding: 22px 24px;
  background: #fff; border: 1px solid var(--wb-line);
  border-radius: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
}
.wb-confirm .txn-block .ref-label {
  font-size: 11px; font-weight: 600; color: var(--wb-ink-mute);
  letter-spacing: .16em; text-transform: uppercase;
}
.wb-confirm .txn-block .ref {
  font-family: var(--wb-mono);
  font-size: 36px; font-weight: 700;
  color: var(--wb-purple-deep);
  letter-spacing: .18em;
  margin-top: 8px; line-height: 1;
}
.wb-confirm .txn-block .ref-note {
  font-size: 11.5px; color: var(--wb-ink-mute); margin-top: 8px;
}
.wb-confirm .txn-block .actions {
  display: flex; flex-direction: column; gap: 8px;
  align-items: stretch; min-width: 140px;
}
.wb-confirm .details { padding: 28px 32px; }
.wb-confirm .details .ttl {
  font-family: var(--wb-display); font-size: 18px; font-weight: 600;
  margin-bottom: 18px;
}
.wb-confirm .details .grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 40px; row-gap: 16px;
}
.wb-confirm .details .grid .k {
  font-size: 11px; color: var(--wb-ink-mute);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.wb-confirm .details .grid .v {
  font-size: 14px; color: var(--wb-ink); margin-top: 4px; font-weight: 500;
}
.wb-confirm .foot-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.wb-confirm .foot-actions a.report {
  font-size: 13px; color: var(--wb-ink-soft);
  border-bottom: 1px solid var(--wb-line); padding-bottom: 2px;
}
.wb-confirm .foot-actions .group { display: flex; gap: 10px; }

/* ─── Statement ────────────────────────────────────── */
.wb-stmt-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px;
}
.wb-stmt-head h1 {
  font-family: var(--wb-display);
  font-size: 30px; font-weight: 600;
  margin: 8px 0 0; letter-spacing: -.01em;
}
.wb-stmt-head .period { font-size: 13px; color: var(--wb-ink-mute); margin-top: 6px; }
.wb-stmt-summary {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.wb-stmt-summary .cell {
  padding: 20px 24px;
  border-right: 1px solid var(--wb-line);
}
.wb-stmt-summary .cell:last-child { border-right: 0; }
.wb-stmt-summary .k {
  font-size: 11px; color: var(--wb-ink-mute);
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.wb-stmt-summary .v {
  font-family: var(--wb-display); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 600;
  margin-top: 6px;
  color: var(--wb-purple-deep);
}
.wb-stmt-summary .v.in   { color: var(--wb-good); }
.wb-stmt-summary .v.out  { color: var(--wb-ink); }
.wb-stmt-filter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.wb-stmt-filter .search {
  display: flex; align-items: center; gap: 10px;
  background: var(--wb-paper);
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  padding: 10px 16px;
  flex: 1; min-width: 240px;
  font-size: 13px; color: var(--wb-ink-mute);
}
.wb-stmt-disc {
  font-size: 11px; color: var(--wb-ink-mute);
  text-align: center; letter-spacing: .04em;
  line-height: 1.6; padding-top: 4px;
}
.wb-tbl .type-tag {
  font-size: 11px; color: var(--wb-lavender-deep);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.wb-tbl .txn-id {
  font-family: var(--wb-mono);
  font-size: 12.5px; letter-spacing: .06em;
  color: var(--wb-ink-mute); font-weight: 500;
}
.wb-tbl tr.hi .txn-id { color: var(--wb-purple); font-weight: 700; }
.wb-tbl .ref-cell {
  font-family: var(--wb-mono);
  font-size: 12px; color: var(--wb-ink-soft); letter-spacing: .02em;
}

/* ─── Mobile responsive (desktop site) ─────────────── */
@media (max-width: 980px) {
  .wb-app { grid-template-columns: 1fr; }
  .wb-side {
    flex-direction: row; align-items: center;
    padding: 14px 18px; gap: 12px;
  }
  .wb-side::before { display: none; }
  .wb-side .brand { padding: 0; border: 0; flex: 1; }
  .wb-side nav {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    background: var(--wb-purple-ink);
    padding: 12px;
    z-index: 50;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .wb-side.open nav { display: flex; }
  .wb-side .menu-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,255,255,.08); color: #fff; border: 0; cursor: pointer;
    flex: none;
  }
  .wb-side .sidefoot { display: none; }
  .wb-side .spacer  { display: none; }
  .wb-appbar { padding: 14px 18px; }
  .wb-appbar .search { display: none; }
  .wb-appbar .who-meta { display: none; }
  .wb-page-pad { padding: 22px 18px 32px; gap: 22px; }
  .wb-cards-row { grid-template-columns: 1fr; }
  .wb-bottom-row { grid-template-columns: 1fr; }
  .wb-transfer-grid { grid-template-columns: 1fr; padding: 22px 18px 32px; }
  .wb-transfer-grid .form-card { padding: 22px 18px; }
  .wb-stmt-summary { grid-template-columns: 1fr 1fr; }
  .wb-stmt-summary .cell:nth-child(2) { border-right: 0; }
  .wb-stmt-summary .cell:nth-child(1),
  .wb-stmt-summary .cell:nth-child(2) { border-bottom: 1px solid var(--wb-line); }
  .wb-confirm-wrap { padding: 22px 14px 40px; }
  .wb-confirm .hero { padding: 28px 22px; }
  .wb-confirm h1 { font-size: 28px; }
  .wb-confirm .txn-block { flex-direction: column; align-items: stretch; gap: 16px; }
  .wb-confirm .txn-block .actions { flex-direction: row; min-width: 0; }
  .wb-confirm .txn-block .actions .wb-btn { flex: 1; }
  .wb-confirm .details .grid { grid-template-columns: 1fr; }
  .wb-confirm .details { padding: 22px; }
  .wb-confirm .foot-actions { flex-direction: column; align-items: stretch; }
  .wb-confirm .foot-actions .group .wb-btn { flex: 1; }

  /* Stack table horizontally scroll on small screens */
  .wb-card.has-table { overflow-x: auto; }
  .wb-tbl th, .wb-tbl td { padding: 10px 12px; font-size: 13px; }

  /* Marketing */
  .wb-topnav { padding: 14px 18px; }
  .wb-topnav ul { display: none; }
  .wb-topnav .right a { display: none; }
  .wb-hero {
    grid-template-columns: 1fr;
    padding: 48px 22px 56px;
    gap: 24px;
  }
  .wb-hero h1 { font-size: 44px; }
  .wb-hero p.lede { font-size: 16px; }
  .wb-hero .phone-wrap { min-height: 360px; order: -1; }
  .wb-trust { padding: 14px 22px; gap: 16px; }
  .wb-trust .pub { font-size: 14px; }
  .wb-why { padding: 56px 22px 40px; }
  .wb-why .head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .wb-why h2 { font-size: 30px; }
  .wb-why .reasons { grid-template-columns: 1fr 1fr; }
  .wb-products { padding: 56px 22px; }
  .wb-products h2 { font-size: 26px; }
  .wb-products .row { grid-template-columns: 1fr; }
  .wb-cta {
    grid-template-columns: 1fr;
    padding: 56px 22px;
  }
  .wb-cta h2 { font-size: 30px; }
  .wb-cta .actions { justify-self: stretch; }

  .wb-footer { padding: 40px 22px 22px; }
  .wb-footer .grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .wb-footer .bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
  .wb-footer .regrow { flex-wrap: wrap; gap: 10px; }

  .wb-login { grid-template-columns: 1fr; }
  .wb-login .pitch { padding: 40px 22px; gap: 22px; }
  .wb-login .pitch h1 { font-size: 34px; }
  .wb-login .form-wrap { padding: 40px 22px; }
}

@media (max-width: 560px) {
  .wb-why .reasons { grid-template-columns: 1fr; }
  .wb-footer .grid { grid-template-columns: 1fr; }
  .wb-stmt-summary { grid-template-columns: 1fr; }
  .wb-stmt-summary .cell { border-right: 0; border-bottom: 1px solid var(--wb-line); }
  .wb-stmt-summary .cell:last-child { border-bottom: 0; }
}

/* ─── Mobile app (iOS-style) screens ───────────────── */
.wb-ios {
  background: var(--wb-cream);
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}
.wb-ios .ios-scroll {
  padding-bottom: 130px;
}
.wb-ios-hero {
  background: linear-gradient(160deg, var(--wb-purple-ink) 0%, var(--wb-purple) 100%);
  color: #fff;
  padding: max(env(safe-area-inset-top), 20px) 22px 28px;
  border-radius: 0 0 28px 28px;
  position: relative; overflow: hidden;
}
.wb-ios-hero::before {
  content: ''; position: absolute;
  top: -30%; right: -20%;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.33), transparent 60%);
  pointer-events: none;
}
.wb-ios-hero > * { position: relative; }
.wb-ios-hero .top {
  display: flex; justify-content: space-between; align-items: center;
}
.wb-ios-hero .actions { display: flex; gap: 10px; align-items: center; }
.wb-ios-hero .icon-circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: #fff; position: relative;
}
.wb-ios-hero .icon-circle .dot {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wb-lavender);
  border: 1.5px solid var(--wb-purple-deep);
}
.wb-ios-hero .av {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--wb-lavender), var(--wb-purple-hover));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--wb-display);
  font-weight: 600; font-size: 13px;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset;
}
.wb-ios-hero .greet { margin-top: 22px; }
.wb-ios-hero .greet .g {
  font-size: 12px; color: rgba(255,255,255,.55);
  letter-spacing: .04em; font-weight: 500;
}
.wb-ios-hero .greet .n {
  font-family: var(--wb-display);
  font-size: 24px; font-weight: 600;
  letter-spacing: -.015em; margin-top: 2px;
}
.wb-ios-hero .bal { margin-top: 22px; }
.wb-ios-hero .bal .l {
  font-size: 11px; color: rgba(255,255,255,.55);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.wb-ios-hero .bal .v {
  font-family: var(--wb-display); font-variant-numeric: tabular-nums;
  font-size: 44px; font-weight: 600; letter-spacing: -.03em;
  margin-top: 4px; line-height: 1;
}
.wb-ios-hero .bal .iban {
  font-family: var(--wb-mono);
  font-size: 11.5px; color: rgba(255,255,255,.6);
  margin-top: 8px; letter-spacing: .06em;
}
.wb-ios-hero .qa {
  margin-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.wb-ios-hero .qa .item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #fff;
}
.wb-ios-hero .qa .item .ic {
  width: 50px; height: 50px; border-radius: 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.wb-ios-hero .qa .item .lab {
  font-size: 11.5px; color: rgba(255,255,255,.85); font-weight: 500;
}

.wb-bday {
  margin: 16px 16px 0;
  padding: 14px 16px;
  background: var(--wb-purple-soft);
  border-radius: 18px;
  border: 1px solid var(--wb-purple-soft);
  display: flex; align-items: center; gap: 12px;
}
.wb-bday .ic {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--wb-purple);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; line-height: 1; flex: none;
}
.wb-bday .msg {
  flex: 1; font-size: 12.5px; color: var(--wb-purple-ink); line-height: 1.45;
}
.wb-bday .msg strong { font-weight: 700; }

.wb-ios-section {
  margin: 20px 16px 0;
}
.wb-ios-section .head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.wb-ios-section .head .t {
  font-family: var(--wb-display); font-size: 17px; font-weight: 600;
}
.wb-ios-section .head .more {
  font-size: 12px; font-weight: 600; color: var(--wb-purple);
}
.wb-ios-cards {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px;
}
.wb-ios-cards .ac {
  flex: none; width: 200px;
  background: var(--wb-paper);
  border: 1px solid var(--wb-line);
  border-radius: 18px;
  padding: 16px 18px;
}
.wb-ios-cards .ac.lav { background: var(--wb-purple-softer); }
.wb-ios-cards .ac .tag {
  font-size: 11px; font-weight: 600; color: var(--wb-purple);
  letter-spacing: .12em; text-transform: uppercase;
}
.wb-ios-cards .ac .v {
  font-family: var(--wb-display); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 600;
  letter-spacing: -.02em; margin-top: 10px; color: var(--wb-purple-ink);
}
.wb-ios-cards .ac .sub { font-size: 11px; color: var(--wb-ink-mute); margin-top: 4px; }

.wb-ios-activity {
  margin: 20px 16px 0;
  background: var(--wb-paper);
  border-radius: 20px;
  border: 1px solid var(--wb-line);
  overflow: hidden;
}
.wb-ios-activity .head {
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--wb-line-soft);
}
.wb-ios-activity .head .t {
  font-family: var(--wb-display); font-size: 17px; font-weight: 600;
}
.wb-ios-activity .head .more {
  font-size: 12px; font-weight: 600; color: var(--wb-purple);
}
.wb-ios-activity .row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--wb-line-soft);
  display: flex; align-items: center; gap: 12px;
}
.wb-ios-activity .row:last-child { border-bottom: 0; }
.wb-ios-activity .row .ic {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--wb-line-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex: none;
}
.wb-ios-activity .row.in .ic { background: rgba(107,79,230,.08); }
.wb-ios-activity .row .text { flex: 1; min-width: 0; }
.wb-ios-activity .row .text .who {
  font-size: 14px; font-weight: 600; color: var(--wb-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-ios-activity .row .text .sub {
  font-size: 11.5px; color: var(--wb-ink-mute); margin-top: 1px;
}
.wb-ios-activity .row .amt {
  font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; color: var(--wb-ink);
}
.wb-ios-activity .row .amt.in { color: var(--wb-good); }

/* iOS send + confirmation */
.wb-ios-form-pad { padding: 18px 16px 130px; display: flex; flex-direction: column; gap: 16px; }
.wb-ios-pageheader {
  padding: max(env(safe-area-inset-top), 20px) 16px 14px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--wb-line);
  background: var(--wb-paper);
}
.wb-ios-pageheader .back {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--wb-cream);
  display: flex; align-items: center; justify-content: center;
  color: var(--wb-purple-ink);
  border: 0; cursor: pointer;
}
.wb-ios-pageheader .t {
  font-family: var(--wb-display); font-size: 19px; font-weight: 600;
  letter-spacing: -.01em;
}
.wb-ios-pageheader .s { font-size: 11.5px; color: var(--wb-ink-mute); }

.wb-ios-panel {
  background: var(--wb-paper);
  border-radius: 18px;
  border: 1px solid var(--wb-line);
  overflow: hidden;
}
.wb-ios-panel.pad { padding: 14px 16px; }
.wb-ios-panel .lab {
  font-size: 11px; color: var(--wb-ink-mute);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
.wb-ios-from {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
}
.wb-ios-from .ic {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, var(--wb-purple), var(--wb-purple-deep));
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.wb-ios-from .body .nm { font-size: 14px; font-weight: 600; }
.wb-ios-from .body .iban {
  font-family: var(--wb-mono); font-size: 11.5px;
  color: var(--wb-ink-mute); letter-spacing: .04em; margin-top: 2px;
}

.wb-ios-amount {
  background: var(--wb-paper); border-radius: 18px;
  border: 1px solid var(--wb-line);
  padding: 24px 16px; text-align: center;
}
.wb-ios-amount .lab {
  font-size: 11px; color: var(--wb-ink-mute); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.wb-ios-amount .input-wrap {
  display: flex; align-items: baseline; justify-content: center;
  gap: 4px; margin-top: 10px; color: var(--wb-ink-mute);
  font-family: var(--wb-display);
}
.wb-ios-amount .sym { font-size: 28px; font-weight: 500; }
.wb-ios-amount input {
  font-family: var(--wb-display);
  font-size: 56px; font-weight: 600;
  letter-spacing: -.03em; line-height: 1;
  border: 0; background: transparent;
  width: 280px; max-width: 80%;
  color: var(--wb-ink); text-align: center;
  outline: none; padding: 0;
  font-variant-numeric: tabular-nums;
}
.wb-ios-amount input::placeholder { color: var(--wb-ink-mute); }
.wb-ios-amount .hint {
  font-size: 11.5px; color: var(--wb-ink-mute); margin-top: 8px;
}

.wb-ios-fields .row {
  padding: 12px 16px;
  border-top: 1px solid var(--wb-line-soft);
  display: flex; align-items: center; gap: 12px;
}
.wb-ios-fields .row:first-child { border-top: 0; }
.wb-ios-fields .row .k {
  font-size: 13px; color: var(--wb-ink-soft); width: 110px; flex: none;
}
.wb-ios-fields .row input {
  flex: 1; font-size: 14px; color: var(--wb-ink);
  border: 0; background: transparent; outline: none; padding: 0;
}
.wb-ios-fields .row input::placeholder { color: var(--wb-ink-mute); }

.wb-ios-fields .head-lab {
  padding: 14px 16px 4px;
  font-size: 11px; color: var(--wb-ink-mute);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}

.wb-ios-conf {
  flex: 1; padding: max(env(safe-area-inset-top), 56px) 22px 130px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--wb-purple-soft) 0%, var(--wb-cream) 38%);
  overflow-y: auto; min-height: 100vh;
}
.wb-ios-conf .check {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--wb-purple), var(--wb-purple-deep));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(107,79,230,.33);
  margin-top: 12px;
}
.wb-ios-conf h1 {
  font-family: var(--wb-display);
  font-size: 30px; font-weight: 600;
  letter-spacing: -.02em; margin: 8px 0 6px; line-height: 1.1;
}
.wb-ios-conf .lede { font-size: 13px; color: var(--wb-ink-soft); margin: 0; line-height: 1.5; }
.wb-ios-conf .txn {
  margin-top: 28px; padding: 22px;
  background: var(--wb-paper);
  border-radius: 18px; border: 1px solid var(--wb-line);
  box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 8px 28px rgba(31,18,64,.06);
}
.wb-ios-conf .txn .lab {
  font-size: 11px; font-weight: 600; color: var(--wb-ink-mute);
  letter-spacing: .16em; text-transform: uppercase;
}
.wb-ios-conf .txn .ref {
  font-family: var(--wb-mono);
  font-size: 40px; font-weight: 700;
  color: var(--wb-purple); letter-spacing: .16em;
  margin-top: 10px; line-height: 1;
}
.wb-ios-conf .txn .note {
  font-size: 11.5px; color: var(--wb-ink-mute); margin-top: 10px; line-height: 1.5;
}
.wb-ios-conf .txn .actions {
  display: flex; gap: 8px; margin-top: 16px;
}
.wb-ios-conf .txn .actions .wb-btn { flex: 1; }
.wb-ios-conf .details {
  margin-top: 16px;
  background: var(--wb-paper); border-radius: 18px;
  border: 1px solid var(--wb-line); overflow: hidden;
}
.wb-ios-conf .details .r {
  padding: 12px 18px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--wb-line-soft);
  gap: 12px;
}
.wb-ios-conf .details .r:last-child { border-bottom: 0; }
.wb-ios-conf .details .r .k {
  font-size: 12px; color: var(--wb-ink-mute);
  letter-spacing: .04em; font-weight: 500;
}
.wb-ios-conf .details .r .v {
  font-size: 13px; font-weight: 500; color: var(--wb-ink);
  text-align: right; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wb-ios-tabbar {
  position: fixed; left: 12px; right: 12px;
  bottom: max(env(safe-area-inset-bottom), 18px);
  border-radius: 28px; padding: 10px 8px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 -2px 14px rgba(31,18,64,.06), 0 12px 36px rgba(31,18,64,.12);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4;
  z-index: 50;
}
.wb-ios-tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 0;
  color: var(--wb-ink-mute); font-weight: 500;
  text-decoration: none;
}
.wb-ios-tabbar a.on { color: var(--wb-purple); }
.wb-ios-tabbar a .lab { font-size: 10.5px; letter-spacing: -.01em; }