/* XPayr public money-movement preview surfaces. */
:root {
    --xp-move-cyan: #0ea5e9;
    --xp-move-green: #10b981;
    --xp-move-amber: #f59e0b;
    --xp-move-blue: #2563eb;
    --xp-move-ink: #101828;
    --xp-move-muted: #667085;
    --xp-move-surface: #ffffff;
    --xp-move-soft: #f7f9fc;
    --xp-move-line: #dfe5ec;
    --xp-move-shadow: 0 18px 45px rgba(16, 24, 40, .08);
}

[data-theme="dark"] {
    --xp-move-ink: #f5f7fb;
    --xp-move-muted: #a6b0c2;
    --xp-move-surface: #10151d;
    --xp-move-soft: #151c26;
    --xp-move-line: #2a3442;
    --xp-move-shadow: 0 22px 55px rgba(0, 0, 0, .28);
}

.nav-item--swap-bridge > .xpayr-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-dark, var(--xp-move-ink));
}

.nav-item--swap-bridge > .xpayr-nav-link::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--xp-move-green);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
    content: "";
    flex: 0 0 auto;
}

.xpayr-nav-status {
    padding: 3px 5px;
    border: 1px solid rgba(14, 165, 233, .28);
    border-radius: 4px;
    background: rgba(14, 165, 233, .08);
    color: var(--xp-move-cyan);
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.xp-move-shell {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    padding: 42px 0 16px;
    color: var(--xp-move-ink);
}

.xp-move-shell *,
.xp-home-move * {
    box-sizing: border-box;
}

.xp-move-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 26px;
    color: var(--xp-move-muted);
    font-size: 13px;
}

.xp-move-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.xp-move-breadcrumb a:hover {
    color: var(--xp-move-cyan);
}

.xp-move-breadcrumb i {
    font-size: 9px;
}

.xp-move-hero,
.xp-move-tool-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .65fr);
    gap: 44px;
    align-items: end;
    padding: 54px;
    border: 1px solid var(--xp-move-line);
    border-radius: 8px;
    background: var(--xp-move-surface);
    box-shadow: var(--xp-move-shadow);
}

.xp-move-hero {
    border-top: 4px solid var(--xp-move-cyan);
}

.xp-move-kicker,
.xp-move-section__head > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--xp-move-cyan);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
}

.xp-move-hero h1,
.xp-move-tool-hero h1 {
    max-width: 820px;
    margin: 15px 0 18px;
    color: var(--xp-move-ink);
    font-size: 62px;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: 0;
}

.xp-move-hero p,
.xp-move-tool-hero p {
    max-width: 780px;
    margin: 0;
    color: var(--xp-move-muted);
    font-size: 18px;
    line-height: 1.75;
}

.xp-move-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.xp-move-btn {
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.xp-move-btn:not(:disabled):hover {
    transform: translateY(-2px);
}

/* The base class needs a colour of its own for the same reason: a button that
   is given no modifier would otherwise fall back to the browser's near-black. */
.xp-move-btn {
    color: var(--xp-move-ink);
}

.xp-move-btn--primary {
    background: var(--xp-move-cyan);
    color: #ffffff;
}

.xp-move-btn--secondary {
    border-color: var(--xp-move-line);
    background: var(--xp-move-surface);
    color: var(--xp-move-ink);
}

.xp-move-btn--secondary:hover {
    border-color: var(--xp-move-cyan);
}

.xp-move-btn--locked {
    width: 100%;
    border-color: var(--xp-move-line);
    background: var(--xp-move-soft);
    color: var(--xp-move-muted);
    cursor: not-allowed;
}

.xp-move-status {
    padding: 24px;
    border: 1px solid var(--xp-move-line);
    border-radius: 6px;
    background: var(--xp-move-soft);
}

.xp-move-status > span,
.xp-move-preview__head > span {
    color: var(--xp-move-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.xp-move-status > strong {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 12px 0 10px;
    color: var(--xp-move-ink);
    font-size: 22px;
}

.xp-move-status > strong i {
    color: var(--xp-move-green);
    font-size: 10px;
}

.xp-move-status p {
    margin: 0;
    color: var(--xp-move-muted);
    font-size: 14px;
    line-height: 1.6;
}

.xp-move-status__checks {
    display: grid;
    gap: 8px;
    margin-top: 20px;
}

.xp-move-status__checks span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--xp-move-ink);
    font-size: 12px;
    font-weight: 700;
}

.xp-move-status__checks i {
    color: var(--xp-move-green);
}

.xp-move-section {
    margin-top: 72px;
}

.xp-move-section__head {
    max-width: 760px;
    margin-bottom: 28px;
}

.xp-move-section__head h2 {
    margin: 9px 0 10px;
    color: var(--xp-move-ink);
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: 0;
}

.xp-move-section__head p,
.xp-move-now p,
.xp-move-gate p,
.xp-move-free-link p {
    margin: 0;
    color: var(--xp-move-muted);
    line-height: 1.7;
}

.xp-move-catalog {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.xp-move-card {
    position: relative;
    min-height: 310px;
    padding: 24px;
    border: 1px solid var(--xp-move-line);
    border-top: 4px solid var(--card-accent, var(--xp-move-cyan));
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    background: var(--xp-move-surface);
    color: var(--xp-move-ink);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.xp-move-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--xp-move-shadow);
}

.xp-move-card--cyan { --card-accent: var(--xp-move-cyan); }
.xp-move-card--green { --card-accent: var(--xp-move-green); }
.xp-move-card--amber { --card-accent: var(--xp-move-amber); }
.xp-move-card--blue { --card-accent: var(--xp-move-blue); }

.xp-move-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--card-accent) 12%, transparent);
    color: var(--card-accent);
    font-size: 18px;
}

.xp-move-badge {
    position: absolute;
    top: 24px;
    inset-inline-end: 22px;
    padding: 5px 7px;
    border: 1px solid var(--xp-move-line);
    border-radius: 4px;
    color: var(--xp-move-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.xp-move-card h3 {
    margin: 28px 0 10px;
    color: var(--xp-move-ink);
    font-size: 22px;
    letter-spacing: 0;
}

.xp-move-card > p {
    margin: 0;
    color: var(--xp-move-muted);
    font-size: 14px;
    line-height: 1.65;
}

.xp-move-card__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: end;
    margin-top: auto;
    padding-top: 24px;
    color: var(--xp-move-muted);
    font-size: 11px;
}

.xp-move-card__footer strong {
    color: var(--card-accent);
    font-size: 18px;
}

.xp-move-now,
.xp-move-gate,
.xp-move-free-link,
.xp-tools-money-link {
    padding: 30px;
    border: 1px solid var(--xp-move-line);
    border-radius: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    background: var(--xp-move-soft);
}

.xp-move-now h2,
.xp-move-gate h2,
.xp-tools-money-link h2 {
    margin: 8px 0 8px;
    color: var(--xp-move-ink);
    letter-spacing: 0;
}

.xp-move-now__links {
    min-width: 310px;
    display: grid;
    gap: 8px;
}

.xp-move-now__links a {
    padding: 12px 14px;
    border: 1px solid var(--xp-move-line);
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--xp-move-surface);
    color: var(--xp-move-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.xp-move-now__links a:hover {
    border-color: var(--xp-move-cyan);
}

.xp-move-tabs {
    margin-bottom: 18px;
    padding: 6px;
    border: 1px solid var(--xp-move-line);
    border-radius: 7px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    background: var(--xp-move-soft);
}

.xp-move-tabs a {
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--xp-move-muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.xp-move-tabs a:hover,
.xp-move-tabs a[aria-current="page"] {
    background: var(--xp-move-surface);
    color: var(--xp-move-cyan);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
}

.xp-move-tool-hero {
    align-items: center;
    padding: 40px 44px;
    border-inline-start: 4px solid var(--xp-move-cyan);
    box-shadow: none;
}

.xp-move-tool-hero h1 {
    font-size: 52px;
}

.xp-move-tool-hero__fee {
    min-width: 210px;
    padding: 22px;
    border: 1px solid var(--xp-move-line);
    border-radius: 6px;
    background: var(--xp-move-soft);
}

.xp-move-tool-hero__fee span,
.xp-move-tool-hero__fee small {
    display: block;
    color: var(--xp-move-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.xp-move-tool-hero__fee strong {
    display: block;
    margin: 7px 0;
    color: var(--xp-move-cyan);
    font-size: 38px;
}

.xp-move-composer {
    display: grid;
    grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
    gap: 18px;
    margin-top: 18px;
}

.xp-move-form,
.xp-move-preview {
    padding: 28px;
    border: 1px solid var(--xp-move-line);
    border-radius: 8px;
    background: var(--xp-move-surface);
}

.xp-move-form__head h2 {
    margin: 0 0 8px;
    color: var(--xp-move-ink);
    font-size: 22px;
}

.xp-move-form__head p {
    margin: 0 0 22px;
    color: var(--xp-move-muted);
    font-size: 13px;
    line-height: 1.6;
}

.xp-move-form label {
    display: grid;
    gap: 7px;
    margin-bottom: 15px;
}

.xp-move-form label > span {
    color: var(--xp-move-ink);
    font-size: 12px;
    font-weight: 750;
}

.xp-move-form input,
.xp-move-form select {
    width: 100%;
    min-height: 47px;
    padding: 0 13px;
    border: 1px solid var(--xp-move-line);
    border-radius: 5px;
    outline: none;
    background: var(--xp-move-soft);
    color: var(--xp-move-ink);
    font: inherit;
}

.xp-move-form input:focus,
.xp-move-form select:focus {
    border-color: var(--xp-move-cyan);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .12);
}

.xp-move-form__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.xp-move-preview {
    background: var(--xp-move-soft);
}

.xp-move-preview__head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.xp-move-preview__head strong,
.xp-move-locked {
    color: var(--xp-move-amber);
}

.xp-route-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(110px, .7fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 24px 0;
}

.xp-route-rail > div {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--xp-move-line);
    border-radius: 6px;
    background: var(--xp-move-surface);
}

.xp-route-rail > span {
    color: var(--xp-move-muted);
}

.xp-route-rail small,
.xp-route-rail strong {
    display: block;
    overflow-wrap: anywhere;
}

.xp-route-rail small {
    margin-bottom: 5px;
    color: var(--xp-move-muted);
    font-size: 10px;
}

.xp-route-rail strong {
    color: var(--xp-move-ink);
    font-size: 14px;
}

.xp-route-rail__fee {
    border-color: rgba(14, 165, 233, .3) !important;
}

.xp-route-rail__fee strong {
    color: var(--xp-move-cyan);
}

.xp-move-breakdown {
    margin: 0;
    border-top: 1px solid var(--xp-move-line);
}

.xp-move-breakdown > div {
    padding: 13px 0;
    border-bottom: 1px solid var(--xp-move-line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
    gap: 18px;
    align-items: start;
}

.xp-move-breakdown dt {
    color: var(--xp-move-muted);
    font-size: 12px;
}

.xp-move-breakdown dd {
    margin: 0;
    color: var(--xp-move-ink);
    font-size: 12px;
    font-weight: 750;
    text-align: end;
}

.xp-move-callout {
    margin: 18px 0 8px;
    padding: 13px;
    border-inline-start: 3px solid var(--xp-move-green);
    background: color-mix(in srgb, var(--xp-move-green) 8%, transparent);
    color: var(--xp-move-ink);
    font-size: 12px;
    line-height: 1.6;
}

.xp-move-callout i {
    margin-inline-end: 7px;
    color: var(--xp-move-green);
}

.xp-move-caption,
.xp-move-trademark {
    color: var(--xp-move-muted);
    font-size: 11px;
    line-height: 1.6;
}

.xp-move-principles,
.xp-move-faq {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.xp-move-principles article,
.xp-move-faq article {
    padding: 24px;
    border: 1px solid var(--xp-move-line);
    border-radius: 7px;
    background: var(--xp-move-surface);
}

.xp-move-principles article > i {
    color: var(--xp-move-cyan);
    font-size: 20px;
}

.xp-move-principles h3,
.xp-move-faq h3 {
    margin: 17px 0 8px;
    color: var(--xp-move-ink);
    font-size: 17px;
    letter-spacing: 0;
}

.xp-move-principles p,
.xp-move-faq p {
    margin: 0;
    color: var(--xp-move-muted);
    font-size: 13px;
    line-height: 1.7;
}

.xp-move-gate {
    border-inline-start: 4px solid var(--xp-move-amber);
}

.xp-move-free-link strong {
    color: var(--xp-move-ink);
    font-size: 19px;
}

.xp-move-trademark {
    margin: 28px 0 0;
    text-align: center;
}

.xp-move-empty {
    min-height: 50vh;
    display: grid;
    place-content: center;
    text-align: center;
}

.xp-tools-money-link {
    margin-top: 42px;
    border-inline-start: 4px solid var(--xp-move-green);
    background: var(--xp-move-soft);
}

.xp-tools-money-link p {
    max-width: 780px;
    margin: 0;
    color: var(--xp-move-muted);
    line-height: 1.7;
}

.xp-home-move {
    width: min(1240px, calc(100% - 40px));
    margin: 84px auto;
    padding: 36px;
    border: 1px solid var(--xp-move-line);
    border-inline-start: 4px solid var(--xp-move-green);
    border-radius: 8px;
    background: var(--xp-move-surface);
    color: var(--xp-move-ink);
}

.xp-home-move__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: end;
}

.xp-home-move__head h2 {
    max-width: 780px;
    margin: 10px 0 9px;
    color: var(--xp-move-ink);
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: 0;
}

.xp-home-move__head p {
    max-width: 820px;
    margin: 0;
    color: var(--xp-move-muted);
    line-height: 1.7;
}

.xp-home-move__actions {
    display: flex;
    gap: 9px;
}

.xp-home-move__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
}

.xp-home-move__grid a {
    min-height: 92px;
    padding: 17px;
    border: 1px solid var(--xp-move-line);
    border-radius: 6px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    background: var(--xp-move-soft);
    color: var(--xp-move-ink);
    text-decoration: none;
}

.xp-home-move__grid a:hover {
    border-color: var(--xp-move-cyan);
}

.xp-home-move__grid i {
    color: var(--xp-move-cyan);
    font-size: 18px;
}

.xp-home-move__grid strong,
.xp-home-move__grid small {
    display: block;
}

.xp-home-move__grid small {
    margin-top: 4px;
    color: var(--xp-move-muted);
    font-size: 10px;
    text-transform: uppercase;
}

html[dir="rtl"] .xp-route-rail > span i,
html[dir="rtl"] .xp-move-card__footer > i,
html[dir="rtl"] .xp-move-breadcrumb i {
    transform: rotate(180deg);
}

@media (max-width: 1080px) {
    .xp-move-catalog,
    .xp-home-move__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xp-route-rail {
        grid-template-columns: 1fr auto 1fr;
    }

    .xp-route-rail__fee {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .xp-route-rail > span:nth-of-type(1) {
        display: none;
    }
}

@media (max-width: 860px) {
    .xp-move-hero,
    .xp-move-tool-hero,
    .xp-move-composer,
    .xp-move-now,
    .xp-move-gate,
    .xp-move-free-link,
    .xp-tools-money-link,
    .xp-home-move__head {
        grid-template-columns: 1fr;
    }

    .xp-move-principles,
    .xp-move-faq {
        grid-template-columns: 1fr;
    }

    .xp-move-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xp-move-now__links {
        min-width: 0;
    }

    .xp-home-move__actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    .nav-links.active {
        justify-content: flex-start;
        align-items: stretch;
        gap: 12px;
        padding: 88px 22px 30px;
        overflow-y: auto;
    }

    .nav-links.active .xpayr-nav-root {
        margin: 0;
    }

    .mobile-menu-toggle.active {
        visibility: hidden;
        pointer-events: none;
    }

    .nav-item--swap-bridge > .xpayr-nav-link {
        justify-content: flex-start;
    }

    .xpayr-nav-status {
        margin-inline-start: auto;
        font-size: 9px;
    }

    .xp-move-shell,
    .xp-home-move {
        width: min(100% - 28px, 1240px);
    }

    .xp-move-shell {
        padding-top: 24px;
    }

    .xp-move-hero,
    .xp-move-tool-hero,
    .xp-home-move {
        padding: 25px;
    }

    .xp-move-hero h1,
    .xp-move-tool-hero h1 {
        font-size: 36px;
    }

    .xp-move-hero p,
    .xp-move-tool-hero p {
        font-size: 15px;
    }

    .xp-move-catalog,
    .xp-home-move__grid,
    .xp-move-form__split {
        grid-template-columns: 1fr;
    }

    .xp-move-card {
        min-height: 250px;
    }

    .xp-move-composer,
    .xp-home-move {
        margin-top: 14px;
    }

    .xp-move-form,
    .xp-move-preview,
    .xp-move-now,
    .xp-move-gate,
    .xp-move-free-link,
    .xp-tools-money-link {
        padding: 21px;
    }

    .xp-route-rail {
        grid-template-columns: 1fr;
    }

    .xp-route-rail > span {
        display: grid !important;
        place-items: center;
        transform: rotate(90deg);
    }

    html[dir="rtl"] .xp-route-rail > span i {
        transform: none;
    }

    .xp-route-rail__fee {
        grid-column: auto;
        grid-row: auto;
    }

    .xp-move-breakdown > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .xp-move-breakdown dd {
        text-align: start;
    }

    .xp-move-section {
        margin-top: 50px;
    }
}

@media (max-width: 440px) {
    .xp-move-tabs {
        grid-template-columns: 1fr;
    }

    .xp-move-actions,
    .xp-home-move__actions {
        display: grid;
    }

    .xp-move-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xp-move-card,
    .xp-move-btn {
        transition: none;
    }
}

/* ── Money Tools: the live, wallet-signed composer ───────────────────────
   Added when /swap, /usdc-bridge and /unified-usdc stopped being previews.
   Reuses the xp-move design tokens so the live controls sit inside the same
   card as the route breakdown rather than looking bolted on. */

.mt-wallet-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.mt-wallet {
    font-size: 13px;
    font-weight: 700;
    color: var(--xp-move-muted);
    padding: 6px 12px;
    border: 1px dashed var(--xp-move-line);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.mt-wallet.is-connected {
    color: var(--xp-move-ink);
    border-style: solid;
    border-color: var(--xp-move-green);
}

.mt-operations {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mt-op {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 6px;
    border: 1px solid var(--xp-move-line);
    background: transparent;
    color: var(--xp-move-muted);
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.mt-op.is-active {
    border-color: var(--xp-move-cyan);
    color: var(--xp-move-ink);
}

/* Feedback sits directly under the button that caused it, so a wallet
   rejection or a network switch is read where the visitor is already looking. */
.mt-status {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid var(--xp-move-line);
    background: var(--xp-move-soft);
    color: var(--xp-move-ink);
}

.mt-status--error {
    border-color: var(--xp-move-amber);
}

.mt-status--ok {
    border-color: var(--xp-move-green);
}

.mt-quote {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--xp-move-line);
    font-size: 12px;
    line-height: 1.7;
    color: var(--xp-move-muted);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.mt-result {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--xp-move-green);
    border-radius: 8px;
    background: var(--xp-move-soft);
}

.mt-result h3 {
    margin: 0 0 6px;
    font-size: 15px;
}

.mt-result p {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--xp-move-muted);
}

.mt-tx-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.mt-tx-list a {
    font-weight: 700;
}

.xp-move-shell.is-busy .mt-form {
    opacity: .65;
    pointer-events: none;
}

.mt-twostep {
    display: grid;
    gap: 20px;
}

.mt-twostep__links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .mt-wallet-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Money Tools, second pass: connected wallet, balances, route ─────────
   The first pass relied on the `hidden` attribute to show and hide fields.
   That attribute only sets `display: none` at the very lowest specificity, so
   the theme's own `label { display: … }` beat it and the bridge page rendered
   an empty "You receive" box. Everything toggled by script now also gets an
   inline style, and this rule closes the gap for anything that does not. */

.xp-move-shell [hidden] {
    display: none !important;
}

.mt-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    color: var(--xp-move-cyan);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mt-linkbtn:hover {
    opacity: .75;
}

/* Connected wallet ---------------------------------------------------- */

.mt-wallet-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 1 1 260px;
    min-height: 48px;
    padding: 8px 14px;
    border: 1px solid var(--xp-move-line);
    border-radius: 8px;
    background: var(--xp-move-soft);
}

.mt-wallet__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mt-wallet__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--xp-move-green);
    flex: 0 0 auto;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--xp-move-green) 22%, transparent);
}

.mt-wallet__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mt-wallet__text strong {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

.mt-wallet__text small {
    font-size: 11.5px;
    color: var(--xp-move-muted);
}

/* Balances ------------------------------------------------------------ */

.mt-balances {
    margin: 4px 0 2px;
    padding: 14px;
    border: 1px solid var(--xp-move-line);
    border-radius: 10px;
    background: var(--xp-move-surface);
}

.mt-balances__head h3 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--xp-move-muted);
}

.mt-balances__note {
    margin: 0;
    font-size: 13px;
    color: var(--xp-move-muted);
}

.mt-balances__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 8px;
}

/* Each balance is a button: tapping one is the fastest way to say
   "move this".
   
   `color` is set explicitly, and that is the whole point of this comment. A
   button does not inherit colour from its parent — the browser applies its own
   `buttontext`, which is near-black. In light mode that happened to look
   correct, so nothing looked wrong; in dark mode it rendered the chain name and
   the amount in black on a near-black panel. The bug also hid from every check
   because these buttons do not exist until a wallet connects. */
.mt-balance {
    color: var(--xp-move-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--xp-move-line);
    border-radius: 8px;
    background: var(--xp-move-soft);
    cursor: pointer;
    text-align: left;
    transition: border-color .16s ease, transform .16s ease;
}

.mt-balance:hover {
    border-color: var(--xp-move-cyan);
    transform: translateY(-1px);
}

.mt-balance.is-selected {
    border-color: var(--xp-move-cyan);
    box-shadow: inset 0 0 0 1px var(--xp-move-cyan);
}

.mt-balance__where {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mt-balance__where strong {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-balance__where small {
    font-size: 11px;
    color: var(--xp-move-muted);
    letter-spacing: .04em;
}

.mt-balance__amount {
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

.mt-amount > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.mt-available {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--xp-move-muted);
    font-variant-numeric: tabular-nums;
}

.mt-shortfall {
    margin: 0;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--xp-move-amber);
    background: var(--xp-move-soft);
    font-size: 12.5px;
}

/* Route summary ------------------------------------------------------- */

.mt-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    padding: 14px;
    border-radius: 10px;
    background: var(--xp-move-soft);
}

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

.mt-route__end small {
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--xp-move-muted);
}

.mt-route__end strong {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-route__arrow {
    color: var(--xp-move-cyan);
}

/* Quote badge --------------------------------------------------------- */

.mt-quote {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.mt-quote__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--xp-move-green) 16%, transparent);
    color: var(--xp-move-ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 560px) {
    .mt-route {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .mt-route__arrow {
        transform: rotate(90deg);
    }
}

/* ── Money Tools, alignment pass ─────────────────────────────────────────
   The Max link made the "Amount" label two lines tall while "You send" stayed
   one, so the two fields in the pair no longer lined up. Giving every label
   header the same height fixes the pair without hard-coding either side. */

.mt-form .xp-move-form__split {
    align-items: start;
}

.mt-form label > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-height: 18px;
}

/* A long value in the breakdown ("Circle protocol costs and network gas …")
   was pushing its own label off the row. Let it wrap under, right-aligned. */
.xp-move-breakdown > div {
    align-items: baseline;
    gap: 16px;
}

.xp-move-breakdown dd {
    text-align: right;
    max-width: 62%;
}

.mt-balances + .xp-move-form__split {
    margin-top: 4px;
}

/* Standing ERC-20 allowance, and the way out of it. */
.mt-allowance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--xp-move-amber);
    border-radius: 8px;
    background: var(--xp-move-soft);
}
.mt-allowance__text { display: flex; flex-direction: column; min-width: 0; }
.mt-allowance__text strong { font-size: 13px; }
.mt-allowance__text small { font-size: 11.5px; color: var(--xp-move-muted); font-variant-numeric: tabular-nums; }
.mt-allowance { flex-direction: column; align-items: stretch; gap: 8px; }
.mt-allowance__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mt-pending { border-color: var(--xp-move-cyan); display: flex; flex-direction: column; gap: 8px; }
.mt-pending h3 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--xp-move-muted); }

/* What each tool does, the two confirmations, and how delivery works. Added
   after the pages shipped with no explanation at all — "Deposit" and "Spend"
   were two unlabelled buttons on a page about somebody's money. */
.mt-about {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.mt-about h2 { margin: 0 0 8px; font-size: 20px; }
.mt-about h3 { margin: 0 0 8px; font-size: 15px; }
.mt-about p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--xp-move-muted); }
.mt-about__tokens {
    margin-top: 12px !important;
    font-size: 12.5px !important;
    letter-spacing: .01em;
}
.mt-about__tokens strong { color: var(--xp-move-ink); }
.mt-about__tokens span { opacity: .7; }
@media (max-width: 900px) {
    .mt-about { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Money Tools: breathing room ─────────────────────────────────────────
   The live composer stacks five blocks that all arrived separately — wallet,
   balances, allowances, the operation switch, the fields — and none of them
   had a margin, so they read as one undifferentiated slab. Each is its own
   step in the same decision, and the spacing should say so. */

.mt-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* The form's own children already carry a bottom margin from the theme; inside
   a flex column that doubles up. Let the gap do the work. */
.mt-form > label,
.mt-form > .xp-move-form__split {
    margin-bottom: 0;
}

.mt-form label {
    margin-bottom: 0;
}

.mt-wallet-row {
    margin-bottom: 0;
}

/* Deposit and Spend are two different operations, not two view tabs, so the
   switch gets a label like every other field on the form. */
.mt-operations-field {
    display: grid;
    gap: 8px;
}

.mt-operations-field__label {
    color: var(--xp-move-ink);
    font-size: 12px;
    font-weight: 750;
}

.mt-operations {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--xp-move-line);
    border-radius: 8px;
    background: var(--xp-move-soft);
    width: fit-content;
}

.mt-op {
    min-height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--xp-move-muted);
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.mt-op:hover {
    color: var(--xp-move-ink);
}

.mt-op.is-active {
    background: var(--xp-move-surface);
    color: var(--xp-move-ink);
    box-shadow: 0 1px 3px var(--xp-move-shadow);
}

/* The amount and its "Max" link were fighting for the same line as the label
   of the field beside them. */
.mt-amount > span {
    gap: 14px;
}

.mt-available {
    margin-top: 0;
}

.mt-shortfall {
    margin-top: -6px;
}

/* ── what the route costs ─────────────────────────────────────────────────
   Presented as a running list ending in the arrival, so the eye travels from
   what is charged to what is left. The arrival is the only line given weight:
   it is the number the visitor is actually deciding about. */
.mt-costs {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.mt-costs li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.86rem;
    color: var(--xp-move-muted);
}

.mt-costs__value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mt-costs__sub {
    display: block;
    font-size: 0.78rem;
    opacity: 0.75;
    margin: -2px 0 2px;
}

.mt-costs__total {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--xp-move-line);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--xp-move-ink);
}

.mt-costs__note {
    margin: 10px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--xp-move-muted);
}

/* The review step puts two buttons side by side; on a narrow screen they
   stack rather than shrinking the confirm target. */
.mt-cancel {
    margin-left: 8px;
}

@media (max-width: 480px) {
    .mt-cancel {
        margin: 8px 0 0;
        width: 100%;
    }
}

/* A figure broke onto two lines as "≈ 0.435081" / "USDC", which reads as two
   numbers for a moment. The amount column takes what it needs and the label
   gives way instead. */
.xp-move-breakdown > div {
    grid-template-columns: minmax(0, 1fr) max-content;
}

.xp-move-breakdown dd {
    white-space: nowrap;
}

.xp-move-breakdown > div[data-mt-provider-note] dd {
    white-space: normal;
}