:root {
    color-scheme: light;
    --app-ink: #10233f;
    --app-muted: #64748b;
    --app-brand: #0f3c88;
    --app-brand-dark: #0b2a5b;
    --app-line: #e2e8f0;
    --app-surface: #ffffff;
    --app-canvas: #f3f6fb;
    --app-radius: 18px;
    --app-shadow: 0 12px 34px rgba(15, 39, 75, .08);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; scroll-behavior: smooth; }
body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--app-ink);
    background: var(--app-canvas);
    font-family: inherit;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}
img, video, canvas, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--app-brand); }
button, input, select, textarea { max-width: 100%; font: inherit; }
select { min-width: 0; text-overflow: ellipsis; }
button, input[type="submit"], input[type="button"], .btn, [role="button"] { min-height: 44px; }
button, input[type="submit"], input[type="button"] { cursor: pointer; }
:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }

/* Make legacy page wrappers scale cleanly on phones, tablets, and wide screens. */
.container, .main, .main-wrapper, .content, .page-content, .wrapper {
    min-width: 0;
    max-width: 1320px;
    margin-inline: auto;
}
.container { width: min(100% - 28px, 1320px); }
.main, .main-wrapper, .content, .page-content, .wrapper { width: min(100% - 32px, 1320px); }
.card, .box, .panel, .stat-card, .tx-card {
    min-width: 0;
    border-radius: var(--app-radius);
}
.card, .panel, .stat-card, .tx-card { box-shadow: var(--app-shadow); }
.grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; }
.chartBox, .chart-box { min-width: 0; max-width: 100%; overflow: hidden; }
.chartBox canvas, .chart-box canvas { max-width: 100%; }
.flex, .row, .stats-row { min-width: 0; }

/* Legacy tables stay readable instead of forcing the whole page wider. */
table { max-width: 100%; border-collapse: collapse; }
@media (max-width: 900px) {
    table { display: block; width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
    th, td { white-space: nowrap; }
}
form { min-width: 0; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    max-width: 100%;
}
textarea { resize: vertical; }
/* Keep long dropdown values and feedback copy inside their fields and cards. */
option { max-width: 100%; white-space: normal; }
[role="alert"], [role="status"], .notice, .warning, .error, .success, .message,
.status-box, .success-box, .notice-box, .kyc-status, .kyc-error, .income-notice, .income-error {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* User area: bottom navigation on touch screens and a persistent app rail on desktop. */
body.app-user {
    color-scheme: dark;
    --app-ink: #f5f7fb;
    --app-muted: #aab5c5;
    --app-brand: #ffd34f;
    --app-brand-dark: #f5f7fb;
    --app-line: #30415a;
    --app-surface: #192a40;
    --app-canvas: #06122d;
    --app-shadow: 0 12px 34px rgba(0,0,0,.2);
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
}
.app-user .bottom-nav {
    position: fixed;
    z-index: 1000;
    inset: auto 0 0;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    width: auto;
    height: calc(82px + env(safe-area-inset-bottom));
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(25,42,64,.98);
    border: 1px solid rgba(148,163,184,.18);
    border-bottom: 0;
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.25);
    backdrop-filter: blur(18px);
}
.app-user .bottom-nav a {
    flex: 1 1 0;
    display: flex;
    min-width: 0;
    min-height: 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 2px;
    color: #aab5c5;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.app-user .bottom-nav a.active { color: #aab5c5; background: transparent; }
.app-user .bottom-nav a .nav-icon { font-size: 19px; line-height: 1.15; }
.app-user .bottom-nav a i { font-size: 19px; }

/* Dashboard cards and wide-screen content grids. */
.hero { position: relative; }
.hero h1 { line-height: 1.15; letter-spacing: -.035em; }
.actions { width: min(100% - 28px, 900px); margin-inline: auto; }
.rates-scroll { scrollbar-width: thin; }
@media (min-width: 700px) {
    .hero { padding: clamp(28px, 4vw, 52px) clamp(26px, 5vw, 64px); }
    .hero h1 { font-size: clamp(2rem, 3.6vw, 3.5rem); }
    .actions { gap: 18px; }
    .card { margin: 18px 0; padding: clamp(20px, 2.4vw, 30px); }
}
@media (min-width: 960px) {
    body.app-user { padding: 0 0 0 236px; }
    .app-user .bottom-nav {
        inset: 0 auto 0 0;
        width: 220px;
        height: 100dvh;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 8px;
        padding: 28px 14px;
        border-top: 0;
        border-right: 1px solid rgba(148,163,184,.16);
        box-shadow: 8px 0 28px rgba(0,0,0,.2);
    }
    .app-user .bottom-nav::before {
        content: "âmeriche";
        display: block;
        margin: 4px 10px 28px;
        color: var(--app-brand-dark);
        font-size: 23px;
        font-weight: 800;
        letter-spacing: -.05em;
    }
    .app-user .bottom-nav a {
        flex: 0 0 52px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 13px;
        padding: 0 15px;
        font-size: 14px;
    }
    .app-user .bottom-nav a .nav-icon, .app-user .bottom-nav a i { width: 22px; text-align: center; }
    .app-user .hero { border-radius: 0 0 26px 26px; }
}

/* Admin pages use a compact top app bar and horizontally scrollable data tables. */
body.app-admin {
    color-scheme: dark;
    --app-ink: #f5f7fb;
    --app-muted: #aab5c5;
    --app-brand: #ffd34f;
    --app-brand-dark: #f5f7fb;
    --app-line: #30415a;
    --app-surface: #192a40;
    --app-canvas: #06122d;
    --app-shadow: 0 12px 34px rgba(0,0,0,.2);
    padding-bottom: 24px;
}
.app-admin .topbar {
    position: sticky;
    z-index: 900;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    padding: 10px clamp(14px, 3vw, 28px);
    background: rgba(11,42,91,.96);
    box-shadow: 0 6px 20px rgba(15,39,75,.16);
    backdrop-filter: blur(16px);
}
.app-admin .topbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.app-admin .topbar a { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 10px; color: #fff; border-radius: 10px; text-decoration: none; }
.app-admin .topbar a:hover { background: rgba(255,255,255,.12); }
.app-admin .container { padding-block: 20px 32px; }
.app-admin table { width: 100%; }
.app-admin .container > div[style*="display:flex"] { flex-wrap: wrap; }

/* Shared dark banking surfaces and high contrast controls. */
body.app-user, body.app-admin { color: #f5f7fb; background: #06122d; }
body.app-user a, body.app-admin a { color: var(--app-brand); }
@keyframes app-page-enter-right { from { opacity:1; transform:translate3d(72px,0,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes app-page-enter-left { from { opacity:1; transform:translate3d(-72px,0,0); } to { opacity:1; transform:translate3d(0,0,0); } }
body.app-user.page-enter-right > main > :not(header),
body.app-user.page-enter-right > .main,
body.app-user.page-enter-right > .profile-screen,
body.app-user.page-enter-right > .container > :not(.topbar) { animation:app-page-enter-right .58s cubic-bezier(.22,.75,.2,1) both; }
body.app-user.page-enter-left > main > :not(header),
body.app-user.page-enter-left > .main,
body.app-user.page-enter-left > .profile-screen,
body.app-user.page-enter-left > .container > :not(.topbar) { animation:app-page-enter-left .58s cubic-bezier(.22,.75,.2,1) both; }
.app-user .hero {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    padding: 18px clamp(16px, 4vw, 30px) 24px !important;
    color: #f5f7fb !important;
    background: linear-gradient(145deg, #06213d 0%, #062b49 56%, #082b47 100%) !important;
    border: 0 !important;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.app-user.profile-page .hero {
    width: min(calc(100% - 32px), 980px);
    margin: 14px auto 22px;
    padding: clamp(20px, 4vw, 34px) !important;
    border: 1px solid rgba(75,156,210,.16) !important;
    border-radius: 25px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.app-user .back-btn {
    position: relative !important;
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    text-decoration: none !important;
}
.app-user .back-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 19px;
    height: 24px;
    margin: auto;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M19 3 8 15l11 12' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.app-user .hero-inner, .app-user .hero-flex, .app-user .hero-top {
    width: min(100%, 980px);
    margin-inline: auto;
}
.app-user .hero h1, .app-user .hero h2, .app-user .hero .page-title { color: #f5f7fb !important; }
.app-user .hero small, .app-user .hero p { color: #aab5c5; }
.app-user .container, .app-user .main-wrapper, .app-user .page-content { color: #f5f7fb; }
.app-user .topbar { color: #f5f7fb; border-color: #30415a; }
.app-user .hero, .app-admin .topbar { color: #f5f7fb; background: #192a40; }
.app-user .top-bar, .app-user .page-wrapper, .app-user .container { color: #f5f7fb; }
.app-user .top-bar { background: #192a40; border-color: rgba(163,180,203,.12); }
.app-user .top-bar a, .app-user .topbar > a { color: #ffd34f; }
.app-user .top-bar .page-title, .app-user .section-title, .app-user .page-wrapper h1,
.app-user .page-wrapper h2, .app-user .page-wrapper h3 { color: #f5f7fb; }
.app-user .box, .app-user .info-card, .app-user .menu-card, .app-user .page-wrapper .card {
    color: #f5f7fb;
    background: #192a40;
    border: 1px solid rgba(163,180,203,.12);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.app-user .info-row, .app-user .menu-item { border-color: rgba(163,180,203,.14); }
.app-user .info-row .label, .app-user .page-wrapper label { color: #aab5c5; }
.app-user .info-row .value, .app-user .menu-item, .app-user .menu-text { color: #edf2fa; }
.app-user .menu-item:hover { background: #22364f; }
.app-user .faq-item {
    color: #f5f7fb;
    background: #192a40;
    border-color: rgba(163,180,203,.14);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.app-user .faq-q { color: #f5f7fb; font-weight: 600; }
.app-user .faq-answer { color: #aab5c5; }
.app-user .faq-arrow { color: #ffd34f; }
.app-user .security-title { color: #ffd34f; }
.app-user .security-text { color: #c3ccda; }
.app-user .security-box { background: #192a40; border-color: rgba(163,180,203,.14); }
.app-user .page-wrapper { width: min(100% - 32px, 760px); margin-inline: auto; padding-block: 20px 36px; }
.app-user .page-wrapper .box { padding: 22px; }
.app-user .page-wrapper .back-btn { color: transparent !important; }
.app-user .page-wrapper .box { position: relative; padding: 58px 22px 24px; }
.app-user .screen-close, .app-user .modal-close {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    color: #aab5c5;
    background: rgba(255,255,255,.06);
    border: 0;
    border-radius: 50%;
    font-size: 27px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
}
.app-user .screen-close:hover, .app-user .modal-close:hover { color: #fff; background: rgba(255,255,255,.12); }
.app-user .card, .app-user .tx-card, .app-user .menu-card, .app-user .reward-card,
.app-user .activity-card, .app-user .card-item, .app-user .info-card,
.app-user .bank-box, .app-user .info-box, .app-user .amount-box, .app-user .balance-box,
.app-user .limit-box, .app-user .limit-card, .app-user .security-box, .app-user .status-box,
.app-user .notice-box, .app-user .success-box,
.app-admin .card, .app-admin .panel, .app-admin .stat-card {
    color: #f5f7fb;
    background: #192a40;
    border: 1px solid rgba(163,180,203,.12);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.app-user .card, .app-user .tx-card, .app-user .menu-card, .app-user .card-item,
.app-user .info-card, .app-user .bank-box, .app-user .info-box, .app-user .amount-box,
.app-user .balance-box, .app-user .limit-box, .app-user .limit-card,
.app-user .security-box, .app-user .status-box, .app-user .notice-box { border-radius: 20px; }
.app-user .menu-item, .app-user .item, .app-user .tx-card,
.app-admin table, .app-admin th, .app-admin td {
    color: #eef2f8;
    border-color: #30415a;
}
.app-user p, .app-user small, .app-user .time, .app-admin small { color: #aab5c5; }
.app-user input, .app-user select, .app-user textarea,
.app-admin input, .app-admin select, .app-admin textarea {
    min-width: 0;
    max-width: 100%;
    color: #f5f7fb;
    background: #101e34;
    border-color: #3a4b63;
}
.app-user input::placeholder, .app-user textarea::placeholder,
.app-admin input::placeholder, .app-admin textarea::placeholder { color: #9ba9bc; }
.app-user .tabs { border-color: #30415a; }
.app-user .tabs a { color: #aab5c5; }
.app-user .tabs a.active { color: #ffd34f; border-color: #ffd34f; }
.app-user .menu-item:hover { background: #22364f; }

/* Keep every account page on the same dark app canvas and card system. */
.app-user .container, .app-user .main, .app-user .main-wrapper,
.app-user .content, .app-user .page-content, .app-user .wrapper {
    width: min(100% - 32px, 980px);
    margin-inline: auto;
}
.app-user .hero { margin-bottom: 22px; }
.app-user .hero-inner, .app-user .hero-flex, .app-user .hero-top {
    min-width: 0;
}
.app-user .hero h1 { margin-block: 8px; font-size: clamp(1.55rem, 5vw, 2.2rem); }
.app-user .hero small, .app-user .hero p { color: #aab5c5 !important; }
.app-user .card, .app-user .tx-card, .app-user .panel, .app-user .box,
.app-user .stat-card, .app-user .info-card, .app-user .menu-card,
.app-user .activity-card, .app-user .notice-box, .app-user .success-box {
    color: #f5f7fb;
    background: #192a40;
    border: 1px solid rgba(163,180,203,.12);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.app-user .card h2, .app-user .card h3, .app-user .card h4,
.app-user .tx-card strong, .app-user .panel h2, .app-user .panel h3 { color: #f5f7fb; }
.app-user .tx-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; margin-block: 10px; }
.app-user .bottom-nav .nav-icon { display: grid; width: 24px; height: 22px; place-items: center; }
.app-user .bottom-nav .nav-icon svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-user .bottom-nav a.active .nav-icon { color:var(--app-brand); }
.app-user .bottom-nav a.active .nav-icon svg { stroke-width:2.1; }
.app-user button:not(.bank-icon-button):not(.balance-visibility):not(.copy-account),
.app-user input[type="submit"], .app-user input[type="button"] {
    border-radius: 12px;
}

/* Reference inspired home screen. */
.bank-header, .bank-dashboard { width: min(100% - 32px, 980px); margin-inline: auto; }
.bank-header {
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 0;
}
.app-user .bank-profile { min-width: 0; display: flex; align-items: center; gap: 14px; color: #f5f7fb; text-decoration: none; }
.bank-avatar { width: 62px; height: 62px; flex: 0 0 62px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(47,142,255,.72); box-shadow:0 0 0 4px rgba(20,121,248,.12); }
.bank-profile-copy { min-width: 0; display: grid; gap: 2px; }
.bank-profile-copy strong { overflow: hidden; color: #f5f7fb; font-size: clamp(18px, 4vw, 23px); font-weight:750; letter-spacing:-.025em; text-overflow: ellipsis; white-space: nowrap; }
.bank-eyebrow { color: #a9c9f3; font-size: 14px; font-weight:550; }
.bank-location { display:flex; align-items:center; gap:6px; color:#83baff; font-size:14px; line-height:1.2; }
body.app-user .bank-location > svg { display:block; width:17px !important; height:17px !important; min-width:17px; max-width:17px; min-height:17px; max-height:17px; flex:0 0 17px; fill:none; stroke:#1788ff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.bank-header-actions { position: relative; display: flex; align-items: center; gap: 10px; }
.pwa-install-button svg { width: 21px; height: 21px; }
.pwa-install-button[hidden], .pwa-install-help[hidden] { display: none !important; }
.pwa-install-help { position: absolute; z-index: 1300; top: calc(100% + 10px); right: 0; width: min(290px, calc(100vw - 32px)); padding: 13px 15px; border: 1px solid #30415a; border-radius: 13px; color: #f5f7fb; background: #192a40; box-shadow: 0 10px 28px rgba(0,0,0,.28); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.pwa-nudge-overlay { position:fixed; z-index:2100; inset:0; display:grid; place-items:center; padding:20px; background:rgba(3,10,24,.58); backdrop-filter:blur(5px); }
.pwa-nudge-card { position:relative; width:min(100%,390px); padding:28px 24px 22px; color:#f5f7fb; background:#14243b; border:1px solid #30415a; border-radius:22px; box-shadow:0 24px 70px rgba(0,0,0,.38); text-align:center; outline:none; }
.pwa-nudge-close { position:absolute; top:12px; right:12px; display:grid; width:36px; height:36px; place-items:center; padding:0; color:#b8c4d5; background:#20324b; border:0; border-radius:11px; font-size:23px; line-height:1; }
.pwa-nudge-icon { display:grid; width:56px; height:56px; place-items:center; margin:0 auto 15px; color:#ffd34f; background:#20324b; border-radius:18px; }
.pwa-nudge-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pwa-nudge-card h2 { margin:0; color:inherit; font-size:20px; line-height:1.3; }
.pwa-nudge-card p { margin:9px 0 22px; color:#aab5c5; font-size:14px; line-height:1.5; }
.pwa-nudge-actions { display:flex; gap:10px; }
.pwa-nudge-actions button { flex:1; min-height:46px; padding:10px 14px; border:1px solid #30415a; border-radius:12px; font:inherit; font-weight:650; }
.pwa-nudge-later { color:#dbe4f0; background:#1b2d46; }
.pwa-nudge-install { color:#06122d; background:#ffd34f; border-color:#ffd34f !important; }
.pwa-nudge-overlay[hidden] { display:none !important; }
.bank-icon-button, .balance-visibility, .copy-account {
    display: inline-grid; place-items: center; padding: 0; color: #edf2fa;
    background: transparent; border: 0; text-decoration: none; cursor: pointer;
}
.bank-icon-button { width: 42px; height: 42px; border-radius: 50%; }
.notification-bell { position: relative; }
.notification-count { position: absolute; z-index: 2; top: -5px; right: -2px; display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; color: #fff; background: #ed3348; border: 2px solid #06122d; border-radius: 999px; font-size: 10px; font-weight: 750; line-height: 1; box-sizing: content-box; }
body.theme-light .notification-count { border-color: #fff; }
.bank-icon-button:hover { background: rgba(255,255,255,.08); }
.bank-icon-button svg, .balance-visibility svg, .copy-account svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.language-button { font-size: 19px; }
.language-menu { position: absolute; z-index: 30; top: 48px; right: 82px; min-width: 150px; padding: 6px; border: 1px solid #30415a; border-radius: 12px; background: #192a40; box-shadow: var(--app-shadow); }
.language-menu[hidden] { display: none; }
.language-menu a { display: block; padding: 9px 10px; color: #f5f7fb; border-radius: 8px; text-decoration: none; }
.language-menu a:hover { background: #263a54; }
.bank-dashboard { display: grid; gap: 30px; padding: 4px 0 36px; }
.balance-card {
    position:relative;
    overflow: hidden;
    min-height:250px;
    padding: clamp(23px, 4.5vw, 40px);
    color: #f6f8fd;
    border: 1px solid rgba(54,157,255,.8);
    border-radius: 25px;
    background:radial-gradient(ellipse at 86% 20%,rgba(27,155,255,.72),transparent 42%),linear-gradient(118deg,#062a66 0%,#064fbd 54%,#0878f4 100%);
    box-shadow: 0 18px 42px rgba(0,52,140,.3),inset 0 1px 0 rgba(255,255,255,.14);
}
.balance-account-line { display: flex; align-items: center; gap: 10px; min-width: 0; color: #e9f1fb; font-size: clamp(13px, 2vw, 17px); }
.balance-account-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balance-account-line > span span { padding-inline: 3px; color: #859cb2; }
.copy-account { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; }
.balance-currency { position:relative; display:inline-flex; width:104px; min-height:42px; flex:0 0 auto; align-items:center; margin-left:auto; padding:0; color:#fff; border:1px solid rgba(66,169,255,.65); border-radius:999px; background:rgba(1,37,103,.52); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); cursor:pointer; }
.balance-currency:disabled { cursor:default; opacity:.72; }
.balance-currency .currency-flag { position:absolute; left:5px; display:grid; width:30px; height:30px; place-items:center; overflow:hidden; border-radius:50%; background:#fff; font-size:21px; line-height:1; transition:transform .24s ease; }
.balance-currency .currency-code { position:absolute; right:13px; font-size:14px; font-weight:700; transition:left .24s ease, right .24s ease; }
.balance-currency.is-bif .currency-flag { transform:translateX(64px); }
.balance-currency.is-bif .currency-code { right:auto; left:13px; }
.balance-currency strong { font-size:14px; font-weight:700; }
.copy-account:hover, .balance-visibility:hover { background: rgba(255,255,255,.08); }
.balance-heading-row { display:grid; grid-template-columns:minmax(0,1fr) 42px; align-items:center; gap:12px; margin-top:17px; }
.balance-amount-group { display: grid; grid-template-columns: max-content; min-width: 0; }
.balance-label { margin: 0 0 2px; color: #aabdd0 !important; font-size: 14px; }
.balance-value { margin: 0; color: #fff; font-size: clamp(34px, 8vw, 54px); font-weight: 780; letter-spacing: -.045em; line-height: 1.12; white-space: nowrap; }
.balance-visibility { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; }
.balance-caption { margin: 8px 0 22px; color: #c5ddff !important; font-size: 14px; }
.balance-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.app-user .balance-action { display: inline-flex; min-width:0; min-height: 56px; align-items: center; justify-content: center; gap: 8px; padding: 0 8px; color: #f5f7fb; border: 1px solid rgba(151,205,255,.55); border-radius: 999px; background: rgba(1,39,103,.45); font-size: 15px; font-weight: 650; text-decoration: none; white-space:nowrap; }
.balance-action span { font-size: 20px; line-height: 1; }
.balance-action:hover { background: #15476a; }
.balance-action.primary { color: #fff; background:linear-gradient(100deg,#078fff,#0862f3); border-color:transparent; box-shadow:0 8px 18px rgba(0,33,106,.2); }
.app-section { min-width: 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-heading h2 { margin: 0; color: #f3f5fa; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.section-heading p { margin: 3px 0 0; color: #9eacc0; font-size: 12px; }
.section-heading > a { flex: 0 0 auto; color: #ffd34f; font-size: 14px; font-weight: 600; text-decoration: none; }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.app-user .service-tile { display: flex; min-width: 0; min-height: 118px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 4px; color: #f0f3f9; border: 1px solid rgba(163,180,203,.1); border-radius: 19px; background: #192a40; box-shadow: 0 8px 20px rgba(0,0,0,.12); font-size: 12px; font-weight: 600; text-align: center; text-decoration: none; transition: transform .16s ease, background .16s ease; }
.service-tile:hover { transform: translateY(-2px); background: #22364e; }
.service-icon { display: grid; width: 48px; height: 48px; place-items: center; color: #1688ff; border-radius: 15px; background: rgba(10,111,232,.18); box-shadow:inset 0 0 0 1px rgba(37,139,255,.18); }
.service-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reward-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.app-user .reward-card { display: grid; min-width: 0; min-height: 150px; align-content: start; justify-items: start; gap: 6px; padding: 17px; color: #f5f7fb; border-radius: 20px; text-decoration: none; }
.reward-card.reward-coins { background: linear-gradient(145deg, #182e42, #1d3447); }
.reward-card.reward-referral { background: linear-gradient(145deg, #202b48, #2a3156); }
.reward-art { display: grid; width: 43px; height: 43px; place-items: center; margin-bottom: 4px; color: #ffd34f; border-radius: 14px; background: rgba(255,211,79,.13); font-size: 23px; }
.reward-referral .reward-art { color: #c6a9ff; background: rgba(165,125,255,.16); }
.reward-name { color: #aab5c5; font-size: 13px; }
.reward-card strong { max-width: 100%; overflow: hidden; color: #fff; font-size: clamp(16px, 4vw, 21px); text-overflow: ellipsis; white-space: nowrap; }
.activity-card { overflow: hidden; padding: 3px 16px; border: 1px solid rgba(163,180,203,.1); border-radius: 20px; background: #192a40; }
.activity-row { display: flex; min-width: 0; min-height: 79px; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(163,180,203,.1); }
.activity-row:last-child { border-bottom: 0; }
.activity-type { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.06); font-size: 20px; }
.activity-type.credit { color: #f5cf58; background: rgba(245,207,88,.12); }
.activity-type.debit { color: #b7c4d6; }
.activity-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.activity-copy strong { overflow: hidden; color: #f0f3f9; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.activity-copy small { color: #98a8bd !important; font-size: 11px; }
.activity-amount { flex: 0 0 auto; color: #f5f7fb; font-size: 14px; font-weight: 650; }
.activity-amount.credit { color: #f5cf58; }
.activity-amount.debit { color: #dce3ee; }
/* Dashboard activity uses the same movement colors as transaction history. */
.activity-amount.credit { color: #16a34a; }
.activity-amount.debit { color: #dc2626; }
.activity-type.credit { color: #16a34a; background: rgba(22,163,74,.12); }
.activity-type.debit { color: #dc2626; background: rgba(220,38,38,.12); }
body.app-user.theme-light .activity-amount.credit { color: #16a34a; }
body.app-user.theme-light .activity-amount.debit { color: #dc2626; }
.activity-empty { display: grid; min-height: 120px; place-content: center; justify-items: center; gap: 4px; color: #98a8bd; }
.activity-empty > span { font-size: 27px; }
.activity-empty p { margin: 0; }

@media (min-width: 700px) {
    .bank-header, .bank-dashboard { width: min(100% - 56px, 980px); }
    .bank-header { min-height: 132px; }
    .bank-avatar { width: 64px; height: 64px; flex-basis: 64px; }
    .bank-dashboard { gap: 34px; padding-top: 8px; }
    .service-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
    .service-tile { min-height: 132px; font-size: 13px; }
    .reward-card { min-height: 170px; padding: 20px; }
}
@media (max-width: 380px) {
    .bank-header, .bank-dashboard { width: calc(100% - 24px); }
    .bank-header-actions { gap: 3px; }
    .bank-icon-button { width: 36px; height: 40px; }
    .service-grid { gap: 8px; }
    .service-tile { min-height: 104px; border-radius: 16px; font-size: 11px; }
    .service-icon { width: 42px; height: 42px; }
}

@media (max-width: 699px) {
    body.app-user > .bank-header {
        min-height:76px;
        display:grid !important;
        grid-template-columns:42px minmax(0,1fr) auto;
        grid-template-rows:16px 21px 15px;
        align-items:center;
        justify-content:initial;
        column-gap:8px;
        row-gap:0;
        padding-top:8px;
        padding-bottom:8px;
    }
    body.app-user > .bank-header .bank-profile,
    body.app-user > .bank-header .bank-profile-copy { display:contents; }
    body.app-user > .bank-header .bank-avatar {
        grid-column:1;
        grid-row:1 / 4;
        width:42px;
        height:42px;
        min-width:42px;
        min-height:42px;
        margin:0;
    }
    body.app-user > .bank-header .bank-eyebrow {
        grid-column:2 / -1;
        grid-row:1;
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:10px;
    }
    body.app-user > .bank-header .bank-profile-copy strong {
        grid-column:2;
        grid-row:2;
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:15px;
        line-height:1.1;
    }
    body.app-user > .bank-header .bank-location {
        grid-column:2 / -1;
        grid-row:3;
        min-width:0;
        font-size:10px;
        white-space:nowrap;
    }
    body.app-user > .bank-header .bank-header-actions {
        grid-column:3;
        grid-row:2;
        gap:0;
    }
    body.app-user > .bank-header .bank-icon-button {
        width:28px;
        height:28px;
    }
    body.app-user > .bank-header .bank-icon-button svg { width:18px; height:18px; }
    body.app-user > .bank-header .language-button { font-size:14px; }
    body.app-user > .bank-header .notification-count { top:-6px; right:-4px; min-width:13px; height:13px; padding:0 2px; border-width:1px; font-size:8px; }
    body.app-user .bank-dashboard { gap:18px; padding-top:0; }
    body.app-user .balance-card { min-height:0; padding:14px 15px; border-radius:18px; }
    body.app-user .balance-account-line { gap:6px; font-size:10px; }
    body.app-user .copy-account { width:28px; height:28px; flex-basis:28px; }
    body.app-user .copy-account svg { width:18px; height:18px; }
    body.app-user .balance-currency { width:82px; min-height:32px; }
    body.app-user .balance-currency .currency-flag { left:4px; width:22px; height:22px; font-size:15px; }
    body.app-user .balance-currency .currency-code { right:9px; font-size:11px; }
    body.app-user .balance-currency.is-bif .currency-flag { transform:translateX(51px); }
    body.app-user .balance-currency.is-bif .currency-code { right:auto; left:9px; }
    body.app-user .balance-heading-row { grid-template-columns:minmax(0,1fr) 30px; gap:7px; margin-top:10px; }
    body.app-user .balance-label { font-size:10px; }
    body.app-user .balance-value { font-size:32px; }
    body.app-user .balance-card.is-bif .balance-value { font-size:28px; letter-spacing:-.04em; }
    body.app-user .balance-visibility { width:30px; height:30px; flex-basis:30px; }
    body.app-user .balance-visibility svg { width:19px; height:19px; }
    body.app-user .balance-caption { margin:3px 0 12px; font-size:10px; }
    body.app-user .balance-actions { gap:6px; }
    body.app-user .balance-action { min-height:38px; gap:5px; padding:0 5px; font-size:11px; }
    body.app-user .balance-action span { font-size:15px; }
}

@media (min-width: 960px) {
    .bank-header, .bank-dashboard { width: min(100% - 64px, 1100px); }
    .bank-dashboard { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: start; column-gap: 26px; row-gap: 30px; }
    .balance-card, .activity-section { grid-column: 1 / -1; }
    .app-section { min-width: 0; }
    .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .reward-grid { grid-template-columns: 1fr; }
}

/* Small-screen fixes for older fixed-width forms, cards, and nav bars. */
@media (max-width: 699px) {
    .hero { padding: 22px 18px 34px; border-radius: 0 0 22px 22px; }
    .hero h1 { font-size: clamp(1.65rem, 7vw, 2.2rem); }
    .top-row { gap: 12px; align-items: center; }
    .brand { min-width: 0; margin-left: 0; }
    .applogo1 { width: min(44vw, 165px); height: auto; }
    .user-email { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
    .actions { gap: 10px; padding: 0; margin-top: -20px; }
    .action-btn { min-width: 0; padding: 12px 8px; font-size: 13px; }
    .card { margin: 12px 0; padding: 16px; }
    .app-admin .topbar { align-items: flex-start; flex-direction: column; }
    .app-admin .topbar > div { width: 100%; }
    .app-admin .topbar a { padding-inline: 9px; font-size: 13px; }
    .app-admin .container { width: calc(100% - 24px); padding-inline: 0; }
    .app-admin h1 { font-size: 1.55rem; }
    [style*="width:800px"], [style*="width: 800px"] { max-width: 100%; }
    [style*="min-width:300px"], [style*="min-width: 300px"] { min-width: 0 !important; max-width: 100%; }
}

/* Persistable light palette for the signed-in user area. */
body.app-user.theme-light.theme-light {
    color-scheme: light;
    --app-ink: #111318;
    --app-muted: #73777f;
    --app-brand: #1268ee;
    --app-brand-dark: #111318;
    --app-line: #e7e7e7;
    --app-surface: #ffffff;
    --app-canvas: #f5f5f5;
    color: #111318 !important;
    background: #f5f5f5 !important;
}
body.app-user.theme-light.theme-light .hero,
body.app-user.theme-light.theme-light .top-bar,
body.app-user.theme-light.theme-light .settings-header,
body.app-user.theme-light.theme-light .profile-heading { color:#111318 !important; background:#fff !important; box-shadow:0 1px 0 #e7e7e7; }
body.app-user.theme-light.theme-light .settings-header { color:#111318 !important; background:transparent !important; box-shadow:none; }
body.app-user.theme-light.theme-light .hero h1,
body.app-user.theme-light.theme-light .hero h2,
body.app-user.theme-light.theme-light .hero .page-title,
body.app-user.theme-light.theme-light .page-title,
body.app-user.theme-light.theme-light .profile-heading h1 { color:#111318 !important; }
body.app-user.theme-light.theme-light .settings-header h1,
body.app-user.theme-light.theme-light .settings-header a,
body.app-user.theme-light.theme-light .settings-section h2 { color:#61656c !important; }
body.app-user.theme-light.theme-light .settings-header h1 { color:#111318 !important; }
body.app-user.theme-light.theme-light .settings-header a { color:#1268ee !important; }
body.app-user.theme-light.theme-light .bank-dashboard,
body.app-user.theme-light.theme-light .profile-screen,
body.app-user.theme-light.theme-light .container,
body.app-user.theme-light.theme-light .main-wrapper { color:#111318; }
body.app-user.theme-light.theme-light .profile-card,
body.app-user.theme-light.theme-light .info-card,
body.app-user.theme-light.theme-light .limit-card,
body.app-user.theme-light.theme-light .limit-box,
body.app-user.theme-light.theme-light .card,
body.app-user.theme-light.theme-light .panel,
body.app-user.theme-light.theme-light .stat-card,
body.app-user.theme-light.theme-light .tx-card,
body.app-user.theme-light.theme-light .menu-card,
body.app-user.theme-light.theme-light .bank-box,
body.app-user.theme-light.theme-light .info-box,
body.app-user.theme-light.theme-light .amount-box,
body.app-user.theme-light.theme-light .balance-box,
body.app-user.theme-light.theme-light .status-box,
body.app-user.theme-light.theme-light .notice-box,
body.app-user.theme-light.theme-light .success-box,
body.app-user.theme-light.theme-light .box,
body.app-user.theme-light.theme-light .modal-content,
body.app-user.theme-light.theme-light .page-wrapper .box,
body.app-user.theme-light.theme-light .activity-card,
body.app-user.theme-light.theme-light .service-tile,
body.app-user.theme-light.theme-light .settings-group,
body.app-user.theme-light.theme-light .setting-row,
body.app-user.theme-light.theme-light .rewards-balance-card { color:#111318 !important; background:#fff !important; border-color:#e8e8e8 !important; box-shadow:0 8px 24px rgba(0,0,0,.035) !important; }
body.app-user.theme-light.theme-light .balance-card { color:#fff !important; background:radial-gradient(ellipse at 86% 20%,rgba(36,165,255,.78),transparent 42%),linear-gradient(118deg,#06347e 0%,#075bd2 55%,#0785ff 100%) !important; border-color:rgba(50,155,255,.65) !important; box-shadow:0 14px 34px rgba(0,76,188,.22),inset 0 1px 0 rgba(255,255,255,.16) !important; }
body.app-user.theme-light.theme-light .balance-card .balance-account-line,
body.app-user.theme-light.theme-light .balance-card .balance-label,
body.app-user.theme-light.theme-light .balance-card .balance-value,
body.app-user.theme-light.theme-light .balance-card .balance-caption { color:#fff !important; }
body.app-user.theme-light.theme-light .balance-card .balance-label,
body.app-user.theme-light.theme-light .balance-card .balance-caption { opacity:.72; }
body.app-user.theme-light.theme-light .balance-card .balance-action { color:#fff !important; background:rgba(1,39,103,.48) !important; border-color:rgba(151,205,255,.58) !important; }
body.app-user.theme-light.theme-light .balance-card .balance-action.primary { background:linear-gradient(100deg,#078fff,#0862f3) !important; border-color:transparent !important; }
body.app-user.theme-light.theme-light .section-heading h2,
body.app-user.theme-light.theme-light .profile-section-title,
body.app-user.theme-light.theme-light .card-heading-row h2,
body.app-user.theme-light.theme-light .card h2,
body.app-user.theme-light.theme-light .card h3,
body.app-user.theme-light.theme-light .panel h2,
body.app-user.theme-light.theme-light .panel h3,
body.app-user.theme-light.theme-light .tx-card strong,
body.app-user.theme-light.theme-light .profile-data-row strong,
body.app-user.theme-light.theme-light .data-label,
body.app-user.theme-light.theme-light .activity-copy strong,
body.app-user.theme-light.theme-light .activity-amount,
body.app-user.theme-light.theme-light .service-tile,
body.app-user.theme-light.theme-light .setting-row,
body.app-user.theme-light.theme-light .reward-balance,
body.app-user.theme-light.theme-light .referral-code { color:#111318 !important; }
body.app-user.theme-light.theme-light .section-heading p,
body.app-user.theme-light.theme-light .profile-action,
body.app-user.theme-light.theme-light .label,
body.app-user.theme-light.theme-light .card p,
body.app-user.theme-light.theme-light .card small,
body.app-user.theme-light.theme-light .panel small,
body.app-user.theme-light.theme-light .activity-copy small,
body.app-user.theme-light.theme-light .profile-data-row .data-label { color:#73777f !important; }
body.app-user.theme-light.theme-light .bank-profile { color:#111318 !important; }
body.app-user.theme-light.theme-light .bank-profile-copy strong { color:#111318 !important; }
body.app-user.theme-light.theme-light .bank-eyebrow { color:#73777f !important; }
body.app-user.theme-light.theme-light .bank-icon-button { color:#111318 !important; }
body.app-user.theme-light.theme-light .pwa-install-help { color:#202733; background:#fff; border-color:#e2e6ec; box-shadow:0 10px 28px rgba(0,0,0,.14); }
body.app-user.theme-light .pwa-nudge-card { color:#111318; background:#fff; border-color:#e5e8ee; box-shadow:0 24px 70px rgba(15,23,42,.22); }
body.app-user.theme-light .pwa-nudge-card h2 { color:#111318; }
body.app-user.theme-light .pwa-nudge-card p { color:#667085; }
body.app-user.theme-light .pwa-nudge-close,
body.app-user.theme-light .pwa-nudge-icon { color:#1268ee; background:#eff5ff; }
body.app-user.theme-light .pwa-nudge-later { color:#344054; background:#f5f6f8; border-color:#e2e5e9; }
body.app-user.theme-light.theme-light .section-heading h2,
body.app-user.theme-light.theme-light .profile-section-title,
body.app-user.theme-light.theme-light .settings-section h2 { color:#61656c !important; }
body.app-user.theme-light.theme-light .section-heading a,
body.app-user.theme-light.theme-light .profile-edit-link,
body.app-user.theme-light.theme-light .profile-action .action-chevron { color:#1268ee !important; }
body.app-user.theme-light.theme-light .service-icon,
body.app-user.theme-light.theme-light .action-icon { color:#1268ee !important; background:#eff5ff !important; }
body.app-user.theme-light.theme-light .bottom-nav { background:#fff !important; }
body.app-user.theme-light.theme-light .service-icon { color:#087bfa !important; background:#eaf3ff !important; box-shadow:inset 0 0 0 1px rgba(37,139,255,.16) !important; }
body.app-user.theme-light.theme-light .bottom-nav { border-color:#e7e7e7 !important; box-shadow:0 -5px 18px rgba(0,0,0,.05) !important; }
body.app-user.theme-light.theme-light .bottom-nav a { color:#696d73; }
body.app-user.theme-light.theme-light .bottom-nav a.active { color:#696d73; background:transparent; }
body.app-user.theme-light.theme-light .bottom-nav a.active .nav-icon { color:#1268ee; background:transparent; }
body.app-user.theme-light.theme-light .bottom-nav a.active .nav-icon svg { stroke:currentColor; }
body.app-user.theme-light.theme-light .service-tile:hover { background:#fff !important; }
body.app-user.theme-light.theme-light .service-tile { background:transparent !important; border-color:transparent !important; box-shadow:none !important; font-weight:500 !important; }
body.app-user.theme-light.theme-light .service-tile > span:last-child { font-weight:500 !important; }
body.app-user .service-tile:hover,
body.app-user.theme-light.theme-light .service-tile:hover { background:transparent !important; box-shadow:none !important; transform:none; }
body.app-user.theme-light.theme-light .bank-dashboard .service-tile { font-size:11px !important; font-weight:500 !important; }
@media (max-width:699px) {
    body.app-user .bank-dashboard .service-grid { align-items:start; }
    body.app-user .bank-dashboard .service-tile { min-height:84px; gap:7px; padding:8px 2px; border-radius:14px; }
    body.app-user .bank-dashboard .service-icon { width:42px; height:42px; flex:0 0 42px; border-radius:13px; }
    body.app-user .bank-dashboard .service-tile > span:last-child { font-size:11px; font-weight:500; line-height:1.15; }
    body.app-user .bank-dashboard .reward-grid { gap:9px; }
    body.app-user .bank-dashboard .reward-card { min-height:112px; gap:4px; padding:12px; border-radius:16px; }
    body.app-user .bank-dashboard .reward-art { width:36px; height:36px; margin-bottom:1px; border-radius:11px; font-size:18px; }
    body.app-user .bank-dashboard .reward-name { font-size:11px; }
    body.app-user .bank-dashboard .reward-card strong { font-size:16px; }
}
/* Keep the full Services page consistent with the dashboard service tiles. */
body.app-user.theme-light.theme-light .bank-dashboard .service-tile { background:#fff !important; border:1px solid #dfe8f3 !important; box-shadow:0 5px 16px rgba(17,55,100,.06) !important; color:#111318 !important; font-size:11px !important; font-weight:500 !important; }
body.app-user.theme-light.theme-light .bank-dashboard .service-tile:hover { background:#f8fbff !important; box-shadow:0 5px 16px rgba(17,55,100,.06) !important; transform:none; }
body.app-user:not(.theme-light) .services-page .service-tile { background:#192a40; border-color:rgba(163,180,203,.1); box-shadow:0 8px 20px rgba(0,0,0,.12); }
body.app-user:not(.theme-light) .services-page .service-tile:hover { background:#192a40; box-shadow:0 8px 20px rgba(0,0,0,.12); transform:none; }
body.app-user .services-page .service-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
body.app-user .services-page .service-tile { min-height:84px; gap:7px; padding:8px 2px; border-radius:14px; font-size:11px; font-weight:500; }
body.app-user .services-page .service-icon { width:42px; height:42px; flex:0 0 42px; border-radius:13px; }
body.app-user:not(.theme-light) .services-page .service-icon { background:rgba(10,111,232,.18); box-shadow:inset 0 0 0 1px rgba(37,139,255,.18); }
body.app-user.theme-light.theme-light .services-page .service-icon { background:#eaf3ff !important; box-shadow:inset 0 0 0 1px rgba(37,139,255,.16) !important; }
body.app-user .services-page .service-tile > span:last-child { font-size:11px; font-weight:500; line-height:1.15; }
@media (min-width:700px) {
    body.app-user .services-page .service-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
    body.app-user .services-page .service-tile { min-height:118px; padding:12px 4px; border-radius:19px; font-size:13px; }
    body.app-user .services-page .service-tile > span:last-child { font-size:13px; }
}
body.app-user.theme-light.theme-light .setting-icon { color:#1268ee !important; background:#eff5ff !important; }
body.app-user.theme-light.theme-light .setting-language a { color:#1268ee !important; background:#eff5ff !important; }
body.app-user.theme-light.theme-light .setting-copy strong { color:#15171a; }
body.app-user.theme-light.theme-light .setting-copy small { color:#73777f; }
body.app-user.theme-light.theme-light .setting-chevron { color:#1268ee; }
body.app-user.theme-light.theme-light .setting-toggle[aria-checked="true"] { background:#1268ee; }
body.app-user.theme-light.theme-light .theme-options button { color:#656b74; background:#f5f5f5; border-color:#e1e3e7; }
body.app-user.theme-light.theme-light .theme-options button[aria-pressed="true"] { color:#fff; background:#1268ee; border-color:#1268ee; }
body.app-user.theme-light.theme-light .settings-group { border:1px solid #ececec !important; }
body.app-user.theme-light.theme-light .setting-row { border-color:#ececec !important; }
body.app-user.theme-light.theme-light .services-hero { color:#111318 !important; background:#f5f5f5 !important; box-shadow:none !important; }
body.app-user.theme-light.theme-light .services-hero h1 { color:#111318 !important; }
body.app-user.theme-light.theme-light .services-topbar { color:#111318 !important; background:#f5f5f5 !important; box-shadow:0 1px 0 #e7e7e7; }
body.app-user.theme-light.theme-light .services-topbar h1 { color:#111318 !important; }
body.app-user.theme-light.theme-light .services-search { color:#a3a7ad !important; background:#fff !important; border-color:#f0f0f0 !important; box-shadow:none !important; }
body.app-user.theme-light.theme-light .services-search input { color:#111318 !important; background:#fff !important; border-radius:12px; }
body.app-user.theme-light.theme-light .services-search input::placeholder { color:#9a9da2 !important; }
body.app-user.theme-light.theme-light .screen-close,
body.app-user.theme-light.theme-light .modal-close { color:#596579 !important; background:#eef3fa !important; }
body.app-user.theme-light.theme-light .back-btn { color:#1268ee !important; }
body.app-user.theme-light.theme-light .back-btn::before { filter:brightness(0) saturate(100%) invert(30%) sepia(95%) saturate(2987%) hue-rotate(211deg) brightness(98%) contrast(97%); }
body.app-user.theme-light.theme-light .screen-close:hover,
body.app-user.theme-light.theme-light .modal-close:hover { color:#fff !important; background:#1268ee !important; }
body.app-user.theme-light.theme-light .modal-title,
body.app-user.theme-light.theme-light .modal-content h2,
body.app-user.theme-light.theme-light .modal-content h3,
body.app-user.theme-light.theme-light .page-wrapper .box h2,
body.app-user.theme-light.theme-light #printModal h3 { color:#111318 !important; }
body.app-user.theme-light.theme-light .bank-option { color:#202733 !important; background:#fff !important; border-color:#e3e8ef !important; }
body.app-user.theme-light.theme-light .bank-option:hover,
body.app-user.theme-light.theme-light .bank-option.selected-bank { color:#0b4db5 !important; background:#eff5ff !important; border-color:#1268ee !important; }
body.app-user.theme-light.theme-light .page-wrapper { color:#111318; background:#f5f5f5; }
body.app-user.theme-light.theme-light .page-wrapper .box { border:1px solid #e7e7e7 !important; box-shadow:0 12px 34px rgba(0,0,0,.08) !important; }
body.app-user.theme-light.theme-light .page-wrapper .box a:not(.screen-close) { color:#1268ee !important; }
body.app-user.theme-light.theme-light .page-wrapper .box button { color:#fff !important; background:#1268ee !important; }
body.app-user.theme-light.theme-light .modal-backdrop,
body.app-user.theme-light.theme-light .modal { background:rgba(18,28,45,.38) !important; }
body.app-user.theme-light.theme-light .tabs { border-color:#e3e6eb !important; }
body.app-user.theme-light.theme-light .tabs a { color:#73777f !important; }
body.app-user.theme-light.theme-light .tabs a.active { color:#1268ee !important; border-color:#1268ee !important; }
body.app-user.theme-light.theme-light .topbar { color:#111318 !important; background:#fff !important; border-color:#e7e7e7 !important; }
body.app-user.theme-light.theme-light .topbar .back-btn,
body.app-user.theme-light.theme-light .topbar > a { color:#1268ee !important; }
body.app-user.theme-light.theme-light .date-label,
body.app-user.theme-light.theme-light .tx-card small { color:#73777f !important; }
body.app-user.theme-light.theme-light .tx-icon { color:#1268ee !important; background:#eff5ff !important; }
body.app-user.theme-light.theme-light .load-more { color:#1268ee !important; background:#fff !important; border-color:#cbdcf7 !important; }
body.app-user.theme-light.theme-light #printModal > div { color:#111318 !important; background:#fff !important; border:1px solid #e6e8ec !important; box-shadow:0 16px 40px rgba(0,0,0,.16); }
body.app-user.theme-light.theme-light #printModal label { color:#626a75 !important; }
body.app-user.theme-light.theme-light .section-title,
body.app-user.theme-light.theme-light .limit-label,
body.app-user.theme-light.theme-light .label { color:#73777f !important; }
body.app-user.theme-light.theme-light .limit-value { color:#1268ee !important; }
body.app-user.theme-light.theme-light .verification-page .status-badge { color:#1268ee !important; background:#eff5ff !important; }
body.app-user.theme-light.theme-light .faq-item,
body.app-user.theme-light.theme-light .security-box { color:#111318 !important; background:#fff !important; border-color:#e8e8e8 !important; }
body.app-user.theme-light.theme-light .faq-q,
body.app-user.theme-light.theme-light .security-title { color:#202733 !important; }
body.app-user.theme-light.theme-light .faq-answer,
body.app-user.theme-light.theme-light .security-text { color:#73777f !important; }
body.app-user.theme-light.theme-light .faq-arrow,
body.app-user.theme-light.theme-light .arrow { color:#1268ee !important; }
body.app-user.theme-light.theme-light .security-btn { color:#fff !important; background:#1268ee !important; }
body.app-user.theme-light.theme-light input:not([type=checkbox]):not([type=radio]),
body.app-user.theme-light.theme-light select,
body.app-user.theme-light.theme-light textarea { color:#111318 !important; background:#f5f5f5 !important; border-color:#e2e2e2 !important; }
body.app-user.theme-light.theme-light .kyc-notice { color:#222; background:#e6ebf2; }
body.app-user.theme-light.theme-light .kyc-notice > span:first-child { color:#fff; background:#1268ee; }
body.app-user.theme-light.theme-light .kyc-progress-track { background:#d9f3fb; }
body.app-user.theme-light.theme-light .kyc-progress-track span,
body.app-user.theme-light.theme-light .kyc-check { background:#21a1dc; color:#fff; }
body.app-user.theme-light.theme-light .kyc-level-label { color:#7c8086; }
body.app-user.theme-light.theme-light .kyc-current-label { color:#fff; background:#21a1dc; }
body.app-user.theme-light.theme-light .verification-badge.verified { color:#119940; background:#e5faec; }
body.app-user.theme-light.theme-light .verification-badge.unverified { color:#6f839d; background:#e8edf4; }
body.app-user.theme-light.theme-light .language-switch a.active,
body.app-user.theme-light.theme-light .edit-btn { color:#1268ee !important; }
body.app-user.theme-light.theme-light .copy-btn { color:#1268ee !important; background:#eff5ff !important; }
body.app-user.theme-light.theme-light .activity-row,
body.app-user.theme-light.theme-light .profile-data-row { border-color:#e8edf4; }

/* Page-specific light theme text and fields whose dark defaults can sit on light cards. */
body.app-user.theme-light.theme-light .transfer-page .title,
body.app-user.theme-light.theme-light .transfer-page .field label,
body.app-user.theme-light.theme-light .transfer-page .pin-modal-form label,
body.app-user.theme-light.theme-light .transfer-page .pin-step-note { color:#202733 !important; }
body.app-user.theme-light.theme-light .transfer-page .main > .card,
body.app-user.theme-light.theme-light .transfer-page .modal-content { color:#111318 !important; background:#fff !important; border-color:#e7e7e7 !important; }
body.app-user.theme-light.theme-light .transfer-page .field input,
body.app-user.theme-light.theme-light .transfer-page .field select,
body.app-user.theme-light.theme-light .transfer-page .field textarea,
body.app-user.theme-light.theme-light .transfer-page .pin-modal-form input { color:#111318 !important; color-scheme:light; background:#f5f5f5 !important; border-color:#dfe3e8 !important; }
body.app-user.theme-light.theme-light .transfer-page .field select option { color:#111318; background:#fff; }
body.app-user.theme-light.theme-light .transfer-page .field input.readonly { color:#334155 !important; background:#eef1f5 !important; }
body.app-user.theme-light.theme-light .transfer-page .summary { color:#202733 !important; background:#f5f7fa !important; }
body.app-user.theme-light.theme-light .transfer-page .summary-row:last-child { border-color:#dfe3e8 !important; }
body.app-user.theme-light.theme-light .transfer-page .step-back { color:#334155 !important; background:#f5f7fa !important; border-color:#d5dbe4 !important; }
body.app-user.theme-light.theme-light .transfer-page .pin-modal-form #pinModalMessage { color:#334155; }

body.app-user.theme-light.theme-light .funding-page .funding-header h1,
body.app-user.theme-light.theme-light .funding-page .user-email-address { color:#111318 !important; }
body.app-user.theme-light.theme-light .funding-page .user-email,
body.app-user.theme-light.theme-light .funding-page .user-email-label,
body.app-user.theme-light.theme-light .funding-page .user-email-help,
body.app-user.theme-light.theme-light .funding-page .transfer-email-help,
body.app-user.theme-light.theme-light .funding-page .payment-method-label { color:#667085 !important; }

body.app-user.theme-light.theme-light .income-header h1,
body.app-user.theme-light.theme-light .income-intro h2 { color:#111318 !important; }
body.app-user.theme-light.theme-light .income-intro p,
body.app-user.theme-light.theme-light .income-card label,
body.app-user.theme-light.theme-light .income-question { color:#596579 !important; }
body.app-user.theme-light.theme-light .income-card { color:#111318 !important; background:#fff !important; border-color:#e5e8ee !important; box-shadow:0 8px 24px rgba(20,35,55,.05); }
body.app-user.theme-light.theme-light .income-card select { color:#111318 !important; color-scheme:light; background:#f5f5f5 !important; border:1px solid #dfe3e8 !important; }
body.app-user.theme-light.theme-light .income-radios label { color:#202733 !important; }
body.app-user.theme-light.theme-light .income-notice { color:#176a37 !important; background:#e9f9ef !important; }
body.app-user.theme-light.theme-light .income-error { color:#a11b29 !important; background:#fff0f1 !important; }

body.app-user.theme-light.theme-light .kyc-header h1,
body.app-user.theme-light.theme-light .kyc-intro h2 { color:#111318 !important; }
body.app-user.theme-light.theme-light .kyc-intro p,
body.app-user.theme-light.theme-light .kyc-document-card p,
body.app-user.theme-light.theme-light .kyc-status p { color:#667085 !important; }
body.app-user.theme-light.theme-light .kyc-info,
body.app-user.theme-light.theme-light .kyc-document-card,
body.app-user.theme-light.theme-light .kyc-status { color:#202733 !important; background:#fff !important; border:1px solid #e5e8ee !important; box-shadow:0 8px 24px rgba(20,35,55,.05); }
body.app-user.theme-light.theme-light .kyc-info strong,
body.app-user.theme-light.theme-light .kyc-document-card label { color:#202733 !important; }
body.app-user.theme-light.theme-light .kyc-status strong { color:#1268ee !important; }
body.app-user.theme-light.theme-light .kyc-status.approved strong { color:#168348 !important; }
body.app-user.theme-light.theme-light .kyc-status.rejected strong { color:#bd2936 !important; }
body.app-user.theme-light.theme-light .kyc-error { color:#a11b29 !important; background:#fff0f1 !important; }
body.app-user.theme-light.theme-light .kyc-document-card input { color:#111318 !important; background:#f5f5f5 !important; border-color:#dfe3e8 !important; }

body.app-user.theme-light.theme-light .profile-intro h2 { color:#111318 !important; }
body.app-user.theme-light.theme-light .value { color:#111318 !important; }
body.app-user.theme-light.theme-light .support-section-title { color:#596579 !important; }
body.app-user.theme-light.theme-light .support-card,
body.app-user.theme-light.theme-light .support-portal { color:#202733 !important; background:#fff !important; border-color:#e5e8ee !important; }
body.app-user.theme-light.theme-light .support-card .main,
body.app-user.theme-light.theme-light .support-portal .main { color:#202733 !important; }
body.app-user.theme-light.theme-light .support-card .sub,
body.app-user.theme-light.theme-light .support-portal .sub { color:#667085 !important; }
body.app-user.theme-light.theme-light .support-card .card-item { color:#202733 !important; }
body.app-user.theme-light.theme-light .reward-label,
body.app-user.theme-light.theme-light .referral-label { color:#667085 !important; }
body.app-user.theme-light.theme-light .coming-badge { color:#805b00 !important; background:#fff5d6 !important; }
body.app-user.theme-light.theme-light .share-title,
body.app-user.theme-light.theme-light .info-title { color:#202733 !important; }
body.app-user.theme-light.theme-light .share-btn { color:#202733 !important; background:#f3f6fa !important; border-color:#dfe3e8 !important; }
body.app-user.theme-light.theme-light .step-text,
body.app-user.theme-light.theme-light .notice-text { color:#667085 !important; }
body.app-user.theme-light.theme-light .notice-text strong { color:#202733 !important; }

/* Native select popup menus use their own browser palette. Keep both the
   closed control and its option list tied to the signed-in app theme. */
body.app-user.theme-light select {
    color-scheme: light !important;
    color: #202733 !important;
    background-color: #fff !important;
    border-color: #dfe3e8 !important;
}
body.app-user.theme-light select option {
    color: #202733 !important;
    background-color: #fff !important;
}
body.app-user.theme-light select option:disabled { color: #73777f !important; }
body.app-user.theme-light select option:checked {
    color: #fff !important;
    background-color: #1268ee !important;
}
body.app-user.theme-light .transfer-header h1 {
    color: #111318 !important;
}
body.app-user.theme-light.transfer-page .title {
    color: #111318 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
body.app-user.theme-dark select {
    color-scheme: dark !important;
    color: #f5f7fb !important;
    background-color: #101e34 !important;
    border-color: #30415a !important;
}
body.app-user.theme-dark select option {
    color: #f5f7fb !important;
    background-color: #101e34 !important;
}
body.app-user.theme-dark select option:disabled { color: #8997aa !important; }
body.app-user.theme-dark select option:checked {
    color: #fff !important;
    background-color: #263d5b !important;
}
body.app-user.theme-dark .bank-option {
    color: #f5f7fb !important;
    background: #101e34 !important;
    border-color: #30415a !important;
}
body.app-user.theme-dark .bank-option:hover,
body.app-user.theme-dark .bank-option.selected-bank {
    color: #fff !important;
    background: #263d5b !important;
    border-color: #3981f6 !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Keep dashboard transaction amounts aligned with the transaction ledger colors in both themes. */
body.app-user.theme-light .activity-amount.credit,
body.app-user.theme-dark .activity-amount.credit { color: #16a34a !important; }
body.app-user.theme-light .activity-amount.debit,
body.app-user.theme-dark .activity-amount.debit { color: #dc2626 !important; }
.profile-menu-header {
  width:100%; min-height:58px; box-sizing:border-box; margin:0; padding:8px 16px;
  display:grid; grid-template-columns:42px minmax(0,1fr) 42px; align-items:center;
  color:#f5f7fb; background:#06122d; position:relative; z-index:2;
}
.profile-menu-header > * { min-width:0; margin:0 !important; }
.profile-menu-header h1 {
  position:absolute; top:50%; left:50%; width:max-content; max-width:calc(100% - 112px);
  min-width:0; margin:0 !important; color:inherit; text-align:center;
  transform:translate(-50%,-50%); font-size:21px; line-height:1.25;
  font-weight:650; overflow-wrap:anywhere;
}
.profile-menu-header-back { width:42px; height:42px; margin-left:-10px !important; display:grid; place-items:center; color:#ffd34f; text-decoration:none; }
.profile-menu-header-back::before { content:""; width:9px; height:9px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateX(2px) rotate(45deg); }
.profile-menu-header-action { justify-self:end; color:#ffd34f; text-decoration:none; font-weight:650; white-space:nowrap; }
body.app-user.theme-light .profile-menu-header { color:#111318; background:#fff; box-shadow:0 1px 0 #e7e7e7; }
body.app-user.theme-light .profile-menu-header-back,
body.app-user.theme-light .profile-menu-header-action { color:#1268ee; }

/* Keep page-level navigation headers visible while their page content scrolls. */
body.app-user > header,
body.app-user > .profile-menu-header,
body.app-user > .topbar,
body.app-user > .top-bar,
body.app-user > .hero,
body.app-user > .header,
body.app-user > .services-topbar,
body.app-user > .profile-heading,
body.app-user > .bank-header,
body.app-user > .funding-header,
body.app-user > .transfer-header,
body.app-user > .kyc-header,
body.app-user > .email-header,
body.app-user > .login-passcode-header,
body.app-user > .funding-details-header,
body.app-user > .transactions-header,
body.app-user > .notifications-header,
body.app-user main > header,
body.app-user .container > .topbar,
body.app-user .main > header {
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
}
body.app-user .container > .topbar {
  color:#f5f7fb !important;
  background:#06122d !important;
  border-bottom:1px solid #1e3150;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
  backdrop-filter:none;
}
body.app-user > .profile-heading {
  width:100%;
  min-height:58px;
  margin:0;
  padding:0 16px;
  color:#f5f7fb;
  background:#06122d;
  border-bottom:1px solid #1e3150;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
}
body > .header,
body > .main-wrapper > .top-bar {
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
}

/* Keep the home and services headers opaque while their content scrolls beneath them. */
body.app-user > .bank-header,
body.app-user > .services-topbar {
  width:100%;
  max-width:none;
  margin:0;
  background:#06122d !important;
  box-shadow:0 1px 0 rgba(148,163,184,.12);
  isolation:isolate;
}
@media (min-width:700px) {
  body.app-user > .profile-heading,
  body.app-user .container > .topbar,
  body.app-user > .profile-menu-header,
  body.app-user .activity-detail-header,
  body.app-user .login-passcode-header,
  body.app-user .kyc-header,
  body.app-user .transfer-header,
  body.app-user .top-bar,
  body.app-user > .services-topbar { min-height:118px !important; }
}
body.app-user > .bank-header {
  padding-right:max(16px, calc((100vw - 980px) / 2));
  padding-left:max(16px, calc((100vw - 980px) / 2));
}
/* Extend the app header behind the device status area on edge-to-edge phones. */
body.app-user::before { content:""; position:fixed; z-index:999; top:0; right:0; left:0; height:env(safe-area-inset-top); background:#06122d; pointer-events:none; }
body.app-user.theme-light::before { background:#f5f5f5; }
@media (max-width:699px) {
  body.app-user > .bank-header,
  body.app-user > .services-topbar { margin-top:0 !important; padding-top:calc(8px + env(safe-area-inset-top)); }
  body.app-user > .bank-header { min-height:calc(76px + env(safe-area-inset-top)); }
  body.app-user > .services-topbar { min-height:calc(68px + env(safe-area-inset-top)); }
}
body.app-user > .services-topbar {
  padding-right:max(16px, calc((100vw - 980px) / 2));
  padding-left:max(16px, calc((100vw - 980px) / 2));
}
body.app-user.theme-light > .bank-header,
body.app-user.theme-light > .services-topbar {
  color:#111318 !important;
  background:#f5f5f5 !important;
  box-shadow:0 1px 0 #e7e7e7;
}
body.app-user.theme-light > .bank-header .bank-profile { color:#111318 !important; }
body.app-user.theme-light > .bank-header .bank-profile-copy strong,
body.app-user.theme-light > .services-topbar h1 { color:#111318 !important; }
body.app-user.theme-light > .bank-header .bank-eyebrow { color:#73777f !important; }
body.app-user.theme-light > .bank-header .bank-icon-button { color:#111318 !important; }

/* Section captions share the same left guide as the page back control. */
body.app-user:not(.profile-page) .section-title,
body.app-user:not(.profile-page) .support-section-title,
body.app-user:not(.profile-page) .settings-section > h2,
body.app-user:not(.profile-page) .services-section > .section-heading,
body.app-user:not(.profile-page) .income-intro h2,
body.app-user:not(.profile-page) .faq-title,
body.app-user:not(.profile-page) .date-label {
  padding-inline-start:4px;
}
body.app-user.verification-page .section-title { padding-inline-start:0; }

/* Use the Services header pattern: dark by default, with a light override. */
body.app-user .container > .topbar {
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  color:#f5f7fb !important;
  background:#06122d !important;
  border-bottom:1px solid #293a54 !important;
  box-shadow:0 1px 0 #293a54 !important;
  isolation:isolate;
}
body.app-user > .profile-heading {
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  color:#f5f7fb !important;
  background:#06122d !important;
  border-bottom:1px solid #293a54 !important;
  box-shadow:0 1px 0 #293a54 !important;
  isolation:isolate;
}
body.app-user.theme-light .container > .topbar,
body.app-user.theme-light > .profile-heading {
  color:#111318 !important;
  background:#f5f5f5 !important;
  border-bottom:1px solid #d9dce2 !important;
  box-shadow:0 1px 0 #d9dce2 !important;
}

/* One shared header rhythm for signed-in pages with a back chevron. */
body.app-user > .profile-menu-header,
body.app-user .container > .topbar,
body.app-user .activity-detail-header,
body.app-user .login-passcode-header,
body.app-user .kyc-header,
body.app-user .transfer-header,
body.app-user .top-bar {
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  box-sizing:border-box !important;
  min-height:calc(76px + env(safe-area-inset-top)) !important;
  color:#f5f7fb !important;
  background:#06122d !important;
  border-bottom:1px solid #293a54 !important;
  box-shadow:0 1px 0 #293a54 !important;
  isolation:isolate;
}
@media (max-width:699px) {
  body.app-user > .profile-heading,
  body.app-user .container > .topbar,
  body.app-user > .profile-menu-header,
  body.app-user .activity-detail-header,
  body.app-user .login-passcode-header,
  body.app-user .kyc-header,
  body.app-user .transfer-header,
  body.app-user .top-bar,
  body.app-user > .services-topbar { padding-top:env(safe-area-inset-top) !important; }
}
body.app-user > .profile-menu-header,
body.app-user .container > .topbar,
body.app-user .activity-detail-header,
body.app-user .login-passcode-header,
body.app-user .kyc-header,
body.app-user .transfer-header {
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 42px !important;
  align-items:center !important;
}
body.app-user .login-passcode-header {
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  padding:8px 16px !important;
}
body.app-user .kyc-header {
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  padding:8px 16px !important;
}
body.app-user .top-bar { width:100% !important; margin:0 !important; padding:0 16px !important; }
body.app-user .top-bar .top-flex {
  position:relative !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 42px !important;
  align-items:center !important;
  min-height:58px !important;
}
body.app-user .profile-menu-header h1,
body.app-user .activity-detail-header h1,
body.app-user .login-passcode-header h1,
body.app-user .kyc-header h1,
body.app-user .transfer-header h1,
body.app-user .top-bar .page-title {
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:max-content !important;
  max-width:calc(100% - 112px) !important;
  margin:0 !important;
  color:#f5f7fb !important;
  font-size:21px !important;
  font-weight:650 !important;
  line-height:1.25 !important;
  text-align:center !important;
  transform:translate(-50%,-50%) !important;
}
body.app-user .back-btn {
  display:inline-flex !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  margin-left:-10px !important;
  align-items:center !important;
  justify-content:center !important;
  color:#ffd34f !important;
  text-indent:-9999px !important;
}
body.app-user .back-btn::before {
  inset:auto !important;
  position:static !important;
  display:block !important;
  width:9px !important;
  height:9px !important;
  margin:0 !important;
  border-left:2px solid currentColor !important;
  border-bottom:2px solid currentColor !important;
  background:none !important;
  filter:none !important;
  transform:translateX(2px) rotate(45deg) !important;
}
body.app-user.theme-light > .profile-menu-header,
body.app-user.theme-light .activity-detail-header,
body.app-user.theme-light .login-passcode-header,
body.app-user.theme-light .kyc-header,
body.app-user.theme-light .transfer-header,
body.app-user.theme-light .top-bar {
  color:#111318 !important;
  background:#f5f5f5 !important;
  border-bottom:1px solid #d9dce2 !important;
  box-shadow:0 1px 0 #d9dce2 !important;
}
body.app-user.theme-light .profile-menu-header h1,
body.app-user.theme-light .activity-detail-header h1,
body.app-user.theme-light .login-passcode-header h1,
body.app-user.theme-light .kyc-header h1,
body.app-user.theme-light .transfer-header h1,
body.app-user.theme-light .top-bar .page-title,
body.app-user.theme-light .profile-menu-header h1 { color:#111318 !important; }
body.app-user.theme-light .back-btn { color:#1268ee !important; }

/* French copy is often longer than its English equivalent. Let text wrap
   inside existing cards and controls while preserving the established grids. */
html[lang="fr"] body.app-user {
  overflow-x:hidden;
  hyphens:auto;
}
html[lang="fr"] body.app-user :is(.card,.panel,.service-tile,.profile-action,.setting-row,.activity-item,.activity-action,.section-heading,.transfer-success-details > div) {
  min-width:0;
  overflow-wrap:anywhere;
}
html[lang="fr"] body.app-user :is(button,.transfer-btn,.balance-action,.rates-cta,.activity-action,.profile-action,.setting-row,.service-tile) {
  white-space:normal;
  line-height:1.3;
}
html[lang="fr"] body.app-user :is(.bottom-nav a,.service-tile,.activity-action) {
  overflow-wrap:normal;
  hyphens:auto;
}
html[lang="fr"] body.app-user .bottom-nav a {
  font-size:10px;
  line-height:1.15;
}
html[lang="fr"] body.app-user .service-tile {
  padding-inline:6px;
  font-size:11px;
  line-height:1.25;
}
html[lang="fr"] body.app-user :is(.transfer-header h1,.profile-menu-header h1,.activity-detail-header h1,.login-passcode-header h1,.kyc-header h1,.page-title) {
  max-width:calc(100% - 92px) !important;
  font-size:clamp(16px,4.6vw,20px) !important;
  line-height:1.2 !important;
  overflow-wrap:anywhere;
}
html[lang="fr"] body.app-user :is(.section-heading,.profile-action,.setting-row,.transfer-success-heading) > * {
  min-width:0;
}
html[lang="fr"] body.app-user :is(.balance-action,.transfer-btn,.rates-cta) {
  min-height:44px;
  padding-block:9px;
}

/* Fixed page-header dimensions, including Profile's page-local styles. */
body.profile-page > .profile-heading {
  box-sizing:border-box !important;
  width:100% !important;
  min-height:118px !important;
}
body.app-user .profile-menu-header-action { position:relative; z-index:2; margin-right:0 !important; padding-left:10px; font-size:14px; }
body.app-user .profile-menu-header { grid-template-columns:42px minmax(0,1fr) auto !important; }
body.app-user .profile-menu-header h1 { position:static !important; grid-column:2; width:100% !important; max-width:none !important; transform:none !important; font-size:21px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.app-user .profile-menu-header-action { grid-column:3; }
body.app-user :is(.profile-menu-header h1,.topbar > strong,.services-topbar h1,.profile-heading h1,.activity-detail-header h1,.login-passcode-header h1,.kyc-header h1,.transfer-header h1) { font-size:21px !important; line-height:1.2 !important; }
/* Final shared header contract for every signed-in page. */
body.app-user > .profile-menu-header,
body.app-user > .top-bar,
body.app-user > .profile-heading,
body.app-user > .services-topbar,
body.app-user > .kyc-header,
body.app-user > .transfer-header,
body.app-user .activity-detail-header,
body.app-user .login-passcode-header,
body.app-user .container > .topbar {
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  width:100% !important;
  max-width:none !important;
  height:118px !important;
  min-height:118px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  padding:0 16px !important;
  background:#06122d !important;
  border-bottom:1px solid #293a54 !important;
  box-shadow:0 1px 0 #293a54 !important;
}
/* Verification Center has long content. Pin the shared page header so it
   remains in place for the whole scroll, including inside the PWA. */
body.app-user.verification-page > .profile-menu-header {
  position:fixed !important;
  inset:0 0 auto 0 !important;
  z-index:1200 !important;
}
@media (max-width:699px) {
  body.app-user > .profile-menu-header,
  body.app-user > .top-bar,
  body.app-user > .profile-heading,
  body.app-user > .services-topbar,
  body.app-user > .kyc-header,
  body.app-user > .transfer-header,
  body.app-user .activity-detail-header,
  body.app-user .login-passcode-header,
  body.app-user .container > .topbar {
    height:calc(76px + env(safe-area-inset-top)) !important;
    min-height:calc(76px + env(safe-area-inset-top)) !important;
    padding-top:env(safe-area-inset-top) !important;
  }
}
body.app-user.theme-light > .profile-menu-header,
body.app-user.theme-light > .top-bar,
body.app-user.theme-light > .profile-heading,
body.app-user.theme-light > .services-topbar,
body.app-user.theme-light > .kyc-header,
body.app-user.theme-light > .transfer-header,
body.app-user.theme-light .activity-detail-header,
body.app-user.theme-light .login-passcode-header,
body.app-user.theme-light .container > .topbar { background:#f5f5f5 !important; border-bottom-color:#d9dce2 !important; box-shadow:0 1px 0 #d9dce2 !important; }
@media (max-width:699px) {
  body.profile-page > .profile-heading {
    min-height:calc(76px + env(safe-area-inset-top)) !important;
    padding-top:env(safe-area-inset-top) !important;
  }
}

/* Edit Personal Information keeps its top bar inside .main-wrapper. Give it
   the same edge-to-edge header contract as every other signed-in page. */
body.app-user .main-wrapper > .top-bar {
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  width:100% !important;
  max-width:none !important;
  height:118px !important;
  min-height:118px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  padding:0 16px !important;
  color:#f5f7fb !important;
  background:#06122d !important;
  border-bottom:1px solid #293a54 !important;
  box-shadow:0 1px 0 #293a54 !important;
}
body.app-user .main-wrapper > .top-bar .top-flex {
  width:100% !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 42px !important;
  align-items:center !important;
}
body.app-user .main-wrapper > .top-bar .page-title {
  grid-column:2 !important;
  width:100% !important;
  min-width:0 !important;
  color:inherit !important;
  font-size:21px !important;
  line-height:1.2 !important;
  text-align:center !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.app-user .main-wrapper > .top-bar .back-btn { grid-column:1 !important; }
body.app-user.theme-light .main-wrapper > .top-bar { color:#111318 !important; background:#f5f5f5 !important; border-bottom-color:#d9dce2 !important; box-shadow:0 1px 0 #d9dce2 !important; }
@media (max-width:699px) {
  body.app-user .main-wrapper > .top-bar {
    height:calc(76px + env(safe-area-inset-top)) !important;
    min-height:calc(76px + env(safe-area-inset-top)) !important;
    padding-top:env(safe-area-inset-top) !important;
  }
}