/* ═══════════════════════════════════════════════════════════════
   PayChain Wallet — Design System  (Dark-first + Light mode)
   Restyle-only overhaul: every class name is preserved so no view
   markup or functionality changes. Theme switches via
   <html data-theme="light|dark">. Domain accent (--wallet-primary /
   --wallet-secondary) is injected per-domain by DomainTheme.CssVars
   and is intentionally left untouched by the theme tokens below.
   ═══════════════════════════════════════════════════════════════ */

/* ── Accent fallbacks (overridden per-domain, theme-independent) ── */
:root {
    --wallet-primary:         #6C5CE7;
    --wallet-primary-dark:    #4d43b8;
    --wallet-primary-rgb:     108, 92, 231;
    --wallet-secondary:       #06b6d4;
    --wallet-secondary-dark:  #0891b2;
    --wallet-secondary-rgb:   6, 182, 212;

    --wallet-success:  #34d399;
    --wallet-danger:   #f47c7c;
    --wallet-warning:  #f59e0b;

    --wallet-header-h: 64px;
    --wallet-nav-h:    68px;
    --wallet-radius:   18px;
    --wallet-radius-sm:12px;
    --wallet-radius-xs:9px;

    --wallet-glass-blur: blur(16px) saturate(150%);
}

/* ── DARK theme (default) ── */
:root, :root[data-theme="dark"] {
    --wallet-bg:          #0b0f1a;
    --wallet-bg-2:        #080b12;
    --wallet-surface:     #151b2b;
    --wallet-surface-2:   #1b2236;
    --wallet-card-bg:     #151b2b;
    --wallet-input-bg:    #10151f;
    --wallet-text:        #eaeefb;
    --wallet-muted:       #8b93a7;
    --wallet-border:      rgba(255,255,255,.08);
    --wallet-border-2:    rgba(255,255,255,.12);
    --wallet-hover:       rgba(255,255,255,.05);

    --wallet-glass:        rgba(18,24,38,.72);
    --wallet-glass-border: rgba(255,255,255,.10);
    --wallet-header-bg:    rgba(13,18,30,.72);

    --wallet-shadow-sm:  0 2px 10px rgba(0,0,0,.35);
    --wallet-shadow:     0 10px 30px -14px rgba(0,0,0,.6);
    --wallet-shadow-lg:  0 24px 60px -24px rgba(0,0,0,.75);

    --wallet-app-bg:
        radial-gradient(90% 55% at 12% 0%, rgba(var(--wallet-primary-rgb),.14), transparent 55%),
        radial-gradient(90% 55% at 100% 100%, rgba(var(--wallet-primary-rgb),.10), transparent 55%),
        linear-gradient(180deg, var(--wallet-bg), var(--wallet-bg-2));
    --wallet-btn-close-filter: invert(1) grayscale(1) brightness(1.8);
}

/* ── LIGHT theme ── */
:root[data-theme="light"] {
    --wallet-bg:          #eef1f8;
    --wallet-bg-2:        #e7ebf5;
    --wallet-surface:     #ffffff;
    --wallet-surface-2:   #f4f6fb;
    --wallet-card-bg:     #ffffff;
    --wallet-input-bg:    #f7f8fc;
    --wallet-text:        #1a1d2e;
    --wallet-muted:       #7b8199;
    --wallet-border:      rgba(0,0,0,.08);
    --wallet-border-2:    rgba(0,0,0,.12);
    --wallet-hover:       rgba(0,0,0,.035);

    --wallet-glass:        rgba(255,255,255,.80);
    --wallet-glass-border: rgba(0,0,0,.06);
    --wallet-header-bg:    rgba(255,255,255,.85);

    --wallet-shadow-sm:  0 1px 3px rgba(20,25,50,.08), 0 1px 2px rgba(20,25,50,.05);
    --wallet-shadow:     0 6px 20px -8px rgba(20,25,50,.18);
    --wallet-shadow-lg:  0 20px 48px -18px rgba(20,25,50,.28);

    --wallet-app-bg:
        radial-gradient(90% 55% at 12% 0%, rgba(var(--wallet-primary-rgb),.10), transparent 55%),
        linear-gradient(180deg, var(--wallet-bg), var(--wallet-bg-2));
    --wallet-btn-close-filter: none;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-tap-highlight-color: transparent; }
body {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--wallet-bg);
    color: var(--wallet-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* Cross-document (MPA) page transitions — native crossfade between screens */
@view-transition { navigation: auto; }

/* ═══════════════════════════════════════════════════════════════
   AUTH SCREENS
   ═══════════════════════════════════════════════════════════════ */
.auth-page {
    min-height: 100vh;      /* for browsers that do not know dvh — see .wallet-app */
    min-height: 100dvh;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 1.25rem;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--wallet-primary-rgb),.32) 0%, transparent 70%),
        linear-gradient(160deg, #0f1035 0%, #171a45 40%, #0a0c1f 100%);
    position: relative;
}
.auth-page::before {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background:
        radial-gradient(circle 300px at 20% 80%, rgba(var(--wallet-primary-rgb),.14), transparent),
        radial-gradient(circle 200px at 80% 20%, rgba(255,255,255,.04), transparent);
    pointer-events: none;
}
.auth-wrapper { width: 100%; max-width: 400px; position: relative; z-index: 1; margin: auto; }
.auth-card {
    background: var(--wallet-surface);
    color: var(--wallet-text);
    border: 1px solid var(--wallet-border);
    border-radius: var(--wallet-radius);
    padding: 2.25rem 1.75rem 2rem;
    box-shadow: var(--wallet-shadow-lg);
    backdrop-filter: blur(12px);
}
.auth-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.75rem; }
.auth-logo { display: block; margin: 0 auto .75rem; height: 52px; width: auto; max-width: 200px; object-fit: contain; }
.auth-logo-placeholder {
    width: 60px; height: 60px; border-radius: 18px;
    background: linear-gradient(135deg, var(--wallet-primary), var(--wallet-primary-dark));
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .75rem; color: #fff; font-size: 1.6rem;
    box-shadow: 0 8px 24px rgba(var(--wallet-primary-rgb),.45);
}
.auth-brand h5 { font-size: 1.1rem; font-weight: 700; color: var(--wallet-text); letter-spacing: -.01em; }
.auth-card .form-label {
    font-size: .8rem; font-weight: 600; color: var(--wallet-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem;
}
.auth-card .form-control {
    border-radius: var(--wallet-radius-sm);
    border: 1.5px solid var(--wallet-border-2);
    padding: .7rem .9rem; font-size: .95rem;
    background: var(--wallet-input-bg); color: var(--wallet-text);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth-card .form-control:focus {
    border-color: var(--wallet-primary);
    box-shadow: 0 0 0 3px rgba(var(--wallet-primary-rgb),.2);
    background: var(--wallet-surface); outline: none;
}
.auth-card .btn-wallet-primary { margin-top: .25rem; }

/* ═══════════════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════════════ */
.wallet-app {
    /* BOTH lines are needed, in this order. A browser that does not know the dvh unit
       (Chromium before 108 — which includes the Huawei Browser many of our users are on —
       and Safari before 15.4) throws the whole declaration away. With only the dvh line
       the shell then has no height at all, and because it is overflow:hidden the page
       cannot scroll: anything below the first screen is unreachable. vh is the answer for
       those browsers; dvh overrides it wherever it is understood. */
    height: 100vh;
    height: 100dvh;
    background: var(--wallet-app-bg);
    background-attachment: fixed;
    display: flex; flex-direction: column; overflow: hidden;
}

/* ── Header ── */
.wallet-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: var(--wallet-header-h);
    background: var(--wallet-header-bg);
    backdrop-filter: var(--wallet-glass-blur);
    -webkit-backdrop-filter: var(--wallet-glass-blur);
    border-bottom: 1px solid var(--wallet-glass-border);
    padding: 0 1rem;
    display: flex; align-items: center; justify-content: space-between;
}
/* Tenant logo — the server hands back a per-surface version (see LogoSurfaceAdapter),
   so the header only has to show the one that matches the active theme. */
.wallet-header-logo { display: block; height: 34px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
.brand-logo--on-light { display: none !important; }
:root[data-theme="light"] .brand-logo--on-dark  { display: none !important; }
:root[data-theme="light"] .brand-logo--on-light { display: block !important; }
/* SVG logos can't be pixel-adapted server-side — on dark surfaces they get a clean plate. */
.brand-logo--svg-plate { background: #fff; padding: 5px 10px; border-radius: 10px; box-sizing: content-box; }
.wallet-header-brand { text-decoration: none; }
.wallet-header-logo-fallback {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--wallet-primary), var(--wallet-primary-dark));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem;
    box-shadow: 0 2px 10px rgba(var(--wallet-primary-rgb),.4);
}
.wallet-header-brand { display: flex; align-items: center; gap: .6rem; }
.wallet-header-name { font-size: 1rem; font-weight: 700; color: var(--wallet-text); letter-spacing: -.01em; }
.wallet-header-actions { display: flex; align-items: center; gap: .25rem; }
.btn-icon-ghost {
    width: 38px; height: 38px; border-radius: 12px;
    background: transparent; padding: 0; /* <button> otherwise gets the browser's grey/white face */
    -webkit-tap-highlight-color: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--wallet-muted); font-size: 1.15rem; cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
/* Hover only where a real pointer exists — on phones :hover sticks after a tap. */
@media (hover: hover) {
    .btn-icon-ghost:hover {
        background: rgba(var(--wallet-primary-rgb),.14);
        color: var(--wallet-primary);
        border-color: rgba(var(--wallet-primary-rgb),.28);
    }
}
.btn-icon-ghost:focus { outline: none; }
.btn-icon-ghost:focus-visible { outline: 2px solid rgba(var(--wallet-primary-rgb),.6); outline-offset: 2px; }
.btn-icon-ghost:active { transform: scale(.92); }

/* ── Bottom Nav (restrained glass) ── */
.wallet-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    height: var(--wallet-nav-h);
    background: var(--wallet-glass);
    backdrop-filter: var(--wallet-glass-blur);
    -webkit-backdrop-filter: var(--wallet-glass-blur);
    border-top: 1px solid var(--wallet-glass-border);
    display: flex; align-items: center; justify-content: space-around;
    padding: 0 .25rem;
    box-shadow: 0 -8px 26px -14px rgba(0,0,0,.6);
}
.bottom-nav-item {
    position: relative; z-index: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    flex: 1; padding: 8px 4px;
    color: var(--wallet-muted); font-size: .65rem; font-weight: 600;
    transition: color .2s;
}
.bottom-nav-item i { font-size: 1.45rem; line-height: 1; transition: transform .2s; }
.bottom-nav-item.active { color: var(--wallet-primary); }
.bottom-nav-item:hover  { color: var(--wallet-primary); }
.bottom-nav-item.active i { transform: translateY(-1px); }
/* glass pill under the active tab — centred on the whole item, both axes */
.bottom-nav-item.active::before {
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: calc(100% - 12px); max-width: 60px; height: 44px;
    border-radius: 14px; z-index: -1;
    background: rgba(var(--wallet-primary-rgb),.14);
    border: 1px solid rgba(var(--wallet-primary-rgb),.30);
    animation: pillIn .28s ease both;
}
@keyframes pillIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* QR centre button — accent, raised, pulsing */
.qr-btn { position: relative; flex: 1; }
.qr-circle {
    width: 54px; height: 54px; border-radius: 17px;
    background: linear-gradient(140deg, var(--wallet-primary), rgba(var(--wallet-primary-rgb),.55));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.45rem;
    border: 3px solid var(--wallet-bg);
    box-shadow: 0 10px 22px -8px rgba(var(--wallet-primary-rgb),.9);
    margin-top: -18px;
    transition: transform .2s, box-shadow .2s;
}
.qr-btn:hover .qr-circle { transform: translateY(-2px) scale(1.06); box-shadow: 0 12px 28px -6px rgba(var(--wallet-primary-rgb),1); }
.qr-btn:active .qr-circle { transform: scale(.96); }

/* ═══════════════════════════════════════════════════════════════
   BALANCE CARD  (the one hero surface with a light glass sheen)
   ═══════════════════════════════════════════════════════════════ */
.balance-card {
    background: linear-gradient(150deg, var(--wallet-primary) 0%, rgba(var(--wallet-primary-rgb),.55) 100%);
    color: #fff;
    border-radius: var(--wallet-radius);
    padding: 1.5rem 1.5rem 1.35rem;
    margin: 1rem;
    position: relative; overflow: hidden;
    box-shadow: 0 18px 40px -18px rgba(var(--wallet-primary-rgb),.7);
}
/* gentle one-off specular sheen (no looping bob — keeps the card stable) */
.balance-card::before {
    content: ''; position: absolute; top: -60%; left: -30%;
    width: 45%; height: 220%; transform: rotate(20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    animation: sheen 2.4s ease-out .15s 1 both; pointer-events: none;
}
@keyframes sheen { from { left: -40%; } to { left: 135%; } }
.balance-card::after {
    content: ''; position: absolute; bottom: -50px; right: 40px;
    width: 130px; height: 130px; border-radius: 50%;
    background: rgba(255,255,255,.08); pointer-events: none;
}
.balance-card-inner { position: relative; z-index: 1; }
.balance-label { font-size: .75rem; font-weight: 500; opacity: .85; margin-bottom: .2rem; position: relative; z-index: 1; }
.balance-amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: .15rem; position: relative; z-index: 1; }
.balance-currency { font-size: 1.1rem; font-weight: 600; opacity: .85; vertical-align: super; margin-right: 4px; }
.balance-card-actions { display: flex; gap: .65rem; margin-top: 1.1rem; }
.balance-card-actions .balance-action-btn,
.balance-card .btn-light {
    flex: 1; padding: .55rem .5rem;
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: var(--wallet-radius-xs);
    color: #fff !important; font-size: .82rem; font-weight: 600;
    text-align: center; cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .2s, transform .15s;
}
.balance-card-actions .balance-action-btn:hover,
.balance-card .btn-light:hover { background: rgba(255,255,255,.28) !important; transform: translateY(-1px); }
.balance-card-actions .balance-action-btn:active,
.balance-card .btn-light:active { transform: scale(.96); }

/* ═══════════════════════════════════════════════════════════════
   QUICK ACTIONS  (solid tiles)
   ═══════════════════════════════════════════════════════════════ */
.quick-actions-wrap { padding: 0 1rem .25rem; }
.quick-actions {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
    padding: 0 1rem;
}
@media (max-width: 360px) { .quick-actions { grid-template-columns: repeat(3, 1fr); } }
.quick-action {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: .8rem .25rem;
    background: var(--wallet-surface);
    border: 1px solid var(--wallet-border);
    border-radius: var(--wallet-radius-sm);
    font-size: .68rem; font-weight: 500; color: var(--wallet-muted);
    cursor: pointer; text-align: center; word-break: break-word;
    transition: transform .16s, background .16s, border-color .16s;
}
.quick-action:hover { background: var(--wallet-surface-2); border-color: var(--wallet-border-2); transform: translateY(-2px); }
.quick-action:active { transform: scale(.94); }
.qa-icon {
    width: 44px; height: 44px; border-radius: 14px;
    background: rgba(var(--wallet-primary-rgb),.14);
    border: 1px solid rgba(var(--wallet-primary-rgb),.26);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: var(--wallet-primary);
    transition: background .2s; flex-shrink: 0;
}
.quick-action:hover .qa-icon { background: rgba(var(--wallet-primary-rgb),.22); }

/* ═══════════════════════════════════════════════════════════════
   SECTION / FORM CARDS
   ═══════════════════════════════════════════════════════════════ */
.wallet-section {
    background: var(--wallet-surface);
    border: 1px solid var(--wallet-border);
    border-radius: var(--wallet-radius);
    padding: 1.1rem; margin: 0 1rem 1rem;
    box-shadow: var(--wallet-shadow-sm);
}
.wallet-section-title {
    font-size: .7rem; font-weight: 700; color: var(--wallet-muted);
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: .85rem;
}
.wallet-form-card {
    background: var(--wallet-surface);
    border: 1px solid var(--wallet-border);
    border-radius: var(--wallet-radius);
    padding: 1.25rem; margin: .75rem 1rem;
    box-shadow: var(--wallet-shadow-sm);
}
.wallet-info-card {
    background: var(--wallet-surface);
    border: 1px solid var(--wallet-border);
    border-radius: var(--wallet-radius);
    padding: 1.1rem;
    box-shadow: var(--wallet-shadow-sm);
}
.wallet-page-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1rem;
    background: var(--wallet-glass);
    backdrop-filter: var(--wallet-glass-blur);
    -webkit-backdrop-filter: var(--wallet-glass-blur);
    border-bottom: 1px solid var(--wallet-glass-border);
}
.wallet-page-header h5 { font-size: .97rem; font-weight: 700; letter-spacing: -.01em; }
.btn-icon-back {
    width: 36px; height: 36px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--wallet-surface-2); border: 1px solid var(--wallet-border);
    font-size: 1.1rem; color: var(--wallet-text);
    transition: background .15s, transform .15s;
}
.btn-icon-back:hover { background: var(--wallet-hover); }
.btn-icon-back:active { transform: scale(.92); }

/* Form controls inside cards */
.wallet-form-card .form-label,
.wallet-form .form-label {
    font-size: .78rem; font-weight: 600; color: var(--wallet-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem;
}
.wallet-form-card .form-control,
.wallet-form .form-control {
    border-radius: var(--wallet-radius-sm);
    border: 1.5px solid var(--wallet-border-2);
    padding: .7rem .9rem; font-size: .92rem;
    background: var(--wallet-input-bg); color: var(--wallet-text);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.wallet-form-card .form-control:focus,
.wallet-form .form-control:focus {
    border-color: var(--wallet-primary);
    box-shadow: 0 0 0 3px rgba(var(--wallet-primary-rgb),.18);
    background: var(--wallet-surface); outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   TRANSACTION ITEMS
   ═══════════════════════════════════════════════════════════════ */
.txn-item {
    display: flex; align-items: center; gap: .85rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--wallet-border);
}
.txn-item:last-child { border-bottom: none; }
.txn-icon {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    background: var(--wallet-hover); color: var(--wallet-muted);
    border: 1px solid var(--wallet-border);
}
.txn-icon.credit  { background: rgba(52,211,153,.14);  color: var(--wallet-success); border-color: rgba(52,211,153,.28); }
.txn-icon.debit   { background: var(--wallet-hover);    color: var(--wallet-text); }
.txn-icon.pending { background: rgba(245,158,11,.14);   color: var(--wallet-warning); border-color: rgba(245,158,11,.28); }
.txn-details { flex: 1; min-width: 0; }
.txn-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--wallet-text); }
.txn-date { font-size: .73rem; color: var(--wallet-muted); margin-top: 1px; }
.txn-fee-hint { font-size: .68rem; color: var(--wallet-muted); opacity:.75; margin-left:.25rem; }
.txn-amount { font-size: .92rem; font-weight: 700; white-space: nowrap; color: var(--wallet-text); }
.txn-amount.credit { color: var(--wallet-success); }
.txn-amount.debit  { color: var(--wallet-text); }

/* staggered reveal for the first rows in a list */
.txn-item { animation: rise .5s ease both; }
.txn-item:nth-child(1){animation-delay:.03s}.txn-item:nth-child(2){animation-delay:.08s}
.txn-item:nth-child(3){animation-delay:.13s}.txn-item:nth-child(4){animation-delay:.18s}
.txn-item:nth-child(5){animation-delay:.23s}.txn-item:nth-child(6){animation-delay:.28s}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Transaction list page extras */
.txn-date-separator {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--wallet-muted); padding: 1rem 0 .4rem;
}
/* the very first date group shouldn't push away from the card top */
.txn-date-separator:first-child { padding-top: .35rem; }
/* History rows: keep the same comfortable vertical rhythm as .txn-item while
   adding horizontal padding for the full-width hover/tap background. */
.txn-item-link {
    display: flex; align-items: center; gap: .85rem; text-decoration: none; color: inherit;
    margin: 0 -.6rem; padding: .9rem .6rem; border-radius: var(--wallet-radius-sm);
    transition: background .15s;
}
.txn-item-link:hover { background: var(--wallet-hover); }
.txn-item-link:active { background: var(--wallet-hover); }
.txn-filter-row { gap: .5rem; }
.filter-chip {
    white-space: nowrap; padding: .38em 1rem;
    border: 1.5px solid var(--wallet-border-2); border-radius: 20px;
    font-size: .78rem; font-weight: 600; color: var(--wallet-muted);
    background: var(--wallet-surface); transition: all .15s; flex-shrink: 0;
}
.filter-chip.active, .filter-chip:hover {
    border-color: var(--wallet-primary); color: var(--wallet-primary);
    background: rgba(var(--wallet-primary-rgb),.12);
}
.txn-status-badge { font-size: .62rem; font-weight: 700; padding: .12em .5em; border-radius: 5px; vertical-align: middle; margin-left: .3rem; }
.txn-status-badge.success  { background: rgba(52,211,153,.14);  color: var(--wallet-success); }
.txn-status-badge.pending  { background: rgba(245,158,11,.14); color: var(--wallet-warning); }
.txn-status-badge.failed   { background: rgba(244,124,124,.16);  color: var(--wallet-danger); }
.txn-status-badge.reversed { background: rgba(139,147,167,.16); color: var(--wallet-muted); }
.txn-icon-lg {
    width: 68px; height: 68px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
.txn-icon-lg.credit { background: rgba(52,211,153,.14);  color: var(--wallet-success); }
.txn-icon-lg.debit  { background: var(--wallet-hover);   color: var(--wallet-text); }
.detail-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .75rem 0; border-bottom: 1px solid var(--wallet-border);
}
.detail-row:last-child { border-bottom: none; }
.detail-label { font-size: .78rem; color: var(--wallet-muted); font-weight: 500; }
.detail-value { font-size: .88rem; font-weight: 600; text-align: right; max-width: 58%; word-break: break-all; color: var(--wallet-text); }
.detail-value.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: .8rem; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn-wallet-primary {
    display: block; width: 100%; padding: .88rem;
    background: linear-gradient(135deg, var(--wallet-primary), rgba(var(--wallet-primary-rgb),.6));
    color: #fff; border: none; border-radius: var(--wallet-radius-sm);
    font-size: .97rem; font-weight: 700; letter-spacing: .01em;
    cursor: pointer; text-align: center;
    box-shadow: 0 12px 26px -12px rgba(var(--wallet-primary-rgb),.9);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-wallet-primary:hover { filter: brightness(1.06); box-shadow: 0 14px 30px -12px rgba(var(--wallet-primary-rgb),1); color: #fff; transform: translateY(-1px); }
.btn-wallet-primary:active { transform: scale(.98); box-shadow: none; }
.btn-wallet-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Bootstrap primary/outline follow the domain colour */
.btn-primary {
    --bs-btn-bg: var(--wallet-primary);
    --bs-btn-border-color: var(--wallet-primary);
    --bs-btn-hover-bg: var(--wallet-primary-dark);
    --bs-btn-hover-border-color: var(--wallet-primary-dark);
    --bs-btn-active-bg: var(--wallet-primary-dark);
    --bs-btn-active-border-color: var(--wallet-primary-dark);
    --bs-btn-disabled-bg: var(--wallet-primary);
    --bs-btn-disabled-border-color: var(--wallet-primary);
    background-color: var(--wallet-primary); border-color: var(--wallet-primary); color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--wallet-primary);
    --bs-btn-border-color: var(--wallet-primary);
    --bs-btn-hover-bg: var(--wallet-primary);
    --bs-btn-hover-border-color: var(--wallet-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--wallet-primary);
    --bs-btn-active-border-color: var(--wallet-primary);
    color: var(--wallet-primary); border-color: var(--wallet-primary);
}
.btn-outline-primary:hover { color: #fff; background-color: var(--wallet-primary); border-color: var(--wallet-primary); }
.text-primary { color: var(--wallet-primary) !important; }

.btn-wallet-secondary {
    display: block; width: 100%; padding: .88rem;
    border-radius: var(--wallet-radius-sm);
    border: 1.5px solid var(--wallet-border-2);
    background: var(--wallet-surface); color: var(--wallet-text);
    font-weight: 700; font-size: .95rem; text-align: center;
    cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.btn-wallet-secondary:hover { background: var(--wallet-surface-2); border-color: var(--wallet-border-2); }
.btn-wallet-secondary:active { transform: scale(.98); }

/* ═══════════════════════════════════════════════════════════════
   PIN PAD
   ═══════════════════════════════════════════════════════════════ */
.pin-display { display: flex; gap: .75rem; justify-content: center; margin: 1.75rem 0; }
.pin-dot { width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--wallet-primary); background: transparent; transition: background .15s, transform .15s; }
.pin-dot.filled { background: var(--wallet-primary); transform: scale(1.1); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; max-width: 270px; margin: 0 auto; }
.pin-key {
    aspect-ratio: 1; border-radius: 50%;
    border: 1px solid var(--wallet-border); background: var(--wallet-surface);
    font-size: 1.35rem; font-weight: 700; color: var(--wallet-text);
    box-shadow: var(--wallet-shadow-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .1s, transform .1s, box-shadow .1s;
    -webkit-tap-highlight-color: transparent;
}
.pin-key:hover { background: var(--wallet-surface-2); }
.pin-key:active { background: rgba(var(--wallet-primary-rgb),.16); transform: scale(.92); box-shadow: none; }
.pin-key.del { font-size: 1.15rem; color: var(--wallet-muted); }

/* ═══════════════════════════════════════════════════════════════
   QR SCANNER
   ═══════════════════════════════════════════════════════════════ */
.qr-scan-container {
    position: relative; width: 100%; max-width: 320px; margin: 1.5rem auto;
    border-radius: var(--wallet-radius); overflow: hidden; aspect-ratio: 1;
    background: #0a0a0a; box-shadow: var(--wallet-shadow-lg);
    border: 1px solid var(--wallet-border);
}
#qrVideo { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-frame { position: absolute; top: 36px; right: 36px; bottom: 36px; left: 36px; border: none; pointer-events: none; }
.qr-corner { position: absolute; width: 30px; height: 30px; border-color: var(--wallet-primary); border-style: solid; filter: drop-shadow(0 0 5px rgba(var(--wallet-primary-rgb),.7)); }
.qr-corner.tl { top:0; left:0;  border-width:3px 0 0 3px; border-radius:7px 0 0 0; }
.qr-corner.tr { top:0; right:0; border-width:3px 3px 0 0; border-radius:0 7px 0 0; }
.qr-corner.bl { bottom:0; left:0;  border-width:0 0 3px 3px; border-radius:0 0 0 7px; }
.qr-corner.br { bottom:0; right:0; border-width:0 3px 3px 0; border-radius:0 0 7px 0; }
.qr-scan-label { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.85); font-size: .78rem; font-weight: 500; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* ═══════════════════════════════════════════════════════════════
   LOAD FUNDS — Preset Grid
   ═══════════════════════════════════════════════════════════════ */
.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.preset-btn {
    padding: .7rem .5rem; border-radius: var(--wallet-radius-sm);
    border: 1.5px solid var(--wallet-border-2); background: var(--wallet-surface-2);
    color: var(--wallet-text); font-weight: 700; font-size: .9rem;
    cursor: pointer; transition: all .15s;
}
.preset-btn:hover, .preset-btn.active {
    border-color: var(--wallet-primary); background: rgba(var(--wallet-primary-rgb),.12);
    color: var(--wallet-primary); box-shadow: 0 0 0 3px rgba(var(--wallet-primary-rgb),.12);
}
.method-btn {
    padding: .45rem .85rem; border-radius: var(--wallet-radius-sm);
    border: 1.5px solid var(--wallet-border-2); background: var(--wallet-surface-2);
    color: var(--wallet-text); font-size: .82rem; font-weight: 500;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.method-btn:hover, .method-btn.active {
    border-color: var(--wallet-secondary); background: rgba(var(--wallet-secondary-rgb),.14); color: var(--wallet-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   TAXIPAY
   ═══════════════════════════════════════════════════════════════ */
.taxipay-role-card {
    display: flex; align-items: center; gap: 1rem;
    background: var(--wallet-surface); border-radius: var(--wallet-radius);
    padding: 1.2rem 1.1rem; box-shadow: var(--wallet-shadow-sm);
    color: var(--wallet-text); border: 1.5px solid var(--wallet-border);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.taxipay-role-card:hover { transform: translateY(-2px); box-shadow: var(--wallet-shadow); border-color: rgba(var(--wallet-primary-rgb),.35); color: var(--wallet-text); }
.taxipay-role-icon {
    width: 50px; height: 50px; border-radius: 16px; flex-shrink: 0;
    background: rgba(var(--wallet-primary-rgb),.14); color: var(--wallet-primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.taxipay-role-icon.passenger { background: rgba(52,211,153,.14); color: var(--wallet-success); }
.status-banner { border-radius: var(--wallet-radius-sm); padding: .7rem 1rem; font-size: .84rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.status-banner.waiting    { background: rgba(245,158,11,.14); color: var(--wallet-warning); }
.status-banner.active     { background: rgba(var(--wallet-primary-rgb),.14); color: var(--wallet-primary); }
.status-banner.processing { background: rgba(var(--wallet-secondary-rgb),.14); color: var(--wallet-secondary); }
.status-banner.success    { background: rgba(52,211,153,.14); color: var(--wallet-success); }
.status-banner.error      { background: rgba(244,124,124,.16); color: var(--wallet-danger); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-dot.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.75)} }
/* A displayed QR must always sit on white with a light quiet zone — otherwise
   in dark mode the surrounding area goes dark and camera scanners can't read it. */
.qr-code-box {
    display: block; width: fit-content; max-width: 100%; margin: 0 auto;
    background: #fff; padding: 12px; border-radius: 14px;
    box-shadow: var(--wallet-shadow);
}
.qr-code-box canvas, .qr-code-box img { display: block; }
.room-code-badge {
    display: inline-block; padding: .4em 1em;
    background: var(--wallet-surface-2); border: 1px solid var(--wallet-border);
    border-radius: 10px; font-size: .9rem; font-weight: 700; letter-spacing: .12em;
    color: var(--wallet-text); font-family: 'SF Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE
   ═══════════════════════════════════════════════════════════════ */
.profile-avatar {
    width: 76px; height: 76px; border-radius: 24px;
    background: linear-gradient(140deg, var(--wallet-primary), rgba(var(--wallet-primary-rgb),.5));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em;
    box-shadow: 0 10px 26px -10px rgba(var(--wallet-primary-rgb),.6);
}
.profile-menu-item {
    display: flex; align-items: center; gap: .85rem;
    padding: .9rem 0; border-bottom: 1px solid var(--wallet-border);
    color: var(--wallet-text); transition: color .15s;
}
.profile-menu-item:last-child { border-bottom: none; }
.profile-menu-item:hover { color: var(--wallet-primary); }
.profile-menu-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(var(--wallet-primary-rgb),.12); color: var(--wallet-primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESULT ICONS / MERCHANT
   ═══════════════════════════════════════════════════════════════ */
.result-icon { width: 80px; height: 80px; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; margin: 0 auto; }
.result-icon.success { background: rgba(52,211,153,.14);  color: var(--wallet-success); }
.result-icon.error   { background: rgba(244,124,124,.16);  color: var(--wallet-danger); }
.merchant-icon-lg {
    width: 54px; height: 54px; border-radius: 16px;
    background: rgba(var(--wallet-primary-rgb),.14); color: var(--wallet-primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0;
}
.amount-display-lg { text-align: center; padding: 1rem 0; }

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.text-primary-wallet { color: var(--wallet-primary) !important; }
.bg-primary-wallet   { background: var(--wallet-primary) !important; }
.badge-wallet { background: rgba(var(--wallet-primary-rgb),.14); color: var(--wallet-primary); font-size: .72rem; font-weight: 700; padding: .22em .6em; border-radius: 6px; }
.divider-text { display: flex; align-items: center; gap: .75rem; color: var(--wallet-muted); font-size: .78rem; font-weight: 500; margin: 1.1rem 0; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--wallet-border); }
.wallet-main {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-top: var(--wallet-header-h);
    padding-bottom: calc(var(--wallet-nav-h) + 4.5rem);
    animation: mainIn .45s ease both;
}
@keyframes mainIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Safe area insets */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .wallet-bottom-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(var(--wallet-nav-h) + env(safe-area-inset-bottom)); }
    .wallet-header { height: calc(var(--wallet-header-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
    .wallet-main {
        padding-top: calc(var(--wallet-header-h) + env(safe-area-inset-top));
        padding-bottom: calc(var(--wallet-nav-h) + env(safe-area-inset-bottom) + 4.5rem);
    }
}

/* ── Active Work Cards ── */
.wallet-work-card {
    background: var(--wallet-surface);
    border: 1px solid var(--wallet-border);
    border-radius: 14px; padding: .85rem 1rem;
    transition: background .15s, transform .15s;
    color: var(--wallet-text);
}
.wallet-work-card:hover, .wallet-work-card:active { background: var(--wallet-surface-2); }
.wallet-work-card:active { transform: scale(.99); }
.work-card-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; color:#fff; }

/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP HARMONISATION  (make BS components theme-aware)
   ═══════════════════════════════════════════════════════════════ */
.wallet-app .text-muted { color: var(--wallet-muted) !important; }

.wallet-app .card {
    background: var(--wallet-surface);
    border: 1px solid var(--wallet-border);
    color: var(--wallet-text);
}
.wallet-app .form-control,
.wallet-app .form-select {
    /* background-COLOR only — using the `background` shorthand here would wipe the
       <select> dropdown arrow's no-repeat/position/size and make it tile. */
    background-color: var(--wallet-input-bg);
    border: 1.5px solid var(--wallet-border-2);
    color: var(--wallet-text);
}
.wallet-app .form-control::placeholder { color: var(--wallet-muted); opacity: .8; }
.wallet-app .form-control:focus,
.wallet-app .form-select:focus {
    background-color: var(--wallet-surface); color: var(--wallet-text);
    border-color: var(--wallet-primary);
    box-shadow: 0 0 0 3px rgba(var(--wallet-primary-rgb),.18);
}
/* Dark mode needs a light-coloured arrow (Bootstrap's default is near-black).
   Pin repeat/position/size so it's a single glyph, not a tiled fill. */
:root[data-theme="dark"] .wallet-app .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b93a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}
.wallet-app .input-group-text {
    background: var(--wallet-surface-2); border: 1.5px solid var(--wallet-border-2); color: var(--wallet-muted);
}

/* Alerts */
.wallet-app .alert-success { background: rgba(52,211,153,.14); border: 1px solid rgba(52,211,153,.3); color: var(--wallet-success); }
.wallet-app .alert-danger  { background: rgba(244,124,124,.16); border: 1px solid rgba(244,124,124,.3); color: var(--wallet-danger); }
.wallet-app .alert-warning { background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.3); color: var(--wallet-warning); }
.wallet-app .alert-info    { background: rgba(var(--wallet-primary-rgb),.14); border: 1px solid rgba(var(--wallet-primary-rgb),.3); color: var(--wallet-primary); }

/* Materio-style label badges */
.wallet-app .bg-label-primary { background: rgba(var(--wallet-primary-rgb),.16) !important; color: var(--wallet-primary) !important; }
.wallet-app .bg-label-success { background: rgba(52,211,153,.16) !important; color: var(--wallet-success) !important; }
.wallet-app .bg-label-danger  { background: rgba(244,124,124,.18) !important; color: var(--wallet-danger) !important; }
.wallet-app .bg-label-warning { background: rgba(245,158,11,.16) !important; color: var(--wallet-warning) !important; }
.wallet-app .bg-label-info    { background: rgba(var(--wallet-secondary-rgb),.16) !important; color: var(--wallet-secondary) !important; }
.wallet-app .bg-label-secondary { background: var(--wallet-hover) !important; color: var(--wallet-muted) !important; }

/* Modals & offcanvas */
.wallet-app .modal-content,
.wallet-app .offcanvas {
    background: var(--wallet-surface); color: var(--wallet-text); border: 1px solid var(--wallet-border);
}
.wallet-app .modal-header, .wallet-app .modal-footer { border-color: var(--wallet-border); }
/* Sit above the fixed app chrome (header/nav z-index 200) + PWA banner (1050),
   and keep the dialog above its own backdrop so its fields stay interactive. */
.modal-backdrop { z-index: 1590; }
.modal { z-index: 1600; }

/* List groups & tables */
.wallet-app .list-group-item { background: var(--wallet-surface); color: var(--wallet-text); border-color: var(--wallet-border); }
.wallet-app .table { --bs-table-bg: transparent; color: var(--wallet-text); border-color: var(--wallet-border); }
.wallet-app .table > :not(caption) > * > * { border-color: var(--wallet-border); }
.wallet-app .table-light, .wallet-app .table-light > * { background: var(--wallet-surface-2); color: var(--wallet-text); }

/* Close button visible in dark */
.wallet-app .btn-close { filter: var(--wallet-btn-close-filter); }

/* ── Bootstrap utilities that assume a LIGHT page (2026-09-23) ─────────────────
   The wallet themes with <html data-theme>, not Bootstrap's data-bs-theme, so
   Bootstrap's own colour utilities stay light-mode: `.bg-light` painted the fee
   summary card white while its text inherited the dark theme's near-white — the
   "Transfer / Total deducted" rows vanished. `.text-dark` did the reverse on the
   balance line, and `.form-text` ("Max you can send") was dark grey on near-black.
   Remapped to theme tokens so they read correctly in BOTH themes.
   Deliberately NOT remapped: `.bg-white` — it only wraps QR codes, which must stay
   on white to scan; and `.text-dark` on yellow/cyan badges, which need dark text. */
.wallet-app .bg-light,
.wallet-app .bg-body-tertiary,
.wallet-app .bg-body-secondary {
    background-color: var(--wallet-surface-2) !important;
    color: var(--wallet-text);
}
.wallet-app .text-body,
.wallet-app .text-body-emphasis,
.wallet-app .text-dark:not(.bg-warning):not(.bg-info):not(.bg-white) {
    color: var(--wallet-text) !important;
}
.wallet-app .form-text,
.wallet-app .text-secondary,
.wallet-app .text-body-secondary { color: var(--wallet-muted) !important; }
.wallet-app hr { border-color: var(--wallet-border-2); opacity: 1; }

/* Bootstrap's own tokens, for components and inline `var(--bs-…)` styles
   (e.g. the verified-recipient banner uses var(--bs-success-bg-subtle)). */
:root[data-theme="dark"] {
    --bs-body-color: #eaeefb;
    --bs-body-color-rgb: 234, 238, 251;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #8b93a7;
    --bs-tertiary-color: rgba(234, 238, 251, .5);
    --bs-body-bg: #0b0f1a;
    --bs-secondary-bg: #1b2236;
    --bs-tertiary-bg: #151b2b;
    --bs-border-color: rgba(255, 255, 255, .12);
    --bs-heading-color: inherit;
    --bs-primary-bg-subtle:   rgba(var(--wallet-primary-rgb), .16);
    --bs-secondary-bg-subtle: rgba(255, 255, 255, .06);
    --bs-success-bg-subtle:   rgba(52, 211, 153, .14);
    --bs-danger-bg-subtle:    rgba(244, 124, 124, .16);
    --bs-warning-bg-subtle:   rgba(245, 158, 11, .14);
    --bs-info-bg-subtle:      rgba(56, 189, 248, .14);
    --bs-light-bg-subtle:     #1b2236;
}

/* Outline-secondary readable in dark */
.wallet-app .btn-outline-secondary {
    color: var(--wallet-text); border-color: var(--wallet-border-2);
}
.wallet-app .btn-outline-secondary:hover { background: var(--wallet-hover); color: var(--wallet-text); border-color: var(--wallet-border-2); }

/* Theme toggle icon button just uses .btn-icon-ghost (already themed) */

/* ═══════════════════════════════════════════════════════════════
   MOTION — reduced-motion opt-out
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    @view-transition { navigation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD v2  (2026-08 redesign — tenant-branded premium home)
   Tenant tokens: --wallet-primary = action colour,
   --wallet-secondary = accent colour (headings underline, See all,
   Scan QR outline, Pay & go icons). Derived shades via color-mix
   so ANY tenant palette works without extra config.
   ═══════════════════════════════════════════════════════════════ */

/* ── Section headings (accent underline + optional right link) ── */
.sec-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 0 1rem; margin: 1.3rem 0 .75rem;
}
.sec-title {
    font-size: 1.04rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--wallet-text); line-height: 1.25;
}
.sec-title::after {
    content: ''; display: block; width: 34px; height: 3px; border-radius: 2px;
    background: var(--wallet-secondary); margin-top: 5px;
}
.sec-link {
    display: inline-flex; align-items: center; gap: 2px; padding-top: 2px;
    font-size: .84rem; font-weight: 600; color: var(--wallet-secondary);
}
.sec-link:hover { color: var(--wallet-secondary); filter: brightness(1.15); }
.chip-ghost {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .32rem .8rem; border-radius: 999px;
    border: 1px solid var(--wallet-border-2); background: var(--wallet-surface);
    color: var(--wallet-text); font-size: .78rem; font-weight: 600; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.chip-ghost:hover { border-color: var(--wallet-primary); color: var(--wallet-primary); }

/* ── Tenant-branded wallet banner ── */
.balance-card-v2 {
    position: relative; margin: 1rem; padding: 1.25rem; overflow: hidden;
    border-radius: 22px; color: #fff;
    background: var(--wallet-primary-dark); /* fallback when color-mix unsupported */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--wallet-primary) 16%, #0c1526) 0%,
        color-mix(in srgb, var(--wallet-primary) 34%, #0a1322) 55%,
        color-mix(in srgb, var(--wallet-primary) 56%, #081120) 100%);
    border: 1px solid color-mix(in srgb, var(--wallet-primary) 42%, rgba(255,255,255,.14));
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.55);
}
/* Brand glow replaces the old logo watermark (a faded wordmark behind the balance
   read as a smudge). Invalid without color-mix → the plain gradient above still applies. */
.balance-card-v2 {
    background-image:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--wallet-primary) 34%, transparent) 0%, transparent 58%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--wallet-primary) 16%, #0c1526) 0%,
            color-mix(in srgb, var(--wallet-primary) 34%, #0a1322) 55%,
            color-mix(in srgb, var(--wallet-primary) 56%, #081120) 100%);
}
.balance-watermark { display: none; } /* legacy markup, no longer rendered */
.bc2-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.bc2-greet { font-size: .93rem; font-weight: 600; }
.bc2-ballabel {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 500; color: rgba(255,255,255,.78);
}
.balance-eye {
    background: none; border: 0; padding: 6px; margin: -6px;
    color: rgba(255,255,255,.78); display: flex; cursor: pointer; line-height: 1;
}
.balance-eye:active { transform: scale(.9); }
.bc2-amount { position: relative; z-index: 1; display: flex; align-items: baseline; gap: .35rem; margin-top: .55rem; }
.bc2-cur { font-size: 1.25rem; font-weight: 700; color: color-mix(in srgb, var(--wallet-primary) 42%, #fff); }
.bc2-val { font-size: 2.85rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; transition: filter .2s; }
.bc2-val.bal-hidden { filter: blur(13px); }
.bc2-actions { position: relative; z-index: 1; display: flex; gap: .7rem; margin-top: 1.05rem; }
.bc2-btn {
    flex: 1; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    font-size: .95rem; font-weight: 700; color: #fff;
    transition: transform .15s, filter .15s, background .15s;
}
.bc2-btn:active { transform: scale(.97); }
.bc2-btn.solid {
    background: var(--wallet-primary);
    box-shadow: 0 8px 18px -8px rgba(var(--wallet-primary-rgb), .85);
}
.bc2-btn.solid:hover { filter: brightness(1.08); color: #fff; }
.bc2-btn.outline {
    background: rgba(5,15,30,.30);
    border: 1.5px solid color-mix(in srgb, var(--wallet-primary) 55%, rgba(255,255,255,.28));
}
.bc2-btn.outline:hover { background: rgba(5,15,30,.45); color: #fff; }
.bc2-lasttxn {
    position: relative; z-index: 1; margin-top: .9rem;
    display: flex; align-items: center; gap: .75rem;
    background: rgba(3,10,22,.45); border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px; padding: .68rem .85rem; color: #fff;
}
.bc2-lasttxn:hover { color: #fff; background: rgba(3,10,22,.58); }
.bc2-lt-icon {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.bc2-lt-icon.credit  { background: rgba(25,207,120,.14); border: 1px solid rgba(25,207,120,.35); color: #19cf78; }
.bc2-lt-icon.debit   { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.bc2-lt-icon.pending { background: rgba(245,158,11,.14);  border: 1px solid rgba(245,158,11,.35); color: #f59e0b; }
.bc2-lt-main { flex: 1; min-width: 0; }
.bc2-lt-label { font-size: .7rem; color: rgba(255,255,255,.65); font-weight: 500; }
.bc2-lt-name  { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc2-lt-side  { text-align: right; flex-shrink: 0; }
.bc2-lt-date  { font-size: .7rem; color: rgba(255,255,255,.65); font-weight: 500; }
.bc2-lt-amt   { font-size: .85rem; font-weight: 700; }
.bc2-lt-amt.credit { color: #19cf78; }

/* ── Quick actions hero (Send / Scan QR / Request) ── */
.qa-hero { display: flex; align-items: center; gap: .7rem; padding: 0 1rem; }
.qa-side {
    flex: 1; height: 136px; border-radius: 18px;
    background: var(--wallet-surface); border: 1px solid var(--wallet-border);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    color: var(--wallet-text); font-size: .88rem; font-weight: 600;
    transition: transform .15s, background .15s, border-color .15s;
}
.qa-side:hover { background: var(--wallet-surface-2); border-color: var(--wallet-border-2); color: var(--wallet-text); }
.qa-side:active { transform: scale(.96); }
.qa-side-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(var(--wallet-primary-rgb), .14);
    border: 1px solid rgba(var(--wallet-primary-rgb), .28);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: var(--wallet-primary);
}
.qa-scan {
    flex: 1.18; height: 164px; border-radius: 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
    color: #fff; font-size: .95rem; font-weight: 700;
    background: var(--wallet-primary); /* fallback */
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--wallet-primary) 72%, #fff) 0%,
        var(--wallet-primary) 55%,
        color-mix(in srgb, var(--wallet-primary) 78%, #000) 100%);
    border: 1.5px solid var(--wallet-secondary);
    box-shadow: 0 12px 26px -10px rgba(var(--wallet-primary-rgb), .65);
    transition: transform .15s, filter .15s;
}
.qa-scan:hover { color: #fff; filter: brightness(1.05); }
.qa-scan:active { transform: scale(.97); }
.qa-scan-icon {
    width: 58px; height: 58px; border-radius: 50%;
    background: #fff; color: var(--wallet-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.qa-chev { font-size: .95rem; opacity: .7; line-height: 1; }

/* ── Service card rows (Pay & go / Lifestyle & utilities) ── */
.svc-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr);
    gap: .6rem; padding: 0 1rem 2px;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.svc-row::-webkit-scrollbar { display: none; }
.svc-card {
    scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    padding: .8rem .25rem .6rem;
    background: var(--wallet-surface); border: 1px solid var(--wallet-border);
    border-radius: 16px; text-align: center;
    color: var(--wallet-text); font-size: .72rem; font-weight: 600;
    transition: transform .15s, background .15s, border-color .15s;
}
.svc-card:hover { background: var(--wallet-surface-2); border-color: var(--wallet-border-2); color: var(--wallet-text); }
.svc-card:active { transform: scale(.95); }
.svc-icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    background: rgba(var(--wallet-primary-rgb), .13);
    border: 1px solid rgba(var(--wallet-primary-rgb), .30);
    color: var(--wallet-primary);
}
.svc-icon.accent {
    background: rgba(var(--wallet-secondary-rgb), .13);
    border-color: rgba(var(--wallet-secondary-rgb), .32);
    color: var(--wallet-secondary);
}
.svc-icon.solid { background: var(--wallet-primary); border-color: var(--wallet-primary); color: #fff; }
.svc-chev { font-size: .85rem; color: var(--wallet-muted); line-height: 1; }

/* ── Scroll affordance for service rows (fade + more-button + nudge) ── */
.svc-scroll { position: relative; }
.svc-scroll::before, .svc-scroll::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 46px; z-index: 2;
    pointer-events: none; opacity: 0; transition: opacity .25s;
}
.svc-scroll::after  { right: 0; background: linear-gradient(to left,  var(--wallet-bg) 10%, transparent); }
.svc-scroll::before { left: 0;  background: linear-gradient(to right, var(--wallet-bg) 10%, transparent); }
.svc-scroll.can-right::after { opacity: 1; }
.svc-scroll.can-left::before { opacity: 1; }
.svc-more {
    position: absolute; right: 5px; top: 50%; z-index: 3;
    width: 34px; height: 34px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    background: var(--wallet-primary); color: #fff;
    border: 2px solid var(--wallet-bg);
    font-size: 1.15rem; cursor: pointer; padding: 0;
    box-shadow: 0 6px 16px -6px rgba(var(--wallet-primary-rgb), .85);
    animation: svcNudge 1.8s ease-in-out infinite;
}
.svc-scroll.can-right .svc-more { display: flex; }
.svc-more:active { animation: none; }
@keyframes svcNudge {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-50%) translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .svc-more { animation: none; transform: translateY(-50%); } }

/* ═══════════════════════════════════════════════════════════════
   OLDER PHONE BROWSERS
   aspect-ratio arrived in Chromium 88. Without it a square camera
   box has no height (the scanner shows as a sliver or not at all)
   and the PIN keys lose their shape. These rules apply ONLY where
   aspect-ratio is missing; everywhere else they are ignored.

   Rules for anything new in this app, for the same reason:
     • top/right/bottom/left, not `inset` (Chromium 87)
     • a vh line before every dvh line (Chromium 108)
     • no `?.` or `??` in page scripts (Chromium 80) — one of those
       makes an older browser reject the WHOLE script block, and
       every button that block wires up then does nothing.
   ═══════════════════════════════════════════════════════════════ */
@supports not (aspect-ratio: 1) {
    .qr-scan-container::before,
    .scanner-wrap::before,
    .pc-square::before { content: ''; display: block; padding-top: 100%; }

    .qr-scan-container > video,
    .scanner-wrap > video,
    .pc-square > video { position: absolute; top: 0; left: 0; }

    .pin-pad { grid-template-columns: repeat(3, 76px); justify-content: center; }
    .pin-key { height: 76px; }
}

/* ═══════════════════════════════════════════════════════════════
   UPLOAD FIELD  (wallet-upload.js)
   Every upload in the wallet: identity document, selfie, proof of
   address, bank letter, card proof.

   Two states of the same markup:
     • before the script runs — a plain, visible file input. If the
       script never loads, this is what the user gets, and it works.
     • .pc-upload--on — two large targets ("Take a photo" /
       "Choose a file"), a preview of what will be sent, and help
       that opens by itself when a tap opens nothing.

   The real <input type="file"> lies invisibly ON TOP of the
   "Choose a file" target, so the tap lands on the native control.
   Do not change that to a hidden input opened from script: some
   phone browsers ignore a scripted click on a file input.

   top/right/bottom/left rather than `inset`, and no `gap` on flex
   rows that must hold their layout — older phone browsers know
   neither.
   ═══════════════════════════════════════════════════════════════ */
.pc-upload { position: relative; }
.pc-upload [hidden] { display: none !important; }

/* Plain state: only the label, the native input and the hint. */
.pc-upload__action > i,
.pc-upload__action > span,
.pc-upload__more { display: none; }

.pc-upload--on .pc-upload__pick { display: flex; }
.pc-upload--on .pc-upload__pick.d-none { display: none; }

.pc-upload--on .pc-upload__action {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 96px; padding: .9rem .6rem;
    border-radius: var(--wallet-radius-sm);
    border: 1.5px dashed var(--wallet-border-2);
    background: var(--wallet-input-bg);
    color: var(--wallet-text);
    font-size: .84rem; font-weight: 600; text-align: center;
    cursor: pointer; overflow: hidden;
    transition: border-color .15s, background .15s;
}
.pc-upload--on .pc-upload__action + .pc-upload__action { margin-left: .6rem; }
.pc-upload--on .pc-upload__action > i {
    display: block; font-size: 1.6rem; line-height: 1; margin-bottom: .4rem;
    color: var(--wallet-primary);
}
.pc-upload--on .pc-upload__action > span { display: block; }
/* Three separate rules, not one selector list: a browser that does not know one of these
   pseudo-classes throws away every selector it is listed with. */
.pc-upload--on .pc-upload__action:hover {
    border-color: var(--wallet-primary);
    background: rgba(var(--wallet-primary-rgb), .08);
}
.pc-upload--on .pc-upload__action:focus-within {
    border-color: var(--wallet-primary);
    background: rgba(var(--wallet-primary-rgb), .08);
}
.pc-upload--on button.pc-upload__action:focus {
    border-color: var(--wallet-primary);
    background: rgba(var(--wallet-primary-rgb), .08);
    outline: none;
}
.pc-upload--on .pc-upload__action:active { background: rgba(var(--wallet-primary-rgb), .14); }

/* The native input, stretched over its target and made invisible — still the thing tapped. */
.pc-upload--on .pc-upload__file {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0;
    opacity: 0; cursor: pointer;
    font-size: 0;                 /* no text caret or baseline to shrink the tap area */
}

/* What will be uploaded. */
.pc-upload__chosen {
    display: flex; align-items: center;
    padding: .7rem; border-radius: var(--wallet-radius-sm);
    border: 1.5px solid rgba(52, 211, 153, .45);
    background: rgba(52, 211, 153, .08);
}
.pc-upload__chosen.d-none { display: none; }
.pc-upload__thumb,
.pc-upload__doc {
    width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0;
    background: var(--wallet-surface-2);
}
.pc-upload__thumb { object-fit: cover; }
.pc-upload__doc { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--wallet-primary); }
.pc-upload__doc.d-none { display: none; }
.pc-upload__chosen-text { flex: 1; min-width: 0; margin: 0 .8rem; }
.pc-upload__name {
    display: block; font-size: .86rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-upload__size { display: block; font-size: .76rem; color: var(--wallet-muted); margin-top: .1rem; }
.pc-upload__change {
    flex-shrink: 0; min-height: 44px; padding: 0 .95rem;
    border-radius: 10px; border: 1.5px solid var(--wallet-border-2);
    background: transparent; color: var(--wallet-text);
    font-size: .8rem; font-weight: 600;
}

.pc-upload.is-busy .pc-upload__pick { opacity: .55; pointer-events: none; }

.pc-upload__msg {
    margin-top: .6rem; padding: .6rem .75rem; border-radius: 10px;
    font-size: .82rem; line-height: 1.5;
    background: rgba(244, 124, 124, .1); border: 1px solid rgba(244, 124, 124, .28);
}
.pc-upload.is-busy .pc-upload__msg {
    background: rgba(var(--wallet-primary-rgb), .08); border-color: rgba(var(--wallet-primary-rgb), .22);
}

/* Help: one quiet line until it is needed. */
.pc-upload--on .pc-upload__more { display: block; margin-top: .15rem; }
.pc-upload--on.has-file .pc-upload__more { display: none; }
.pc-upload .form-text { margin-top: .5rem; }
.pc-upload__helplink {
    display: block; min-height: 44px; padding: .5rem 0; border: 0; background: none; text-align: left;
    font-size: .78rem; font-weight: 600; color: var(--wallet-muted);
    text-decoration: underline; text-underline-offset: 3px;
}
.pc-upload__help,
.pc-upload__embedded {
    margin-top: .25rem; padding: .85rem .9rem; border-radius: var(--wallet-radius-sm);
    background: var(--wallet-surface-2); border: 1px solid var(--wallet-border);
    font-size: .82rem; line-height: 1.55;
}
.pc-upload__help strong, .pc-upload__embedded strong { display: block; margin-bottom: .4rem; font-size: .84rem; }
.pc-upload__help ol { margin: 0; padding-left: 1.15rem; }
.pc-upload__help li { margin-bottom: .45rem; }
.pc-upload__help li:last-child { margin-bottom: 0; }
.pc-upload__linkbtn {
    padding: 0; border: 0; background: none;
    font-size: inherit; font-weight: 600; color: var(--wallet-primary);
    text-decoration: underline; text-underline-offset: 3px;
}
.pc-upload__linkbtn:disabled { color: var(--wallet-muted); text-decoration: none; }
/* On a line of their own, and tall enough to hit with a thumb. */
.pc-upload__help .pc-upload__linkbtn,
.pc-upload__embedded .pc-upload__linkbtn { display: block; min-height: 44px; padding: .6rem 0; text-align: left; }
.pc-upload__embedded { margin: .6rem 0 .35rem; }

/* ── The in-page camera ──────────────────────────────────────────── */
.pc-cam {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000;
    display: none; flex-direction: column; background: #000; color: #fff;
}
.pc-cam.is-open { display: flex; }
html.pc-cam-open, html.pc-cam-open body { overflow: hidden; }
.pc-cam__stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.pc-cam__video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.pc-cam--mirror .pc-cam__video { transform: scaleX(-1); }
.pc-cam__status {
    position: absolute; left: 1.5rem; right: 1.5rem; text-align: center;
    font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, .85);
}
.pc-cam__status.d-none { display: none; }
.pc-cam__bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem 1.25rem;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    background: #000;
}
.pc-cam__side {
    width: 84px; min-height: 48px; border: 0; background: none; color: #fff;
    font-size: .95rem; font-weight: 600; text-align: left;
}
.pc-cam__side--icon { text-align: right; font-size: 1.6rem; line-height: 1; }
.pc-cam__shutter {
    width: 74px; height: 74px; padding: 5px; border-radius: 50%;
    border: 4px solid #fff; background: transparent; flex-shrink: 0;
    transition: transform .1s, opacity .15s;
}
.pc-cam__shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.pc-cam__shutter:active { transform: scale(.93); }
.pc-cam__shutter:disabled { opacity: .3; }

/* ═══════════════════════════════════════════════════════════════
   INSTALL SHEET  (wallet-install.js)
   A card docked above the bottom navigation: the app's own icon,
   one sentence, two buttons. On a browser with no install prompt
   of its own it unfolds into the two or three taps that browser
   needs. Surface-coloured, not a block of brand colour — it is an
   offer sitting on the page, not an alert.
   ═══════════════════════════════════════════════════════════════ */
.pc-install {
    position: fixed; left: 0; right: 0; z-index: 1040;
    bottom: calc(var(--wallet-nav-h) + 12px);
    padding: 0 12px;
    pointer-events: none;                 /* only the card itself takes taps */
    opacity: 0; transform: translateY(18px);
    transition: opacity .28s ease, transform .32s cubic-bezier(.2, .8, .2, 1);
}
@supports (padding: env(safe-area-inset-bottom)) {
    .pc-install { bottom: calc(var(--wallet-nav-h) + env(safe-area-inset-bottom) + 12px); }
}
.pc-install[hidden] { display: none; }
.pc-install.is-in { opacity: 1; transform: none; }
.pc-install [hidden] { display: none !important; }

.pc-install__card {
    pointer-events: auto;
    max-width: 440px; margin: 0 auto; padding: 18px;
    /* Never taller than the space above the navigation: on a small phone the steps scroll
       inside the card rather than pushing its top off the screen. vh first for browsers
       that do not know dvh. */
    max-height: calc(100vh - var(--wallet-nav-h) - 36px);
    max-height: calc(100dvh - var(--wallet-nav-h) - 36px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--wallet-surface);
    border: 1px solid var(--wallet-border-2);
    border-radius: 22px;
    box-shadow: var(--wallet-shadow-lg);
}
.pc-install__head { display: flex; align-items: flex-start; }
.pc-install__icon {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px;
    object-fit: cover; background: var(--wallet-surface-2);
    box-shadow: var(--wallet-shadow-sm);
}
.pc-install__titles { flex: 1; min-width: 0; margin: 0 12px 0 14px; }
.pc-install__title { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.pc-install__text  { font-size: .84rem; line-height: 1.5; color: var(--wallet-muted); margin-top: 3px; }
.pc-install__close {
    width: 44px; height: 44px; flex-shrink: 0; margin: -10px -12px 0 0;
    border: 0; border-radius: 10px; background: none;
    font-size: 1.2rem; line-height: 1; color: var(--wallet-muted);
}
.pc-install__close:hover { background: var(--wallet-hover); color: var(--wallet-text); }

.pc-install__head, .pc-install__actions { flex-shrink: 0; }
/* The steps scroll; the heading and the buttons stay where they are. */
.pc-install__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pc-install__steps {
    list-style: none; margin: 18px 0 0; padding: 18px 0 0;
    border-top: 1px solid var(--wallet-border);
}
.pc-install__steps li { display: flex; align-items: flex-start; font-size: .86rem; line-height: 1.5; }
.pc-install__steps li + li { margin-top: 14px; }
.pc-install__num {
    width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 700;
    background: rgba(var(--wallet-primary-rgb), .14); color: var(--wallet-primary);
}
.pc-install__step { flex: 1; min-width: 0; margin: 1px 12px 0; }
.pc-install__step b { font-weight: 700; color: var(--wallet-text); }
.pc-install__glyph { flex-shrink: 0; font-size: 1.25rem; line-height: 24px; color: var(--wallet-muted); }
.pc-install__tip {
    margin-top: 16px; padding: .7rem .8rem; border-radius: 12px;
    background: var(--wallet-surface-2);
    font-size: .78rem; line-height: 1.55; color: var(--wallet-muted);
}
.pc-install__tip b { color: var(--wallet-text); font-weight: 600; }
.pc-install__copy {
    display: block; min-height: 44px; margin-top: 6px; padding: .6rem 0; border: 0; background: none;
    font-size: .84rem; font-weight: 600; color: var(--wallet-primary);
    text-decoration: underline; text-underline-offset: 3px;
}

.pc-install__actions { display: flex; margin-top: 18px; }
.pc-install__later,
.pc-install__go { min-height: 46px; border-radius: 13px; font-size: .92rem; }
.pc-install__later {
    flex: 1 1 0; border: 1.5px solid var(--wallet-border-2); background: transparent;
    color: var(--wallet-text); font-weight: 600;
}
.pc-install__go {
    flex: 1.5 1 0; margin-left: 10px; border: 0; color: #fff; font-weight: 700;
    background: linear-gradient(135deg, var(--wallet-primary), rgba(var(--wallet-primary-rgb), .72));
    box-shadow: 0 12px 24px -14px rgba(var(--wallet-primary-rgb), .95);
    transition: transform .12s, filter .15s;
}
.pc-install__go:hover { filter: brightness(1.06); }
.pc-install__go:active, .pc-install__later:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
    .pc-install { transition: none; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   TWO-STEP SIGN-IN (Account/SetupAuthenticator, Verify, RecoveryCodes; Profile/Security)
   Groups: 16px inside, 32px between. The QR stays black on white in BOTH themes —
   authenticator cameras refuse a themed or inverted code.
   ═══════════════════════════════════════════════════════════════ */
.mfa-steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.mfa-step  { display: grid; grid-template-columns: 26px 1fr; gap: .7rem; align-items: start; }
.mfa-step__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700;
               background: rgba(var(--wallet-primary-rgb), .18); color: var(--wallet-primary); }
.mfa-step__t { font-weight: 600; font-size: .9rem; color: var(--wallet-text); }
.mfa-step__d { font-size: .78rem; color: var(--wallet-muted); margin-top: 2px; }
.mfa-qrwrap { display: flex; justify-content: center; margin: 0 0 1rem; }
.mfa-qr { background: #fff; padding: 10px; border-radius: 14px; line-height: 0; box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); }
.mfa-qr svg { width: 176px; height: 176px; display: block; }
.mfa-open-app { display: none; margin-bottom: 1rem; }
@media (pointer: coarse) { .mfa-open-app { display: block; } .mfa-qr-desktop-note { display: none; } }
.mfa-key { font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 1rem; letter-spacing: .12em; word-break: break-all; user-select: all;
           padding: .7rem .8rem; border: 1px dashed var(--wallet-border-2); border-radius: var(--wallet-radius-sm); background: var(--wallet-surface-2); color: var(--wallet-text); }
.mfa-keymeta { font-size: .72rem; color: var(--wallet-muted); margin-top: .4rem; }
details.mfa-manual { margin: 0 0 1.5rem; }
details.mfa-manual > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--wallet-primary); list-style: none; }
details.mfa-manual > summary::-webkit-details-marker { display: none; }
details.mfa-manual > summary::before { content: "▸ "; }
details.mfa-manual[open] > summary::before { content: "▾ "; }
details.mfa-manual > div { margin-top: 1rem; }
.auth-card .form-control.mfa-code { font-size: 1.7rem; letter-spacing: .45em; text-align: center; padding: .75rem .5rem .75rem 1.1rem; font-variant-numeric: tabular-nums; }
.auth-card .form-control.mfa-code::placeholder { letter-spacing: .25em; font-size: 1.1rem; }
.mfa-alt { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: center; margin-top: 1.25rem; font-size: .82rem; }
.mfa-alt form { display: inline; }
.mfa-alt button, .mfa-alt a { background: none; border: 0; padding: 0; font: inherit; color: var(--wallet-primary); text-decoration: underline; cursor: pointer; }
.mfa-alt button:disabled { color: var(--wallet-muted); text-decoration: none; cursor: default; }
.mfa-trust { display: flex; align-items: flex-start; gap: .6rem; margin: 1rem 0 1.25rem; font-size: .85rem; color: var(--wallet-text); }
.mfa-trust input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.mfa-trust small { display: block; color: var(--wallet-muted); font-size: .72rem; }
.mfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; margin: 0 0 1rem; padding: 0;
             font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: .95rem; letter-spacing: .05em; }
.mfa-codes li { list-style: none; padding: .55rem .5rem; text-align: center; border: 1px solid var(--wallet-border-2); border-radius: var(--wallet-radius-sm);
                background: var(--wallet-surface-2); color: var(--wallet-text); }
.mfa-codes-actions { display: flex; gap: .75rem; margin: 0 0 1.5rem; }
.mfa-codes-actions .btn { flex: 1; }
.mfa-sec { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
.mfa-sec__item { padding: .8rem; border: 1px solid var(--wallet-border); border-radius: var(--wallet-radius-sm); background: var(--wallet-surface-2); }
.mfa-sec__k { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wallet-muted); margin-bottom: .25rem; }
.mfa-sec__v { font-size: .92rem; font-weight: 600; color: var(--wallet-text); }
@media print {
  body * { visibility: hidden; }
  .mfa-print, .mfa-print * { visibility: visible; color: #000 !important; background: #fff !important; }
  .mfa-print { position: absolute; left: 0; top: 0; width: 100%; }
}