/* =====================================================================
   BULKPAY — payout operations console
   ---------------------------------------------------------------------
   Palette comes straight off the logo: navy #053290, green #019635.

   One rule governs colour here: GREEN MEANS MONEY THAT IS REALLY THERE.
   Available balances, completed payouts, confirmed callbacks. It is never
   a decorative accent and never a generic primary button, so when an
   operator sees green in the queue they can trust it without reading.
   Navy carries structure and every action. Amber and red carry doubt.

   Type: Archivo for the brand voice, IBM Plex Sans for the interface,
   IBM Plex Mono for anything read character by character — addresses,
   hashes, signing templates.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Fonts are served from this installation, not from a CDN. An admin panel
   that signs transactions should not announce every page view to a third
   party, and a shared host with a slow route to a CDN should not be able
   to leave the interface unstyled.
   --------------------------------------------------------------------- */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600;
    src: url('fonts/archivo-latin-600-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700;
    src: url('fonts/archivo-latin-700-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800;
    src: url('fonts/archivo-latin-800-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 800;
    src: url('fonts/archivo-latin-800-italic.woff2') format('woff2'); font-display: swap; }

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400;
    src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500;
    src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600;
    src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700;
    src: url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); font-display: swap; }

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
    src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
    src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-display: swap; }

:root {
    /* Brand */
    --navy-900: #041B4D;
    --navy-800: #04246B;
    --navy-700: #053290;
    --navy-600: #0740A2;
    --navy-500: #1256C4;
    --navy-100: #E7EDF9;
    --navy-050: #F4F7FD;

    --green-700: #017A2B;
    --green-600: #019635;
    --green-500: #02A438;
    --green-100: #E1F6E8;

    /* Surfaces */
    --paper:     #EFF3F9;
    --surface:   #FFFFFF;
    --surface-2: #F7FAFD;
    --rule:      #DEE6F2;
    --rule-soft: #EAF0F8;

    /* Ink */
    --ink:   #0B1526;
    --ink-2: #4C5D79;
    --ink-3: #8494AC;
    --on-navy: #FFFFFF;
    --on-navy-dim: #A9BDE4;

    /* Signals */
    --danger:     #C42B2B;
    --danger-100: #FBE9E9;
    --warn:       #A76A05;
    --warn-100:   #FCF1DC;
    --info:       #0740A2;
    --info-100:   #E7EDF9;

    /* Geometry */
    --r-sm: 8px;
    --r:    12px;
    --r-lg: 18px;
    --sidebar-w: 264px;
    --topbar-h: 66px;

    --shadow-sm: 0 1px 2px rgba(11, 21, 38, .06);
    --shadow:    0 2px 6px rgba(11, 21, 38, .07), 0 1px 2px rgba(11, 21, 38, .04);
    --shadow-lg: 0 18px 40px -12px rgba(4, 27, 77, .28);

    --ease: cubic-bezier(.22, .61, .36, 1);

    /* Bootstrap bridge */
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--rule);
    --bs-primary: var(--navy-700);
    --bs-link-color: var(--navy-600);
    --bs-link-hover-color: var(--navy-700);
    --bs-border-radius: var(--r);
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, .display-face {
    font-family: 'Archivo', 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.018em;
    color: var(--ink);
}

a { color: var(--navy-600); text-decoration: none; }
a:hover { color: var(--navy-700); text-decoration: underline; }

.mono, code, pre, .amount {
    font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-variant-ligatures: none;
}
code { color: var(--navy-700); background: var(--navy-050); padding: .1rem .3rem; border-radius: 4px; font-size: .82em; }

.hint  { color: var(--ink-2); font-size: .8125rem; line-height: 1.5; }
.muted { color: var(--ink-3); }

.stat-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Numbers that represent money get the display face and tight tracking */
.figure {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

:focus-visible {
    outline: 2px solid var(--navy-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ================================================================
   SIGNATURE — the transit trail
   ----------------------------------------------------------------
   The logo's B dissolves into a trail of squares. That trail is this
   product's whole subject: value moving between two places. It is
   used in exactly three places and nowhere else — the brand lockup,
   the balance card watermark, and as the live indicator while a
   payout is genuinely on the wire.
   ================================================================ */

.trail { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.trail i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: currentColor;
    transform: skewX(-14deg);
}
.trail i:nth-child(1) { opacity: .22; }
.trail i:nth-child(2) { opacity: .45; }
.trail i:nth-child(3) { opacity: .72; }
.trail i:nth-child(4) { opacity: 1; }

/* In flight: the squares travel, so a broadcasting payout reads as
   movement rather than as a spinner that could mean anything. */
.trail.is-live i { animation: trail-run 1.15s var(--ease) infinite; }
.trail.is-live i:nth-child(1) { animation-delay: 0s; }
.trail.is-live i:nth-child(2) { animation-delay: .1s; }
.trail.is-live i:nth-child(3) { animation-delay: .2s; }
.trail.is-live i:nth-child(4) { animation-delay: .3s; }

@keyframes trail-run {
    0%   { opacity: .15; transform: skewX(-14deg) translateX(-2px); }
    45%  { opacity: 1;   transform: skewX(-14deg) translateX(2px); }
    100% { opacity: .15; transform: skewX(-14deg) translateX(-2px); }
}

/* ------------------------------------------------------------- shell */

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* ----------------------------------------------------------- sidebar */

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding: 1.15rem .75rem 1.5rem;
    background:
        radial-gradient(120% 60% at 100% 0%, rgba(2, 164, 56, .16) 0%, transparent 55%),
        linear-gradient(178deg, var(--navy-800) 0%, var(--navy-900) 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }

.brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .55rem 1.15rem;
    color: var(--on-navy);
}
.brand .trail { color: #4C9BFF; }

.brand-wordmark {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 1.3rem;
    letter-spacing: -.035em;
    line-height: 1;
}
.brand-wordmark .bulk { color: #fff; }
.brand-wordmark .pay  { color: var(--green-500); }

.nav-section {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(169, 189, 228, .62);
    padding: 1.05rem .8rem .4rem;
}
.nav-section:first-of-type { padding-top: .25rem; }

.nav-link-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .58rem .8rem;
    margin-bottom: 2px;
    border-radius: var(--r-sm);
    color: var(--on-navy-dim);
    font-size: .8875rem;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: background .16s var(--ease), color .16s var(--ease);
}
.nav-link-item i { font-size: 1rem; width: 1.15rem; text-align: center; flex: none; }
.nav-link-item:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.nav-link-item.active {
    background: linear-gradient(90deg, rgba(2, 164, 56, .2), rgba(2, 164, 56, .04));
    color: #fff;
    font-weight: 600;
}
.nav-link-item.active::before {
    content: "";
    position: absolute;
    left: -.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--green-500);
}

.badge-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--warn);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    font-family: 'IBM Plex Sans', sans-serif;
}

.sidebar-foot {
    margin-top: 1.25rem;
    padding: .8rem;
    border-radius: var(--r);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .07);
    color: var(--on-navy-dim);
    font-size: .78rem;
    line-height: 1.45;
}
.sidebar-foot strong { color: #fff; display: block; font-size: .84rem; }
.sidebar-foot .role {
    display: inline-block;
    margin-top: .3rem;
    padding: .1rem .45rem;
    border-radius: 4px;
    background: rgba(2, 164, 56, .2);
    color: #7CE49B;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------- presence */

.presence-panel { padding: 0 .15rem; }

.presence-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .65rem;
    border-radius: var(--r-sm);
}
.presence-row + .presence-row { margin-top: 1px; }

.presence-avatar {
    flex: none;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(2, 164, 56, .22);
    color: #7CE49B;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .02em;
    position: relative;
}
/* The dot is the whole point: it says "at their screen", not "signed in". */
.presence-avatar::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green-500);
    border: 2px solid var(--navy-900);
}
.presence-avatar.is-idle { background: rgba(255, 255, 255, .1); color: var(--on-navy-dim); }
.presence-avatar.is-idle::after { background: #C89B3C; }

.presence-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.presence-name {
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.presence-you {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--on-navy-dim);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 3px;
    padding: 0 .2rem;
    margin-left: .15rem;
}
.presence-where {
    color: rgba(169, 189, 228, .72);
    font-size: .68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.presence-pip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--surface);
    font-size: .78rem;
    font-weight: 700;
    color: var(--green-700);
    flex: none;
}
.presence-pip .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-500);
    box-shadow: 0 0 0 3px rgba(2, 164, 56, .16);
}
.presence-pip.is-alone { color: var(--ink-3); }
.presence-pip.is-alone .dot { background: var(--ink-3); box-shadow: none; }
.presence-pip { cursor: pointer; transition: border-color .16s var(--ease); }
.presence-pip:hover { border-color: var(--navy-500); }
.presence-pip .chev { font-size: .6rem; color: var(--ink-3); transition: transform .2s var(--ease); }
.presence-pip.is-open .chev { transform: rotate(180deg); }

/* ---- the roster sheet ---- */

.presence-widget { position: relative; flex: none; }

.presence-sheet {
    position: absolute;
    right: 0;
    top: calc(100% + .55rem);
    z-index: 60;
    width: min(21rem, calc(100vw - 2rem));
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: sheet-drop .18s var(--ease);
}
@keyframes sheet-drop {
    from { opacity: 0; transform: translateY(-6px); }
}

.presence-sheet-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--rule-soft);
    background: var(--surface-2);
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: .85rem;
}

#presence-roster { max-height: min(60vh, 24rem); overflow-y: auto; }

.roster-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--rule-soft);
}
.roster-row:last-child { border-bottom: none; }
.roster-row.is-away { opacity: .62; }

.roster-avatar {
    flex: none;
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--navy-050);
    color: var(--navy-700);
    font-size: .68rem;
    font-weight: 700;
}
.roster-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--surface);
}
.roster-dot.is-on   { background: var(--green-500); }
.roster-dot.is-idle { background: #D8A129; }
.roster-dot.is-off  { background: var(--ink-3); }

.roster-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.roster-name {
    font-size: .855rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.roster-name .presence-you {
    color: var(--ink-3);
    border-color: var(--rule);
}
.roster-status {
    font-size: .72rem;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.roster-role {
    flex: none;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ------------------------------------------------------------ topbar */

.main-area { display: flex; flex-direction: column; min-width: 0; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.5rem;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--rule);
}

.page-title { font-size: 1.0625rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.topbar-mark { height: 26px; width: auto; }

/* Wallet switcher — this decides which keys sign, so it looks like a
   control with consequences rather than a plain select. */
.account-switch {
    appearance: none;
    -webkit-appearance: none;
    padding: .42rem 2rem .42rem .8rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%234C5D79'%3E%3Cpath d='M8 11 3.5 6h9z'/%3E%3C/svg%3E") no-repeat right .7rem center;
    color: var(--ink);
    font-size: .84rem;
    font-weight: 600;
    max-width: 15rem;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.account-switch:hover { border-color: var(--navy-500); }
.account-switch:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px var(--navy-100); }

.content { flex: 1; padding: 1.5rem; max-width: 1400px; width: 100%; }

/* ------------------------------------------------------------- cards */

.card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.15rem;
    background: var(--surface);
    border-bottom: 1px solid var(--rule-soft);
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: -.01em;
    color: var(--ink);
}
.card-header i { color: var(--navy-600); }
.card-body   { padding: 1.15rem; }
.card-footer { padding: .8rem 1.15rem; border-top: 1px solid var(--rule-soft); background: var(--surface-2); }

/* ------------------------------------------- the balance card (hero) */

.balance-card {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: var(--r-lg);
    padding: 1.4rem 1.35rem;
    color: #fff;
    background:
        radial-gradient(130% 80% at 108% 0%, rgba(2, 164, 56, .34) 0%, transparent 58%),
        linear-gradient(140deg, var(--navy-700) 0%, var(--navy-900) 100%);
    box-shadow: var(--shadow-lg);
    height: 100%;
}

/* The trail motif, blown up and set into the corner as a watermark. */
.balance-card::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 14px;
    width: 150px;
    height: 108px;
    opacity: .16;
    pointer-events: none;
    background-image:
        linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
        linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
        linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-size: 16px 16px, 16px 16px, 12px 12px, 12px 12px, 9px 9px, 9px 9px;
    background-position: 96px 8px, 118px 34px, 66px 40px, 88px 64px, 40px 70px, 60px 90px;
    transform: skewX(-14deg);
}

.balance-card .stat-label { color: rgba(255, 255, 255, .62); }
.balance-card .balance-figure {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.85rem, 4.5vw, 2.5rem);
    letter-spacing: -.035em;
    line-height: 1.05;
    margin: .3rem 0 .1rem;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
}
.balance-card .unit {
    font-size: .95rem;
    font-weight: 600;
    color: var(--green-500);
    margin-left: .3rem;
    letter-spacing: 0;
}
.balance-card .wallet-line {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .78rem;
    color: rgba(255, 255, 255, .72);
    position: relative;
    z-index: 1;
}
.balance-card .wallet-line .copy-btn { color: rgba(255, 255, 255, .6); }
.balance-card .wallet-line .copy-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* -------------------------------------------- all-wallets overview */

.overview-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.overview-head .figure { font-size: 2rem; color: var(--green-700); }

.wallet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

.wallet-card {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 1.1rem 1.15rem;
    border-radius: var(--r-lg);
    color: #fff;
    text-decoration: none;
    background:
        radial-gradient(130% 85% at 108% 0%, rgba(2, 164, 56, .3) 0%, transparent 58%),
        linear-gradient(140deg, var(--navy-700) 0%, var(--navy-900) 100%);
    box-shadow: var(--shadow);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wallet-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: #fff;
    text-decoration: none;
}
.wallet-card:hover .wallet-go { transform: translateX(3px); opacity: 1; }

/* A wallet that is switched off should not look ready to pay. */
.wallet-card.is-off {
    background: linear-gradient(140deg, #3B4A66 0%, #232D42 100%);
}
.wallet-card.is-stale .wallet-figure { opacity: .5; }

.wallet-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.wallet-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.015em;
    min-width: 0;
}
.wallet-name .pill { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .8); }
.wallet-go {
    font-size: 1.3rem;
    opacity: .55;
    flex: none;
    transition: transform .18s var(--ease), opacity .18s var(--ease);
}

.wallet-balance { margin: .55rem 0 .1rem; display: flex; align-items: baseline; gap: .35rem; }
.wallet-figure {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}
.wallet-unit { font-size: .82rem; font-weight: 600; color: var(--green-500); }

.wallet-gas {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    color: rgba(255, 255, 255, .68);
}
.wallet-gas .trail { color: #6FA8FF; }
.wallet-gas-warn {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: #FFC960;
    font-weight: 700;
}

.wallet-addr {
    margin-top: .7rem;
    padding-top: .65rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .72rem;
    color: rgba(255, 255, 255, .62);
}

.wallet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .55rem;
    font-size: .76rem;
    color: rgba(255, 255, 255, .8);
}
.wallet-foot .stat-label { color: rgba(255, 255, 255, .5); display: inline; margin-right: .2rem; }
.wallet-foot .pill-muted { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); }
.wallet-foot .pill-success { background: rgba(2, 164, 56, .28); color: #8CEBAA; }

/* A wallet with people waiting on it should be findable at a glance
   across a screen of eight. The amber rail and the soft pulse do that
   without turning the whole card into an alarm. */
.wallet-card.has-pending {
    box-shadow: 0 0 0 2px var(--warn), var(--shadow);
}
.wallet-card.has-pending.has-problem {
    box-shadow: 0 0 0 2px var(--danger), var(--shadow);
}

.wallet-pending {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .7rem;
    padding: .5rem .6rem;
    border-radius: var(--r-sm);
    background: rgba(255, 201, 96, .16);
    border: 1px solid rgba(255, 201, 96, .3);
    color: #FFD98A;
    font-size: .78rem;
    font-weight: 600;
    animation: pending-breathe 2.6s ease-in-out infinite;
}
.wallet-card.has-problem .wallet-pending {
    background: rgba(255, 138, 138, .16);
    border-color: rgba(255, 138, 138, .32);
    color: #FFB3B3;
}
.wallet-pending i:first-child { flex: none; }

@keyframes pending-breathe {
    0%, 100% { background-color: rgba(255, 201, 96, .13); }
    50%      { background-color: rgba(255, 201, 96, .24); }
}

.pending-banner {
    border-left: 3px solid var(--warn);
    margin-bottom: 1rem;
}
.pending-banner .btn { flex: none; }

@media (max-width: 575.98px) {
    .wallet-grid { grid-template-columns: minmax(0, 1fr); }
    .overview-head .figure { font-size: 1.6rem; }
}

/* ---------------------------------------------------- metric tiles */

.metric {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: 1.05rem 1.15rem;
    box-shadow: var(--shadow-sm);
    height: 100%;
    transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.metric:hover { border-color: var(--navy-100); transform: translateY(-1px); box-shadow: var(--shadow); }
.metric .figure { font-size: 1.5rem; margin-top: .3rem; }
.metric .figure.is-money { color: var(--green-700); }
.metric .sub { font-size: .78rem; color: var(--ink-3); margin-top: .25rem; }

.metric-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--navy-100);
    overflow: hidden;
    margin-top: .7rem;
}
.metric-bar > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--green-500), var(--green-600));
    transition: width .5s var(--ease);
}
.metric-bar.is-high > span { background: linear-gradient(90deg, #E2A308, var(--warn)); }
.metric-bar.is-full > span { background: linear-gradient(90deg, #E05252, var(--danger)); }

/* ------------------------------------------------------------ pills */

.pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .16rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
}
.pill-success { background: var(--green-100); color: var(--green-700); }
.pill-danger  { background: var(--danger-100); color: var(--danger); }
.pill-warn    { background: var(--warn-100); color: var(--warn); }
.pill-info    { background: var(--info-100); color: var(--info); }
.pill-muted   { background: #EDF1F7; color: var(--ink-2); }

/* --------------------------------------------------------- buttons */

.btn {
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: -.005em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid transparent;
    transition: background .16s var(--ease), border-color .16s var(--ease),
                transform .1s var(--ease), box-shadow .16s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primary action = navy. Used for everything except releasing funds. */
.btn-primary, .btn-success {
    background: var(--navy-700);
    border-color: var(--navy-700);
    color: #fff;
    box-shadow: 0 1px 2px rgba(5, 50, 144, .28);
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus {
    background: var(--navy-600);
    border-color: var(--navy-600);
    color: #fff;
}

/* Green is reserved for the button that actually releases money. */
.btn-pay {
    background: linear-gradient(160deg, var(--green-500), var(--green-600));
    border-color: var(--green-600);
    color: #fff;
    box-shadow: 0 1px 2px rgba(1, 122, 43, .3);
}
.btn-pay:hover, .btn-pay:focus {
    background: linear-gradient(160deg, var(--green-600), var(--green-700));
    border-color: var(--green-700);
    color: #fff;
}

.btn-ghost {
    background: var(--surface);
    border-color: var(--rule);
    color: var(--ink-2);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--navy-100); color: var(--navy-700); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #A82323; border-color: #A82323; color: #fff; }

.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; font-size: .8rem; }
.btn:disabled, .btn.disabled { opacity: .5; box-shadow: none; }

.copy-btn {
    border: none;
    background: transparent;
    color: var(--ink-3);
    padding: .1rem .25rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: .8rem;
    line-height: 1;
    transition: color .15s var(--ease), background .15s var(--ease);
}
.copy-btn:hover { color: var(--navy-600); background: var(--navy-050); }

/* ----------------------------------------------------------- forms */

.form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .3rem;
    letter-spacing: -.005em;
}
.form-control, .form-select {
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    padding: .55rem .75rem;
    font-size: .875rem;
    color: var(--ink);
    background-color: var(--surface);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--navy-600);
    box-shadow: 0 0 0 3px var(--navy-100);
    background-color: var(--surface);
    color: var(--ink);
}
.form-control::placeholder { color: var(--ink-3); }
.form-text { font-size: .765rem; color: var(--ink-2); margin-top: .3rem; }

.input-group-text {
    background: var(--surface-2);
    border-color: var(--rule);
    color: var(--ink-2);
    font-size: .8rem;
    font-weight: 600;
}

.form-check-input { border-color: var(--rule); }
.form-check-input:checked { background-color: var(--navy-700); border-color: var(--navy-700); }
.form-check-input:focus { border-color: var(--navy-600); box-shadow: 0 0 0 3px var(--navy-100); }
.form-check-label { font-size: .86rem; }

/* Repeater rows for API headers and parameters */
.kv-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: .5rem;
    margin-bottom: .5rem;
    align-items: start;
}

.token-chip {
    display: inline-block;
    padding: .12rem .45rem;
    margin: 0 .25rem .3rem 0;
    border: 1px solid var(--navy-100);
    border-radius: 5px;
    background: var(--navy-050);
    color: var(--navy-700);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .715rem;
    cursor: pointer;
    transition: background .14s var(--ease), border-color .14s var(--ease);
}
.token-chip:hover { background: var(--navy-100); border-color: var(--navy-500); }

pre.response-box {
    background: #071233;
    color: #C8DCFF;
    border: 1px solid var(--navy-800);
    border-radius: var(--r-sm);
    padding: .8rem .9rem;
    font-size: .74rem;
    line-height: 1.5;
    max-height: 19rem;
    overflow: auto;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------------------------------------------------------- tables */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    margin: 0;
    font-size: .865rem;
}
.table > thead > tr > th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--rule);
    color: var(--ink-3);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    padding: .6rem 1.15rem;
    white-space: nowrap;
}
.table > tbody > tr > td {
    padding: .8rem 1.15rem;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: none; }
.table > tbody > tr { transition: background .14s var(--ease); }
.table > tbody > tr:hover { background: var(--navy-050); }
.cell-actions { text-align: right; white-space: nowrap; }

.empty-state { padding: 3rem 1.5rem; text-align: center; color: var(--ink-3); font-size: .875rem; }
.empty-state i { display: block; font-size: 2rem; margin-bottom: .6rem; color: var(--navy-100); }

/* ------------------------------------------------ withdrawal cards */

.wd-card {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--navy-500);
    border-radius: var(--r);
    background: var(--surface);
    padding: .95rem 1.05rem;
    margin-bottom: .7rem;
    box-shadow: var(--shadow-sm);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.wd-card:hover { box-shadow: var(--shadow); }
.wd-card.is-paid    { border-left-color: var(--green-600); }
.wd-card.is-due     { border-left-color: var(--warn); background: #FFFDF7; }
.wd-card.is-failed  { border-left-color: var(--danger); }
.wd-card.is-working { border-left-color: var(--navy-600); background: var(--navy-050); }

.wd-amount {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.22rem;
    letter-spacing: -.03em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.wd-addr {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .765rem;
    color: var(--ink-2);
    word-break: break-all;
}

/* --------------------------------------------- send page summary */

.send-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem 1rem;
    align-items: start;
    padding: .85rem 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--surface-2);
}
.send-summary-cell { min-width: 0; }
.send-summary-balance { text-align: right; }
.send-addr { word-break: break-all; }

@media (max-width: 575.98px) {
    /* Side by side, the address and the balance end up on top of each
       other. One column each keeps both fully readable. */
    .send-summary { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
    .send-summary-balance {
        text-align: left;
        padding-top: .65rem;
        border-top: 1px dashed var(--rule);
    }
}

/* --------------------------------------------------------- alerts */

.alert { border: 1px solid transparent; border-radius: var(--r); padding: .8rem 1rem; font-size: .865rem; }
.alert-success { background: var(--green-100); border-color: #B9E7C8; color: var(--green-700); }
.alert-danger  { background: var(--danger-100); border-color: #F1C6C6; color: var(--danger); }
.alert-warning { background: var(--warn-100); border-color: #EFD9A8; color: var(--warn); }
.alert-info    { background: var(--info-100); border-color: #C6D6F1; color: var(--navy-700); }

/* --------------------------------------------------------- toasts */

.toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(23rem, calc(100vw - 2rem));
}
.toast-item {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .7rem .9rem;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--navy-600);
    box-shadow: var(--shadow-lg);
    font-size: .845rem;
    color: var(--ink);
    animation: toast-in .26s var(--ease);
}
.toast-item.ok  { border-left-color: var(--green-600); }
.toast-item.err { border-left-color: var(--danger); }
.toast-item.is-leaving { animation: toast-out .2s var(--ease) forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------- confirmation modal */

.confirm-scrim {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(4, 27, 77, .55);
    backdrop-filter: blur(3px);
    animation: scrim-in .14s var(--ease);
}
.confirm-scrim.is-leaving { animation: scrim-out .12s var(--ease) forwards; }
@keyframes scrim-out { to { opacity: 0; } }

.confirm-box {
    width: min(26rem, 100%);
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 60px -18px rgba(4, 27, 77, .5);
    overflow: hidden;
    animation: confirm-rise .18s var(--ease);
}
@keyframes confirm-rise {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
}
.confirm-scrim.is-leaving .confirm-box { animation: none; }

.confirm-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .95rem 1.15rem;
    color: #fff;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: .98rem;
    letter-spacing: -.015em;
}
.confirm-head.is-pay    { background: linear-gradient(135deg, var(--green-500), var(--green-700)); }
.confirm-head.is-danger { background: linear-gradient(135deg, #D94A4A, var(--danger)); }
.confirm-head i { font-size: 1.05rem; }

.confirm-body { padding: .35rem 1.15rem .5rem; }

.confirm-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.confirm-row:last-child { border-bottom: none; }

.confirm-label {
    flex: none;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.confirm-value {
    text-align: right;
    font-weight: 600;
    color: var(--ink);
    word-break: break-all;
    font-size: .875rem;
}
/* The amount is the number that decides the answer, so it is the number
   the eye lands on first. */
.confirm-row.is-big .confirm-value {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -.03em;
    color: var(--green-700);
}
.confirm-value.mono { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; font-weight: 500; }

.confirm-note {
    margin: 0 1.15rem;
    padding: .55rem .7rem;
    border-radius: var(--r-sm);
    background: var(--warn-100);
    color: var(--warn);
    font-size: .78rem;
    line-height: 1.4;
}

.confirm-foot {
    display: flex;
    gap: .55rem;
    padding: 1rem 1.15rem 1.15rem;
}
.confirm-foot .btn { flex: 1; }

/* --------------------------------------------------------- modals */

.modal-content { border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--rule-soft); }
.modal-title { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: 1rem; }

/* ----------------------------------------------------- login page */

.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background:
        radial-gradient(60% 45% at 50% -10%, rgba(5, 50, 144, .07) 0%, transparent 70%),
        var(--paper);
}

.login-form { width: 100%; max-width: 25rem; }

.login-form .logo-stack { text-align: center; margin-bottom: 1.5rem; }
.login-form .logo-stack img { height: 46px; width: auto; }

.login-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: 1.75rem 1.6rem;
    box-shadow: 0 12px 32px -14px rgba(4, 27, 77, .22), var(--shadow-sm);
}

.login-heading { font-size: 1.3rem; margin: 0 0 .3rem; }

.login-foot {
    text-align: center;
    margin: 1.25rem 0 0;
    font-size: .78rem;
    color: var(--ink-3);
}

.pw-toggle {
    position: absolute;
    right: .3rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--ink-3);
    padding: .35rem .5rem;
    cursor: pointer;
    border-radius: 5px;
    z-index: 3;
}
.pw-toggle:hover { color: var(--navy-600); }

.otp-input {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.5rem;
    letter-spacing: .5em;
    text-align: center;
    padding-left: .5em;
}

/* -------------------------------------------------- hamburger */

.nav-toggle {
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .16s var(--ease), background .16s var(--ease);
}
.nav-toggle:hover { border-color: var(--navy-500); }
.nav-toggle span {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: var(--navy-700);
    transition: transform .22s var(--ease), opacity .16s var(--ease);
}
/* The bars fold into a cross, so the control says what it will do next. */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-close {
    position: absolute;
    top: .85rem;
    right: .85rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: .8rem;
    cursor: pointer;
}
.nav-close:hover { background: rgba(255, 255, 255, .14); }

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(4, 27, 77, .5);
    backdrop-filter: blur(2px);
    animation: scrim-in .2s var(--ease);
}
@keyframes scrim-in { from { opacity: 0; } }

body.nav-locked { overflow: hidden; }

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 991.98px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }

    /* Same element, same links — it just slides in from the edge instead
       of holding a column. Nothing is hidden from the smaller screen. */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1040;
        width: min(17.5rem, 78vw);
        transform: translateX(-100%);
        transition: transform .24s var(--ease);
        box-shadow: 12px 0 32px -14px rgba(4, 27, 77, .5);
        padding-top: 1.15rem;
    }
    .sidebar.is-open { transform: translateX(0); }

    .topbar { padding: 0 1rem; }
    .content { padding: 1rem; }

    .login-card { padding: 1.4rem 1.25rem; }
}

/* Tables collapse into labelled cards rather than scrolling sideways —
   an address you have to scroll to see is an address you do not check. */
@media (max-width: 767.98px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr {
        border: 1px solid var(--rule);
        border-radius: var(--r);
        margin-bottom: .65rem;
        padding: .3rem .2rem;
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }
    .table-stack tr:hover { background: var(--surface); }
    .table-stack td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .45rem .85rem;
        border: none;
        text-align: right;
    }
    .table-stack td::before {
        content: attr(data-label);
        flex: none;
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--ink-3);
        text-align: left;
    }
    .table-stack td:empty { display: none; }
    .table-stack td.cell-actions { justify-content: flex-end; padding-top: .6rem; }

    .kv-row { grid-template-columns: minmax(0, 1fr); }
    .card-body { padding: 1rem; }
    .toast-stack { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
}

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

/* Print — an operator handing a payout record to accounts */
@media print {
    .sidebar, .topbar, .nav-scrim, .toast-stack, .btn { display: none !important; }
    .app-shell { grid-template-columns: 1fr; }
    .card { border-color: #ccc; box-shadow: none; }
    body { background: #fff; }
}