/* ==========================================================================
   Petronis Bank — Mobile-first app design system
   Derived from the JDD Banking UI kit frames in /Design.

   Loaded alongside the existing Metronic bundles. Everything here is
   namespaced under .pb-* so it cannot leak into legacy pages.

   Design language:
     - near-black surfaces on light backgrounds
     - wide-tracked uppercase screen titles
     - generous whitespace, thin line icons
     - one column on phones, widening (never re-flowing) on desktop
   ========================================================================== */

:root {
    /* Accent is injected per-request from the admin theme setting so the
       existing theme picker keeps working. Falls back to the design's black.

       --pb-accent      the admin's chosen colour
       --pb-brand       filled surfaces that follow the theme (cards, action
                        buttons); defaults to the accent
       --pb-on-brand    text/icons drawn on top of --pb-brand */
    --pb-accent: #111111;
    --pb-brand: var(--pb-accent);
    --pb-on-brand: #ffffff;

    --pb-ink: #111111;
    --pb-ink-soft: #3a3a3a;
    --pb-muted: #8b8b8b;
    --pb-faint: #b9b9b9;
    --pb-line: #ececec;
    --pb-surface: #ffffff;
    --pb-canvas: #fafafa;

    --pb-radius: 18px;
    --pb-radius-lg: 24px;
    --pb-radius-pill: 999px;

    /* Mobile gutter; widened at larger breakpoints below. */
    --pb-gutter: 24px;
    --pb-shell: 100%;

    --pb-shadow-card: 0 12px 28px rgba(0, 0, 0, .16);
    --pb-shadow-soft: 0 2px 10px rgba(0, 0, 0, .05);

    --pb-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

/* Border-box for everything we own. The host Metronic reset does not cover
   these namespaced elements, and without it any padded 100%-wide block
   overflows its parent. */
[class^="pb-"],
[class*=" pb-"],
[class^="pb-"]::before,
[class^="pb-"]::after,
[class*=" pb-"]::before,
[class*=" pb-"]::after {
    box-sizing: border-box;
}

.pb-app {
    background: var(--pb-surface);
    color: var(--pb-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Horizontal rhythm. On phones this is the full width minus gutters; on
   desktop it becomes a centred column so the design keeps its proportions
   instead of stretching into an unreadable wide band. */
.pb-shell {
    width: 100%;
    max-width: var(--pb-shell);
    margin-inline: auto;
    padding-inline: var(--pb-gutter);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

/* The kit's defining mark: large, wide-tracked, uppercase screen titles. */
.pb-title {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
    color: var(--pb-ink);
}

.pb-eyebrow {
    font-size: .75rem;
    color: var(--pb-muted);
    letter-spacing: .02em;
    margin: 0;
}

.pb-section-title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .01em;
    margin: 0;
    color: var(--pb-ink);
}

.pb-muted { color: var(--pb-muted); }
.pb-faint { color: var(--pb-faint); }

/* Tabular figures keep money columns aligned across rows. */
.pb-numeric {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   Splash
   -------------------------------------------------------------------------- */

.pb-splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--pb-surface);
    color: var(--pb-ink);
    z-index: 2000;
}

.pb-splash--dark {
    background: #333333;
    color: #ffffff;
}

.pb-splash__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-inline: var(--pb-gutter);
    text-align: center;
    /* Nudged up slightly: optical centre sits above geometric centre. */
    margin-top: -6vh;
    opacity: 0;
    animation: pb-splash-in .9s var(--pb-ease) forwards;
}

.pb-splash__wordmark {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}

.pb-splash__logo {
    max-height: 64px;
    max-width: 70vw;
    width: auto;
    object-fit: contain;
}

/* The uploaded logo is a dark-ink mark, so it disappears on the dark splash.
   Until a light-on-dark asset is supplied, lift it to white there. Set
   data-pb-logo-invert="false" on the image once a proper asset exists. */
.pb-splash--dark .pb-splash__logo:not([data-pb-logo-invert="false"]) {
    filter: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
    .pb-splash--auto .pb-splash__logo:not([data-pb-logo-invert="false"]) {
        filter: brightness(0) invert(1);
    }
}

.pb-splash__footer {
    position: absolute;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    text-align: center;
    font-size: .6875rem;
    color: var(--pb-faint);
    opacity: 0;
    animation: pb-splash-in .9s var(--pb-ease) .25s forwards;
}

.pb-splash--dark .pb-splash__footer { color: rgba(255, 255, 255, .5); }

@keyframes pb-splash-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Respect users who have asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .pb-splash__brand,
    .pb-splash__footer {
        animation: none;
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   Auth screens
   -------------------------------------------------------------------------- */

.pb-auth {
    position: relative; /* anchors the corner language switcher */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Centre the stack on tall screens, but let it grow naturally and scroll
       once the content exceeds the viewport (small phones, long error lists). */
    justify-content: center;
    padding-block: 40px calc(32px + env(safe-area-inset-bottom, 0px));
}

.pb-auth__head {
    margin-bottom: 28px;
}

.pb-auth__sub {
    font-size: .9375rem;
    color: var(--pb-muted);
    margin: 10px 0 0;
    line-height: 1.5;
}

/* Sits directly under the form rather than being pushed to the viewport
   floor, which stranded it on tall screens. */
.pb-auth__foot {
    padding-top: 28px;
    text-align: center;
    font-size: .875rem;
    color: var(--pb-muted);
}

.pb-auth__foot a {
    color: var(--pb-ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--pb-line);
    padding-bottom: 1px;
}

.pb-auth__foot a:hover { border-bottom-color: var(--pb-ink); }

.pb-auth__copyright {
    margin: 20px 0 0;
    text-align: center;
    font-size: .75rem;
    color: var(--pb-faint);
}

/* --------------------------------------------------------------------------
   Segmented control (the kit's pill tabs)
   -------------------------------------------------------------------------- */

.pb-segment {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
}

.pb-segment__item {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--pb-faint);
    padding: 13px 30px;
    border-radius: var(--pb-radius-pill);
    cursor: pointer;
    transition: color .2s var(--pb-ease), background-color .2s var(--pb-ease);
    white-space: nowrap;
    /* These are links as well as buttons; never underline them. */
    text-decoration: none;
}

.pb-segment__item:hover { color: var(--pb-muted); }

.pb-segment__item.is-active {
    background: var(--pb-ink);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

.pb-segment__item.is-active:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

.pb-field { margin-bottom: 20px; }

.pb-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pb-ink-soft);
    margin-bottom: 8px;
}

/* Soft-filled inputs with no visible border, as drawn in the kit. */
.pb-input {
    display: block;
    width: 100%;
    background: #f6f6f6;
    border: 1.5px solid transparent;
    border-radius: 14px;
    padding: 17px 18px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--pb-ink);
    transition: border-color .18s var(--pb-ease), background-color .18s var(--pb-ease);
}

.pb-input::placeholder { color: var(--pb-faint); }

.pb-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--pb-ink);
}

.pb-input.is-invalid { border-color: #d93025; }

/* Room for the visibility toggle inside password fields. */
.pb-field--password { position: relative; }
.pb-field--password .pb-input { padding-right: 52px; }

.pb-reveal {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--pb-muted);
    cursor: pointer;
    border-radius: 10px;
}

.pb-reveal:hover { color: var(--pb-ink); }

/* --------------------------------------------------------------------------
   Checkbox
   -------------------------------------------------------------------------- */

.pb-check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
    cursor: pointer;
    user-select: none;
}

.pb-check input {
    appearance: none;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 2px solid var(--pb-ink);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    position: relative;
    margin: 0;
}

.pb-check input:checked { background: var(--pb-ink); }

.pb-check input:checked::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.pb-check input:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

.pb-check span {
    font-size: .9375rem;
    color: var(--pb-ink-soft);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.pb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border: 1.5px solid transparent;
    border-radius: var(--pb-radius);
    padding: 19px 22px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s var(--pb-ease), opacity .18s var(--pb-ease),
                background-color .18s var(--pb-ease), border-color .18s var(--pb-ease);
}

.pb-btn:active { transform: scale(.985); }

.pb-btn--primary {
    background: var(--pb-brand);
    color: var(--pb-on-brand);
}

.pb-btn--primary:hover { opacity: .88; color: var(--pb-on-brand); }

.pb-btn--ghost {
    background: #fff;
    color: var(--pb-ink);
    border-color: var(--pb-ink);
}

.pb-btn--ghost:hover { background: #fafafa; color: var(--pb-ink); }

.pb-btn:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 3px;
}

.pb-btn[disabled] { opacity: .45; cursor: not-allowed; }

.pb-btn + .pb-btn { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Divider with centred label
   -------------------------------------------------------------------------- */

.pb-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 26px 0;
    color: var(--pb-faint);
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pb-divider::before,
.pb-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--pb-line);
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.pb-alert {
    border-radius: 14px;
    padding: 14px 16px;
    font-size: .875rem;
    line-height: 1.5;
    margin-bottom: 20px;
    border: 1.5px solid;
}

.pb-alert--error {
    background: #fdf3f2;
    border-color: #f3d3cf;
    color: #a02a1c;
}

.pb-alert--notice {
    background: #f7f7f7;
    border-color: var(--pb-line);
    color: var(--pb-ink-soft);
}

.pb-alert--success {
    background: #f1f9f3;
    border-color: #cfe8d6;
    color: #1e6b3a;
}

.pb-alert--warning {
    background: #fffaf0;
    border-color: #f5e2bd;
    color: #7a5510;
}

.pb-alert__title {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
}

.pb-alert a { color: inherit; font-weight: 600; }

.pb-alert ul { margin: 0; padding-left: 18px; }

/* --------------------------------------------------------------------------
   Language switcher — icon tile with a popover of locales
   -------------------------------------------------------------------------- */

/* Corner-anchored: sits top-right of the screen, out of the content flow. */
.pb-lang {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: var(--pb-gutter);
    z-index: 70;
}

/* Small tile showing the current language code. */
.pb-lang__toggle {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border: 0;
    border-radius: 11px;
    background: #fff;
    color: var(--pb-ink);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .10), 0 1px 2px rgba(0, 0, 0, .06);
    transition: transform .14s var(--pb-ease), box-shadow .18s var(--pb-ease);
}

.pb-lang__toggle:hover {
    box-shadow: 0 5px 16px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .08);
}

.pb-lang__toggle:active { transform: scale(.96); }

.pb-lang__toggle:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 3px;
}

/* Caret rotates when the list is open. */
.pb-lang__caret {
    transition: transform .18s var(--pb-ease);
    color: var(--pb-faint);
}

.pb-lang.is-open .pb-lang__caret { transform: rotate(180deg); }

/* Vertical list, right-aligned under the tile. */
.pb-lang__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px;
    min-width: 108px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .07);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .16s var(--pb-ease), transform .16s var(--pb-ease),
                visibility 0s linear .16s;
}

.pb-lang.is-open .pb-lang__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Arrow pointing up at the tile, aligned to the right edge. */
.pb-lang__menu::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 3px;
}

.pb-lang__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pb-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .16s var(--pb-ease), color .16s var(--pb-ease);
}

.pb-lang__item:hover {
    background: #f4f4f4;
    color: var(--pb-ink);
}

.pb-lang__item.is-active {
    background: #f0f0f0;
    color: var(--pb-ink);
    font-weight: 700;
}

.pb-lang__item:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: -2px;
}

/* Fixed-width code column keeps the language names aligned. */
.pb-lang__code {
    flex: 0 0 22px;
    font-weight: 700;
    letter-spacing: .04em;
}

.pb-lang__name {
    font-weight: inherit;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.pb-brandmark {
    display: block;
    max-height: 40px;
    width: auto;
    /* Top margin clears the absolutely-positioned corner switcher. */
    margin: 24px auto 30px;
}

.pb-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   App shell — screens with the bottom tab bar
   -------------------------------------------------------------------------- */

.pb-screen {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--pb-surface);
    /* Clear the floating tab bar, its bottom offset and the home indicator. */
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

/* Greeting row: avatar, date + name, then actions. */
.pb-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    margin-bottom: 22px;
}

.pb-topbar__avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    object-fit: cover;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pb-ink);
}

.pb-topbar__who { flex: 1; min-width: 0; }

.pb-topbar__date {
    display: block;
    font-size: .75rem;
    color: var(--pb-faint);
    margin-bottom: 1px;
}

.pb-topbar__name {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-topbar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-iconbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pb-ink);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: background-color .16s var(--pb-ease);
}

.pb-iconbtn:hover { background: #f4f4f4; color: var(--pb-ink); }

.pb-iconbtn:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

/* Unread dot on the bell. */
.pb-iconbtn__dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d93025;
    border: 1.5px solid #fff;
}

/* --------------------------------------------------------------------------
   Account cards — horizontal snap carousel
   -------------------------------------------------------------------------- */

.pb-dots__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pb-line);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color .18s var(--pb-ease);
}

.pb-dots__dot.is-active { background: var(--pb-ink); }

/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */

.pb-sec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pb-sec__link {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--pb-muted);
    text-decoration: none;
}

.pb-sec__link:hover { color: var(--pb-ink); }

/* --------------------------------------------------------------------------
   Quick actions
   -------------------------------------------------------------------------- */

.pb-quick {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}

.pb-quick__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--pb-muted);
    font-size: .75rem;
    text-align: center;
}

.pb-quick__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
    transition: transform .16s var(--pb-ease);
}

.pb-quick__item:hover { color: var(--pb-ink); }
.pb-quick__item:hover .pb-quick__icon { transform: translateY(-2px); }
.pb-quick__item:active .pb-quick__icon { transform: scale(.95); }

.pb-quick__item:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 4px;
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Transaction list
   -------------------------------------------------------------------------- */

.pb-list {
    border: 1.5px solid var(--pb-line);
    border-radius: var(--pb-radius);
    overflow: hidden;
}

.pb-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 18px;
    text-decoration: none;
    color: inherit;
    transition: background-color .16s var(--pb-ease);
}

.pb-row + .pb-row { border-top: 1px solid var(--pb-line); }

.pb-row:hover { background: #fafafa; color: inherit; }

.pb-row__body { flex: 1; min-width: 0; }

.pb-row__title {
    display: block;
    font-size: .9375rem;
    color: var(--pb-ink);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-row__date {
    display: block;
    font-size: .75rem;
    color: var(--pb-faint);
}

.pb-row__amount {
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;
}

.pb-row__amount--in  { color: #1e7a42; }
.pb-row__amount--out { color: var(--pb-ink); }

/* Empty state */
.pb-empty {
    padding: 38px 20px;
    text-align: center;
    color: var(--pb-faint);
    font-size: .875rem;
}

/* --------------------------------------------------------------------------
   Payment card
   -------------------------------------------------------------------------- */

.pb-pcard {
    position: relative;
    aspect-ratio: 1.586;          /* ISO/IEC 7810 ID-1 */
    max-width: 400px;
    padding: 22px;
    border-radius: var(--pb-radius-lg);
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--pb-shadow-card);
}

.pb-pcard::before,
.pb-pcard::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.pb-pcard::before {
    width: 74%;
    aspect-ratio: 1;
    right: -14%;
    top: -26%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

.pb-pcard::after {
    width: 52%;
    aspect-ratio: 1;
    left: -12%;
    bottom: -30%;
    background: rgba(255, 255, 255, .05);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.pb-pcard__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pb-pcard__issuer {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .92;
}

.pb-pcard__balance {
    position: relative;
    z-index: 1;
    margin-top: auto;
    font-size: 1.5rem;
    font-weight: 500;
}

.pb-pcard__holder {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .9;
}

.pb-pcard__foot {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.pb-pcard__number {
    font-size: .9375rem;
    letter-spacing: .14em;
    font-variant-numeric: tabular-nums;
}

.pb-pcard__expiry {
    font-size: .75rem;
    opacity: .82;
    margin-top: 4px;
    letter-spacing: .06em;
}

.pb-pcard__brand {
    font-size: 1.125rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .04em;
}

/* Frozen state: dim the card and stamp a padlock over it. */
.pb-pcard.is-locked > * { opacity: .34; }

.pb-pcard__lock {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pb-on-brand);
    opacity: 1 !important;
}

.pb-pcard__lock svg {
    width: 62px;
    height: 62px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .3));
}

/* Card rail (multiple cards + add button) */
.pb-pcards {
    display: flex;
    align-items: center;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pb-gutter) * -1);
    padding-inline: var(--pb-gutter);
    padding-block: 4px 12px;
    scrollbar-width: none;
}

.pb-pcards::-webkit-scrollbar { display: none; }

.pb-pcards > .pb-pcard {
    flex: 0 0 86%;
    scroll-snap-align: center;
}

.pb-addcard {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #f1f1f1;
    color: var(--pb-muted);
    border: 0;
    cursor: pointer;
    text-decoration: none;
}

.pb-addcard:hover { background: #e8e8e8; color: var(--pb-ink); }

/* --------------------------------------------------------------------------
   Toggle switch
   -------------------------------------------------------------------------- */

.pb-switch {
    position: relative;
    flex: 0 0 auto;
    width: 54px;
    height: 31px;
    border: 0;
    padding: 0;
    border-radius: var(--pb-radius-pill);
    background: #d8d8d8;
    cursor: pointer;
    transition: background-color .2s var(--pb-ease);
}

.pb-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .2s var(--pb-ease);
}

.pb-switch.is-on { background: var(--pb-brand); }
.pb-switch.is-on::after { transform: translateX(23px); }

.pb-switch:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Range slider
   -------------------------------------------------------------------------- */

.pb-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: var(--pb-line);
    outline: none;
    margin: 10px 0 0;
}

.pb-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--pb-line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    cursor: pointer;
}

.pb-range::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--pb-line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    cursor: pointer;
}

.pb-rangerow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.pb-rangerow__value {
    font-size: 1.25rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Row with a trailing control (toggle, chevron) */
.pb-setting {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 0;
    border-bottom: 1px solid var(--pb-line);
    text-decoration: none;
    color: inherit;
}

.pb-setting:hover { color: inherit; }

.pb-setting__label { flex: 1; min-width: 0; font-size: .9375rem; }

/* --------------------------------------------------------------------------
   Stats — monthly bars and breakdown
   -------------------------------------------------------------------------- */

/* Header row: segmented tabs on the left, period total on the right. */
.pb-statbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.pb-statbar .pb-segment { margin-bottom: 0; }

.pb-stattotal {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    margin-left: auto;
}

.pb-stattotal--in  { color: #1e7a42; }
.pb-stattotal--out { color: var(--pb-ink); }

/* Bar chart. Bars are absolutely sized by inline height percentages. */
.pb-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 190px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pb-line);
    margin-bottom: 12px;
}

.pb-chart__group {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    height: 100%;
    min-width: 0;
}

.pb-chart__bar {
    width: 13px;
    max-width: 22%;
    border-radius: 4px 4px 0 0;
    background: var(--pb-line);
    transition: background-color .18s var(--pb-ease), filter .18s var(--pb-ease);
    /* Keep a hairline visible for zero-value months. */
    min-height: 3px;
}

.pb-chart__bar--in  { background: #cfe3d6; }
.pb-chart__bar--out { background: #e2e2e2; }

/* The selected month is drawn in full strength. */
.pb-chart__group.is-active .pb-chart__bar--in  { background: #2e9e5b; }
.pb-chart__group.is-active .pb-chart__bar--out { background: var(--pb-ink); }

.pb-chart__labels {
    display: flex;
    gap: 4px;
    margin-bottom: 30px;
}

.pb-chart__label {
    flex: 1;
    text-align: center;
    font-size: .75rem;
    color: var(--pb-faint);
    line-height: 1.35;
    min-width: 0;
    text-decoration: none;
    transition: color .16s var(--pb-ease);
}

.pb-chart__label:hover { color: var(--pb-muted); }

.pb-chart__label.is-active { color: var(--pb-ink); font-weight: 600; }

.pb-chart__label span { display: block; font-size: .6875rem; opacity: .75; }

/* Breakdown tiles */
.pb-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 30px;
}

.pb-tile {
    padding: 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--pb-shadow-soft);
    border: 1px solid var(--pb-line);
    min-width: 0;
}

.pb-tile__label {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-tile__value {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--pb-ink);
    margin-bottom: 10px;
}

.pb-meter {
    height: 4px;
    border-radius: 2px;
    background: var(--pb-line);
    overflow: hidden;
}

.pb-meter__fill {
    height: 100%;
    border-radius: 2px;
    background: var(--pb-ink);
}

/* Donut built from a conic gradient; slices are supplied inline. */
.pb-donut {
    position: relative;
    width: 210px;
    max-width: 62vw;
    aspect-ratio: 1;
    margin: 4px auto 28px;
    border-radius: 50%;
}

.pb-donut__hole {
    position: absolute;
    inset: 21%;
    background: var(--pb-surface);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pb-donut__period {
    font-size: .8125rem;
    color: var(--pb-muted);
    line-height: 1.3;
}

.pb-donut__value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--pb-ink);
    margin-top: 4px;
}

/* Legend */
.pb-legend {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 30px;
}

.pb-legend__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 2px;
}

.pb-legend__item + .pb-legend__item { border-top: 1px solid var(--pb-line); }

.pb-legend__swatch {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

.pb-legend__name {
    flex: 1;
    min-width: 0;
    font-size: .9375rem;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-legend__value {
    font-size: .9375rem;
    color: var(--pb-ink);
    white-space: nowrap;
}

.pb-legend__pct {
    font-size: .8125rem;
    color: var(--pb-muted);
    white-space: nowrap;
    min-width: 42px;
    text-align: right;
}

/* --------------------------------------------------------------------------
   Option rows — the kit's method picker
   -------------------------------------------------------------------------- */

.pb-options { margin-top: 4px; }

/* --------------------------------------------------------------------------
   Linked cards, drawn from the card artwork
   -------------------------------------------------------------------------- */


/* The card as a card: artwork behind, a frosted strip across the lower
   third, and the details laid over it — the shape the design uses. */
/* A payment card is 85.6 x 53.98mm — 1.586:1. Holding that ratio is what
   makes it read as a card rather than a coloured panel. */
.pb-vcard {
    position: relative;
    aspect-ratio: 1.586 / 1;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    color: #fff;
    background: #1b1030 center / cover no-repeat;
    box-shadow: 0 4px 18px rgba(19, 28, 51, .22);
}

/* Older browsers without aspect-ratio still get the shape. */
@supports not (aspect-ratio: 1 / 1) {
    .pb-vcard::before {
        content: '';
        display: block;
        padding-top: 63.05%;
    }
}

.pb-cardslot + .pb-cardslot { margin-top: 20px; }

.pb-vcard--aurora { background-image: url('../img/card/bg-aurora.svg'); }
.pb-vcard--meadow { background-image: url('../img/card/bg-meadow.svg'); }
.pb-vcard--86     { background-image: url('../img/card/bg-86.svg'); }
.pb-vcard--112    { background-image: url('../img/card/bg-112.svg'); }

/* A card whose checks failed reads as unusable without hiding it. */
.pb-vcard.is-failed { filter: grayscale(.7); opacity: .8; }

.pb-vcard__face {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5.5% 6% 4%;
}

.pb-vcard__bank {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.pb-vcard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

.pb-vcard__chip { flex: 0 0 auto; }

/* The security code, shown only while the card is revealed. It sits between
   the chip and the contactless mark, where the card has room — the footer
   already carries a name and a date. */
.pb-vcard__cvc {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin-left: auto;
    margin-right: 12px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .32);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pb-vcard__cvclabel {
    font-size: clamp(.5rem, 2.4cqw, .625rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .85;
}

.pb-vcard__cvcvalue {
    font-size: clamp(.75rem, 3.6cqw, .9375rem);
    font-weight: 700;
    letter-spacing: .08em;
}

.pb-vcard__wave {
    flex: 0 0 auto;
    /* The asset is dark; on artwork it needs to read as white. */
    filter: brightness(0) invert(1);
    opacity: .95;
}

.pb-vcard__num {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 2%;
    /* Sized from the card's own width so all four groups stay on one line
       at any card size, including 320px. */
    font-size: clamp(.95rem, 6.2cqw, 1.6rem);
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* The lower strip: frosted, so the artwork still shows through it. */
.pb-vcard__foot {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 5%;
    padding: 3.5% 6% 4.5%;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.pb-vcard__field { min-width: 0; }

.pb-vcard__label {
    display: block;
    font-size: clamp(.5rem, 2.6cqw, .6875rem);
    opacity: .85;
    margin-bottom: 2px;
}

.pb-vcard__value {
    display: block;
    font-size: clamp(.7rem, 4cqw, 1rem);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.pb-vcard__brand {
    margin-left: auto;
    flex: 0 0 auto;
    border-radius: 5px;
}

.pb-vcard__brand--text {
    font-size: 1rem;
    font-weight: 800;
    font-style: italic;
    color: var(--pb-ink);
}

/* The bar beneath a card.
   Off the artwork, each control can take the colour of what it does: neutral
   to reveal, brand to promote, red to remove. */
.pb-cardbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(19, 28, 51, .05);
}

.pb-cardbar__tags {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    /* The tags are what yields when the row runs out of width. */
    min-width: 0;
    overflow: hidden;
}

/* State reads by colour and shape together, never colour alone. */
.pb-tag {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

.pb-tag--default { background: #e8f0fe; color: #1a56c4; }
.pb-tag--ok      { background: #e3f6ea; color: #1a6b3a; }
.pb-tag--wait    { background: #fdf0dc; color: #96601a; }
.pb-tag--bad     { background: #fde8e6; color: #a02a1c; }

.pb-cardbar__acts {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
}

.pb-cardbar__acts form { display: inline-flex; }

/* An icon action: square, so a row of them lines up regardless of what
   each one holds. */
.pb-iact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1.5px solid var(--pb-line);
    border-radius: 11px;
    background: #fff;
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    color: var(--pb-ink-soft);
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease),
                color .16s var(--pb-ease);
}

/* The one action that needs its label keeps it, and stops being square. */
.pb-iact--wide {
    width: auto;
    padding: 0 12px;
    white-space: nowrap;
}

.pb-iact:hover {
    border-color: var(--pb-brand);
    background: color-mix(in srgb, var(--pb-brand) 7%, #fff);
    color: var(--pb-brand);
}

.pb-iact--danger { color: #a02a1c; border-color: #f0d4d0; }

.pb-iact--danger:hover {
    border-color: #a02a1c;
    background: #fdf1f0;
    color: #a02a1c;
}

.pb-iact:focus-visible {
    outline: 2px solid var(--pb-brand);
    outline-offset: 2px;
}

.pb-iact svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   More than one card: a rail rather than a stack
   -------------------------------------------------------------------------- */

.pb-cards { margin-bottom: 22px; }

/* Each card is a container, so its contents can be sized from its own width
   rather than the viewport's. */
.pb-cardslot { container-type: inline-size; }

.pb-cards.is-carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the screen edge, then pad back, so a card can sit flush
       while the next one peeks in. */
    margin-inline: calc(var(--pb-gutter) * -1);
    padding-inline: var(--pb-gutter);
    padding-bottom: 4px;
}

.pb-cards.is-carousel::-webkit-scrollbar { display: none; }

.pb-cards.is-carousel .pb-cardslot {
    /* Slightly narrower than the shell, so the edge of the next card shows
       and the rail reads as swipeable without a hint. */
    flex: 0 0 min(86%, 340px);
    scroll-snap-align: center;
}

.pb-cards.is-carousel .pb-cardslot + .pb-cardslot { margin-top: 0; }

.pb-carddots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 22px;
}

.pb-carddots__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pb-line);
    transition: width .18s var(--pb-ease), background-color .18s var(--pb-ease);
}

/* The current card's dot stretches rather than only changing colour, so
   position is readable without relying on hue. */
.pb-carddots__dot.is-on {
    width: 18px;
    border-radius: 999px;
    background: var(--pb-brand);
}

/* --------------------------------------------------------------------------
   Adding a card
   -------------------------------------------------------------------------- */

/* One invitation, not a form: the page stays quiet until it is asked. */
.pb-addcard {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 18px;
    border: 1.5px dashed var(--pb-line);
    border-radius: 16px;
    background: #fff;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pb-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease);
}

.pb-addcard:hover {
    border-color: var(--pb-brand);
    background: color-mix(in srgb, var(--pb-brand) 4%, #fff);
}

.pb-addcard__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 11px;
    background: color-mix(in srgb, var(--pb-brand) 12%, transparent);
    color: var(--pb-brand);
}

.pb-addcard__text { flex: 1 1 auto; min-width: 0; }

.pb-addcard__chev {
    flex: 0 0 auto;
    display: flex;
    color: var(--pb-faint);
    transition: transform .2s var(--pb-ease);
}

.pb-addcard.is-open .pb-addcard__chev { transform: rotate(180deg); }

.pb-addpanel { margin-top: 14px; }

/* The form itself, as a payment sheet presents it. */
.pb-cardform {
    border: 1.5px solid var(--pb-line);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 18px;
}

.pb-cardform__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    background: #f5f7fb;
    border-bottom: 1.5px solid var(--pb-line);
}

.pb-cardform__title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .875rem;
    font-weight: 700;
}

/* The selected-method dot, as a radio would render. */
.pb-cardform__dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--pb-brand);
    background:
        radial-gradient(circle at 50% 50%, var(--pb-brand) 0 3.5px, transparent 3.5px);
}

.pb-cardform__brands {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.pb-cardform__body { padding: 16px; }

.pb-cardform__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* A field owns its own error, so a message sits under the box it belongs to
   rather than at the foot of the form. */
.pb-cfield {
    position: relative;
    margin-bottom: 14px;
}

.pb-cinput {
    width: 100%;
    padding: 15px 42px 15px 14px;
    border: 1.5px solid var(--pb-line);
    border-radius: 10px;
    font: inherit;
    font-size: .9375rem;
    color: var(--pb-ink);
    background: #fff;
    transition: border-color .16s var(--pb-ease), box-shadow .16s var(--pb-ease);
}

.pb-cinput::placeholder { color: var(--pb-faint); }

.pb-cinput:focus {
    outline: 0;
    border-color: var(--pb-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-brand) 14%, transparent);
}

.pb-cfield__icon {
    position: absolute;
    top: 15px;
    right: 14px;
    display: flex;
    color: var(--pb-faint);
    pointer-events: none;
}

.pb-cfield__error {
    display: none;
    margin-top: 6px;
    font-size: .75rem;
    color: #c0392b;
    line-height: 1.35;
}

.pb-cfield.is-invalid .pb-cinput { border-color: #c0392b; }
.pb-cfield.is-invalid .pb-cfield__icon { color: #c0392b; }
.pb-cfield.is-invalid .pb-cfield__error { display: block; }

/* Below 380px the number would wrap mid-group and the two-column row would
   squeeze both fields, so the card shrinks and the row stacks. */
@media (max-width: 379px) {
    /* The card's own paddings are proportional, so only the chip and the
       controls around it need adjusting here. */
    .pb-vcard__chip { width: 38px; height: 38px; }
    .pb-vcard__wave { width: 25px; height: 25px; }

    .pb-cardbar { padding: 11px 12px; gap: 8px 10px; }
    .pb-iact { width: 34px; height: 34px; }
    .pb-iact--wide { width: auto; padding: 0 10px; }

    .pb-cardform__row { grid-template-columns: 1fr; }
    .pb-cardform__body { padding: 14px; }
    .pb-addcard { padding: 14px; gap: 10px; }
}

/* At 320px the card number must still fit on one line. */
@media (max-width: 339px) {
    .pb-vcard__chip { width: 32px; height: 32px; }
    .pb-vcard__wave { width: 21px; height: 21px; }

    /* The remaining label goes before the icons do: a tick, an eye and a
       bin are understood at any size, and the titles still carry meaning. */
    .pb-iact { width: 32px; height: 32px; }
    .pb-iact--wide { width: 32px; padding: 0; font-size: 0; gap: 0; }
    .pb-iact--wide svg { font-size: initial; }

    .pb-cardform__brands img { height: 16px; }
}

/* --------------------------------------------------------------------------
   Saved cards, drawn as cards
   -------------------------------------------------------------------------- */

/* A customer recognises their own card by its face before they read four
   digits off a list, so the linked card is shown as the card it is. */
.pb-cardface {
    position: relative;
    border-radius: 18px;
    padding: 16px 18px 0;
    color: #fff;
    background: linear-gradient(135deg, #1f2a44 0%, #2f4064 55%, #24314e 100%);
    box-shadow: 0 2px 10px rgba(19, 28, 51, .18);
    overflow: hidden;
}

.pb-cardface + .pb-cardface { margin-top: 14px; }

/* The preview is the same face, waiting to be filled. Dashed until it holds
   a real number, so it does not read as a card already linked. */
.pb-cardface--preview {
    margin-bottom: 24px;
    box-shadow:
        0 2px 10px rgba(19, 28, 51, .18),
        inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}

.pb-cardface--preview .pb-cardface__num,
.pb-cardface--preview .pb-cardface__value {
    transition: color .16s var(--pb-ease);
}

/* The brand chip starts as a label and becomes the network once known. */
.pb-cardface--preview .pb-cardface__tag {
    background: rgba(255, 255, 255, .18);
}

/* A soft sheen across the face, so it reads as a surface rather than a
   flat rectangle. */
.pb-cardface::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 85% 5%, rgba(255, 255, 255, .16), transparent 55%),
        radial-gradient(90% 70% at 10% 100%, rgba(255, 255, 255, .08), transparent 60%);
    pointer-events: none;
}

/* Each network gets its own face, the way real cards differ. */
.pb-cardface--visa {
    background: linear-gradient(135deg, #16325c 0%, #21467f 55%, #17305a 100%);
}

.pb-cardface--mastercard {
    background: linear-gradient(135deg, #3a2418 0%, #6b3a1f 55%, #402616 100%);
}

.pb-cardface--amex,
.pb-cardface--americanexpress {
    background: linear-gradient(135deg, #10403c 0%, #17635b 55%, #0f3b37 100%);
}

/* A card that failed its checks says so through its own face. */
.pb-cardface.is-failed {
    background: linear-gradient(135deg, #4a2020 0%, #6d2c2c 55%, #451e1e 100%);
}

.pb-cardface__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pb-cardface__bank {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.pb-cardface__tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.pb-cardface__mid {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 12px;
}

/* The chip: three contact lines on a gold plate, as on a real card. */
.pb-cardface__chip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 38px;
    height: 29px;
    padding: 5px 6px;
    border-radius: 6px;
    background: linear-gradient(135deg, #e3c176 0%, #c9a24c 50%, #dfbc6f 100%);
}

.pb-cardface__chip span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: rgba(0, 0, 0, .28);
}

.pb-cardface__chip span:nth-child(2) { width: 70%; }

.pb-cardface__wave { display: flex; opacity: .85; }

.pb-cardface__num {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: .06em;
}

.pb-cardface__foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 18px;
    margin-top: 14px;
}

.pb-cardface__field { min-width: 0; }

.pb-cardface__label {
    display: block;
    font-size: .5625rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
}

.pb-cardface__value {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-cardface__brand {
    margin-left: auto;
    font-size: 1rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .02em;
}

/* State and actions sit on a strip below the face, so the card itself stays
   a card rather than becoming a control panel. */
.pb-cardface__bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px -18px 0;
    padding: 10px 18px;
    background: rgba(0, 0, 0, .22);
}

.pb-cardface__stage {
    font-size: .6875rem;
    font-weight: 600;
    opacity: .9;
}

.pb-cardface__acts {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pb-cardface__acts form { display: inline-flex; }

/* The row actions inherit the face, so they read on a dark surface. */
.pb-cardface__acts .pb-linked__act {
    border: 0;
    background: none;
    font: inherit;
    font-size: .6875rem;
    font-weight: 700;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.pb-cardface__acts .pb-linked__remove {
    display: flex;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    padding: 0;
}

.pb-cardface__acts .pb-linked__remove:hover { color: #fff; }

/* Below 360px the number would wrap mid-group, so it tightens instead. */
@media (max-width: 359px) {
    .pb-cardface { padding: 14px 14px 0; }
    .pb-cardface__num { font-size: 1rem; gap: 8px; letter-spacing: .04em; }
    .pb-cardface__bar { margin-inline: -14px; padding-inline: 14px; }
    .pb-cardface__foot { gap: 12px; }
}

/* --------------------------------------------------------------------------
   Deposit — where money lands, and what it comes from
   -------------------------------------------------------------------------- */

/* The destination wallet, named before anything is filled in: a deposit
   arriving in an unexpected currency is the surprise worth avoiding. */
.pb-depto {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(19, 28, 51, .05);
    margin-bottom: 24px;
}

.pb-depto__flag {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.pb-depto__body { flex: 1 1 auto; min-width: 0; }

.pb-depto__label {
    display: block;
    font-size: .6875rem;
    color: var(--pb-muted);
}

.pb-depto__value {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pb-ink);
    margin-top: 1px;
}

.pb-depto__code {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f2f4f7;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--pb-ink-soft);
}

/* Funding sources: the customer's linked card or bank account. */
.pb-srcs { display: block; }

.pb-src {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--pb-line);
    border-radius: 15px;
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease);
}

.pb-src + .pb-src { margin-top: 9px; }

/* The radio drives the row's appearance, so it does not need to be seen
   itself — but it stays focusable for the keyboard. */
.pb-src input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.pb-src:hover { border-color: var(--pb-muted); }

.pb-src:has(input:checked) {
    border-color: var(--pb-brand);
    background: color-mix(in srgb, var(--pb-brand) 5%, #fff);
}

.pb-src:has(input:focus-visible) {
    outline: 2px solid var(--pb-brand);
    outline-offset: 2px;
}

/* A source that cannot fund this deposit is shown, not hidden: knowing why
   it is unavailable is more useful than wondering where it went. */
.pb-src.is-unusable {
    cursor: not-allowed;
    opacity: .55;
    background: #fafafa;
}

.pb-src.is-unusable:hover { border-color: var(--pb-line); }

.pb-src__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #f4f5f7;
    color: var(--pb-ink);
}

.pb-src__icon--card    { background: #eef0fd; color: #3d43c8; }
.pb-src__icon--account { background: #e6f4ea; color: #1a7a3c; }
.pb-src__icon--add     { background: #e8f0fe; color: #1a56c4; }

.pb-src__body { flex: 1 1 auto; min-width: 0; }

.pb-src__title {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-src__sub {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-src__cur {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f2f4f7;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--pb-ink-soft);
}

/* The chosen row is marked by a filled dot, so selection does not rest on
   the border colour alone. */
.pb-src__tick {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--pb-line);
}

.pb-src:has(input:checked) .pb-src__tick {
    border-color: var(--pb-brand);
    background:
        radial-gradient(circle at 50% 50%, var(--pb-brand) 0 4.5px, transparent 4.5px);
}

.pb-src.is-unusable .pb-src__tick { visibility: hidden; }

.pb-src__more {
    display: inline-block;
    margin-top: 12px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--pb-brand);
    text-decoration: none;
}

/* The rail's terms, under the source's own name: what it costs and how long
   it takes, before an amount is typed rather than after. */
.pb-src__terms {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 5px;
    font-size: .6875rem;
    color: var(--pb-muted);
}

.pb-src__terms > span { white-space: nowrap; }

.pb-src__terms > span + span::before {
    content: '·';
    margin-right: 10px;
    color: var(--pb-faint);
}

/* What the deposit actually nets, worked out as the amount is typed. */
/* The figure the customer is about to send, stated before the details they
   must copy to send it. */
.pb-payhead {
    padding: 20px 18px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(19, 28, 51, .05);
    text-align: center;
    margin-bottom: 24px;
}

.pb-payhead__label {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
}

.pb-payhead__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--pb-ink);
    margin-top: 4px;
    line-height: 1.15;
}

.pb-payhead__note {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-top: 6px;
}

.pb-quote {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f7f8fa;
}

.pb-quote__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: .8125rem;
    color: var(--pb-muted);
}

.pb-quote__row + .pb-quote__row { margin-top: 6px; }

.pb-quote__row--total {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--pb-line);
    font-weight: 700;
    color: var(--pb-ink);
}

.pb-quote__row--total span:last-child { font-size: .9375rem; }

/* Past deposits: status as a pill, since "still clearing" is what a
   customer opens this list to check. */
.pb-deps { display: block; }

.pb-dep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(19, 28, 51, .05);
}

.pb-dep + .pb-dep { margin-top: 9px; }

.pb-dep__body { min-width: 0; }

.pb-dep__title {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-dep__date {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-top: 2px;
}

.pb-dep__right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.pb-dep__amount {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--pb-ink);
    white-space: nowrap;
}

.pb-dep__amount.is-in { color: #1e7a42; }

.pb-dep__status {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .625rem;
    font-weight: 700;
    white-space: nowrap;
}

.pb-dep__status.is-done      { background: #e3f6ea; color: #1a6b3a; }
.pb-dep__status.is-pending   { background: #fdf0dc; color: #96601a; }
.pb-dep__status.is-cancelled { background: #fde8e6; color: #a02a1c; }

@media (max-width: 359px) {
    .pb-src { gap: 10px; padding: 11px 11px; }
    .pb-src__icon { width: 38px; height: 38px; border-radius: 12px; }
    .pb-src__cur { display: none; }
}

/* --------------------------------------------------------------------------
   Transfer rails — the send-money picker
   -------------------------------------------------------------------------- */

/* The funding wallet, stated before the rails: it decides what the customer
   can afford, so it belongs above the choice rather than beside it. */
.pb-payfrom {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(19, 28, 51, .05);
    text-decoration: none;
    color: inherit;
    margin-bottom: 26px;
    transition: box-shadow .16s var(--pb-ease);
}

.pb-payfrom:hover { box-shadow: 0 2px 10px rgba(19, 28, 51, .09); }

.pb-payfrom__flag {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.pb-payfrom__body { flex: 1 1 auto; min-width: 0; }

.pb-payfrom__label {
    display: block;
    font-size: .6875rem;
    color: var(--pb-muted);
}

.pb-payfrom__value {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pb-ink);
    margin-top: 1px;
}

.pb-payfrom__code {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f2f4f7;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--pb-ink-soft);
}

.pb-payfrom__go { flex: 0 0 auto; color: var(--pb-faint); }

/* Each rail is a card rather than a hairline-separated row: they are the
   page's only decision, and a list of five made none of them look chosen. */
.pb-rails2 { margin-bottom: 26px; }

.pb-rail2 {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(19, 28, 51, .05);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .16s var(--pb-ease), transform .16s var(--pb-ease);
}

.pb-rail2 + .pb-rail2 { margin-top: 9px; }

.pb-rail2:hover { box-shadow: 0 2px 10px rgba(19, 28, 51, .09); }
.pb-rail2:active { transform: scale(.995); }

.pb-rail2:focus-visible {
    outline: 2px solid var(--pb-brand);
    outline-offset: 2px;
}

/* One hue per rail, matching how the wallet actions are told apart. */
.pb-rail2__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #f4f5f7;
    color: var(--pb-ink);
}

.pb-rail2__icon--internal { background: #e8f0fe; color: #1a56c4; }
.pb-rail2__icon--card     { background: #eef0fd; color: #3d43c8; }
.pb-rail2__icon--sepa     { background: #e6f4ea; color: #1a7a3c; }
.pb-rail2__icon--swift    { background: #f3ebfa; color: #6b32a8; }
.pb-rail2__icon--convert  { background: #fdf0dc; color: #a66413; }

.pb-rail2__body { flex: 1 1 auto; min-width: 0; }

.pb-rail2__title {
    display: block;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--pb-ink);
}

.pb-rail2__needs {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Settlement time decides between two rails that both work, so it gets its
   own column instead of being buried in the description. */
.pb-rail2__speed {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f2f4f7;
    font-size: .625rem;
    font-weight: 700;
    color: var(--pb-ink-soft);
    white-space: nowrap;
}

.pb-rail2__go { flex: 0 0 auto; color: var(--pb-faint); }

/* Below 380px the speed pill and the chevron cannot both share the row with
   a description, so the pill moves under the title. */
@media (max-width: 379px) {
    .pb-rail2 { gap: 11px; padding: 12px 12px; }

    .pb-rail2__icon { width: 42px; height: 42px; border-radius: 14px; }

    .pb-rail2__needs { white-space: normal; }

    .pb-rail2__speed {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }

    .pb-payfrom__value { font-size: 1rem; }
}

.pb-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--pb-line);
    transition: opacity .16s var(--pb-ease);
}

.pb-option:hover { color: inherit; opacity: .72; }

.pb-option__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f1f1f1;
    color: var(--pb-ink);
}

.pb-option__body { flex: 1; min-width: 0; }

.pb-option__title {
    display: block;
    font-size: 1.0625rem;
    color: var(--pb-ink);
    margin-bottom: 3px;
}

.pb-option__desc {
    display: block;
    font-size: .8125rem;
    color: var(--pb-muted);
    line-height: 1.45;
}

.pb-option__chevron { flex: 0 0 auto; color: var(--pb-faint); }

/* --------------------------------------------------------------------------
   Sub-page header with back affordance
   -------------------------------------------------------------------------- */

.pb-subhead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--pb-line);
    /* Bleed the rule to the screen edges. */
    margin-inline: calc(var(--pb-gutter) * -1);
    padding-inline: var(--pb-gutter);
}

.pb-subhead__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: -9px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pb-ink);
    cursor: pointer;
    text-decoration: none;
    flex: 0 0 auto;
}

.pb-subhead__back:hover { background: #f4f4f4; color: var(--pb-ink); }

.pb-subhead__title {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    /* Offset the back button so the title stays optically centred. */
    padding-right: 38px;
}

/* --------------------------------------------------------------------------
   Form groups
   -------------------------------------------------------------------------- */

.pb-group { margin-bottom: 30px; }

.pb-group__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--pb-ink);
}

/* Suffix inside a field (currency, unit) */
.pb-field--suffix { position: relative; }
.pb-field--suffix .pb-input { padding-right: 52px; }

/* Vertically centred on the input, ignoring the label and help text. */
.pb-field__suffix {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .9375rem;
    color: var(--pb-muted);
    pointer-events: none;
}

/* When help text follows, the field box is no longer the full height, so
   anchor the suffix to the input itself. */
.pb-field--suffix:has(.pb-help) .pb-field__suffix {
    top: auto;
    bottom: 45px;
    transform: none;
}

.pb-help {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-top: 7px;
}

.pb-select {
    display: block;
    width: 100%;
    background: #f6f6f6;
    border: 1.5px solid transparent;
    border-radius: 14px;
    padding: 17px 44px 17px 18px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--pb-ink);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8b8b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    transition: border-color .18s var(--pb-ease), background-color .18s var(--pb-ease);
}

.pb-select:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--pb-ink);
}

textarea.pb-input {
    min-height: 104px;
    resize: vertical;
    line-height: 1.5;
}

/* Balance strip above a transfer form */
.pb-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--pb-radius);
    background: #f6f6f6;
    margin-bottom: 26px;
}

.pb-balance__label {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-bottom: 3px;
}

.pb-balance__value {
    display: block;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--pb-ink);
}

/* Sticky submit on long forms */
.pb-submit { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Currency conversion
   -------------------------------------------------------------------------- */

/* A leg of the conversion: currency picker on the left, amount on the right. */
.pb-leg {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border: 1.5px solid var(--pb-line);
    border-radius: var(--pb-radius);
    background: #fff;
}

.pb-leg__side { flex: 0 0 auto; }

.pb-leg__label {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-bottom: 6px;
}

/* Currency select styled as a compact pill rather than a full-width field. */
.pb-leg__currency {
    appearance: none;
    border: 0;
    background: #f2f2f2;
    border-radius: var(--pb-radius-pill);
    padding: 9px 32px 9px 14px;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--pb-ink);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.pb-leg__currency:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

.pb-leg__amount {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1.625rem;
    font-weight: 500;
    text-align: right;
    color: var(--pb-ink);
    padding: 0;
    font-variant-numeric: tabular-nums;
}

.pb-leg__amount:focus { outline: none; }
.pb-leg__amount::placeholder { color: var(--pb-faint); }
.pb-leg__amount[readonly] { color: var(--pb-muted); }

/* Hide the number spinner: it fights the large type. */
.pb-leg__amount::-webkit-outer-spin-button,
.pb-leg__amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pb-leg__amount[type="number"] { -moz-appearance: textfield; }

/* Swap button sits between the two legs, overlapping the gap. */
.pb-swap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: -11px 0;
    position: relative;
    z-index: 2;
}

.pb-swap__btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--pb-line);
    background: #fff;
    color: var(--pb-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s var(--pb-ease), border-color .16s var(--pb-ease);
}

.pb-swap__btn:hover { border-color: var(--pb-ink); }
.pb-swap__btn:active { transform: rotate(180deg); }

.pb-swap__btn:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

/* Live rate line. */
.pb-rate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    margin-top: 14px;
    border-radius: var(--pb-radius);
    background: #f6f6f6;
    font-size: .875rem;
    color: var(--pb-ink-soft);
    min-height: 50px;
}

.pb-rate__value { font-variant-numeric: tabular-nums; }

.pb-rate.is-error {
    background: #fdf3f2;
    color: #a02a1c;
}

.pb-rate__spinner {
    width: 15px;
    height: 15px;
    border: 2px solid var(--pb-line);
    border-top-color: var(--pb-ink);
    border-radius: 50%;
    animation: pb-spin .7s linear infinite;
}

@keyframes pb-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pb-rate__spinner { animation: none; }
}

/* --------------------------------------------------------------------------
   Detail rows (account information)
   -------------------------------------------------------------------------- */

.pb-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
}

.pb-detail + .pb-detail { border-top: 1px solid var(--pb-line); }

.pb-detail__body { flex: 1; min-width: 0; }

.pb-detail__label {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-bottom: 3px;
}

.pb-detail__value {
    display: block;
    font-size: .9375rem;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-copy {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--pb-line);
    border-radius: 9px;
    background: #fff;
    color: var(--pb-muted);
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), color .16s var(--pb-ease);
}

.pb-copy:hover { border-color: var(--pb-ink); color: var(--pb-ink); }

.pb-copy.is-done { border-color: #1e7a42; color: #1e7a42; }

.pb-copy:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

/* Collapsible section */
.pb-disclose > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pb-ink);
}

.pb-disclose > summary::-webkit-details-marker { display: none; }

.pb-disclose > summary svg { transition: transform .18s var(--pb-ease); color: var(--pb-muted); }

.pb-disclose[open] > summary svg { transform: rotate(180deg); }

.pb-disclose > summary:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: -3px;
    border-radius: var(--pb-radius);
}

.pb-disclose__body { border-top: 1px solid var(--pb-line); }

/* --------------------------------------------------------------------------
   Bottom tab bar
   -------------------------------------------------------------------------- */

/* A floating card rather than an edge-to-edge strip: it lifts off the
   background on its own shadow, so no divider line is needed. */
/* Only the sidebar shows words; on the phone bar the icon carries it and the
   link's aria-label does the rest. */
.pb-tabs__label,
.pb-tabs__brand { display: none; }

.pb-tabs {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border-radius: 26px;
    box-shadow:
        0 1px 2px rgba(19, 28, 51, .04),
        0 8px 24px rgba(19, 28, 51, .10);
}

.pb-tabs__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    /* Inactive icons sit well back, so the active one carries the eye. */
    color: #d3d9e6;
    text-decoration: none;
    transition: color .16s var(--pb-ease), transform .16s var(--pb-ease);
    min-height: 56px;
}

.pb-tabs__item:hover { color: #aab3c6; }

.pb-tabs__item.is-active {
    color: var(--pb-brand);
}

/* A touch of lift on the current tab, matching the raised bar. */
.pb-tabs__item.is-active svg { transform: translateY(-1px); }

.pb-tabs__item:focus-visible {
    outline: 2px solid var(--pb-brand);
    outline-offset: -6px;
    border-radius: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .pb-tabs__item { transition: none; }
    .pb-tabs__item.is-active svg { transform: none; }
}

/* --------------------------------------------------------------------------
   Responsive — desktop adapts from the mobile design
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    /* Room for words again: the labels come back on tablet and desktop. */
    .pb-wact__label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        clip-path: none;
    }

    :root {
        --pb-gutter: 32px;
        --pb-shell: 720px;
    }

    .pb-title { font-size: 2.25rem; }
    .pb-splash__wordmark { font-size: 2rem; }
    .pb-splash__logo { max-height: 80px; }

    /* Cards no longer bleed to the screen edge once the column is centred —
       keep the rail inside the shell so nothing runs off-canvas. */
    .pb-cards {
        margin-inline: 0;
        padding-inline: 0;
    }

    .pb-card { flex-basis: calc(50% - 7px); }

    .pb-quick { gap: 16px; max-width: 420px; }
}



/* On pointer-driven screens the bottom bar becomes a top nav: a thumb-reach
   tab bar makes no sense with a mouse, and it wastes vertical space. */
/* ---------------------------------------------------------------------------
   Desktop: the thumb-reach tab bar becomes a sidebar.

   A bar pinned to the bottom of a monitor is a phone habit — the pointer is
   nowhere near it, and it wastes the horizontal room a desktop actually has.
   The same five destinations move to the left edge, where they can carry
   their labels, and the content column shifts over to sit beside them.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    :root {
        --pb-nav: 232px;
        /* The sidebar takes 232px out of the viewport, so the column widens
           with it — but never past what is left, or it stops centring and
           hugs the sidebar at the bottom of the range. */
        --pb-shell: min(800px, calc(100vw - var(--pb-nav) - var(--pb-gutter) * 2));
    }

    .pb-tabs {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: var(--pb-nav);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 20px 14px;
        border-radius: 0;
        border-right: 1px solid var(--pb-line);
        box-shadow: none;
        overflow-y: auto;
    }

    /* The wordmark heads the sidebar; on the phone bar it is not shown. */
    .pb-tabs__brand {
        display: block;
        padding: 6px 12px 22px;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -.01em;
        color: var(--pb-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pb-tabs__item {
        flex: 0 0 auto;
        justify-content: flex-start;
        gap: 12px;
        padding: 11px 12px;
        min-height: 0;
        border-radius: 12px;
        color: var(--pb-muted);
    }

    .pb-tabs__item:hover { background: var(--pb-canvas); }

    /* The current page is a filled block rather than a coloured glyph: at
       this size the label is what is read, so the label is what is marked. */
    .pb-tabs__item.is-active {
        background: var(--pb-brand);
        color: var(--pb-on-brand);
        box-shadow: none;
    }

    .pb-tabs__item.is-active::after { display: none; }

    .pb-tabs__label {
        display: block;
        font-size: .875rem;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* The page sits beside the sidebar rather than under a floating bar. */
    .pb-screen {
        padding-top: 34px;
        padding-bottom: 48px;
        padding-left: var(--pb-nav);
    }

    /* Sheets and dialogs belong over the page, not over the navigation, and
       they centre rather than sliding up from a bottom edge that no longer
       has a bar on it. */
    .pb-sheet {
        left: var(--pb-nav);
        align-items: center;
    }

    .pb-sheet__panel {
        max-width: 460px;
        border-radius: var(--pb-radius-lg);
    }

    /* Nothing to clear at the foot of the page any more. */
    .pb-sticky {
        bottom: 0;
    }
}

@media (min-width: 1200px) {
    :root {
        --pb-shell: min(1040px, calc(100vw - var(--pb-nav) - var(--pb-gutter) * 2));
    }
}

@media (min-width: 1440px) {
    :root {
        --pb-shell: min(1140px, calc(100vw - var(--pb-nav) - var(--pb-gutter) * 2));
    }
}

/* --------------------------------------------------------------------------
   Dark mode — the kit ships a dark splash, so honour the OS preference
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    .pb-splash--auto {
        background: #333333;
        color: #ffffff;
    }

    .pb-splash--auto .pb-splash__footer {
        color: rgba(255, 255, 255, .5);
    }
}

/* --------------------------------------------------------------------------
   Settings — profile header, badges, actionable rows
   -------------------------------------------------------------------------- */

.pb-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0 26px;
}

.pb-profile__avatar {
    position: relative;
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #f0f0f0;
    color: var(--pb-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: visible;
}

.pb-profile__avatar img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
}

/* Small pencil badge, anchored to the avatar's lower-right. */
.pb-profile__edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pb-surface);
}

.pb-profile__who {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pb-profile__name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-profile__email {
    font-size: .8125rem;
    color: var(--pb-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-badge {
    align-self: flex-start;
    margin-top: 3px;
    padding: 3px 10px;
    border-radius: var(--pb-radius-pill);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pb-badge--ok   { background: #eaf6ee; color: #1e7a42; }
.pb-badge--warn { background: #fff5e6; color: #8a5a10; }

/* A settings row that is a button rather than a link. */
.pb-setting--button {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--pb-line);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.pb-setting--button:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: -3px;
    border-radius: 8px;
}

/* The language popover lives inside a settings row, so it must escape it. */
.pb-setting .pb-lang {
    position: static;
    top: auto;
    right: auto;
}

.pb-setting .pb-lang__menu {
    top: calc(100% + 6px);
    right: 0;
}

/* --------------------------------------------------------------------------
   Loan estimate strip
   -------------------------------------------------------------------------- */

.pb-estimate {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    border-radius: var(--pb-radius);
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    margin-bottom: 26px;
    box-shadow: var(--pb-shadow-card);
}

.pb-estimate__label {
    font-size: .75rem;
    opacity: .85;
}

.pb-estimate__value {
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 1.1;
}

.pb-estimate__note {
    font-size: .75rem;
    opacity: .8;
    min-height: 1em;
}

/* Status pills on the applications list. */
.pb-status {
    flex: 0 0 auto;
    padding: 4px 11px;
    border-radius: var(--pb-radius-pill);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pb-status--pending  { background: #fff5e6; color: #8a5a10; }
.pb-status--approved { background: #eaf6ee; color: #1e7a42; }
.pb-status--rejected { background: #fdf3f2; color: #a02a1c; }

/* Body copy on informational screens (loan terms, policies). */
.pb-terms__text {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--pb-ink-soft);
    margin: 0 0 12px;
}

.pb-terms__text:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Numeric keypad — the kit's PIN entry pattern
   -------------------------------------------------------------------------- */

.pb-keypad {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding-block: calc(36px + env(safe-area-inset-top, 0px))
                   calc(28px + env(safe-area-inset-bottom, 0px));
    text-align: center;
}

.pb-keypad__title {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 10px;
    color: var(--pb-ink);
}

.pb-keypad__sub {
    font-size: .875rem;
    color: var(--pb-muted);
    margin: 0 0 auto;
    line-height: 1.5;
    max-width: 30ch;
}

/* Filled/empty dots showing entry progress. */
.pb-dots-entry {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 34px 0;
}

.pb-dots-entry__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pb-line);
    transition: background-color .15s var(--pb-ease), transform .15s var(--pb-ease);
}

.pb-dots-entry__dot.is-filled {
    background: var(--pb-brand);
    transform: scale(1.15);
}

.pb-dots-entry.is-error .pb-dots-entry__dot {
    background: #d93025;
    animation: pb-shake .4s var(--pb-ease);
}

@keyframes pb-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .pb-dots-entry.is-error .pb-dots-entry__dot { animation: none; }
}

/* 3x4 grid of keys. */
.pb-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 26px;
    width: 100%;
    max-width: 300px;
    margin-top: auto;
}

.pb-key {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1.875rem;
    font-weight: 400;
    color: var(--pb-ink);
    height: 68px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .12s var(--pb-ease), transform .1s var(--pb-ease);
    font-variant-numeric: tabular-nums;
}

.pb-key:hover  { background: #f4f4f4; }
.pb-key:active { transform: scale(.94); background: #ececec; }

.pb-key:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: -4px;
}

/* Action keys (biometric, delete) read quieter than the digits. */
.pb-key--action {
    color: var(--pb-muted);
    font-size: 1rem;
}

.pb-key--action:hover { color: var(--pb-ink); }

.pb-keypad__foot {
    margin-top: 26px;
    font-size: .875rem;
    color: var(--pb-muted);
}

.pb-keypad__foot a {
    color: var(--pb-ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--pb-line);
}

.pb-keypad__foot a:hover { border-bottom-color: var(--pb-ink); }

/* --------------------------------------------------------------------------
   Transfer flow — method chips, beneficiary directory, result screen
   Structure follows the transfer design frames; the visual language stays
   the app's own so the journey does not look like a different product.
   -------------------------------------------------------------------------- */

/* Horizontal rail of transfer methods. */
.pb-methods {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--pb-gutter) * -1);
    padding-inline: var(--pb-gutter);
    padding-block: 2px 6px;
    margin-bottom: 26px;
}

.pb-methods::-webkit-scrollbar { display: none; }

.pb-method {
    flex: 0 0 auto;
    width: 148px;
    min-height: 104px;
    padding: 15px;
    border-radius: var(--pb-radius);
    background: #f3f3f3;
    color: var(--pb-muted);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background-color .18s var(--pb-ease), color .18s var(--pb-ease),
                border-color .18s var(--pb-ease);
}

.pb-method:hover { background: #ededed; }

.pb-method.is-active {
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    border-color: var(--pb-brand);
}

.pb-method:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

.pb-method__label {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
}

.pb-method__speed {
    font-size: .6875rem;
    opacity: .8;
    margin-top: auto;
}

/* Amount rendered in words, as in the frames. */
.pb-inwords {
    display: block;
    font-size: .75rem;
    color: var(--pb-brand);
    margin-top: 7px;
    min-height: 1em;
    filter: brightness(.75);
}

/* Review rows on the confirm step. */
.pb-review {
    border: 1.5px solid var(--pb-line);
    border-radius: var(--pb-radius);
    overflow: hidden;
    margin-bottom: 26px;
}

.pb-review__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
}

.pb-review__row + .pb-review__row { border-top: 1px solid var(--pb-line); }

.pb-review__label {
    font-size: .8125rem;
    color: var(--pb-muted);
    flex: 0 0 auto;
}

.pb-review__value {
    font-size: .9375rem;
    color: var(--pb-ink);
    text-align: right;
    word-break: break-word;
}

.pb-review__row--total .pb-review__value {
    font-size: 1.125rem;
    font-weight: 600;
}

/* Inline OTP: field plus request button on one line. */
.pb-otprow {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.pb-otprow .pb-field { flex: 1; margin-bottom: 0; }

.pb-otprow .pb-btn {
    width: auto;
    flex: 0 0 auto;
    padding-inline: 20px;
    white-space: nowrap;
}

/* Result screen. */
.pb-result {
    min-height: 72vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: 30px;
}

.pb-result__badge {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
}

.pb-result__badge--ok   { background: #eaf6ee; color: #1e7a42; }
.pb-result__badge--fail { background: #fdf3f2; color: #a02a1c; }

.pb-result__title {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--pb-ink);
}

.pb-result__text {
    font-size: .9375rem;
    color: var(--pb-muted);
    line-height: 1.6;
    margin: 0 0 30px;
    max-width: 34ch;
}

.pb-result__text strong { color: var(--pb-ink); }

.pb-result__actions { width: 100%; max-width: 360px; }

/* --------------------------------------------------------------------------
   Transfer forms — live field feedback, delivery choice, slide-to-send
   -------------------------------------------------------------------------- */

/* Trailing action inside an input (paste, scan). */
.pb-field--action { position: relative; }
.pb-field--action .pb-input { padding-right: 92px; }

.pb-fieldbtn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--pb-line);
    border-radius: 10px;
    background: #fff;
    color: var(--pb-muted);
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), color .16s var(--pb-ease);
}

.pb-fieldbtn:hover { border-color: var(--pb-ink); color: var(--pb-ink); }

/* Leading brand mark inside the card-number field. */
.pb-field--brand .pb-input { padding-left: 58px; }

.pb-brandmark-inline {
    position: absolute;
    left: 16px;
    bottom: 17px;
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--pb-muted);
    pointer-events: none;
    text-transform: uppercase;
}

/* Live feedback line: neutral, confirmed, or wrong. */
.pb-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    margin-top: 7px;
    min-height: 1.1em;
    color: var(--pb-muted);
}

.pb-feedback--ok   { color: #1e7a42; }
.pb-feedback--bad  { color: #a02a1c; }

/* Delivery-speed radio cards. */
.pb-choice { display: flex; flex-direction: column; gap: 10px; }

.pb-choice__item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
    border: 1.5px solid var(--pb-line);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease);
}

.pb-choice__item:hover { background: #fafafa; }

.pb-choice__item:has(input:checked) {
    border-color: var(--pb-brand);
    background: #fff;
}

.pb-choice__item input {
    appearance: none;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border: 2px solid var(--pb-line);
    border-radius: 50%;
    margin: 0;
    cursor: pointer;
    position: relative;
}

.pb-choice__item input:checked {
    border-color: var(--pb-brand);
}

.pb-choice__item input:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--pb-brand);
}

.pb-choice__body { flex: 1; min-width: 0; }

.pb-choice__label {
    display: block;
    font-size: .9375rem;
    color: var(--pb-ink);
}

.pb-choice__note {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-top: 2px;
}

/* Slide-to-send: a deliberate gesture for an irreversible action. */
.pb-slide {
    position: relative;
    height: 60px;
    border-radius: var(--pb-radius);
    background: #f1f1f1;
    overflow: hidden;
    user-select: none;
    touch-action: pan-y;
    margin-top: 26px;
}

.pb-slide__fill {
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--pb-brand);
    transition: width .05s linear;
}

.pb-slide__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pb-muted);
    pointer-events: none;
    padding-left: 40px;
}

.pb-slide__thumb {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    transition: transform .05s linear;
}

.pb-slide__thumb:active { cursor: grabbing; }

.pb-slide.is-armed .pb-slide__label { color: var(--pb-on-brand); }

.pb-slide.is-disabled { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   Instant transfer — recipient search, then a large amount entry
   -------------------------------------------------------------------------- */

/* Search field with a leading magnifier. */
.pb-search { position: relative; margin-bottom: 22px; }

.pb-search .pb-input { padding-left: 46px; }

.pb-search__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pb-faint);
    pointer-events: none;
}

/* Resolved recipient card, shown once a handle matches. */
.pb-match {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border: 1.5px solid var(--pb-line);
    border-radius: var(--pb-radius);
    margin-bottom: 22px;
}

.pb-match.is-found { border-color: var(--pb-brand); }

.pb-match__avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
}

.pb-match__body { flex: 1; min-width: 0; }

.pb-match__name {
    display: block;
    font-size: .9375rem;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-match__handle {
    display: block;
    font-size: .8125rem;
    color: var(--pb-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Amount step: the figure is the screen. */
.pb-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: 26px 0;
}

.pb-amount__to {
    font-size: .875rem;
    color: var(--pb-muted);
    margin-bottom: 22px;
}

.pb-amount__to strong { color: var(--pb-ink); }

.pb-amount__figure {
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.1;
    color: var(--pb-ink);
    font-variant-numeric: tabular-nums;
    min-height: 1.1em;
}

.pb-amount__figure.is-empty { color: var(--pb-faint); }

/* Turns red when the amount exceeds the wallet. */
.pb-amount__figure.is-over { color: #d93025; }

.pb-amount__hint {
    font-size: .8125rem;
    color: var(--pb-muted);
    margin-top: 10px;
    min-height: 1.2em;
}

.pb-amount__hint.is-over { color: #d93025; }

.pb-amount__note {
    width: 100%;
    max-width: 340px;
    margin-top: 26px;
}

/* Sticky action so the CTA is always reachable above the keypad. */
.pb-sticky {
    position: sticky;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    padding-top: 14px;
    background: linear-gradient(to top, var(--pb-surface) 72%, transparent);
}

/* --------------------------------------------------------------------------
   Card transfer — a form shaped like the card it describes
   -------------------------------------------------------------------------- */

/* Brand mark sits inside the leading edge of the number field. */
.pb-cardnum { position: relative; }
.pb-cardnum .pb-input { padding-left: 66px; letter-spacing: .08em; }

.pb-cardnum__brand {
    position: absolute;
    left: 14px;
    bottom: 15px;
    width: 42px;
    height: 26px;
    border-radius: 5px;
    background: #ececec;
    color: var(--pb-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .5625rem;
    font-weight: 800;
    letter-spacing: .02em;
    pointer-events: none;
    transition: background-color .18s var(--pb-ease), color .18s var(--pb-ease);
}

.pb-cardnum__brand.is-visa       { background: #1a1f71; color: #fff; }
.pb-cardnum__brand.is-mastercard { background: #eb001b; color: #fff; }
.pb-cardnum__brand.is-amex       { background: #006fcf; color: #fff; }
.pb-cardnum__brand.is-maestro    { background: #0079be; color: #fff; }

/* Expiry and CVV sit side by side, as on the card itself. */
.pb-fieldrow { display: flex; gap: 12px; }
.pb-fieldrow > * { flex: 1; min-width: 0; }

/* A notice for a rail that is not live yet. */
.pb-notice {
    display: flex;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 14px;
    background: #f7f7f7;
    border: 1.5px solid var(--pb-line);
    margin-bottom: 26px;
}

/* A suspended account is not a neutral fact: the notice carries a warning
   tone so it is not skimmed past like an informational one. */
.pb-notice--warn {
    background: #fdf6ec;
    border-color: #f0dcc0;
}

.pb-notice--warn .pb-notice__icon { color: #96601a; }

/* Wallet state, shown wherever a balance is: frozen and blocked both mean
   the figure cannot be moved, which a bare amount would not say. */
.pb-acct__state {
    /* Pushed to the trailing edge, and never squeezed: the state matters
       more than the currency code, which is repeated below anyway. */
    margin-left: auto;
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pb-acct__state.is-frozen  { background: #e6eefb; color: #1a4f8a; }
.pb-acct__state.is-blocked { background: #fde8e6; color: #a02a1c; }

.pb-notice__icon { flex: 0 0 auto; color: var(--pb-muted); margin-top: 1px; }

.pb-notice__body {
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--pb-ink-soft);
}

.pb-notice__body strong { display: block; margin-bottom: 3px; color: var(--pb-ink); }

/* --------------------------------------------------------------------------
   Per-field validation messages
   A message under the offending field tells the customer exactly what to fix,
   which a single error at the top of the form cannot do.
   -------------------------------------------------------------------------- */

.pb-fielderror {
    display: none;
    font-size: .75rem;
    color: #a02a1c;
    margin-top: 6px;
    line-height: 1.45;
}

.pb-field.has-error .pb-fielderror { display: block; }
.pb-field.has-error .pb-input,
.pb-field.has-error .pb-select { border-color: #d93025; }

/* Hide the neutral hint while an error is showing, so they do not stack. */
.pb-field.has-error .pb-help { display: none; }

/* Accepted-brand strip, as on a checkout form. */
.pb-brands {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.pb-brands__mark {
    height: 22px;
    min-width: 34px;
    padding: 0 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .02em;
    background: #ececec;
    color: var(--pb-muted);
}

.pb-brands__mark.is-visa       { background: #1a1f71; color: #fff; }
.pb-brands__mark.is-mastercard { background: #eb001b; color: #fff; }
.pb-brands__mark.is-amex       { background: #006fcf; color: #fff; }
.pb-brands__mark.is-maestro    { background: #0079be; color: #fff; }

/* Section header carrying the accepted-brand strip. */
.pb-cardhead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--pb-line);
    border-radius: var(--pb-radius) var(--pb-radius) 0 0;
    border-bottom: 0;
    background: #fafafa;
}

.pb-cardhead__label {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pb-ink);
}

.pb-cardbody {
    border: 1.5px solid var(--pb-line);
    border-radius: 0 0 var(--pb-radius) var(--pb-radius);
    padding: 18px 16px 4px;
    margin-bottom: 26px;
}

/* Small help affordance beside a label. */
.pb-labelhelp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    border-radius: 50%;
    border: 1px solid var(--pb-faint);
    color: var(--pb-faint);
    font-size: .5625rem;
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Card payout flow — review, authenticate, result
   Money sent to a card number cannot easily be recalled, so these screens
   put the destination and the total in front of the customer before the
   confirm step, and again after it.
   -------------------------------------------------------------------------- */

.pb-shell--center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 78vh;
    padding-bottom: 40px;
}

/* ---- Review: who is being paid ---- */

.pb-reviewlead {
    font-size: .8125rem;
    color: var(--pb-muted);
    margin: 0 0 12px;
}

.pb-payee {
    border: 1.5px solid var(--pb-line);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 22px;
}

.pb-payee__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
}

.pb-payee__icon { flex: 0 0 auto; color: var(--pb-muted); display: flex; }

.pb-payee__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pb-ink);
}

.pb-payee__card {
    font-size: .9375rem;
    color: var(--pb-ink-soft);
    font-variant-numeric: tabular-nums;
}

/* ---- Review: the figures ---- */

.pb-summary {
    border: 1.5px solid var(--pb-line);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 22px;
}

.pb-summary__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pb-muted);
    margin-bottom: 12px;
}

.pb-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 6px 0;
    font-size: .9375rem;
    color: var(--pb-ink);
}

.pb-summary__row > span:first-child { color: var(--pb-muted); }

/* The total is what actually leaves the account, so it reads as the answer
   rather than one more line in a list. */
.pb-summary__row--total {
    border-top: 1.5px solid var(--pb-line);
    margin-top: 8px;
    padding-top: 13px;
    font-size: 1.0625rem;
    font-weight: 700;
}

.pb-summary__row--total > span:first-child { color: var(--pb-ink); }

.pb-summary__row--soft {
    font-size: .8125rem;
    color: var(--pb-muted);
}

.pb-summary__row--soft > span { color: var(--pb-muted); }

/* ---- Authentication ---- */

.pb-secure {
    text-align: center;
    padding: 14px 0 26px;
}

.pb-secure__shield {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    margin-bottom: 18px;
}

.pb-secure__title {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 8px;
    color: var(--pb-ink);
}

.pb-secure__sub {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--pb-muted);
    margin: 0 auto;
    max-width: 30ch;
}

.pb-secure__amount {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 16px 0 0;
    color: var(--pb-ink);
}

.pb-secure__status {
    text-align: center;
    font-size: .8125rem;
    color: var(--pb-muted);
    margin: 14px 0 0;
}

/* A one-time code is read digit by digit, so it is set wide and centred. */
.pb-input--code {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: .34em;
    text-indent: .34em;
    padding-block: 20px;
}

/* ---- Result ---- */

.pb-done {
    text-align: center;
    padding: 10px 0 28px;
}

.pb-done__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    margin-bottom: 22px;
}

/* An accepted payout is not a settled one, and must not look like one. */
.pb-done__mark.is-pending {
    background: #f2f2f2;
    color: var(--pb-muted);
    border: 1.5px solid var(--pb-line);
}

.pb-done__title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0 0 14px;
    color: var(--pb-ink);
}

.pb-done__amount {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -.03em;
    margin: 0 0 8px;
    color: var(--pb-ink);
}

.pb-done__sub {
    font-size: .875rem;
    color: var(--pb-muted);
    margin: 0;
}


/* Payee block on the internal-transfer review: name over handle, beside the
   initials avatar the search step already showed. */
.pb-payee__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pb-payee__body .pb-payee__name,
.pb-payee__body .pb-payee__card { display: block; }

/* --------------------------------------------------------------------------
   Portfolio total, rotating through currencies
   The whole account valued one currency at a time. Items are stacked and
   crossfaded rather than swapped, so the row never changes height and the
   surrounding layout does not jump on each rotation.
   -------------------------------------------------------------------------- */

.pb-total {
    margin: 2px 0 22px;
    padding: 16px 18px;
    border: 1.5px solid var(--pb-line);
    border-radius: 16px;
    text-align: center;
}

.pb-total__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pb-muted);
    margin-bottom: 10px;
}

/* Fixed height: the stage holds every currency at once, absolutely
   positioned, so only the active one is visible. */
.pb-total__stage {
    position: relative;
    /* Tall enough for a 1.5rem figure plus its descenders and the currency
       code beside it. A fixed 34px clipped both. */
    min-height: 42px;
}

.pb-total__item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .45s var(--pb-ease), transform .45s var(--pb-ease);
    pointer-events: none;
}

.pb-total__item.is-active {
    opacity: 1;
    transform: none;
}

.pb-total__amount {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pb-ink);
    line-height: 1.25;
}

.pb-total__code {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--pb-muted);
    padding-top: 3px;
}

.pb-total__dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 12px;
}

.pb-total__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pb-line);
    transition: background-color .3s var(--pb-ease), width .3s var(--pb-ease);
}

.pb-total__dot.is-active {
    width: 16px;
    border-radius: 3px;
    background: var(--pb-brand);
}

/* Respect a reader who has asked the system to stop animating: show the
   first valuation and leave it still. */
@media (prefers-reduced-motion: reduce) {
    .pb-total__item { transition: none; }
}

/* Repayment progress on a loan. */
.pb-progress {
    height: 7px;
    border-radius: 999px;
    background: #eee;
    overflow: hidden;
}

.pb-progress__bar {
    height: 100%;
    background: var(--pb-brand);
    border-radius: 999px;
    transition: width .4s var(--pb-ease);
}

/* Next payment: the borrower's first question, answered before any table. */
.pb-nextpay {
    border: 1.5px solid var(--pb-line);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 22px;
    text-align: center;
}

.pb-nextpay__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pb-muted);
    margin-bottom: 8px;
}

.pb-nextpay__amount {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pb-ink);
    line-height: 1.1;
}

.pb-nextpay__date {
    font-size: .8125rem;
    color: var(--pb-muted);
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Loans overview
   The headline answers "how much do I still owe?", then each loan carries its
   own progress so a customer can see which one is nearly clear.
   -------------------------------------------------------------------------- */

.pb-loanhero {
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    border-radius: 22px;
    padding: 22px;
    margin-bottom: 20px;
}

/* Amount and ring share a row rather than the ring floating over the card:
   absolute positioning meant a longer balance ran underneath it. */
.pb-loanhero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.pb-loanhero__main { min-width: 0; }

.pb-loanhero__label {
    font-size: .75rem;
    opacity: .78;
    margin-bottom: 4px;
}

.pb-loanhero__amount {
    /* Scales with the viewport so an eight-figure balance still sits on one
       line beside the ring on a narrow phone, without shrinking the common
       case. */
    font-size: clamp(1.5rem, 7.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

/* Cents ride smaller so the significant digits read first. */
.pb-loanhero__cents {
    font-size: 1.125rem;
    font-weight: 600;
    opacity: .85;
}

.pb-loanhero__ring {
    flex: 0 0 auto;
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pb-loanhero__ring svg { position: absolute; inset: 0; }

.pb-loanhero__pct {
    position: relative;
    font-size: .8125rem;
    font-weight: 700;
    color: #f5c518;
}

.pb-loanhero__foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

/* The payoff column carries the long loan names, so it takes the slack and
   the count column stays exactly as wide as its digits. */
.pb-loanhero__foot > .pb-payoff { flex: 1 1 auto; min-width: 0; }
.pb-loanhero__foot > div:last-child { flex: 0 0 auto; text-align: right; }

.pb-loanhero__value {
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
}

/* ---- Quick actions ---- */

.pb-loanacts {
    display: flex;
    gap: 12px;
    margin-bottom: 26px;
}

.pb-loanact {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--pb-line);
    border-radius: 14px;
    color: var(--pb-ink);
    text-decoration: none;
    transition: border-color .18s var(--pb-ease);
}

.pb-loanact:hover { border-color: var(--pb-ink); }

.pb-loanact__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pb-ink);
}

.pb-loanact__label {
    font-size: .8125rem;
    line-height: 1.25;
    color: var(--pb-ink-soft);
}

/* ---- One card per live loan ---- */

.pb-loancard {
    border-bottom: 1.5px solid var(--pb-line);
    padding: 16px 0;
}

.pb-loancard:last-of-type { border-bottom: 0; }

.pb-loancard__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pb-loancard__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f1f6f2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pb-brand);
}

.pb-loancard__body {
    flex: 1 1 auto;
    min-width: 0;
}

.pb-loancard__name {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pb-ink);
}

.pb-loancard__term {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-top: 2px;
}

.pb-loancard__ring {
    flex: 0 0 auto;
    position: relative;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pb-loancard__ring svg { position: absolute; inset: 0; }

.pb-loancard__pct {
    position: relative;
    font-size: .625rem;
    font-weight: 700;
    color: var(--pb-ink);
}

.pb-loancard__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
}

.pb-loancard__amount {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pb-ink);
}

.pb-loancard__date {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-top: 2px;
}

/* The action sits inline with the figure, so it never needs its own row. */
.pb-loancard__cta {
    width: auto;
    flex: 0 0 auto;
    padding: 11px 26px;
    border-radius: 12px;
    font-size: .875rem;
}

/* A payoff date that covers several loans is the last of them, not a single
   commitment — dimmed so it reads as context rather than a firm figure. */
.pb-loanhero__foot .is-dim { opacity: .62; }

/* With one action left, it spans the row instead of sitting half-width. */
.pb-loanacts:has(> .pb-loanact:only-child) .pb-loanact {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Loan application
   Numbered steps, a big amount field, tappable purposes and a term slider,
   with the estimate pinned to the bottom so every choice shows its effect.
   -------------------------------------------------------------------------- */

.pb-step { margin-bottom: 30px; }

.pb-step__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.pb-step__num {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pb-step__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pb-ink);
    margin: 0;
}

.pb-step__optional {
    margin-left: auto;
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pb-faint);
}

/* ---- Amount ---- */

.pb-bigamount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    padding: 10px 0 4px;
}

.pb-bigamount__sym {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--pb-muted);
}

/* Borderless and centred: it reads as a figure, not a form control. */
.pb-bigamount__input {
    width: 100%;
    max-width: 260px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--pb-ink);
    text-align: center;
    padding: 0;
}

.pb-bigamount__input:focus { outline: none; }
.pb-bigamount__input::placeholder { color: var(--pb-faint); }

.pb-bigamount__hint {
    display: block;
    text-align: center;
    margin-bottom: 14px;
}

/* ---- Preset chips ---- */

.pb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.pb-chip {
    padding: 8px 14px;
    border: 1.5px solid var(--pb-line);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pb-ink-soft);
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), color .16s var(--pb-ease);
}

.pb-chip:hover { border-color: var(--pb-ink); color: var(--pb-ink); }

/* ---- Purpose tiles ---- */

.pb-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
}

.pb-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 13px 8px;
    border: 1.5px solid var(--pb-line);
    border-radius: 14px;
    background: #fff;
    font: inherit;
    color: var(--pb-ink-soft);
    cursor: pointer;
    text-align: center;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease);
}

.pb-tile:hover { border-color: var(--pb-muted); }

/* The chosen purpose is filled, not just outlined, so the selection survives
   a glance on a small screen. */
.pb-tile.is-active {
    border-color: var(--pb-brand);
    background: var(--pb-brand);
    color: var(--pb-on-brand);
}

.pb-tile__icon { display: flex; }

.pb-tile__label {
    font-size: .6875rem;
    line-height: 1.25;
    font-weight: 600;
}

/* ---- Term slider ---- */

.pb-term { text-align: center; }

.pb-term__value {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pb-ink);
    margin-bottom: 12px;
}

.pb-range {
    width: 100%;
    height: 26px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.pb-range::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: var(--pb-line);
}

.pb-range::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: var(--pb-line);
}

.pb-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8.5px;
    border-radius: 50%;
    background: var(--pb-brand);
    border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
}

.pb-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pb-brand);
    border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
}

.pb-term__ends {
    display: flex;
    justify-content: space-between;
    font-size: .6875rem;
    color: var(--pb-faint);
    margin-top: 2px;
}

/* ---- Optional section ---- */

.pb-more__summary {
    font-size: .875rem;
    font-weight: 600;
    color: var(--pb-ink-soft);
    cursor: pointer;
    padding: 12px 0;
    list-style: none;
}

.pb-more__summary::-webkit-details-marker { display: none; }

.pb-more__summary::before {
    content: '+';
    display: inline-block;
    width: 18px;
    font-weight: 700;
    color: var(--pb-brand);
}

.pb-more[open] .pb-more__summary::before { content: '\2212'; }

/* ---- Sticky estimate ---- */

.pb-quote {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1.5px solid var(--pb-line);
    padding: 14px 0 18px;
    margin-top: 8px;
}

.pb-quote__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pb-quote__label {
    font-size: .8125rem;
    color: var(--pb-muted);
}

.pb-quote__value {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pb-ink);
}

.pb-quote__note {
    font-size: .75rem;
    color: var(--pb-muted);
    text-align: right;
    min-height: 1em;
}

.pb-quote__cta { margin-top: 12px; }

/* The rate sits under the term, where it explains the payment. */
.pb-term__rate {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pb-brand);
    margin: -6px 0 12px;
    min-height: 1em;
}

/* Payoff dates cycling in the loans hero. Stacked and crossfaded so the row
   keeps its height and the figures beside it never shift. */
.pb-payoff__stage {
    position: relative;
    /* Two stacked lines — the date and the loan it belongs to. The items are
       absolutely positioned, so this height is what reserves the space. */
    min-height: 40px;
}

.pb-payoff__item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .45s var(--pb-ease), transform .45s var(--pb-ease);
    pointer-events: none;
}

.pb-payoff__item.is-active {
    opacity: 1;
    transform: none;
}

/* Which loan the date belongs to — without it the cycling is unreadable.
   Names vary from "Personal Loan" to "Medical & Healthcare Loan", so a long
   one is truncated rather than allowed to wrap into the row below. */
.pb-payoff__who {
    display: block;
    font-size: .6875rem;
    opacity: .72;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
    .pb-payoff__item { transition: none; }
}

/* --------------------------------------------------------------------------
   Dashboard: total balance, then accounts
   The total leads because it answers the question a customer opens the app
   for; the per-currency accounts sit beneath it as compact tiles.
   -------------------------------------------------------------------------- */

.pb-hero {
    padding: 4px 0 22px;
}

.pb-hero__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: var(--pb-muted);
    margin-bottom: 6px;
}

/* A compact variant of the icon button for sitting on a line of text. */
.pb-iconbtn--inline {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--pb-muted);
}

/* Fixed height so the accounts below do not shift as the figure cycles. */
.pb-hero__stage {
    position: relative;
    min-height: 44px;
}

.pb-hero__item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .45s var(--pb-ease), transform .45s var(--pb-ease);
    pointer-events: none;
}

.pb-hero__item.is-active {
    opacity: 1;
    transform: none;
}

.pb-hero__amount {
    font-size: clamp(1.75rem, 8vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--pb-ink);
}

.pb-hero__dots {
    display: flex;
    gap: 5px;
    margin-top: 12px;
}

.pb-hero__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pb-line);
    transition: background-color .3s var(--pb-ease), width .3s var(--pb-ease);
}

.pb-hero__dot.is-active {
    width: 16px;
    border-radius: 3px;
    background: var(--pb-brand);
}

/* ---- Account tiles ---- */

.pb-accounts {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed past the shell so tiles run to the screen edge, then pad back. */
    margin-inline: calc(var(--pb-gutter) * -1);
    padding-inline: var(--pb-gutter);
    padding-bottom: 26px;
}

.pb-accounts::-webkit-scrollbar { display: none; }

.pb-acct {
    flex: 0 0 auto;
    width: 168px;
    scroll-snap-align: start;
    padding: 15px 16px 13px;
    border: 1.5px solid var(--pb-line);
    border-radius: 18px;
    background: #fff;
    color: var(--pb-ink);
    text-decoration: none;
    transition: border-color .18s var(--pb-ease);
}

/* The border takes the brand colour on hover, and stays lit while a finger
   is down: a phone has no hover, so :active is what gives touch the same
   feedback a pointer gets. */
.pb-acct:hover,
.pb-acct:active,
.pb-acct:focus-visible {
    border-color: var(--pb-brand);
}

.pb-acct:focus-visible {
    outline: 2px solid var(--pb-brand);
    outline-offset: 2px;
}

/* The card carrying the primary wallet keeps a brand border at rest, so the
   account the page leads with is identifiable before anything is touched. */
.pb-acct.is-active {
    border-color: color-mix(in srgb, var(--pb-brand) 45%, transparent);
}

.pb-acct.is-active:hover,
.pb-acct.is-active:active {
    border-color: var(--pb-brand);
}

.pb-acct__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.pb-acct__flag {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /* The artwork is already circular; this trims any stray edge pixel and
       keeps the emoji fallback the same shape. */
    object-fit: cover;
    display: block;
}

.pb-acct__flag--emoji {
    font-size: 1.25rem;
    line-height: 24px;
    text-align: center;
}

.pb-acct__code {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pb-ink);
    /* Yields first when a state badge shares the row on a 168px tile. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-acct__amount {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pb-ink);
    /* A long balance shrinks rather than escaping the tile. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-acct__iban {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: .6875rem;
    color: var(--pb-muted);
    overflow: hidden;
    white-space: nowrap;
}

.pb-acct__iban svg { flex: 0 0 auto; }

.pb-acct__iban span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flag on the wallet carousel card, sitting inline with the currency code. */
.pb-card__flag {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: -3px;
    margin-right: 6px;
}

/* --------------------------------------------------------------------------
   Wallet detail
   A currency switcher, the balance it holds, what you can do with it, and
   how someone pays into it.
   -------------------------------------------------------------------------- */

.pb-currbar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--pb-gutter) * -1);
    padding: 2px var(--pb-gutter) 20px;
}

.pb-currbar::-webkit-scrollbar { display: none; }

.pb-curr {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px 8px 9px;
    border: 1.5px solid var(--pb-line);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pb-ink-soft);
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease),
                color .16s var(--pb-ease);
}

.pb-curr:hover { border-color: var(--pb-muted); }

.pb-curr.is-active {
    border-color: var(--pb-brand);
    background: var(--pb-brand);
    color: var(--pb-on-brand);
}

.pb-curr__flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ---- Balance ---- */

.pb-wbal { margin-bottom: 24px; }

.pb-wbal__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.pb-wbal__label {
    font-size: .8125rem;
    color: var(--pb-muted);
}

.pb-chip-sm {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
}

.pb-chip-form { display: inline-flex; }

/* Outlined, not filled: it offers to become the main account rather than
   claiming to already be one, so it cannot be misread as the badge. */
.pb-chip-sm--action {
    border: 1.5px solid var(--pb-line);
    background: none;
    color: var(--pb-muted);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), color .16s var(--pb-ease);
}

.pb-chip-sm--action:hover {
    border-color: var(--pb-brand);
    color: var(--pb-brand);
}

.pb-chip-sm--action:focus-visible {
    outline: 2px solid var(--pb-brand);
    outline-offset: 2px;
}

.pb-wbal__amount {
    font-size: clamp(1.875rem, 8.5vw, 2.375rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--pb-ink);
}

/* Reserved funds are committed to a payment already in flight, so they are
   stated apart from what the customer can actually spend. */
.pb-wbal__note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: .75rem;
    color: var(--pb-muted);
}

/* ---- Actions ---- */

.pb-wacts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    /* The group sits on its own card, as one block of actions rather than
       four loose tiles. */
    padding: 14px 8px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(19, 28, 51, .05);
    margin-bottom: 28px;
}

.pb-wact {
    /* Anchors the visually-hidden label at narrow widths, so it clips inside
       the tile rather than escaping to the top of the page. */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    /* No frame: the tinted chip is the surface that reads, and a border
       around it as well made four boxes competing with four circles. */
    border: 0;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--pb-ink-soft);
    text-decoration: none;
    transition: transform .16s var(--pb-ease);
}

.pb-wact:hover { color: var(--pb-ink); }
.pb-wact:active { transform: scale(.96); }

.pb-wact:focus-visible {
    outline: 2px solid var(--pb-brand);
    outline-offset: 3px;
    border-radius: 16px;
}

.pb-wact__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    /* A rounded square rather than a circle: it gives the tint more surface
       at the same width, so the colour is legible at a glance. */
    border-radius: 17px;
    background: #f4f5f7;
    color: var(--pb-ink);
    transition: background-color .16s var(--pb-ease);
}

/* Each action owns a hue, so the row is scanned by colour before the label
   is read. Tints are soft enough that the icon still carries the contrast. */
.pb-wact__icon--send    { background: #e8f0fe; color: #1a56c4; }
.pb-wact__icon--receive { background: #e6f4ea; color: #1a7a3c; }
.pb-wact__icon--convert { background: #eef0fd; color: #3d43c8; }
.pb-wact__icon--loan    { background: #fdf0dc; color: #a66413; }

.pb-wact:hover .pb-wact__icon--send    { background: #dbe7fc; }
.pb-wact:hover .pb-wact__icon--receive { background: #d7ecdd; }
.pb-wact:hover .pb-wact__icon--convert { background: #e2e5fb; }
.pb-wact:hover .pb-wact__icon--loan    { background: #fbe6cb; }

/* Icons alone on mobile: four labels across a phone either truncate or force
   a second row, and these four actions read from their glyphs. The text is
   hidden visually rather than removed, so it still names the link for screen
   readers, and the title attribute covers a long press. */
.pb-wact__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- Receiving details ---- */

.pb-recv {
    border: 1.5px solid var(--pb-line);
    border-radius: 18px;
    padding: 4px 16px;
    margin-bottom: 30px;
}

/* Withheld details: the same rows, shown partially. A dashed edge says the
   card is incomplete rather than broken. */
.pb-recv--masked {
    border-style: dashed;
    background: #fbfbfc;
}

/* A masked value is not copyable — pasting it into a transfer form would
   fail — so it is plain text, not a button. */
.pb-recv__value--static {
    cursor: default;
    color: var(--pb-ink-soft);
    letter-spacing: .04em;
}

/* Names the state on the card itself, so the row is never mistaken for a
   real identifier read at a glance. */
.pb-recv__tag {
    padding: 3px 9px;
    border-radius: 999px;
    background: #fdf0dc;
    color: #96601a;
    font-size: .625rem;
    font-weight: 700;
    white-space: nowrap;
}

.pb-recv__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0 12px;
    border-bottom: 1.5px solid var(--pb-line);
}

.pb-recv__title {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pb-muted);
}

.pb-recv__copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1.5px solid var(--pb-line);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--pb-ink-soft);
    cursor: pointer;
    white-space: nowrap;
}

.pb-recv__copy:hover { border-color: var(--pb-ink); color: var(--pb-ink); }

.pb-recv__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--pb-line);
}

.pb-recv__row:last-child { border-bottom: 0; }

.pb-recv__label {
    flex: 0 0 auto;
    font-size: .8125rem;
    color: var(--pb-muted);
}

/* The value is the button: tapping the number copies it, which is what a
   customer reaches for when reading an IBAN aloud or into a form. */
.pb-recv__value {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pb-ink);
    text-align: right;
    cursor: pointer;
    min-width: 0;
}

.pb-recv__value span {
    overflow-wrap: anywhere;
}

.pb-recv__value svg { flex: 0 0 auto; color: var(--pb-faint); }

.pb-recv__value.is-done,
.pb-recv__copy.is-done { color: #1e7a42; }

.pb-recv__value.is-done svg { color: #1e7a42; }

/* --------------------------------------------------------------------------
   Narrow screens (iPhone SE and similar, 320-359px)
   The gutter alone eats 48px there, so components sized comfortably at 390px
   need to give ground rather than clip or overflow.
   -------------------------------------------------------------------------- */

@media (max-width: 359px) {
    :root { --pb-gutter: 16px; }

    /* The icons already carry these four actions unaided at this width. */
    .pb-wact { padding: 4px 0; }
    .pb-wact__icon { width: 46px; height: 46px; border-radius: 15px; }

    /* Account tiles: a fixed 168px shows one and a sliver, which reads as
       broken rather than scrollable. */
    .pb-acct { width: 148px; }
    .pb-acct__amount { font-size: 1rem; }

    /* Receiving details stack: label above value, so a long IBAN has the full
       width instead of competing with its label. */
    .pb-recv__row { flex-direction: column; align-items: flex-start; gap: 3px; }
    .pb-recv__value { text-align: left; }

    .pb-recv__head { flex-wrap: wrap; gap: 8px; }

    /* Quick actions on the dashboard share the same squeeze. */
    .pb-quick { gap: 8px; }

    /* Loan hero: the ring and a long balance cannot both keep full size. */
    .pb-loanhero { padding: 18px; }
    .pb-loanhero__ring { width: 54px; height: 54px; }
    .pb-loanhero__foot { gap: 14px; }

    /* Purpose tiles on the loan form: three across is unreadable at 320. */
    .pb-tiles { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }

    /* Card flow chips wrap rather than scroll off. */
    .pb-chips { gap: 6px; }
    .pb-chip { padding: 7px 11px; font-size: .75rem; }

    /* The loan card's "Pay off" sits beside the amount; at this width its
       26px side padding squeezes the figure, so it gives ground first. */
    .pb-loancard__bottom { gap: 10px; }
    .pb-loancard__cta { padding: 10px 16px; font-size: .8125rem; }
    .pb-loancard__amount { font-size: 1.125rem; }

    /* Buttons keep their full width but lose the roomiest padding. */
    .pb-btn { padding: 17px 16px; font-size: .9375rem; }

    /* Subhead title has a back arrow beside it and nowhere to wrap. */
    .pb-subhead__title { font-size: 1.0625rem; }

    /* Transaction rows: the amount must never be pushed off by a long title. */
    .pb-row { gap: 10px; }
    .pb-row__title { font-size: .875rem; }
    .pb-row__amount { font-size: .9375rem; white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Transaction history
   Rows grouped by day, direction shown by a coloured arrow, and a detail
   sheet that rises over a blurred page.
   -------------------------------------------------------------------------- */

.pb-daygroup { margin-bottom: 22px; }

.pb-daygroup__label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pb-faint);
    padding: 0 2px 8px;
}

/* ---- Detail sheet ---- */

.pb-sheet {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pb-sheet[hidden] { display: none; }

/* Blurring the page keeps the customer's place visible while making clear
   the sheet is the only thing they can act on. */
.pb-sheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, .32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .26s var(--pb-ease);
}

.pb-sheet.is-open .pb-sheet__scrim { opacity: 1; }

.pb-sheet__panel {
    position: relative;
    width: 100%;
    max-width: var(--pb-shell);
    max-height: 82vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 10px 24px calc(24px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform .28s var(--pb-ease);
}

.pb-sheet.is-open .pb-sheet__panel { transform: translateY(0); }

.pb-sheet__grip {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--pb-line);
    margin: 0 auto 18px;
    cursor: pointer;
}

.pb-sheet__head {
    text-align: center;
    padding-bottom: 20px;
}

.pb-sheet__amount {
    font-size: clamp(1.75rem, 8vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--pb-ink);
}

.pb-sheet__amount.is-in { color: #1e7a42; }

.pb-sheet__title {
    font-size: .875rem;
    color: var(--pb-muted);
    margin-top: 4px;
}

.pb-sheet__rows {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    margin: 0 0 20px;
    border-top: 1.5px solid var(--pb-line);
}

.pb-sheet__rows dt {
    padding: 13px 12px 13px 0;
    font-size: .8125rem;
    color: var(--pb-muted);
    border-bottom: 1px solid var(--pb-line);
}

.pb-sheet__rows dd {
    margin: 0;
    padding: 13px 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pb-ink);
    text-align: right;
    border-bottom: 1px solid var(--pb-line);
    overflow-wrap: anywhere;
}

.pb-sheet__copy {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--pb-ink);
    text-align: right;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.pb-sheet__copy.is-done { color: #1e7a42; }

@media (prefers-reduced-motion: reduce) {
    .pb-sheet__scrim,
    .pb-sheet__panel { transition: none; }
}

/* --------------------------------------------------------------------------
   Overview chart
   Paired bars per month against a labelled axis, so the figures can be read
   rather than only compared.
   -------------------------------------------------------------------------- */

.pb-legend {
    display: flex;
    gap: 18px;
    margin-bottom: 16px;
}

.pb-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .75rem;
    color: var(--pb-muted);
}

.pb-legend__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid currentColor;
}

.pb-legend__dot--in  { color: #3bb0f5; }
.pb-legend__dot--out { color: var(--pb-brand); }

.pb-chart2 {
    position: relative;
    height: 190px;
    padding-left: 34px;
    margin-bottom: 6px;
}

/* Gridlines sit behind the bars and carry the axis labels. */
.pb-chart2__grid {
    position: absolute;
    inset: 0 0 0 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.pb-chart2__gridline {
    position: relative;
    border-top: 1px solid var(--pb-line);
}

.pb-chart2__tick {
    position: absolute;
    right: 100%;
    top: -.55em;
    padding-right: 8px;
    font-size: .625rem;
    color: var(--pb-faint);
    white-space: nowrap;
}

.pb-chart2__plot {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
    height: 100%;
}

.pb-chart2__group {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pb-chart2__bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
}

.pb-chart2__bar {
    width: 45%;
    max-width: 16px;
    border-radius: 999px 999px 0 0;
    cursor: pointer;
    transition: opacity .16s var(--pb-ease);
}

.pb-chart2__bar:hover { opacity: .8; }

.pb-chart2__bar--in  { background: #3bb0f5; }
.pb-chart2__bar--out { background: var(--pb-brand); }

/* The month being viewed is stated, not left to be inferred from the URL. */
.pb-chart2__group.is-active .pb-chart2__bar { box-shadow: 0 0 0 2px rgba(0, 0, 0, .06); }

.pb-chart2__tip {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -100%);
    padding: 8px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--pb-line);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}

.pb-chart2__tip[hidden] { display: none; }

.pb-chart2__tip-amount {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--pb-ink);
}

.pb-chart2__tip-meta {
    display: block;
    font-size: .6875rem;
    color: var(--pb-muted);
    margin-top: 1px;
}

.pb-chart2__labels {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding-left: 34px;
    margin-bottom: 26px;
}

.pb-chart2__label {
    flex: 1 1 0;
    text-align: center;
    font-size: .6875rem;
    color: var(--pb-muted);
    text-decoration: none;
    padding: 6px 0;
}

.pb-chart2__label.is-active {
    color: var(--pb-ink);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Transaction rows: avatar, description, amount, date, status
   -------------------------------------------------------------------------- */

/* Each movement is its own card: three lines that answer what, how much,
   how it went, and when — in that order, top to bottom. */
.pb-tx {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(19, 28, 51, .05);
    transition: box-shadow .16s var(--pb-ease), transform .16s var(--pb-ease);
}

.pb-tx + .pb-tx { margin-top: 10px; }

.pb-tx:hover { box-shadow: 0 2px 10px rgba(19, 28, 51, .09); }
.pb-tx:active { transform: scale(.995); }

/* The flag is the face of the row: with six currencies in one list, which
   wallet a line belongs to places it faster than its direction does. */
.pb-tx__avatar {
    position: relative;
    flex: 0 0 auto;
}

.pb-tx__face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

/* No artwork for this currency: the code still identifies it. */
.pb-tx__face--blank {
    background: #f2f2f2;
    color: var(--pb-ink-soft);
    font-size: .625rem;
    font-weight: 700;
}

/* Direction rides as the badge, still colour-coded. */
.pb-tx__badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.pb-tx__badge.is-in  { background: #1e7a42; color: #fff; }
.pb-tx__badge.is-out { background: #a02a1c; color: #fff; }

/* The three lines take whatever the avatar leaves. */
.pb-tx__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Left item takes the slack, right item keeps its natural width, so amounts
   and dates stay flush to the right edge on every line. */
.pb-tx__line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pb-tx__line + .pb-tx__line { margin-top: 3px; }

/* Reference detail, set apart from the two lines that matter at a glance. */
.pb-tx__line--foot {
    align-items: flex-end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--pb-line);
}

.pb-tx__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--pb-ink);
    line-height: 1.35;
}

.pb-tx__amount {
    flex: 0 0 auto;
    font-size: .9375rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--pb-ink);
}

/* Money in is the only figure that earns a colour, so a green amount means
   one thing and reads instantly. */
.pb-tx__amount.is-in { color: #1e7a42; }

.pb-tx__kind {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .8125rem;
    color: var(--pb-muted);
    line-height: 1.35;
}

/* Status as a filled pill: colour and shape together, so it never relies on
   colour alone to be read. */
.pb-tx__status {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.pb-tx__status.is-done      { background: #e3f6ea; color: #1a6b3a; }
.pb-tx__status.is-pending   { background: #fdf0dc; color: #96601a; }
.pb-tx__status.is-cancelled { background: #fde8e6; color: #a02a1c; }

.pb-tx__ref { flex: 1 1 auto; min-width: 0; }

.pb-tx__reflabel {
    display: block;
    font-size: .6875rem;
    color: var(--pb-faint);
}

.pb-tx__refno {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-tx__when { flex: 0 0 auto; text-align: right; }

.pb-tx__date {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
}

.pb-tx__time {
    display: block;
    font-size: .75rem;
    color: var(--pb-faint);
    margin-top: 1px;
}

/* Below 480px the title takes its own line rather than being truncated to
   three words to make room for the amount. */
@media (max-width: 479px) {
    .pb-tx { padding: 13px 13px; }

    .pb-tx__line:first-child { flex-wrap: wrap; gap: 2px 10px; }

    .pb-tx__title {
        flex: 1 1 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pb-tx__amount { flex: 1 1 auto; font-size: 1rem; }
}

@media (max-width: 359px) {
    .pb-tx { padding: 12px 11px; gap: 9px; }

    /* Trim the avatar so the text gains its width. */
    .pb-tx__face { width: 32px; height: 32px; }
    .pb-tx__badge { width: 16px; height: 16px; }
    .pb-tx__badge svg { width: 9px; height: 9px; }

    .pb-tx__title  { font-size: .875rem; }
    .pb-tx__amount { font-size: .9375rem; }
    .pb-tx__refno,
    .pb-tx__date,
    .pb-tx__time   { font-size: .6875rem; }

    .pb-daygroup__label { padding-left: 6px; }
}

/* Flag and status in the transaction detail sheet. */
.pb-sheet__avatar {
    position: relative;
    display: inline-block;
    margin-bottom: 14px;
}

/* The flag is the face, matching the list rows. */
.pb-sheet__face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.pb-sheet__face[hidden] { display: none; }

/* A button carrying the hidden attribute must actually hide: .pb-btn's
   display:flex outranks the browser's default [hidden] rule. */
.pb-btn[hidden] { display: none; }

.pb-sheet__face--blank {
    background: #f2f2f2;
    color: var(--pb-ink-soft);
    font-size: .75rem;
    font-weight: 700;
}

/* Direction rides as the badge, filled so it reads at this size. */
.pb-sheet__badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2.5px solid #fff;
}

.pb-sheet__badge.is-in  { background: #1e7a42; color: #fff; }
.pb-sheet__badge.is-out { background: #a02a1c; color: #fff; }

/* Stated as a pill so the outcome reads at a glance, in the same colours the
   list uses — a customer should not have to re-learn them per screen. */
.pb-sheet__status {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}

.pb-sheet__status:empty { display: none; }

.pb-sheet__status.is-done    { background: #e7f6ec; color: #1e7a42; }
.pb-sheet__status.is-pending { background: #f5f5f5; color: var(--pb-muted); }

/* --------------------------------------------------------------------------
   Transaction history: header, statistics, filter sheet
   -------------------------------------------------------------------------- */

.pb-txhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.pb-txhead__acts { display: flex; gap: 8px; }

/* A dot marks that filters are active, so a short list is never mistaken for
   an empty account. */
.pb-iconbtn__dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pb-brand);
    border: 1.5px solid #fff;
}

.pb-txhead .pb-iconbtn { position: relative; }

/* ---- Statistics ---- */

.pb-statwrap {
    position: relative;
    border: 1.5px solid var(--pb-line);
    border-radius: 18px;
    padding: 16px 16px 12px;
    margin-bottom: 26px;
}

.pb-statwrap__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.pb-statwrap__label {
    font-size: .75rem;
    color: var(--pb-muted);
}

.pb-select--sm {
    width: auto;
    padding: 7px 30px 7px 12px;
    font-size: .8125rem;
    background-position: right 10px center;
}

.pb-statchart {
    display: block;
    width: 100%;
    height: 130px;
    overflow: visible;
}

.pb-statchart__zero {
    stroke: var(--pb-line);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

.pb-statchart__line {
    fill: none;
    stroke: var(--pb-brand);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.pb-statchart__dot {
    fill: var(--pb-brand);
    stroke: #fff;
    stroke-width: 2;
    cursor: pointer;
    vector-effect: non-scaling-stroke;
}

.pb-statchart__tip {
    position: absolute;
    z-index: 3;
    transform: translateX(-50%);
    padding: 7px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--pb-line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}

.pb-statchart__tip[hidden] { display: none; }

.pb-statchart__tip span {
    display: block;
    font-size: .875rem;
    font-weight: 700;
}

.pb-statchart__tip span.is-in  { color: #1e7a42; }
.pb-statchart__tip span.is-out { color: var(--pb-ink); }

.pb-statchart__tip small {
    display: block;
    font-size: .6875rem;
    color: var(--pb-muted);
    margin-top: 1px;
}

.pb-statchart__axis {
    display: flex;
    justify-content: space-between;
    font-size: .6875rem;
    color: var(--pb-faint);
    margin-top: 6px;
}

/* ---- Top spending ---- */

.pb-spend { margin-bottom: 26px; }

.pb-spend__row { margin-bottom: 14px; }

.pb-spend__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.pb-spend__label {
    font-size: .875rem;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-spend__value {
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
}

.pb-spend__track {
    height: 6px;
    border-radius: 999px;
    background: #f0f0f0;
    overflow: hidden;
}

.pb-spend__bar {
    height: 100%;
    border-radius: 999px;
    background: var(--pb-brand);
}

/* ---- Filter sheet ---- */

.pb-filter__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--pb-ink);
}

.pb-filter__group { margin-bottom: 20px; }

.pb-filter__label {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pb-muted);
    margin-bottom: 9px;
}

.pb-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pb-fchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: 1.5px solid var(--pb-line);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pb-ink-soft);
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease),
                color .16s var(--pb-ease);
}

/* The checkbox drives the state but is not itself the target. */
.pb-fchip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pb-fchip img { border-radius: 50%; object-fit: cover; }

.pb-fchip.is-on {
    border-color: var(--pb-brand);
    background: var(--pb-brand);
    color: var(--pb-on-brand);
}

/* The common spans sit above the exact range: most people want "last 30
   days", not two specific dates. */
.pb-filter__presets { margin-bottom: 10px; }

.pb-fchip--preset {
    border: 1.5px solid var(--pb-line);
    background: none;
    font: inherit;
    cursor: pointer;
}

/* Two dates read as one range when the arrow joins them inside a single
   frame, rather than as two unrelated inputs side by side. */
.pb-daterange {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--pb-line);
    border-radius: 14px;
    overflow: hidden;
}

.pb-daterange__side {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 13px;
    cursor: pointer;
    transition: background-color .16s var(--pb-ease);
}

.pb-daterange__side:hover { background: #fafafa; }

.pb-daterange__side:focus-within {
    background: color-mix(in srgb, var(--pb-brand) 6%, transparent);
}

.pb-daterange__lab {
    display: block;
    position: relative;
    z-index: 1;
    pointer-events: none;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pb-faint);
}

/* The native control keeps the picker and the keyboard behaviour but shows
   nothing: its own text renders differently on every platform, and empty
   reads as blank rather than as "any date". */
.pb-daterange__input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Keyboard users get the same frame highlight the pointer does. */
.pb-daterange__input:focus-visible + .pb-daterange__shown {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pb-daterange__shown {
    display: block;
    position: relative;
    z-index: 1;
    pointer-events: none;
    margin-top: 3px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-daterange__arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 2px;
    color: var(--pb-faint);
    border-left: 1.5px solid var(--pb-line);
    border-right: 1.5px solid var(--pb-line);
}

/* Tools sit under the tab bar: download at the left, filter at the right,
   pushed apart rather than stacked in a corner. Tight to the tabs above,
   since they belong to them. */
.pb-txhead__acts {
    justify-content: space-between;
    margin: 6px 0 10px;
}

/* Transaction sheet and filters on a narrow screen. */
@media (max-width: 379px) {
    .pb-sheet__panel { padding-inline: 16px; }

    /* A 32-character reference cannot share a line with its label here, so
       the pairs stack and each value gets the full width. */
    .pb-sheet__rows { grid-template-columns: 1fr; }

    .pb-sheet__rows dt {
        padding: 12px 0 0;
        border-bottom: 0;
        font-size: .75rem;
    }

    .pb-sheet__rows dd {
        padding: 2px 0 12px;
        text-align: left;
    }

    .pb-sheet__copy { text-align: left; }

    .pb-sheet__face { width: 46px; height: 46px; }
    .pb-sheet__badge { width: 21px; height: 21px; }

    /* Filter chips: smaller so a row of currencies does not wrap to four. */
    .pb-fchip { padding: 7px 11px; font-size: .75rem; gap: 5px; }
    /* The range stays joined; only its padding tightens. */
    .pb-daterange__side { padding: 10px 10px; }
}

/* --------------------------------------------------------------------------
   Spoiler balances
   Figures are obscured by default and revealed on tap. The currency symbol
   stays legible throughout: knowing an account is in euros is not sensitive,
   and it keeps the row readable while the amount is hidden.
   -------------------------------------------------------------------------- */

.pb-amt__sym { /* Always visible. */ }

.pb-spoil {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 5px;
    /* The digits still occupy their space, so nothing reflows on reveal. */
    transition: color .28s var(--pb-ease);
}

/* Hidden state: the text is blurred to nothing and a drifting particle
   pattern sits over it, the way a spoiler reads in a chat app. */
.pb-spoil.is-hidden {
    /* Transparent text alone hides the figure. filter: blur() here would
       also blur the ::after overlay, muddying the particle drift that is
       the point of the effect. */
    color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.pb-spoil.is-hidden::after {
    content: '';
    position: absolute;
    inset: -2px -4px;
    border-radius: 5px;
    /* Tint sits on the overlay, not the element: the element carries blur(),
       which would soften its own background. The flat fallback covers
       browsers without color-mix. */
    background-color: rgba(0, 0, 0, .04);
    background-color: color-mix(in srgb, var(--pb-brand) 8%, transparent);
    /* Five scattered clusters, not five lattices. One dot per tile is a
       grid by definition, and at small tile sizes that grid is exactly what
       the eye locks onto. Each tile here carries a dozen-odd dots at
       irregular (Poisson-ish) positions, and the tiles are large enough to
       repeat only two or three times across a balance, so no row or column
       ever lines up. Generated, not hand-placed. */
    background-image:
        radial-gradient(circle 1px at 21.1px 5.6px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 6.3px 7.8px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 17.7px 10.7px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 17.8px 15.3px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 13px 15.6px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 21.9px 1.5px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 9.9px 6.4px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 15.8px 5px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 22px 11.2px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 8.4px 12.8px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 1.4px 15px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 8.8px 0.9px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 3.4px 5px, currentColor 99%, transparent 100%),
        radial-gradient(circle 1px at 10.5px 9.9px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 0.7px 8.7px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 4.8px 6.1px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 23.6px 14.3px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 19.9px 11.4px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 15.3px 5.2px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 20.3px 16.6px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 12.3px 10.9px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 24.1px 8.8px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 10.5px 16.2px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 15.7px 16.2px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 3.6px 15.5px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 13.4px 1.1px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 27px 11.8px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 28.7px 17.5px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 6.2px 1.2px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 20.7px 2.7px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 14.7px 21.1px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 12.9px 11.2px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 2.9px 21.9px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 5.3px 15.3px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 18.8px 7.7px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 18.8px 18.4px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 9.9px 8.5px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 3.9px 11.6px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 15.6px 5px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 11px 2.5px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 8.4px 18.8px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 10.7px 14.8px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.95px at 17.8px 1.6px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 24.8px 5.6px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 0.1px 3.7px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 12.6px 9.4px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 2.2px 6.7px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 17.5px 4.9px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 26.8px 12.8px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 20.5px 1.2px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 4.2px 1.2px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 5.4px 10.3px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 10.2px 4.7px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 16.9px 0.8px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 18.9px 8.3px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 23.2px 9.9px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 26.9px 9.2px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 12.9px 24.4px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 0.8px 7px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 8.5px 1.5px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 15.3px 0.4px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 0.5px 24.8px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 9.7px 12.8px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 4.5px 14.6px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 0.5px 12.3px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 13.7px 17.4px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 4px 28.7px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 7.5px 19.8px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 4.8px 4.8px, currentColor 99%, transparent 100%),
        radial-gradient(circle 0.85px at 12.4px 5.3px, currentColor 99%, transparent 100%);
    background-size:
        23px 17px, 23px 17px, 23px 17px, 23px 17px, 23px 17px, 23px 17px, 23px 17px, 23px 17px, 23px 17px, 23px 17px, 23px 17px, 23px 17px, 23px 17px, 23px 17px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 29px 19px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 31px 13px, 31px 13px, 31px 13px, 31px 13px, 31px 13px, 31px 13px, 31px 13px, 31px 13px, 31px 13px, 31px 13px, 31px 13px, 31px 13px, 31px 13px, 31px 13px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px;
    /* The admin's theme colour, so the effect belongs to the brand rather
       than being a fixed grey the operator cannot change. */
    color: var(--pb-brand);
    opacity: .92;
    will-change: background-position;
    contain: paint;
    /* Three overlapping cycles at prime-ish, unrelated durations: the layers
       only realign after minutes rather than every few seconds, so the
       pattern never looks like it is looping. */
    animation:
        pb-spoil-a 4.3s linear infinite,
        pb-spoil-b 6.7s linear infinite,
        pb-spoil-c 9.1s linear infinite;
    /* Each spoiler starts at its own offset, set per element, so a screenful
       of them does not pulse in unison. */
    animation-delay: var(--pb-spoil-offset, 0s), var(--pb-spoil-offset, 0s), var(--pb-spoil-offset, 0s);
    pointer-events: none;
}

/* The particles drift rather than sit still, which reads as "covered" instead
   of "broken". */
/* Each keyframe moves a different pair of layers on a different vector, and
   passes through intermediate steps so the motion curves rather than tracking
   a straight line. */
@keyframes pb-spoil-a {
    0%   { background-position: 0px -0px, 0px -0px, 0px -0px, 0px -0px, 0px -0px, 0px -0px, 0px -0px, 0px -0px, 0px -0px, 0px -0px, 0px -0px, 0px -0px, 0px -0px, 0px -0px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    33%  { background-position: 7.59px -5.61px, 7.59px -5.61px, 7.59px -5.61px, 7.59px -5.61px, 7.59px -5.61px, 7.59px -5.61px, 7.59px -5.61px, 7.59px -5.61px, 7.59px -5.61px, 7.59px -5.61px, 7.59px -5.61px, 7.59px -5.61px, 7.59px -5.61px, 7.59px -5.61px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, -10.23px 4.29px, -10.23px 4.29px, -10.23px 4.29px, -10.23px 4.29px, -10.23px 4.29px, -10.23px 4.29px, -10.23px 4.29px, -10.23px 4.29px, -10.23px 4.29px, -10.23px 4.29px, -10.23px 4.29px, -10.23px 4.29px, -10.23px 4.29px, -10.23px 4.29px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    66%  { background-position: 15.18px -11.22px, 15.18px -11.22px, 15.18px -11.22px, 15.18px -11.22px, 15.18px -11.22px, 15.18px -11.22px, 15.18px -11.22px, 15.18px -11.22px, 15.18px -11.22px, 15.18px -11.22px, 15.18px -11.22px, 15.18px -11.22px, 15.18px -11.22px, 15.18px -11.22px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, -20.46px 8.58px, -20.46px 8.58px, -20.46px 8.58px, -20.46px 8.58px, -20.46px 8.58px, -20.46px 8.58px, -20.46px 8.58px, -20.46px 8.58px, -20.46px 8.58px, -20.46px 8.58px, -20.46px 8.58px, -20.46px 8.58px, -20.46px 8.58px, -20.46px 8.58px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 23px -17px, 23px -17px, 23px -17px, 23px -17px, 23px -17px, 23px -17px, 23px -17px, 23px -17px, 23px -17px, 23px -17px, 23px -17px, 23px -17px, 23px -17px, 23px -17px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, -31px 13px, -31px 13px, -31px 13px, -31px 13px, -31px 13px, -31px 13px, -31px 13px, -31px 13px, -31px 13px, -31px 13px, -31px 13px, -31px 13px, -31px 13px, -31px 13px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

@keyframes pb-spoil-b {
    0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, -0px 0px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px; }
    33%  { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, -9.57px 6.27px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 5.61px 9.57px, 5.61px 9.57px, 5.61px 9.57px, 5.61px 9.57px, 5.61px 9.57px, 5.61px 9.57px, 5.61px 9.57px, 5.61px 9.57px, 5.61px 9.57px, 5.61px 9.57px, 5.61px 9.57px, 5.61px 9.57px, 5.61px 9.57px; }
    66%  { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, -19.14px 12.54px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 11.22px 19.14px, 11.22px 19.14px, 11.22px 19.14px, 11.22px 19.14px, 11.22px 19.14px, 11.22px 19.14px, 11.22px 19.14px, 11.22px 19.14px, 11.22px 19.14px, 11.22px 19.14px, 11.22px 19.14px, 11.22px 19.14px, 11.22px 19.14px; }
    100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, -29px 19px, -29px 19px, -29px 19px, -29px 19px, -29px 19px, -29px 19px, -29px 19px, -29px 19px, -29px 19px, -29px 19px, -29px 19px, -29px 19px, -29px 19px, -29px 19px, -29px 19px, -29px 19px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px, 17px 29px; }
}

@keyframes pb-spoil-c {
    0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    33%  { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 6.27px 7.59px, 6.27px 7.59px, 6.27px 7.59px, 6.27px 7.59px, 6.27px 7.59px, 6.27px 7.59px, 6.27px 7.59px, 6.27px 7.59px, 6.27px 7.59px, 6.27px 7.59px, 6.27px 7.59px, 6.27px 7.59px, 6.27px 7.59px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    66%  { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 12.54px 15.18px, 12.54px 15.18px, 12.54px 15.18px, 12.54px 15.18px, 12.54px 15.18px, 12.54px 15.18px, 12.54px 15.18px, 12.54px 15.18px, 12.54px 15.18px, 12.54px 15.18px, 12.54px 15.18px, 12.54px 15.18px, 12.54px 15.18px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 19px 23px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

/* Revealing fades the particles out rather than cutting them. */
.pb-spoil::after {
    opacity: 0;
    transition: opacity .28s var(--pb-ease);
}



@media (prefers-reduced-motion: reduce) {
    .pb-spoil.is-hidden::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Dashboard: quick actions and recent movement
   -------------------------------------------------------------------------- */

/* One card holding four actions, rather than loose links: it reads as a
   toolbar and survives a narrow screen without wrapping oddly. */
.pb-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 14px 8px;
    border: 1.5px solid var(--pb-line);
    border-radius: 18px;
    margin-bottom: 28px;
}

.pb-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    text-decoration: none;
    color: var(--pb-ink-soft);
}

.pb-action__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    transition: transform .16s var(--pb-ease);
}

.pb-action:hover .pb-action__icon { transform: translateY(-2px); }
.pb-action:active .pb-action__icon { transform: none; }

/* Tinted by purpose: money out, money in, and the two that move nothing. */
.pb-action__icon--send    { background: color-mix(in srgb, var(--pb-brand) 12%, #f5f5f5); color: var(--pb-brand); }
.pb-action__icon--receive { background: #e7f6ec; color: #1e7a42; }
.pb-action__icon--convert { background: #f0f4fb; color: #3d6dbf; }
.pb-action__icon--loan    { background: #fdf3e4; color: #a8701c; }

.pb-action__label {
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* ---- Recent movement ---- */

.pb-feed { margin-bottom: 8px; }

.pb-feed__row {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 14px;
    transition: background-color .16s var(--pb-ease);
}

.pb-feed__row:hover { background: #fafafa; }

/* The row and its receipt are separate targets: nesting one link inside
   another is invalid, and tapping the row should not download a file. */
.pb-feed__main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 4px 12px 10px;
    text-decoration: none;
    color: inherit;
}

.pb-feed__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.pb-feed__icon.is-in  { background: #e7f6ec; color: #1e7a42; }
.pb-feed__icon.is-out { background: #fdecea; color: #a02a1c; }

.pb-feed__body { flex: 1 1 auto; min-width: 0; }

.pb-feed__title {
    display: block;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-feed__meta {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-top: 2px;
}

.pb-feed__amount {
    flex: 0 0 auto;
    font-size: .9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.pb-feed__amount.is-in  { color: #1e7a42; }
.pb-feed__amount.is-out { color: var(--pb-ink); }

/* The receipt is an affordance, not a label buried in the date line. */
.pb-feed__receipt {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    border-radius: 10px;
    color: var(--pb-muted);
    transition: background-color .16s var(--pb-ease), color .16s var(--pb-ease);
}

.pb-feed__receipt:hover { background: #f0f0f0; color: var(--pb-ink); }

@media (max-width: 359px) {
    .pb-actions { padding: 12px 4px; gap: 2px; }
    .pb-action__icon { width: 38px; height: 38px; border-radius: 12px; }
    .pb-feed__main { gap: 10px; padding-left: 6px; }
    .pb-feed__icon { width: 30px; height: 30px; }
    .pb-feed__receipt { width: 28px; height: 28px; margin-right: 4px; }
}

/* --------------------------------------------------------------------------
   Connect wallet
   Linking an external card or funding account.
   -------------------------------------------------------------------------- */

/* A live preview of the card being typed, so the digits can be checked
   against the plastic in hand. */
.pb-linkcard {
    position: relative;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 24px;
    background: linear-gradient(135deg,
        var(--pb-brand) 0%,
        color-mix(in srgb, var(--pb-brand) 72%, #000) 100%);
    color: var(--pb-on-brand);
    overflow: hidden;
}

/* Faint concentric rings, as on the reference artwork. */
.pb-linkcard::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 30px solid rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 26px rgba(255, 255, 255, .05);
    pointer-events: none;
}

.pb-linkcard__top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 26px;
}

.pb-linkcard__kind {
    font-size: .75rem;
    opacity: .85;
    max-width: 5em;
    line-height: 1.2;
}

.pb-linkcard__brand {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.pb-linkcard__chip {
    position: relative;
    width: 34px;
    height: 25px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .32);
    margin-bottom: 22px;
}

.pb-linkcard__number {
    position: relative;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .08em;
    margin-bottom: 18px;
}

.pb-linkcard__foot {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .75rem;
    opacity: .9;
    text-transform: uppercase;
}

.pb-linkcard__foot span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-connect__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pb-ink);
    margin: 0 0 4px;
}

.pb-connect__note {
    font-size: .8125rem;
    color: var(--pb-muted);
    margin: 0 0 20px;
}

/* ---- Funding methods ---- */

.pb-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Also undoing the older horizontal scroller: it bled to the screen edge
       and hid its scrollbar, neither of which suits a stacked list. */
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
}

.pb-method {
    display: flex;
    /* These two undo the older tile variant further up the sheet: without
       them a funding method stays a 148px-wide vertical box instead of a
       full-width row, which is what it is meant to be here. */
    width: auto;
    flex-direction: row;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
    border: 1.5px solid var(--pb-line);
    border-radius: 16px;
    text-decoration: none;
    color: var(--pb-ink);
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease);
}

/* A method that works is picked out; one that does not is visibly inert, so
   the difference is obvious before it is tapped. */
.pb-method.is-live {
    border-color: color-mix(in srgb, var(--pb-brand) 40%, var(--pb-line));
    background: color-mix(in srgb, var(--pb-brand) 6%, transparent);
}

.pb-method.is-live:hover { border-color: var(--pb-brand); }

.pb-method.is-soon {
    background: #fafafa;
    color: var(--pb-muted);
    cursor: not-allowed;
}

.pb-method__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #fff;
    border: 1.5px solid var(--pb-line);
}

.pb-method.is-live .pb-method__icon {
    background: #fff;
    border-color: transparent;
    color: var(--pb-brand);
}

.pb-method__body { flex: 1 1 auto; min-width: 0; }

.pb-method__name {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
}

.pb-method__blurb {
    display: block;
    font-size: .75rem;
    color: var(--pb-muted);
    margin-top: 2px;
}

.pb-method__check {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
}

.pb-method__soon {
    flex: 0 0 auto;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pb-faint);
}

@media (max-width: 359px) {
    .pb-linkcard { padding: 16px; }
    .pb-linkcard__number { font-size: .9375rem; letter-spacing: .05em; }
    .pb-method { padding: 13px; gap: 10px; }
    .pb-method__icon { width: 38px; height: 38px; }
}

/* Connect-wallet affordance beside a section heading or page title. */
.pb-titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.pb-sec__tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pb-connectbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    /* Brand-tinted at rest rather than on hover: these are the two actions
       on the row, and grey made them read as disabled. */
    border: 1.5px solid var(--pb-brand);
    border: 1.5px solid color-mix(in srgb, var(--pb-brand) 32%, transparent);
    border-radius: 999px;
    background: transparent;
    background: color-mix(in srgb, var(--pb-brand) 8%, transparent);
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--pb-brand);
    text-decoration: none;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease);
}

.pb-connectbtn:hover {
    border-color: var(--pb-brand);
    background: transparent;
    background: color-mix(in srgb, var(--pb-brand) 14%, transparent);
}

.pb-connectbtn:hover { border-color: var(--pb-brand); color: var(--pb-brand); }

/* At the narrowest, the label goes and the plus alone carries it. */
@media (max-width: 359px) {
    .pb-connectbtn { font-size: 0; gap: 0; padding: 7px; }
    .pb-connectbtn svg { width: 15px; height: 15px; }
}

/* Cards already linked to the account. */
.pb-linked {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.pb-linked__row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: 1.5px solid var(--pb-line);
    border-radius: 14px;
}

/* A card the provider refused is visibly inert, not just annotated. */
.pb-linked__row.is-failed {
    background: #fdf6f5;
    border-color: #f0d4d0;
}

.pb-linked__brand {
    flex: 0 0 auto;
    min-width: 48px;
    padding: 5px 8px;
    border-radius: 7px;
    background: #f2f2f2;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-align: center;
    color: var(--pb-ink-soft);
}

.pb-linked__body { flex: 1 1 auto; min-width: 0; }

.pb-linked__num {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pb-ink);
}

.pb-linked__meta {
    display: block;
    font-size: .6875rem;
    color: var(--pb-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-linked__tag {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.pb-linked__act {
    flex: 0 0 auto;
    padding: 4px 9px;
    border: 1.5px solid var(--pb-line);
    border-radius: 999px;
    background: none;
    font: inherit;
    font-size: .625rem;
    font-weight: 600;
    color: var(--pb-ink-soft);
    cursor: pointer;
    white-space: nowrap;
}

.pb-linked__act:hover { border-color: var(--pb-brand); color: var(--pb-brand); }

.pb-linked__remove {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--pb-faint);
    cursor: pointer;
}

.pb-linked__remove:hover { background: #fdecea; color: #a02a1c; }

/* Micro-charge challenge on a pending linked card. */
.pb-verify {
    padding: 12px 13px 13px;
    margin: -6px 0 8px;
    border: 1.5px solid var(--pb-line);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: #fafafa;
}

.pb-verify__note {
    font-size: .6875rem;
    line-height: 1.45;
    color: var(--pb-muted);
    margin: 0 0 8px;
}

.pb-verify__row {
    display: flex;
    gap: 8px;
}

.pb-verify__row .pb-input {
    flex: 1 1 auto;
    padding: 11px 13px;
    font-size: .875rem;
}

/* The action sits inline with the field rather than below it. */
.pb-verify__row .pb-btn {
    width: auto;
    flex: 0 0 auto;
    padding: 11px 20px;
    font-size: .8125rem;
    border-radius: 12px;
}

.pb-verify__note:last-child { margin: 8px 0 0; }

/* Checkbox rendered as a chip in the admin funding form. */
.ad-fchip-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1.5px solid var(--pb-line);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

/* A field the IBAN filled in. Tinted rather than locked: everything here is
   derived, and a customer whose bank the directory does not know must be
   able to correct it. */
.pb-input.is-autofilled,
.pb-select.is-autofilled {
    background: color-mix(in srgb, var(--pb-brand) 6%, #f6f6f6);
    border-color: color-mix(in srgb, var(--pb-brand) 30%, transparent);
}

.pb-help--ok  { color: #1e7a42; }
.pb-help--bad { color: #a02a1c; }

/* --------------------------------------------------------------------------
   Currency picker
   Flag, code, name and symbol together: a code alone in a dropdown is the
   slowest way to recognise a currency.
   -------------------------------------------------------------------------- */

.pb-curgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.pb-curtile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1.5px solid var(--pb-line);
    border-radius: 14px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease);
}

.pb-curtile:hover { border-color: var(--pb-muted); }

/* Filled rather than outlined, so the choice survives a glance. */
.pb-curtile.is-active {
    border-color: var(--pb-brand);
    background: color-mix(in srgb, var(--pb-brand) 8%, transparent);
}

.pb-curtile__flag {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.pb-curtile__flag--blank {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
    color: var(--pb-ink-soft);
    font-size: .5rem;
    font-weight: 700;
}

.pb-curtile__body { flex: 1 1 auto; min-width: 0; }

.pb-curtile__code {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--pb-ink);
}

.pb-curtile__name {
    display: block;
    font-size: .6875rem;
    color: var(--pb-muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-curtile__sym {
    flex: 0 0 auto;
    font-size: .875rem;
    font-weight: 700;
    color: var(--pb-muted);
}

.pb-curtile.is-active .pb-curtile__sym { color: var(--pb-brand); }

/* An IBAN is read in groups of four, so it gets room to breathe. */
.pb-input--iban {
    letter-spacing: .06em;
    font-size: .9375rem;
}

@media (max-width: 359px) {
    .pb-curgrid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .pb-curtile { padding: 9px 8px; gap: 7px; }
    .pb-curtile__flag { width: 22px; height: 22px; }
    .pb-curtile__name { display: none; }
    .pb-input--iban { letter-spacing: .03em; font-size: .875rem; }
}

/* --------------------------------------------------------------------------
   Rail chooser
   Which banking system an account settles on decides what the form can ask,
   so it is picked before any field is shown.
   -------------------------------------------------------------------------- */

.pb-rails {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pb-rail {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border: 1.5px solid var(--pb-line);
    border-radius: 16px;
    text-decoration: none;
    color: var(--pb-ink);
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease);
}

.pb-rail:hover {
    border-color: var(--pb-brand);
    background: color-mix(in srgb, var(--pb-brand) 5%, transparent);
}

.pb-rail__head { flex: 0 0 auto; min-width: 0; }

.pb-rail__name {
    display: block;
    font-size: .9375rem;
    font-weight: 700;
}

.pb-rail__id {
    display: block;
    font-size: .6875rem;
    color: var(--pb-muted);
    margin-top: 2px;
}

/* The currencies decide the choice faster than the rail's name does. */
.pb-rail__currencies {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.pb-rail__cur {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 4px;
    border-radius: 999px;
    background: #f5f5f5;
    font-size: .625rem;
    font-weight: 700;
    color: var(--pb-ink-soft);
}

.pb-rail__cur img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.pb-rail__go { flex: 0 0 auto; color: var(--pb-faint); display: flex; }

@media (max-width: 359px) {
    .pb-rail { padding: 13px; gap: 8px; flex-wrap: wrap; }
    .pb-rail__currencies { justify-content: flex-start; width: 100%; }
    .pb-rail__go { display: none; }
}

/* Saying a link limit is reached. Muted and dashed rather than red: being at
   the limit is a normal state, not an error the customer has to fix. */
.pb-linkfull {
    margin: 0;
    padding: 16px 18px;
    border: 1px dashed var(--pb-line);
    border-radius: var(--pb-radius);
    background: var(--pb-canvas);
    color: var(--pb-muted);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
}


/* ---------------------------------------------------------------------------
   Linked bank accounts.

   Deliberately not card-shaped: an account is not a card, and giving it the
   same 1.586:1 face would invite the confusion the two tabs exist to avoid.
   It reuses the card bar, tags and icon actions below it, so the two tabs
   behave alike where behaviour is what matters.
   --------------------------------------------------------------------------- */
.pb-accts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.pb-lacct {
    min-width: 0;
    width: 100%;
}

.pb-lacct__face {
    position: relative;
    padding: 18px;
    border-radius: var(--pb-radius-lg);
    border: 1px solid var(--pb-line);
    background: var(--pb-surface);
    box-shadow: var(--pb-shadow-soft);
    overflow: hidden;
}

/* A band of colour rather than full artwork: enough to tell two accounts
   apart at a glance without pretending to be a card. */
.pb-lacct__face::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
}

.pb-lacct--aurora .pb-lacct__face::before { background: linear-gradient(90deg, #7c5cff, #22d3ee); }
.pb-lacct--meadow .pb-lacct__face::before { background: linear-gradient(90deg, #16a34a, #84cc16); }
.pb-lacct--86     .pb-lacct__face::before { background: linear-gradient(90deg, #f97316, #f43f5e); }
.pb-lacct--112    .pb-lacct__face::before { background: linear-gradient(90deg, #0ea5e9, #6366f1); }

/* An account whose checks failed reads as unusable without hiding it. */
.pb-lacct.is-failed .pb-lacct__face { filter: grayscale(.6); opacity: .85; }

.pb-lacct__bank {
    display: block;
    padding-right: 52px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pb-ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-lacct__ccy {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 3px 9px;
    border-radius: var(--pb-radius-pill);
    background: var(--pb-canvas);
    border: 1px solid var(--pb-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--pb-ink-soft);
}

.pb-lacct__num {
    margin: 14px 0 16px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--pb-ink);
    overflow-wrap: anywhere;
}

.pb-lacct__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.pb-lacct__field { min-width: 0; }
.pb-lacct__field--end { text-align: right; }

.pb-lacct__label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pb-faint);
}

.pb-lacct__value {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pb-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The identifiers, folded away. */
.pb-lacct__more { margin-top: 10px; }

/* A disclosure has to look like one. The old summary was flat grey text with
   the native marker suppressed by `display: inline-block`, so nothing said it
   opened: it read as a caption. This gives it a surface, a chevron that turns,
   and a count of what is behind it. */
.pb-lacct__more summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    background: var(--pb-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--pb-ink-soft);
    cursor: pointer;
    user-select: none;
    transition: background-color .16s var(--pb-ease), border-color .16s var(--pb-ease);
}

/* The native triangle would sit alongside the chevron; only one arrow. */
.pb-lacct__more summary::marker,
.pb-lacct__more summary::-webkit-details-marker { content: ''; display: none; }

.pb-lacct__more summary:hover {
    background: var(--pb-canvas);
    border-color: var(--pb-faint);
}

.pb-lacct__more summary:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

.pb-disc__chev {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--pb-muted);
    transition: transform .2s var(--pb-ease);
}

/* Pointing down once open, so the control reports its own state. */
.pb-lacct__more[open] .pb-disc__chev { transform: rotate(90deg); }

.pb-disc__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* How many rows are inside — the difference between "there is something here"
   and a label the customer has to open to evaluate. */
.pb-disc__count {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 2px 7px;
    border-radius: var(--pb-radius-pill);
    background: var(--pb-canvas);
    color: var(--pb-muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.pb-lacct__more[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.pb-lacct__rows {
    display: grid;
    gap: 6px;
    margin-top: -1px;
    padding: 14px;
    border: 1px solid var(--pb-line);
    border-top: 0;
    border-radius: 0 0 var(--pb-radius) var(--pb-radius);
    background: var(--pb-canvas);
}

.pb-lacct__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
}

.pb-lacct__row > span:first-child {
    color: var(--pb-muted);
    flex: 0 0 auto;
}

.pb-lacct__row > span:last-child {
    color: var(--pb-ink);
    font-weight: 600;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Down to 320px the face keeps its shape; only the padding gives. */
@media (max-width: 380px) {
    .pb-lacct__face { padding: 15px; }
    .pb-lacct__ccy { top: 15px; right: 15px; }
    .pb-lacct__num { font-size: 17px; }
    .pb-lacct__bank { padding-right: 46px; }
    .pb-lacct__foot { gap: 10px; }
    .pb-lacct__rows { padding: 12px; }
}


/* ---------------------------------------------------------------------------
   Linked accounts: the status bar.

   One line, always. The earlier version wrapped to two because the status pill
   held stageLabel(), which can be a whole sentence — "Verification failed.
   Please link the account again." is ~316px, and ~368px in French, so no
   layout could fit it beside the actions at 320px.

   The markup now puts a one-word state in the pill and moves any longer
   explanation to its own line below, which is what a sentence wanted anyway.
   The widest pill left is "En attente" at roughly 78px, so tags and actions
   sit together comfortably even at 302px.
   --------------------------------------------------------------------------- */
.pb-lacct .pb-cardbar {
    flex-wrap: nowrap;
    gap: 10px;
}

.pb-lacct .pb-cardbar__tags {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 6px;
}

/* Short enough to say its whole word now, so nothing is clipped. */
.pb-lacct .pb-tag {
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* The actions keep their width; the tags are what yields if anything must. */
.pb-lacct .pb-cardbar__acts {
    flex: 0 0 auto;
    margin-left: auto;
}

/* The explanation a pill could not hold, given a line of its own. */
.pb-lacct__note {
    margin: 8px 0 0;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.45;
}

.pb-lacct__note--bad {
    background: #fde8e6;
    color: #a02a1c;
}

.pb-lacct__note--wait {
    background: #fdf0dc;
    color: #96601a;
}

/* An "ok" state needs no explaining, but the rule exists so a future label
   that differs from "Verified" still lands somewhere sensible. */
.pb-lacct__note--ok {
    background: #e3f6ea;
    color: #1a6b3a;
}

/* The panel is a container so the rules above measure the panel, not the
   viewport — the same trick the card faces already use.

   `inline-size` applies inline-axis size containment, which makes the element
   size itself independently of its grid track instead of stretching to fill
   it. A card slot has a fixed aspect ratio so it does not notice; an account
   panel has no intrinsic width and collapses to a narrow column. Restating
   the width is what keeps it full-bleed while still being queryable. */
.pb-lacct {
    container-type: inline-size;
    width: 100%;
    justify-self: stretch;
}

/* An IBAN is a single unbroken token. Left to wrap it breaks mid-number, which
   is unreadable; sized down to fit it stays one line at 320px. */
.pb-lacct__num {
    font-size: clamp(15px, 5.2cqw, 19px);
    letter-spacing: .04em;
    overflow-wrap: normal;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.pb-lacct__num::-webkit-scrollbar { display: none; }

/* The holder name and label share one line; neither should crowd the other. */
.pb-lacct__foot { gap: 12px; }
.pb-lacct__field { flex: 1 1 0; }
.pb-lacct__field--end { flex: 0 1 auto; }


/* ---------------------------------------------------------------------------
   Connecting an account: making the invitation legible.
   --------------------------------------------------------------------------- */

/* The list of rails needs a sentence above it, or it reads as a status
   display rather than something to act on. */
.pb-methods__lead {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pb-muted);
}

/* A tick said "done"; this row starts the linking flow, so it points forward
   and leans on the brand colour the way a primary action does. */
.pb-method__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    transition: transform .16s var(--pb-ease);
}

.pb-method.is-live:hover .pb-method__go { transform: translateX(2px); }

/* The whole row is the target, so it should feel like one. */
.pb-method.is-live {
    cursor: pointer;
}

.pb-method.is-live:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}


/* ---------------------------------------------------------------------------
   Bank-issued cards (/dashboard/cards).

   The card face itself is .pb-vcard, shared with the linked cards: one design,
   two sources. Only the artwork differs, and the rail below is this page's.
   --------------------------------------------------------------------------- */
.pb-vcard--issued-15 { background-image: url('../img/card/bg-issued-15.svg'); }
.pb-vcard--issued-52 { background-image: url('../img/card/bg-issued-52.svg'); }
.pb-vcard--issued-82 { background-image: url('../img/card/bg-issued-82.svg'); }

/* A frozen card is visibly out of service without being hidden. */
.pb-vcard.is-locked { filter: grayscale(.55); }

/* The lock that replaces the contactless mark on a frozen card. */
.pb-vcard__frozen {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.pb-qcards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    margin-bottom: 22px;
}

/* Two or more cards become a swipeable rail rather than a long scroll. */
.pb-qcards.is-rail {
    grid-auto-flow: column;
    grid-auto-columns: min(86%, 340px);
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the edge then pad back, so the next card peeks in. */
    margin-inline: calc(var(--pb-gutter) * -1);
    padding-inline: var(--pb-gutter);
    padding-block: 2px 4px;
}

.pb-qcards.is-rail::-webkit-scrollbar { display: none; }
.pb-qcards.is-rail .pb-qslot { scroll-snap-align: center; }

/* Each slot is a container, so the face sizes from its own width. */
.pb-qslot {
    container-type: inline-size;
    width: 100%;
    min-width: 0;
}

.pb-qslot .pb-vcard {
    display: flex;
    text-decoration: none;
    transition: transform .18s var(--pb-ease), box-shadow .18s var(--pb-ease);
}

/* The selected card is the one the panels below describe, so it stands out
   and the others recede — without hiding them. */
.pb-qslot:not(.is-on) .pb-vcard { opacity: .62; }

.pb-qslot.is-on .pb-vcard {
    box-shadow: 0 4px 18px rgba(19, 28, 51, .22), 0 0 0 2px var(--pb-brand);
}

.pb-qslot .pb-vcard:hover { transform: translateY(-2px); }

/* The note a card carries when it cannot be used yet. */
.pb-qnote {
    margin: 8px 0 0;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.45;
}

.pb-qnote--wait { background: #fdf0dc; color: #96601a; }
.pb-qnote--bad  { background: #fde8e6; color: #a02a1c; }

/* Nothing issued yet. */
.pb-noqcards {
    padding: 34px 22px;
    border: 1px dashed var(--pb-line);
    border-radius: var(--pb-radius-lg);
    background: var(--pb-canvas);
    text-align: center;
}

.pb-noqcards__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--pb-surface);
    border: 1px solid var(--pb-line);
    color: var(--pb-muted);
}

.pb-noqcards__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pb-ink);
}

.pb-noqcards__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pb-muted);
}

/* The bar under an issued card follows the account rules: one line, the
   actions holding their width and the tag yielding first. */
.pb-qslot .pb-cardbar {
    flex-wrap: nowrap;
    gap: 10px;
}

.pb-qslot .pb-cardbar__tags { flex: 0 1 auto; min-width: 0; }
.pb-qslot .pb-cardbar__acts { flex: 0 0 auto; margin-left: auto; }
.pb-qslot .pb-tag { flex: 0 0 auto; overflow: visible; white-space: nowrap; }

/* At the narrowest widths the freeze button drops its word and keeps its
   icon, which is what actually has to fit. */
@container (max-width: 264px) {
    .pb-qslot .pb-iact--wide { width: 34px; padding: 0; font-size: 0; gap: 0; }
    .pb-qslot .pb-iact--wide svg { font-size: initial; }
}


/* ---------------------------------------------------------------------------
   Choosing which wallet pays.

   A dropdown hides every option but one behind a tap, and the balance is the
   whole basis of the choice. These are tiles: flag, currency, and the figure
   that decides it, all visible at once.
   --------------------------------------------------------------------------- */
.pb-wals {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
}

/* Two across once there is room for the balance to stay on one line. */
@media (min-width: 420px) {
    .pb-wals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pb-wal {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
    padding: 13px 14px;
    border: 1.5px solid var(--pb-line);
    border-radius: 16px;
    background: var(--pb-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease),
                box-shadow .16s var(--pb-ease);
}

.pb-wal:hover:not([disabled]) { border-color: var(--pb-faint); }

.pb-wal:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

/* The chosen wallet carries the brand, so the choice is legible at a glance
   rather than by comparing borders. */
.pb-wal.is-active {
    border-color: var(--pb-brand);
    background: color-mix(in srgb, var(--pb-brand) 6%, transparent);
    box-shadow: 0 0 0 1px var(--pb-brand);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .pb-wal.is-active { background: var(--pb-canvas); }
}

/* A wallet with nothing in it cannot fund a transfer; it is shown so the
   customer knows it exists, but it does not pretend to be selectable. */
.pb-wal.is-empty,
.pb-wal[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.pb-wal__flag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pb-canvas);
}

.pb-wal__flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pb-wal__flag--blank {
    font-size: 10px;
    font-weight: 700;
    color: var(--pb-muted);
}

.pb-wal__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pb-wal__cur {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--pb-muted);
}

/* The balance is the figure being chosen between, so it is the loud one. */
.pb-wal__bal {
    font-size: 15px;
    font-weight: 700;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-wal__on {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .16s var(--pb-ease), transform .16s var(--pb-ease);
}

.pb-wal.is-active .pb-wal__on { opacity: 1; transform: scale(1); }

/* At 320px the flag gives way before the balance does. */
@media (max-width: 360px) {
    .pb-wal { padding: 11px 12px; gap: 9px; }
    .pb-wal__flag { width: 26px; height: 26px; }
    .pb-wal__bal { font-size: 14px; }
}


/* ---------------------------------------------------------------------------
   Transfer completed.

   The amount leads, because that is what the sender is confirming. Everything
   else is a receipt: what it cost, what is left, and the reference.
   --------------------------------------------------------------------------- */
.pb-done2 {
    text-align: center;
    padding: 30px 0 24px;
}

.pb-done2__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #e3f6ea;
    color: #1a6b3a;
    animation: pb-done-pop .34s var(--pb-ease) both;
}

/* Accepted but not yet settled. Amber rather than green: the money has left,
   but claiming it has arrived would be a promise the network has not made. */
.pb-done2__mark.is-pending {
    background: #fdf0dc;
    color: #96601a;
}

/* Declined, cancelled or returned. The page still shows the figures, because
   the customer needs to know what was attempted. */
.pb-done2__mark.is-failed {
    background: #fde8e6;
    color: #a02a1c;
}

@keyframes pb-done-pop {
    from { transform: scale(.7); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-done2__mark { animation: none; }
}

.pb-done2__amount {
    margin: 0;
    font-size: clamp(2rem, 11vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--pb-ink);
    overflow-wrap: anywhere;
}

.pb-done2__title {
    margin: 6px 0 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pb-muted);
}

/* The recipient, as a row: the name is a fact being checked, and a name in
   prose is harder to scan than a name in a field. */
.pb-done2__who {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    max-width: 100%;
    margin-top: 20px;
    padding: 10px 16px 10px 10px;
    border-radius: var(--pb-radius-pill);
    background: var(--pb-canvas);
    text-align: left;
}

.pb-done2__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.pb-done2__whobody {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pb-done2__wholabel {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pb-faint);
}

.pb-done2__whoname {
    font-size: 14px;
    font-weight: 700;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The receipt blocks. */
.pb-rcpt {
    margin-top: 16px;
    padding: 6px 16px;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    background: var(--pb-surface);
}

.pb-rcpt--meta { background: var(--pb-canvas); }

.pb-rcpt__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    font-size: 13.5px;
    border-top: 1px solid var(--pb-line);
}

.pb-rcpt__row:first-child { border-top: 0; }

.pb-rcpt__row > span:first-child {
    flex: 0 0 auto;
    color: var(--pb-muted);
}

.pb-rcpt__row > span:last-child {
    min-width: 0;
    text-align: right;
    font-weight: 600;
    color: var(--pb-ink);
    overflow-wrap: anywhere;
}

/* A total is the line the eye should land on. */
.pb-rcpt__row--total > span:last-child {
    font-size: 15px;
    font-weight: 800;
}

/* The reference is long; on a narrow screen it takes its own line rather
   than squeezing the label to nothing. */
.pb-rcpt__row--ref { flex-wrap: wrap; }

.pb-refcopy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    padding: 5px 9px;
    border: 1px solid var(--pb-line);
    border-radius: 9px;
    background: var(--pb-surface);
    font: inherit;
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease);
}

.pb-refcopy:hover { border-color: var(--pb-faint); }

.pb-refcopy:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

.pb-refcopy__val {
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--pb-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-refcopy__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--pb-muted);
}

/* Confirmed by the control itself, so no toast is needed. */
.pb-refcopy.is-copied {
    border-color: #1a6b3a;
    background: #e3f6ea;
}

.pb-refcopy.is-copied .pb-refcopy__val,
.pb-refcopy.is-copied .pb-refcopy__icon { color: #1a6b3a; }

/* The actions, stacked on a phone and inline once there is room. */
.pb-doneacts {
    display: grid;
    gap: 10px;
    margin-top: 22px;
    padding-bottom: 10px;
}

.pb-doneacts .pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
}

/* A second action that is neither primary nor a plain link. */
.pb-btn--soft {
    background: var(--pb-canvas);
    color: var(--pb-ink);
    border: 1px solid var(--pb-line);
}

.pb-btn--soft:hover { background: #f2f2f2; }

@media (min-width: 480px) {
    .pb-doneacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The primary action keeps the full width above the other two. */
    .pb-doneacts .pb-btn:first-child { grid-column: 1 / -1; }
}

/* At the narrowest the reference drops below its label. */
@media (max-width: 360px) {
    .pb-rcpt { padding: 4px 13px; }
    .pb-done2__who { padding: 9px 13px 9px 9px; gap: 9px; }
    .pb-done2 { padding: 24px 0 18px; }
}


/* ---------------------------------------------------------------------------
   Paying a card the customer has already linked.
   --------------------------------------------------------------------------- */
.pb-mycards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 4px;
}

@media (min-width: 420px) {
    .pb-mycards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pb-mycard {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
    padding: 12px 13px;
    border: 1.5px solid var(--pb-line);
    border-radius: 15px;
    background: var(--pb-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease),
                box-shadow .16s var(--pb-ease);
}

.pb-mycard:hover { border-color: var(--pb-faint); }

.pb-mycard:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

.pb-mycard.is-active {
    border-color: var(--pb-brand);
    background: color-mix(in srgb, var(--pb-brand) 6%, transparent);
    box-shadow: 0 0 0 1px var(--pb-brand);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .pb-mycard.is-active { background: var(--pb-canvas); }
}

/* The scheme mark identifies the card faster than its digits do. */
.pb-mycard__brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 28px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--pb-line);
    overflow: hidden;
}

.pb-mycard__brand img { max-width: 30px; height: auto; }

.pb-mycard__brand--text {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--pb-muted);
}

.pb-mycard__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pb-mycard__num {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--pb-ink);
}

.pb-mycard__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 11.5px;
    color: var(--pb-muted);
}

/* Says what the card is: saved here, verified, and payable without typing a
   number. Green because it is a confirmed state, not a warning. */
.pb-mycard__tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: var(--pb-radius-pill);
    background: #e3f6ea;
    color: #1a6b3a;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

.pb-mycard__tag--default {
    background: #e8f0fe;
    color: #1a56c4;
}

/* The expiry distinguishes two cards sharing their last four. It is the
   first thing to go when the tile runs out of room. */
.pb-mycard__exp {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The section heading, which says these need nothing typed. */
.pb-cardhead__note {
    margin-left: auto;
    font-size: 11px;
    color: var(--pb-faint);
    white-space: nowrap;
}

@media (max-width: 380px) {
    /* At the narrowest the note would push the label out; the badge on each
       tile already carries the same meaning. */
    .pb-cardhead__note { display: none; }
}

.pb-mycard__on {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .16s var(--pb-ease), transform .16s var(--pb-ease);
}

.pb-mycard.is-active .pb-mycard__on { opacity: 1; transform: scale(1); }

/* The divider between paying a saved card and typing a new one. */
.pb-orline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: var(--pb-faint);
    font-size: 12px;
}

.pb-orline::before,
.pb-orline::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--pb-line);
}

.pb-orline > span { flex: 0 0 auto; }

/* The way back to typing a card by hand. It sits between the two paths, so
   it is quiet while the manual fields are already showing and becomes a
   proper button once a saved card has taken their place. */
.pb-orline__btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--pb-radius-pill);
    background: transparent;
    color: var(--pb-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: color .16s var(--pb-ease), background-color .16s var(--pb-ease),
                border-color .16s var(--pb-ease);
}

.pb-orline__btn:hover {
    color: var(--pb-ink);
    background: var(--pb-canvas);
}

.pb-orline__btn:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

/* While a saved card is chosen this is the only route out, so it stops
   looking like a caption and starts looking like the control it is. */
.pb-orline__btn.is-out {
    color: var(--pb-brand);
    border-color: color-mix(in srgb, var(--pb-brand) 35%, var(--pb-line));
    background: var(--pb-surface);
    font-weight: 600;
}

@supports not (border-color: color-mix(in srgb, red 10%, blue)) {
    .pb-orline__btn.is-out { border-color: var(--pb-line); }
}

/* Folding the manual fields away must actually hide them: any author
   display rule outranks the browser's own [hidden] { display: none }. */
#pbManualBody[hidden] { display: none !important; }

@media (max-width: 360px) {
    .pb-mycard { padding: 10px 11px; gap: 9px; }
    .pb-mycard__brand { width: 36px; height: 25px; }
}


/* ---------------------------------------------------------------------------
   The payout card form.

   Reuses the payment-sheet fields from linking a card. Two things differ: the
   error state is driven by a has-error class on the field (this page marks
   every offending field at once on submit, rather than as you leave each one),
   and the number field carries a live progress line beside its hard error.
   --------------------------------------------------------------------------- */

/* The hard error appears only when the field has been marked. */
.pb-cfield__error--hard { display: none; }
.pb-cfield.has-error .pb-cfield__error--hard { display: block; }

.pb-cfield.has-error .pb-cinput {
    border-color: #d93025;
    background: #fff8f7;
}

/* The live count and the check-digit verdict, which are not errors: they are
   shown while typing and hidden once the field is actually marked wrong. */
#pbCardFeedback {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    line-height: 1.35;
    color: var(--pb-muted);
}

#pbCardFeedback:empty { display: none; }

#pbCardFeedback.pb-feedback--ok  { color: #1a6b3a; }
#pbCardFeedback.pb-feedback--bad { color: #c0392b; }

/* One message at a time: a field marked wrong shows why, not a digit count. */
.pb-cfield.has-error #pbCardFeedback { display: none; }

/* The detected network sits where the padlock does, so it needs to fit that
   slot rather than the wider label it used to occupy. */
.pb-cfield__icon .pb-cardnum__brand {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--pb-muted);
    white-space: nowrap;
}

.pb-cfield__icon .pb-cardnum__brand.is-visa       { color: #1a1f71; }
.pb-cfield__icon .pb-cardnum__brand.is-mastercard { color: #eb001b; }
.pb-cfield__icon .pb-cardnum__brand.is-amex       { color: #006fcf; }
.pb-cfield__icon .pb-cardnum__brand.is-maestro    { color: #0099df; }


/* ---------------------------------------------------------------------------
   The amount, entered as a figure rather than typed into a box.

   The same control as a transfer to another customer, but this page shows it
   inside a form with other fields rather than as a step of its own, so it is
   scaled down and given a surface to sit on.
   --------------------------------------------------------------------------- */
.pb-amount--inline {
    padding: 22px 16px 18px;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    background: var(--pb-canvas);
}

.pb-amount--inline .pb-amount__figure {
    font-size: clamp(2rem, 12vw, 2.6rem);
    cursor: pointer;
    /* The proxy input that summons the numeric keyboard sits inside this box. */
    position: relative;
    border-radius: 8px;
    padding: 2px 6px;
    transition: color .16s var(--pb-ease);
}

.pb-amount--inline .pb-amount__figure:focus-visible,
.pb-amount--inline .pb-amount__figure:focus-within {
    outline: 2px solid var(--pb-brand);
    outline-offset: 3px;
}

/* Nothing entered yet: the placeholder zero recedes so it does not read as
   an amount the customer has chosen. */
.pb-amount__figure.is-empty { color: var(--pb-faint); }

/* Over the balance, or under the floor. */
.pb-amount__figure.is-over { color: #c0392b; }
.pb-amount__hint.is-over   { color: #c0392b; }

/* The field wrapper no longer holds an input, so its error sits under the
   figure rather than under a box. */
#pbFieldAmount .pb-fielderror { margin-top: 8px; }
#pbFieldAmount.has-error .pb-amount--inline { border-color: #d93025; }


/* ---------------------------------------------------------------------------
   Keeping a card typed during a payout.
   --------------------------------------------------------------------------- */
.pb-savecard {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 4px;
    padding: 12px 13px;
    border: 1px solid var(--pb-line);
    border-radius: 13px;
    background: var(--pb-canvas);
    cursor: pointer;
}

.pb-savecard input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pb-savecard__box {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border: 1.5px solid var(--pb-faint);
    border-radius: 6px;
    background: var(--pb-surface);
    color: transparent;
    transition: background-color .14s var(--pb-ease), border-color .14s var(--pb-ease),
                color .14s var(--pb-ease);
}

.pb-savecard input:checked + .pb-savecard__box {
    background: var(--pb-brand);
    border-color: var(--pb-brand);
    color: var(--pb-on-brand);
}

.pb-savecard input:focus-visible + .pb-savecard__box {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

.pb-savecard__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pb-savecard__title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pb-ink);
}

.pb-savecard__note {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--pb-muted);
}


/* ---------------------------------------------------------------------------
   Domestic or international, on one form.

   The two used to be separate pages asking for the same fields. This is the
   switch between them: the destination country is the only thing that really
   differs, so it appears with the rail that needs it.
   --------------------------------------------------------------------------- */
.pb-rails2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 20px;
}

.pb-xrail {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 13px;
    border: 1.5px solid var(--pb-line);
    border-radius: 15px;
    background: var(--pb-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), background-color .16s var(--pb-ease),
                box-shadow .16s var(--pb-ease);
}

.pb-xrail:hover { border-color: var(--pb-faint); }

.pb-xrail:focus-visible {
    outline: 2px solid var(--pb-ink);
    outline-offset: 2px;
}

.pb-xrail.is-active {
    border-color: var(--pb-brand);
    background: color-mix(in srgb, var(--pb-brand) 6%, transparent);
    box-shadow: 0 0 0 1px var(--pb-brand);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .pb-xrail.is-active { background: var(--pb-canvas); }
}

.pb-xrail__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--pb-canvas);
    color: var(--pb-muted);
    transition: background-color .16s var(--pb-ease), color .16s var(--pb-ease);
}

.pb-xrail.is-active .pb-xrail__icon {
    background: var(--pb-brand);
    color: var(--pb-on-brand);
}

.pb-xrail__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pb-xrail__name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pb-ink);
}

.pb-xrail__note {
    font-size: 11px;
    line-height: 1.35;
    color: var(--pb-muted);
}

/* Hiding the country must actually hide it: an author display rule outranks
   the browser's own [hidden] { display: none }. */
#pbCountryField[hidden] { display: none !important; }

/* At 320px the two rails stack rather than squeezing their labels. */
@media (max-width: 380px) {
    .pb-rails2 { grid-template-columns: 1fr; }
    .pb-xrail { padding: 11px 12px; }
}


/* ---------------------------------------------------------------------------
   A single funding wallet.

   With one wallet there is nothing to choose, so it is stated rather than
   offered — the same information the tiles carry, without pretending to be
   a control.
   --------------------------------------------------------------------------- */
.pb-onewal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--pb-line);
    border-radius: 15px;
    background: var(--pb-canvas);
}

.pb-onewal__cur {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--pb-muted);
}

.pb-onewal__bal {
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   A wallet dropdown that can show a flag.

   Native selects cannot hold an image, and this platform's flags are SVGs —
   the emoji fallback does not render on Windows at all. So the control is
   built: it looks and behaves like a select, and posts through a hidden input.
   --------------------------------------------------------------------------- */
.pb-csel {
    position: relative;
}

.pb-csel__button {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1.5px solid var(--pb-line);
    border-radius: 14px;
    background: var(--pb-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s var(--pb-ease), box-shadow .16s var(--pb-ease);
}

.pb-csel__button:hover { border-color: var(--pb-faint); }

.pb-csel__button:focus-visible {
    outline: 2px solid var(--pb-brand);
    outline-offset: 2px;
}

.pb-csel.is-open .pb-csel__button {
    border-color: var(--pb-brand);
    box-shadow: 0 0 0 1px var(--pb-brand);
}

.pb-csel__flag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pb-canvas);
}

.pb-csel__flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pb-csel__flag--blank {
    font-size: 9px;
    font-weight: 700;
    color: var(--pb-muted);
}

.pb-csel__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.pb-csel__cur {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--pb-muted);
}

/* The balance is what the choice turns on, so it is the loud half. */
.pb-csel__bal {
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--pb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-csel__chev {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--pb-faint);
    transition: transform .18s var(--pb-ease);
}

.pb-csel.is-open .pb-csel__chev { transform: rotate(180deg); }

/* The list. Floated over the form, as a select's own list would be. */
.pb-csel__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--pb-line);
    border-radius: 14px;
    background: var(--pb-surface);
    box-shadow: 0 12px 32px rgba(19, 28, 51, .16);
}

/* An author display rule outranks the browser's own [hidden]. */
.pb-csel__menu[hidden] { display: none; }

.pb-csel__option {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
    padding: 10px 11px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s var(--pb-ease);
}

.pb-csel__option:hover:not([disabled]) { background: var(--pb-canvas); }

.pb-csel__option:focus-visible {
    outline: 2px solid var(--pb-brand);
    outline-offset: -2px;
}

.pb-csel__option.is-on { background: var(--pb-canvas); }

/* A wallet with nothing in it cannot fund a transfer. */
.pb-csel__option[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.pb-csel__tick {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pb-brand);
    color: var(--pb-on-brand);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .14s var(--pb-ease), transform .14s var(--pb-ease);
}

.pb-csel__option.is-on .pb-csel__tick { opacity: 1; transform: scale(1); }

@media (max-width: 360px) {
    .pb-csel__button { padding: 11px 12px; gap: 9px; }
    .pb-csel__bal { font-size: 14px; }
}


/* ---------------------------------------------------------------------------
   Transfer form steps, as panels.

   Scoped to the bank-transfer form: each step becomes a surface of its own so
   the three questions read as three, rather than as one long column of
   fields. The step numbers already carry the brand colour.
   --------------------------------------------------------------------------- */
.pb-form--stepped .pb-step {
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius-lg);
    background: var(--pb-surface);
    box-shadow: var(--pb-shadow-soft);
}

.pb-form--stepped .pb-step__head {
    padding-bottom: 13px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--pb-line);
}

.pb-form--stepped .pb-step__title {
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* The last field in a panel should not push against its floor. */
.pb-form--stepped .pb-step > .pb-field:last-child,
.pb-form--stepped .pb-step > .pb-group:last-child {
    margin-bottom: 0;
}

/* The amount panel leads with its figure, so it needs no inner border. */
.pb-form--stepped .pb-step .pb-amount--inline {
    border: 0;
    background: transparent;
    padding: 6px 0 14px;
}

@media (max-width: 360px) {
    .pb-form--stepped .pb-step { padding: 15px; }
}