/* ──────────────────────────────────────────────────────────────────────────
   DCM.Wallet.Shared — wallet view styles, scoped under `.dcm-wallet-host`

   Every rule in this file is namespaced under `.dcm-wallet-host` so the
   shared component drops into hosts (DC-Dashboard / Tailwind, MAUI Hybrid)
   without leaking its hand-rolled CSS into their global namespace. The
   wallet's `<div class="dcm-wallet-host">` wrapper in WalletView.razor is
   the anchor — nothing inside it cares about the host's CSS framework,
   nothing outside it sees ours.

   Brand palette / variables come from the original DCM.Wallet/wwwroot/app.css;
   only the wallet-relevant subset is kept (the standalone host's lookup row,
   topbar, kv-list, pager etc. are dropped — they aren't rendered by this
   component).
   ────────────────────────────────────────────────────────────────────────── */

/* Self-hosted Inter (variable, latin). Bundled as a static web asset so the
   wallet renders in Inter identically across hosts — including the MAUI
   WebView and offline — instead of depending on the OS having Inter installed.
   The single variable file covers the 400/500/600/700 weights this UI uses.
   Relative url() resolves against this file's path
   (_content/DCM.Wallet.Shared/wallet.css → …/fonts/…). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Inter-latin-variable.woff2") format("woff2");
}

.dcm-wallet-host {
    /* Cool neutrals — harmonise with the indigo brand */
    --c-bg:        #fafafd;
    --c-surface:   #ffffff;
    --c-border:    #ececf2;
    --c-divider:   #f3f3f8;

    /* Text */
    --c-ink:       #242424;
    --c-ink-soft:  #5a5a64;
    --c-ink-muted: #8b8b94;

    /* Driv3 brand — deep indigo with lavender soft surfaces */
    --c-accent:        #1D0C67;
    --c-accent-hover:  #6F5EB9;
    --c-accent-soft:   #F0EDFF;
    --c-accent-ink:    #1D0C67;
    --c-secondary:     #DFD8F7;

    /* Status colours */
    --c-pos:           #15803d;
    --c-pos-bg:        #ecfdf5;
    --c-pos-border:    #bbf7d0;

    --c-neg:           #b91c1c;
    --c-neg-bg:        #fef2f2;
    --c-neg-border:    #fecaca;

    --c-warn:          #92400e;
    --c-warn-bg:       #fef3c7;
    --c-warn-border:   #fde68a;

    --c-info:          #1e40af;
    --c-info-bg:       #eff6ff;
    --c-info-border:   #bfdbfe;

    /* Geometry */
    --r-card:    14px;
    --r-pill:    999px;
    --r-input:   8px;
    --gap:       20px;
    --gap-tight: 12px;

    /* Wallet locks down its own typography so the host's font stack doesn't
       bleed through and break the layout (rounded number columns rely on
       tabular-num support, which not every host font has). */
    color: var(--c-ink);
    font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont,
                 "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dcm-wallet-host *,
.dcm-wallet-host *::before,
.dcm-wallet-host *::after {
    box-sizing: border-box;
}

.dcm-wallet-host .wallet {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* ── Banners (info / error) ──────────────────────────────────────────────── */
.dcm-wallet-host .banner {
    padding: 12px 16px;
    border-radius: var(--r-card);
    border: 1px solid;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}
.dcm-wallet-host .banner-title { font-weight: 600; }
.dcm-wallet-host .banner-body { color: inherit; opacity: 0.9; }
.dcm-wallet-host .banner-error {
    background: var(--c-neg-bg);
    border-color: var(--c-neg-border);
    color: var(--c-neg);
}
.dcm-wallet-host .banner-info {
    background: var(--c-info-bg);
    border-color: var(--c-info-border);
    color: var(--c-info);
}

/* ── Hero balance cards ──────────────────────────────────────────────────── */
.dcm-wallet-host .hero {
    display: grid;
    gap: var(--gap-tight);
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
    .dcm-wallet-host .hero { grid-template-columns: 1fr; }
}
.dcm-wallet-host .hero-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 132px;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
    position: relative;
    text-align: left;
    width: 100%;
    font: inherit;
    color: inherit;
}
.dcm-wallet-host .hero-primary {
    background: linear-gradient(180deg, #ffffff 0%, var(--c-accent-soft) 100%);
    border-color: #d8d2f0;
}
.dcm-wallet-host .hero-card:hover { transform: translateY(-1px); }
.dcm-wallet-host .hero-card.selected {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.dcm-wallet-host .hero-card.selected .hero-eyebrow { color: var(--c-accent); }
.dcm-wallet-host .hero-card .check {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    display: grid;
    place-items: center;
    font-size: 11px;
    color: transparent;
    transition: all 160ms ease;
}
.dcm-wallet-host .hero-card.selected .check {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: white;
}
.dcm-wallet-host .hero-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.dcm-wallet-host .hero-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-feature-settings: "tnum" 1;
}
.dcm-wallet-host .hero-value {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    line-height: 1.1;
}
.dcm-wallet-host .hero-secondary .hero-value { color: var(--c-ink-soft); }
.dcm-wallet-host .hero-currency {
    font-size: 14px;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.dcm-wallet-host .hero-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    font-size: 13px;
}
.dcm-wallet-host .muted { color: var(--c-ink-muted); }
.dcm-wallet-host .muted-cur { color: var(--c-ink-muted); font-weight: 500; margin-left: 3px; }

/* Old "reserved chip below card" rule deleted — the new design puts the
   reserved chip in the hero's chips-row next to the transit chip, styled
   by the rule under `.transit-chip, .reserved-chip` further down. */

/* ── Primary action row (Top up button) ──────────────────────────────────── */
.dcm-wallet-host .actions {
    display: flex;
    gap: 10px;
}
.dcm-wallet-host .action-btn {
    flex: 1;
    padding: 14px 18px;
    background: var(--c-accent);
    color: var(--c-surface);
    border: 1px solid var(--c-accent);
    border-radius: var(--r-card);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 120ms ease, border-color 120ms ease;
}
.dcm-wallet-host .action-btn:hover {
    background: var(--c-accent-hover);
    border-color: var(--c-accent-hover);
}
.dcm-wallet-host .action-btn .plus {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
}

/* ── Generic card ────────────────────────────────────────────────────────── */
.dcm-wallet-host .card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 20px 22px;
}
.dcm-wallet-host .card-title {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-ink);
}
.dcm-wallet-host .card-sub {
    margin: 0;
    font-size: 13px;
    color: var(--c-ink-soft);
    line-height: 1.5;
}

/* ── Activity card with tabs ─────────────────────────────────────────────── */
.dcm-wallet-host .activity-card { padding: 0; }

.dcm-wallet-host .tabs {
    display: flex;
    gap: 4px;
    padding: 6px;
    margin: 14px 16px 4px;
    background: var(--c-divider);
    border-radius: var(--r-pill);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dcm-wallet-host .tabs::-webkit-scrollbar { display: none; }

.dcm-wallet-host .tab {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    border-radius: calc(var(--r-pill) - 4px);
    background: transparent;
    color: var(--c-ink-soft);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.dcm-wallet-host .tab:hover { color: var(--c-ink); }
.dcm-wallet-host .tab:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}
.dcm-wallet-host .tab.is-active {
    background: var(--c-surface);
    color: var(--c-accent-ink);
    box-shadow: 0 1px 3px rgba(29, 12, 103, 0.08);
}
.dcm-wallet-host .tab-label { overflow: hidden; text-overflow: ellipsis; }
.dcm-wallet-host .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.dcm-wallet-host .tab.has-badge:not(.is-active) .tab-badge {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
}

.dcm-wallet-host .activity-header {
    padding: 14px 16px 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.dcm-wallet-host .activity-header-meta { flex: 1; min-width: 0; }
.dcm-wallet-host .activity-header .card-title { margin: 0 0 4px; }
.dcm-wallet-host .activity-header .card-sub { margin: 0; }

/* ── Refresh button ──────────────────────────────────────────────────────── */
.dcm-wallet-host .refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    background: var(--c-surface);
    color: var(--c-ink-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.dcm-wallet-host .refresh-btn:hover:not(:disabled) {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
}
.dcm-wallet-host .refresh-btn:active:not(:disabled) { transform: scale(0.96); }
.dcm-wallet-host .refresh-btn:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}
.dcm-wallet-host .refresh-btn:disabled { opacity: 0.6; cursor: progress; }
.dcm-wallet-host .refresh-btn svg { display: block; }
.dcm-wallet-host .refresh-btn.is-spinning svg {
    animation: dcm-wallet-refresh-spin 0.9s linear infinite;
}
@keyframes dcm-wallet-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .dcm-wallet-host .refresh-btn.is-spinning svg { animation: none; }
}

/* ── Status pills ────────────────────────────────────────────────────────── */
.dcm-wallet-host .status-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    text-transform: lowercase;
    background: var(--c-divider);
    color: var(--c-ink-soft);
    border: 1px solid var(--c-divider);
    line-height: 1.6;
}
.dcm-wallet-host .status-open,
.dcm-wallet-host .status-succeeded,
.dcm-wallet-host .status-active,
.dcm-wallet-host .status-posted     { background: var(--c-pos-bg); color: var(--c-pos); border-color: var(--c-pos-border); }
.dcm-wallet-host .status-pending,
.dcm-wallet-host .status-processing { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-border); }
.dcm-wallet-host .status-failed,
.dcm-wallet-host .status-canceled,
.dcm-wallet-host .status-closed     { background: var(--c-neg-bg); color: var(--c-neg); border-color: var(--c-neg-border); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.dcm-wallet-host .table-wrap {
    margin: 0;
    padding: 0 0 12px;
    overflow-x: auto;
}
.dcm-wallet-host .ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-feature-settings: "tnum" 1;
}
.dcm-wallet-host .ledger thead th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
    border-bottom: 1px solid var(--c-divider);
    background: transparent;
}
.dcm-wallet-host .ledger tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-divider);
    vertical-align: middle;
}
.dcm-wallet-host .ledger tbody tr:last-child td { border-bottom: none; }
.dcm-wallet-host .ledger tbody tr:hover td { background: var(--c-bg); }
.dcm-wallet-host .ledger td.right,
.dcm-wallet-host .ledger th.right { text-align: right; }
.dcm-wallet-host .ledger td.positive { color: var(--c-pos); font-weight: 600; }
.dcm-wallet-host .ledger td.negative { color: var(--c-neg); font-weight: 600; }
.dcm-wallet-host .ledger td.desc {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

/* Mobile ledger transformation — collapse rows into stacked cards */
@media (max-width: 600px) {
    .dcm-wallet-host .table-wrap {
        overflow-x: visible;
        padding: 4px 12px 14px;
    }
    .dcm-wallet-host .ledger,
    .dcm-wallet-host .ledger thead,
    .dcm-wallet-host .ledger tbody,
    .dcm-wallet-host .ledger tr,
    .dcm-wallet-host .ledger td {
        display: block;
        width: 100%;
    }
    .dcm-wallet-host .ledger thead { display: none; }
    .dcm-wallet-host .ledger tbody tr {
        margin: 0 0 8px;
        padding: 12px 14px;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: 12px;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "date   status"
            "desc   desc"
            "type   amount";
        grid-row-gap: 6px;
        grid-column-gap: 10px;
        align-items: baseline;
    }
    .dcm-wallet-host .ledger tbody tr:last-child { margin-bottom: 0; }
    .dcm-wallet-host .ledger tbody tr:hover td { background: transparent; }
    .dcm-wallet-host .ledger tbody td { padding: 0; border: 0; }
    .dcm-wallet-host .td-date {
        grid-area: date;
        font-size: 12px;
        color: var(--c-ink-muted);
    }
    .dcm-wallet-host .td-desc {
        grid-area: desc;
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        cursor: default;
        font-size: 14px;
        line-height: 1.35;
        color: var(--c-ink);
        font-weight: 500;
    }
    .dcm-wallet-host .td-status { grid-area: status; justify-self: end; }
    .dcm-wallet-host .td-type {
        grid-area: type;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--c-ink-muted);
    }
    .dcm-wallet-host .td-amount {
        grid-area: amount;
        text-align: right;
        font-weight: 700;
        font-size: 15px;
    }
    .dcm-wallet-host .ledger tbody .status-pill {
        font-size: 11px;
        padding: 2px 8px;
    }
}

/* ── Empty states ────────────────────────────────────────────────────────── */
.dcm-wallet-host .empty-state {
    margin: 0;
    padding: 18px 16px 22px;
    color: var(--c-ink-muted);
    font-size: 13px;
    text-align: center;
}
.dcm-wallet-host .empty-state-rich {
    text-align: center;
    padding: 40px 24px 48px;
}
.dcm-wallet-host .empty-state-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.6;
}
.dcm-wallet-host .empty-state-title {
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: 4px;
}
.dcm-wallet-host .empty-state-body {
    color: var(--c-ink-muted);
    font-size: 13px;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Narrow-screen tab adjustments */
@media (max-width: 480px) {
    .dcm-wallet-host .tabs { margin: 12px 12px 4px; }
    .dcm-wallet-host .tab {
        padding: 7px 10px;
        font-size: 12px;
    }
}

/* ── Pending invoices list ───────────────────────────────────────────────── */
.dcm-wallet-host .invoice-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dcm-wallet-host .invoice-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-top: 1px solid var(--c-divider);
    transition: background 0.15s ease;
}
.dcm-wallet-host .invoice-row:first-child { border-top: 1px solid var(--c-border); }
.dcm-wallet-host .invoice-row.is-busy { background: var(--c-accent-soft); }
.dcm-wallet-host .invoice-row.is-selected { background: var(--c-accent-soft); }

/* Multi-select: per-row checkbox + bulk toolbar */
.dcm-wallet-host .invoice-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dcm-wallet-host .invoice-check input { width: 17px; height: 17px; cursor: pointer; }
.dcm-wallet-host .invoice-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
}
.dcm-wallet-host .invoice-selectall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-muted);
    cursor: pointer;
}
.dcm-wallet-host .invoice-selectall input { width: 17px; height: 17px; cursor: pointer; }
.dcm-wallet-host .invoice-bulk-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dcm-wallet-host .invoice-meta { min-width: 0; }
.dcm-wallet-host .invoice-meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.dcm-wallet-host .invoice-trip {
    font-weight: 600;
    color: var(--c-ink);
}
.dcm-wallet-host .invoice-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.dcm-wallet-host .tag-dispatched {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
}
.dcm-wallet-host .tag-self {
    background: var(--c-info-bg);
    color: var(--c-info);
    border: 1px solid var(--c-info-border);
}
/* Owed-to-me status pills (executer's view of an invoice). */
.dcm-wallet-host .tag-awaiting {
    background: var(--c-warn-bg);
    color: var(--c-warn);
    border: 1px solid var(--c-warn-border);
}
.dcm-wallet-host .tag-paid {
    background: var(--c-pos-bg);
    color: var(--c-pos);
    border: 1px solid var(--c-pos-border);
}
.dcm-wallet-host .tag-cancelled {
    background: var(--c-neg-bg);
    color: var(--c-neg);
    border: 1px solid var(--c-neg-border);
}
/* Settled history rows read as muted so the awaiting ones stand out. */
.dcm-wallet-host .owed-row.is-paid,
.dcm-wallet-host .owed-row.is-cancelled {
    opacity: 0.72;
}
/* "You're owed" headline above the owed-invoices list. */
.dcm-wallet-host .owed-headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 16px 4px;
}
.dcm-wallet-host .owed-headline-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-ink);
}
.dcm-wallet-host .owed-headline-label {
    font-size: 13px;
    color: var(--c-ink-muted);
}
.dcm-wallet-host .invoice-date {
    font-size: 12px;
    color: var(--c-ink-muted);
}
.dcm-wallet-host .invoice-breakdown {
    margin-top: 2px;
    font-size: 12px;
    color: var(--c-ink-muted);
}
.dcm-wallet-host .invoice-amount {
    text-align: right;
    white-space: nowrap;
}
.dcm-wallet-host .invoice-amount-value {
    font-weight: 700;
    font-size: 16px;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}
.dcm-wallet-host .invoice-amount-currency {
    margin-left: 4px;
    font-size: 11px;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.dcm-wallet-host .invoice-actions {
    display: inline-flex;
    gap: 6px;
}
.dcm-wallet-host .btn-approve {
    background: var(--c-pos);
    color: #fff;
    border: 1px solid var(--c-pos);
    padding: 7px 14px;
    border-radius: var(--r-input);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.dcm-wallet-host .btn-approve:hover:not(:disabled) {
    filter: brightness(0.95);
    transform: translateY(-1px);
}
.dcm-wallet-host .btn-approve:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.dcm-wallet-host .btn-cancel {
    background: var(--c-surface);
    color: var(--c-neg);
    border: 1px solid var(--c-neg-border);
    padding: 7px 14px;
    border-radius: var(--r-input);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.dcm-wallet-host .btn-cancel:hover:not(:disabled) {
    background: var(--c-neg-bg);
}
.dcm-wallet-host .btn-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@media (max-width: 560px) {
    .dcm-wallet-host .invoice-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "check meta amount"
            "check actions actions";
        grid-row-gap: 10px;
    }
    .dcm-wallet-host .invoice-check { grid-area: check; align-self: start; margin-top: 2px; }
    .dcm-wallet-host .invoice-meta { grid-area: meta; }
    .dcm-wallet-host .invoice-amount { grid-area: amount; }
    .dcm-wallet-host .invoice-actions {
        grid-area: actions;
        justify-content: stretch;
    }
    .dcm-wallet-host .invoice-actions .btn-approve,
    .dcm-wallet-host .invoice-actions .btn-cancel {
        flex: 1;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   Phase-1 redesign — ported from ui-wallet.html. Lives below the older
   `.hero` / `.card` / `.tabs` blocks so adopting hosts can adopt either
   skin without one bleeding into the other. The redesign uses:
     - `.ph`             — indigo header section
     - `.bal-area`       — centered Available balance hero
     - `.chips-row`      — in-transit + reserved chips under the balance
     - `.cta-row`        — Pay out / Top up CTAs (the indigo banner footer)
     - `.tabs-bar` + `.tb` — flat tab strip with refresh button
     - `.mx` / `.mx-fee` — activity-feed rows (with optional sub-fee row)
   See WalletView.razor for usage.
   ──────────────────────────────────────────────────────────────────────── */

.dcm-wallet-host .ph {
    background: var(--c-accent);
    color: #fff;
    padding: 16px 20px 20px;
    /* Full-bleed against the page back-header on MAUI / against the
       dashboard header on DC-Dashboard — no rounded corners, no margin.
       The illusion of "a rounded card sitting in white space" was the
       browser-default body margin showing through; with that gone the
       hero is flush. */
    border-radius: 0;
    margin: 0;
}

/* Screen-header strip (back / title / right slot) sits at the top of
   every screen. On the main wallet the left slot is empty (the page's
   own BackHeader handles app navigation); on the in-transit and card
   screens the left slot is the wallet-internal back arrow. */
.dcm-wallet-host .ph-nav {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    min-height: 30px;
}
.dcm-wallet-host .ph-title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.dcm-wallet-host .ph-back,
.dcm-wallet-host .ph-right {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}
.dcm-wallet-host .ph-back {
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    line-height: 1;
    padding: 0;
}
.dcm-wallet-host .card-nav-btn {
    width: 34px;
    height: 30px;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    position: relative;
    display: grid;
    place-items: center;
    padding: 0;
    transition: background 120ms ease;
}
.dcm-wallet-host .card-nav-btn:hover { background: rgba(255, 255, 255, 0.22); }
.dcm-wallet-host .card-nav-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4caf50;
    border: 2px solid var(--c-accent);
}

.dcm-wallet-host .bal-area {
    text-align: center;
    padding: 0 0 8px;
}
.dcm-wallet-host .bal-lbl {
    font-size: 12px;
    opacity: .65;
    margin: 0 0 4px;
    letter-spacing: .3px;
}
.dcm-wallet-host .bal-amt {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 14px;
    line-height: 1;
    font-feature-settings: "tnum" 1;
}
.dcm-wallet-host .bal-cur {
    font-size: 16px;
    font-weight: 600;
    opacity: .65;
    margin-left: 4px;
}

.dcm-wallet-host .chips-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 18px;
}
.dcm-wallet-host .transit-chip,
.dcm-wallet-host .reserved-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 99px;
    padding: 5px 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, .92);
    font-family: inherit;
    line-height: 1.4;
}
.dcm-wallet-host .transit-chip { cursor: pointer; transition: background 120ms ease; }
.dcm-wallet-host .transit-chip:hover { background: rgba(255, 255, 255, .2); }
.dcm-wallet-host .reserved-chip { cursor: help; }
.dcm-wallet-host .transit-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef9f27;
    flex-shrink: 0;
}

.dcm-wallet-host .cta-row {
    display: flex;
    gap: 10px;
    padding: 2px 0 4px;
}
.dcm-wallet-host .cta-btn {
    flex: 1;
    padding: 12px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s, transform .12s, opacity .15s;
    border: none;
}
.dcm-wallet-host .cta-btn.primary {
    background: #fff;
    color: var(--c-accent);
}
.dcm-wallet-host .cta-btn.primary:hover:not(:disabled) {
    background: #f0eeff;
}
.dcm-wallet-host .cta-btn.outline {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .3);
}
.dcm-wallet-host .cta-btn.outline:hover:not(:disabled) {
    background: rgba(255, 255, 255, .2);
}
.dcm-wallet-host .cta-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Tabs strip — flat, with refresh on the right ─────────────────────── */
.dcm-wallet-host .tabs-bar {
    display: flex;
    align-items: center;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: 0 16px;
    gap: 4px;
}
.dcm-wallet-host .tb {
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-ink-muted);
    border: none;
    background: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dcm-wallet-host .tb.on {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
    font-weight: 700;
}
.dcm-wallet-host .tb .tab-badge {
    background: var(--c-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
    line-height: 1.4;
}
.dcm-wallet-host .tab-refresh {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--c-ink-muted);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .12s, color .12s;
}
.dcm-wallet-host .tab-refresh:hover:not(:disabled) {
    background: var(--c-divider);
    color: var(--c-ink);
}
.dcm-wallet-host .tab-refresh.is-spinning svg {
    animation: dcm-wallet-spin 1s linear infinite;
}
@keyframes dcm-wallet-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

/* Activity feed — date-grouped .mx rows with optional .mx-fee sub-rows ─ */
.dcm-wallet-host .activity-feed {
    padding: 4px 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dcm-wallet-host .dhead {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-ink-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 14px 4px 6px;
}
.dcm-wallet-host .activity-feed .dhead:first-child {
    padding-top: 4px;
}

.dcm-wallet-host .mx {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-divider);
    transition: background .12s;
}
.dcm-wallet-host .mx:hover { background: #faf9ff; }
.dcm-wallet-host .mx.first { border-radius: 14px 14px 0 0; }
.dcm-wallet-host .mx.last  {
    border-radius: 0 0 14px 14px;
    border-bottom: none;
    margin-bottom: 2px;
}
.dcm-wallet-host .mx.solo  {
    border-radius: 14px;
    border-bottom: none;
    margin-bottom: 2px;
}

.dcm-wallet-host .mx-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dcm-wallet-host .mx-mid {
    flex: 1;
    min-width: 0;
}
.dcm-wallet-host .mx-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcm-wallet-host .mx-ref {
    font-size: 11px;
    color: var(--c-ink-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcm-wallet-host .mx-rgt {
    text-align: right;
    flex-shrink: 0;
}
.dcm-wallet-host .mx-amt {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 2px;
    font-feature-settings: "tnum" 1;
}
.dcm-wallet-host .mx-time {
    font-size: 11px;
    color: var(--c-ink-muted);
    margin: 0;
}
.dcm-wallet-host .mx-amt.c-pos { color: #3b6d11; }
.dcm-wallet-host .mx-amt.c-neg { color: #a32d2d; }

/* Sub-fee row — visually subordinate, connected to parent ────────── */
.dcm-wallet-host .mx-fee {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 18px;
    background: #faf9ff;
    border-bottom: 1px solid var(--c-divider);
}
.dcm-wallet-host .mx-fee.last {
    border-radius: 0 0 14px 14px;
    border-bottom: none;
    margin-bottom: 2px;
}
.dcm-wallet-host .mx-fee .fee-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}
.dcm-wallet-host .mx-fee .fee-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--c-accent-soft);
}
.dcm-wallet-host .mx-fee .fee-mid {
    flex: 1;
    min-width: 0;
}
.dcm-wallet-host .mx-fee .fee-name {
    font-size: 11.5px;
    font-weight: 600;
    color: #888;
    margin: 0 0 1px;
}
.dcm-wallet-host .mx-fee .fee-ref {
    font-size: 10.5px;
    color: #ccc;
    margin: 0;
}
.dcm-wallet-host .mx-fee .fee-rgt {
    text-align: right;
    flex-shrink: 0;
}
.dcm-wallet-host .mx-fee .fee-amt {
    font-size: 12.5px;
    font-weight: 700;
    color: #a32d2d;
    margin: 0;
}

/* ── Modal (top-up) ──────────────────────────────────────────────────────── */
.dcm-wallet-host .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 13, 10, 0.42);
    display: none;
    place-items: center;
    z-index: 100;
    padding: 16px;
    animation: dcm-wallet-modal-fade 160ms ease;
}
.dcm-wallet-host .modal-backdrop.open { display: grid; }
.dcm-wallet-host .modal {
    /* Reset Bootstrap 5's `.modal` defaults — when this RCL is hosted by
       DC-Dashboard, Bootstrap's global stylesheet applies `display:none;
       position:fixed; inset:0; width:100%; height:100%` to anything with
       class="modal", which hides our dialog box entirely (only the
       backdrop shaded the screen) and would otherwise take it out of the
       backdrop's grid centring. These overrides scope the reset under
       `.dcm-wallet-host` so it's no-op when the host doesn't ship
       Bootstrap (Dispatch-App / MAUI). */
    display: block;
    position: static;
    inset: auto;
    height: auto;
    margin: 0;
    pointer-events: auto;

    background: var(--c-surface);
    border-radius: 16px;
    border: 1px solid var(--c-border);
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(15, 13, 10, 0.18);
    animation: dcm-wallet-modal-pop 200ms cubic-bezier(.2, .9, .35, 1);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
@keyframes dcm-wallet-modal-fade {
    from { opacity: 0 } to { opacity: 1 }
}
@keyframes dcm-wallet-modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98) }
    to   { opacity: 1; transform: translateY(0) scale(1) }
}
.dcm-wallet-host .modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--c-divider);
}
.dcm-wallet-host .modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.dcm-wallet-host .modal-close {
    background: transparent;
    border: 0;
    color: var(--c-ink-muted);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: grid;
    place-items: center;
    transition: background 120ms ease, color 120ms ease;
}
.dcm-wallet-host .modal-close:hover {
    background: var(--c-divider);
    color: var(--c-ink);
}
.dcm-wallet-host .modal-body {
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.dcm-wallet-host .modal-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.dcm-wallet-host .modal-helper {
    margin: 0;
    font-size: 13px;
    color: var(--c-ink-soft);
}

/* Amount input with currency prefix */
.dcm-wallet-host .amount-field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-bg);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.dcm-wallet-host .amount-field:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
    background: var(--c-surface);
}
.dcm-wallet-host .amount-prefix {
    padding: 0 14px;
    display: grid;
    place-items: center;
    color: var(--c-ink-muted);
    font-weight: 600;
    border-right: 1px solid var(--c-divider);
    background: var(--c-bg);
}
.dcm-wallet-host .amount-input {
    flex: 1;
    padding: 12px 14px;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    background: transparent;
    color: var(--c-ink);
    font-feature-settings: "tnum" 1;
    width: 100%;
}

/* Quick amount chips */
.dcm-wallet-host .quick-amounts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.dcm-wallet-host .quick-chip {
    padding: 6px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms ease;
}
.dcm-wallet-host .quick-chip:hover { border-color: var(--c-accent); }
.dcm-wallet-host .quick-chip.active {
    background: var(--c-accent);
    color: var(--c-surface);
    border-color: var(--c-accent);
}

.dcm-wallet-host .submit-btn {
    width: 100%;
    padding: 14px 18px;
    background: var(--c-accent);
    color: var(--c-surface);
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.dcm-wallet-host .submit-btn:hover:not(:disabled) {
    background: var(--c-accent-hover);
}
.dcm-wallet-host .submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Top-up "transfer from your bank" accordion ──────────────────────────── */
.dcm-wallet-host .bank-acc {
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    overflow: hidden;
}
.dcm-wallet-host .bank-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--c-surface);
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: var(--c-ink);
}
.dcm-wallet-host .bank-acc-head-main {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-accent);
}
.dcm-wallet-host .bank-acc-head-main > span {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dcm-wallet-host .bank-acc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink);
}
.dcm-wallet-host .bank-acc-sub {
    font-size: 11.5px;
    color: var(--c-ink-muted);
}
.dcm-wallet-host .bank-acc-chev {
    color: var(--c-ink-muted);
    flex: 0 0 auto;
    transition: transform 160ms ease;
}
.dcm-wallet-host .bank-acc.open .bank-acc-chev { transform: rotate(180deg); }
.dcm-wallet-host .bank-acc-body {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--c-divider);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dcm-wallet-host .bank-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dcm-wallet-host .bank-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
}
.dcm-wallet-host .bank-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dcm-wallet-host .bank-row-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.dcm-wallet-host .bank-row-value {
    font-size: 14px;
    color: var(--c-ink);
    word-break: break-all;
}
.dcm-wallet-host .bank-row-value.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}
.dcm-wallet-host .bank-copy-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-surface);
    color: var(--c-accent);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.dcm-wallet-host .bank-copy-btn:hover {
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
}
.dcm-wallet-host .bank-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 11px 16px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.dcm-wallet-host .bank-share-btn:hover { background: var(--c-secondary); }

/* ── Pay-out modal ───────────────────────────────────────────────────────── */
.dcm-wallet-host .payout-type-toggle {
    display: flex;
    gap: 8px;
}
.dcm-wallet-host .pto {
    flex: 1;
    padding: 10px 12px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-input);
    background: var(--c-surface);
    cursor: pointer;
}
.dcm-wallet-host .pto.on {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}
.dcm-wallet-host .pto.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.dcm-wallet-host .pto-name { font-size: 13.5px; font-weight: 600; color: var(--c-ink); }
.dcm-wallet-host .pto-sub { font-size: 11px; color: var(--c-ink-muted); margin-top: 1px; }

.dcm-wallet-host .payout-avail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--c-ink-muted);
    margin-top: -8px;
}
.dcm-wallet-host .payout-max-btn {
    border: 0;
    background: none;
    color: var(--c-accent);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}

.dcm-wallet-host .bankchip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    background: var(--c-bg);
    color: var(--c-accent);
    font-size: 13.5px;
}
.dcm-wallet-host .bankchip.muted { color: var(--c-ink-muted); }
.dcm-wallet-host .bankchip-name { color: var(--c-ink); font-weight: 500; }
.dcm-wallet-host .bankchip-change {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--c-ink-muted);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
.dcm-wallet-host .bank-picker {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    overflow: hidden;
}
.dcm-wallet-host .bank-picker-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--c-divider);
    background: var(--c-surface);
}
.dcm-wallet-host .bank-picker-row:last-child { border-bottom: 0; }
.dcm-wallet-host .bank-picker-row.active { background: var(--c-accent-soft); }
.dcm-wallet-host .bank-picker-select {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 13px;
    border: 0;
    background: transparent;
    color: var(--c-ink);
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}
.dcm-wallet-host .bank-picker-row.active .bank-picker-select { color: var(--c-accent); }
.dcm-wallet-host .bank-remove-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    border: 0;
    border-left: 1px solid var(--c-divider);
    background: transparent;
    color: var(--c-ink-muted);
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}
.dcm-wallet-host .bank-remove-btn:hover { color: var(--c-neg); background: var(--c-neg-bg); }
.dcm-wallet-host .bank-remove-confirm {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 13px;
    background: var(--c-neg-bg);
}
.dcm-wallet-host .bank-remove-q {
    font-size: 13px;
    color: var(--c-neg);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dcm-wallet-host .bank-remove-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
.dcm-wallet-host .bank-remove-cancel,
.dcm-wallet-host .bank-remove-do {
    padding: 6px 12px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.dcm-wallet-host .bank-remove-cancel {
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-ink-soft);
}
.dcm-wallet-host .bank-remove-do {
    border: 0;
    background: var(--c-neg);
    color: #fff;
}
.dcm-wallet-host .bank-remove-cancel:disabled,
.dcm-wallet-host .bank-remove-do:disabled { opacity: 0.55; cursor: not-allowed; }

.dcm-wallet-host .feebox {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
}
.dcm-wallet-host .frow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--c-ink);
}
.dcm-wallet-host .frow-label { color: var(--c-ink-muted); }
.dcm-wallet-host .frow.total {
    padding-top: 7px;
    border-top: 1px solid var(--c-divider);
    font-weight: 600;
}
.dcm-wallet-host .frow.total span:last-child { color: var(--c-accent); }

.dcm-wallet-host .banner-warn {
    background: var(--c-warn-bg);
    border-color: var(--c-warn-border);
    color: var(--c-warn);
}

/* Pay-out destination — manage + add bank accounts. */
.dcm-wallet-host .payout-dest {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dcm-wallet-host .payout-dest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dcm-wallet-host .payout-addbank-link {
    border: 0;
    background: none;
    color: var(--c-accent);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.dcm-wallet-host .bank-picker-main {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--c-ink);
}
.dcm-wallet-host .bank-picker-row .bank-picker-main svg { color: var(--c-accent); }
.dcm-wallet-host .bank-picker-row.active .bank-picker-main { color: var(--c-accent); }

.dcm-wallet-host .addbank-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    background: var(--c-bg);
}
.dcm-wallet-host .addbank-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.dcm-wallet-host .addbank-input {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-input);
    background: var(--c-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    /* 16px keeps iOS WKWebView from auto-zooming when the field is focused. */
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--c-ink);
}
.dcm-wallet-host .addbank-input:focus {
    outline: 0;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.dcm-wallet-host .addbank-actions {
    display: flex;
    gap: 8px;
}
.dcm-wallet-host .addbank-cancel,
.dcm-wallet-host .addbank-save {
    flex: 1;
    padding: 10px 14px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.dcm-wallet-host .addbank-cancel {
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-ink-soft);
}
.dcm-wallet-host .addbank-save {
    border: 0;
    background: var(--c-accent);
    color: var(--c-surface);
}
.dcm-wallet-host .addbank-save:disabled,
.dcm-wallet-host .addbank-cancel:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────────────────
   In-transit screen (`_screen == "transit"`) — "Earnings in transit" card,
   "available" navigation chip, pending PIs with progress rows, and an
   "instant payout" CTA placeholder.
   ────────────────────────────────────────────────────────────────────────── */

.dcm-wallet-host .tc {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    color: #fff;
}
.dcm-wallet-host .tc-label {
    font-size: 10px;
    letter-spacing: .8px;
    text-transform: uppercase;
    opacity: .65;
    margin: 0 0 4px;
}
.dcm-wallet-host .tc-amt {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.1;
}
.dcm-wallet-host .tc-sub {
    font-size: 11px;
    opacity: .7;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dcm-wallet-host .autobadge {
    background: rgba(255, 255, 255, .15);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    opacity: 1;
}

.dcm-wallet-host .avail-chip-wrap {
    text-align: center;
    margin-bottom: 4px;
}
.dcm-wallet-host .avail-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 99px;
    padding: 5px 12px;
    font-size: 12px;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: background 120ms ease;
}
.dcm-wallet-host .avail-chip:hover { background: rgba(255, 255, 255, .2); }
.dcm-wallet-host .avail-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #639922;
}

.dcm-wallet-host .transit-content {
    padding: 12px 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dcm-wallet-host .ipill {
    background: var(--c-accent-soft);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.dcm-wallet-host .ipill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #534ab7;
    margin-top: 5px;
    flex-shrink: 0;
}
.dcm-wallet-host .itext {
    font-size: 12px;
    color: #3c3489;
    line-height: 1.5;
}

.dcm-wallet-host .sh {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--c-ink-muted);
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 4px 2px;
    margin-top: 2px;
}

.dcm-wallet-host .pcard {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 14px;
}
.dcm-wallet-host .pr {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.dcm-wallet-host .pico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dcm-wallet-host .pmid {
    flex: 1;
    min-width: 0;
}
.dcm-wallet-host .pmethod {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0 0 2px;
}
.dcm-wallet-host .pdate {
    font-size: 11px;
    color: var(--c-ink-muted);
    margin: 0;
}
.dcm-wallet-host .prgt {
    text-align: right;
    flex-shrink: 0;
}
.dcm-wallet-host .pamt {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-accent);
    margin: 0 0 4px;
}

.dcm-wallet-host .badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
}
.dcm-wallet-host .bproc  { background: #faeeda; color: #633806; }
.dcm-wallet-host .btoday { background: #eaf3de; color: #27500a; }

.dcm-wallet-host .progrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
}
.dcm-wallet-host .progbg {
    flex: 1;
    height: 5px;
    background: #f0eef8;
    border-radius: 99px;
    overflow: hidden;
}
.dcm-wallet-host .progfill {
    height: 100%;
    border-radius: 99px;
}
.dcm-wallet-host .proglbl {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.dcm-wallet-host .allcta {
    background: var(--c-accent);
    color: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 120ms ease;
    margin-top: 6px;
}
.dcm-wallet-host .allcta:hover { background: var(--c-accent-hover); }
.dcm-wallet-host .actl {
    font-size: 13px;
    font-weight: 600;
}
.dcm-wallet-host .acts {
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
    margin-top: 2px;
}
.dcm-wallet-host .actarr {
    background: rgba(255, 255, 255, .15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 14px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Card screen (`_screen == "card"`) — empty-state scaffold. Issuing
   integration ships in a follow-up; this surface lets the user toggle
   virtual / physical and tap "Request card" which fires a toast.
   ────────────────────────────────────────────────────────────────────────── */

.dcm-wallet-host .card-empty {
    padding: 20px 16px 40px;
}
.dcm-wallet-host .req-wrap {
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dcm-wallet-host .req-visual {
    margin: 4px auto 4px;
}
.dcm-wallet-host .req-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-ink);
    margin: 0;
}
.dcm-wallet-host .req-sub {
    font-size: 13px;
    color: var(--c-ink-soft);
    margin: 0 0 8px;
    line-height: 1.5;
}
.dcm-wallet-host .req-types {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.dcm-wallet-host .req-type {
    flex: 1;
    max-width: 170px;
    padding: 14px 10px;
    border: 1.5px solid var(--c-border);
    border-radius: 14px;
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.dcm-wallet-host .req-type:hover { border-color: var(--c-accent); }
.dcm-wallet-host .req-type.on {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}
.dcm-wallet-host .req-type-ico {
    width: 36px;
    height: 28px;
    border-radius: 6px;
    background: #f7f6ff;
    display: grid;
    place-items: center;
}
.dcm-wallet-host .req-type.on .req-type-ico { background: #fff; }
.dcm-wallet-host .req-type-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-ink);
    margin: 0;
}
.dcm-wallet-host .req-type-sub {
    font-size: 10.5px;
    color: var(--c-ink-muted);
    margin: 0;
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────────────────
   Activity-feed search + filter row. Filter pills are UI only for now —
   the activity feed's _activityFilter handler matches each row's FilterKey
   string against the pill. Without movement_type metadata stamping (phase 2)
   the keys are best-effort heuristics in ActivityMapper.
   ────────────────────────────────────────────────────────────────────────── */

.dcm-wallet-host .inv-top-area {
    padding: 10px 14px 8px;
    background: #f5f5fa;
    border-bottom: 1px solid #eee;
}
.dcm-wallet-host .inv-srch-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}
.dcm-wallet-host .inv-srch {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    padding: 7px 11px;
}
.dcm-wallet-host .inv-srch input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--c-ink);
    min-width: 0;
}
.dcm-wallet-host .inv-srch input::placeholder { color: #ccc; }
.dcm-wallet-host .inv-filter-btn {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-accent);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.dcm-wallet-host .inv-filter-btn.active {
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
}
.dcm-wallet-host .inv-filter-bar {
    display: flex;
    gap: 6px;
    padding: 8px 0 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.dcm-wallet-host .inv-filter-bar::-webkit-scrollbar { display: none; }
.dcm-wallet-host .inv-fpill {
    padding: 5px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-ink-muted);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 120ms ease;
}
.dcm-wallet-host .inv-fpill.on {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}

/* ──────────────────────────────────────────────────────────────────────────
   Toast — bottom-centered, fades in for ~2.4s. Used for placeholder CTAs
   (Pay out, Instant payout, Request card) until those features ship.
   ────────────────────────────────────────────────────────────────────────── */

.dcm-wallet-host .toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-accent);
    color: #fff;
    padding: 10px 20px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15, 13, 10, 0.18);
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
    white-space: nowrap;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcm-wallet-host .toast.show { opacity: 1; }

/* ──────────────────────────────────────────────────────────────────────────
   Progressive loading — skeletons + refresh progress bar
   --------------------------------------------------------------------------
   Goal: the page chrome (hero, chips, CTAs, tabs, list area) renders on the
   first paint instead of waiting for the snapshot fetch to land. Sections
   that depend on data show shimmering placeholders shaped like the real
   content so nothing reflows when the swap happens. On a refresh (snapshot
   already loaded), we keep the data on-screen and run a thin progress bar
   across the top of the hero — the wholesale "Loading…" empty state on
   every refresh was disorienting.
   ────────────────────────────────────────────────────────────────────────── */

.dcm-wallet-host .skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    isolation: isolate;
}
/* Variant used over white surfaces (activity feed / invoice list) — the hero
   sits on the indigo background where rgba(255,255,255,.12) reads as a soft
   highlight, while the lower list sections need a darker base to be visible. */
.dcm-wallet-host .activity-feed .skeleton,
.dcm-wallet-host .invoice-list .skeleton {
    background: rgba(15, 13, 10, 0.08);
}
.dcm-wallet-host .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: dcm-wallet-shimmer 1.4s ease-in-out infinite;
}
.dcm-wallet-host .activity-feed .skeleton::after,
.dcm-wallet-host .invoice-list .skeleton::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(15, 13, 10, 0.06) 50%,
        transparent 100%
    );
}
@keyframes dcm-wallet-shimmer {
    100% { transform: translateX(100%); }
}

/* Hero balance placeholder — same vertical footprint as the real .bal-amt
   so the indigo block doesn't jump in height when data arrives. */
.dcm-wallet-host .skeleton-balance {
    width: 60%;
    max-width: 240px;
    height: 36px;
    margin: 8px auto 0;
    border-radius: 10px;
}

/* Chip-shaped placeholder for the in-transit / reserved chips. */
.dcm-wallet-host .skeleton-chip {
    width: 132px;
    height: 28px;
    border-radius: 99px;
}

/* Activity / invoice row placeholders — match the real .mx layout
   so the swap is reflow-free. */
.dcm-wallet-host .skeleton-row { pointer-events: none; }
.dcm-wallet-host .mx.skeleton-row .mx-ico {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dcm-wallet-host .skeleton-line {
    height: 12px;
    border-radius: 6px;
    margin: 4px 0;
}
.dcm-wallet-host .skeleton-line-title { width: 60%; }
.dcm-wallet-host .skeleton-line-sub   { width: 40%; height: 10px; }
.dcm-wallet-host .skeleton-line-amt   { width: 70px; margin-left: auto; }
.dcm-wallet-host .skeleton-line-time  { width: 50px; height: 10px; margin-left: auto; }

/* Date-group header placeholder (e.g. "Today" / "Yesterday"). */
.dcm-wallet-host .skeleton-dhead {
    width: 80px;
    height: 14px;
    border-radius: 6px;
    margin: 12px 16px;
}

/* Thin progress bar shown at the top of the hero while a refresh
   is in flight AND we already have data underneath. */
.dcm-wallet-host .refresh-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
    z-index: 5;
}
.dcm-wallet-host .refresh-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 2px;
    animation: dcm-wallet-refresh-bar 1.2s ease-in-out infinite;
}
@keyframes dcm-wallet-refresh-bar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* The hero section needs to be a positioning context so the absolute
   .refresh-bar above pins to its top edge instead of the page. */
.dcm-wallet-host .ph { position: relative; }

/* Dim CTA + tab buttons in the skeleton state — the disabled attribute
   is already on them, but the default visual treatment can make them
   look fully interactive otherwise. */
.dcm-wallet-host .cta-btn:disabled,
.dcm-wallet-host .tb:disabled,
.dcm-wallet-host .tab-refresh:disabled {
    opacity: 0.55;
    cursor: progress;
}

/* Tappable wallet rows that deep-link to their trip (read-only). */
.dcm-wallet-host .is-tappable {
    cursor: pointer;
}
.dcm-wallet-host .is-tappable:active {
    background: rgba(0, 0, 0, 0.04);
}