:root {
    --v2-accent: var(--orange, #f7931a);
    --v2-accent-hover: #ff9f33;
    --v2-accent-soft: rgba(247, 147, 26, 0.11);

    --v2-bg: #080a0e;
    --v2-bg-deep: #05070a;

    --v2-card: #0d1015;
    --v2-card-2: #11151b;
    --v2-field: #090c10;

    --v2-border: rgba(255, 255, 255, 0.085);
    --v2-border-strong: rgba(255, 255, 255, 0.14);

    --v2-text: #f6f7f9;
    --v2-muted: #9299a5;
    --v2-muted-2: #69717e;

    --v2-green: #43d17a;

    --v2-radius-xl: 26px;
    --v2-radius-lg: 20px;
    --v2-radius-md: 15px;

    --v2-shadow:
        0 28px 80px rgba(0, 0, 0, 0.36);
}


/* ======================================================
   GLOBAL V2 FOUNDATION
   ====================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(247, 147, 26, 0.09),
            transparent 34%
        ),
        var(--v2-bg);

    color: var(--v2-text);
}

.site-backdrop {
    opacity: 0.45;
}

.backdrop-grid,
.backdrop-orbit {
    display: none;
}

.site-shell {
    width: min(1180px, calc(100% - 36px));
    max-width: 1180px;
    margin: 0 auto;
}


/* ======================================================
   HEADER
   ====================================================== */

.v2-header {
    position: relative;
    z-index: 40;

    min-height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 0;

    border-bottom:
        1px solid var(--v2-border);

    background: transparent;
}

.v2-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--v2-text);
    text-decoration: none;

    font-weight: 800;
    letter-spacing: -0.03em;
}

.v2-brand-symbol {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    position: relative;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            var(--v2-accent),
            #dc7210
        );

    color: #090909;

    box-shadow:
        0 8px 28px rgba(247, 147, 26, 0.19);
}

.v2-brand-symbol::after {
    display: none;
}

.v2-brand-symbol span {
    position: relative;
    z-index: 2;

    color: #090909;

    font-size: 18px;
    font-weight: 900;
}

.v2-brand-symbol.small {
    width: 32px;
    height: 32px;

    border-radius: 10px;
}

.v2-brand-name {
    font-size: 19px;
}

.v2-brand-name > span {
    color: var(--v2-accent);
}

.v2-desktop-navigation {
    display: flex;
    align-items: center;
    gap: 30px;
}

.v2-desktop-navigation > a {
    color: #aeb4bd;
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition:
        color 160ms ease,
        transform 160ms ease;
}

.v2-desktop-navigation > a:hover {
    color: #fff;
}

.v2-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 12px;

    border:
        1px solid rgba(67, 209, 122, 0.17);

    border-radius: 999px;

    background:
        rgba(67, 209, 122, 0.055);

    color: #b8eecb;

    font-size: 12px;
    font-weight: 700;
}

.system-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--v2-green);

    box-shadow:
        0 0 0 4px rgba(67, 209, 122, 0.10);
}

.v2-mobile-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ======================================================
   HERO
   ====================================================== */

.v2-home {
    width: 100%;
}

.v2-hero {
    min-height: 710px;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        86px 0
        72px;
}

.v2-hero-copy {
    max-width: 770px;

    margin: 0 auto 38px;

    text-align: center;
}

.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 19px;

    padding: 8px 12px;

    border:
        1px solid rgba(247, 147, 26, 0.15);

    border-radius: 999px;

    background:
        rgba(247, 147, 26, 0.055);

    color: #d7dbe1;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.04em;
}

.v2-eyebrow-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--v2-accent);

    box-shadow:
        0 0 16px rgba(247, 147, 26, 0.6);
}

.v2-hero h1 {
    max-width: 760px;

    margin:
        0 auto
        18px;

    color: var(--v2-text);

    font-size:
        clamp(42px, 6.3vw, 72px);

    line-height: 0.99;
    letter-spacing: -0.062em;
    font-weight: 800;
}

.v2-hero h1 span {
    display: block;

    margin-top: 8px;

    color: var(--v2-accent);
}

.v2-hero-description {
    max-width: 620px;

    margin: 0 auto;

    color: var(--v2-muted);

    font-size:
        clamp(15px, 2vw, 18px);

    line-height: 1.7;
}


/* ======================================================
   SWAP CARD
   ====================================================== */

.v2-swap-card {
    width: min(100%, 570px);

    padding: 22px;

    border:
        1px solid var(--v2-border-strong);

    border-radius: var(--v2-radius-xl);

    background:
        linear-gradient(
            160deg,
            rgba(17, 21, 27, 0.98),
            rgba(10, 13, 18, 0.99)
        );

    box-shadow: var(--v2-shadow);

    position: relative;

    overflow: hidden;
}

.v2-swap-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 12%;
    right: 12%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(247, 147, 26, 0.55),
            transparent
        );
}

.v2-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 17px;
}

.v2-card-top > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.v2-card-label {
    color: var(--v2-muted-2);

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.v2-card-top strong {
    color: #f8f9fa;

    font-size: 17px;
}

.v2-route-live {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #8fd9a9;

    font-size: 12px;
    font-weight: 700;
}

.v2-route-live > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--v2-green);

    box-shadow:
        0 0 0 4px rgba(67, 209, 122, 0.09);
}


/* direction */

.v2-direction-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 4px;

    margin-bottom: 13px;
    padding: 4px;

    border:
        1px solid var(--v2-border);

    border-radius: 13px;

    background: #080b0f;
}

.v2-direction-button {
    min-height: 42px;

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: var(--v2-muted);

    cursor: pointer;

    font: inherit;
    font-size: 13px;
    font-weight: 750;

    transition:
        background 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

.v2-direction-button:hover {
    color: #fff;
}

.v2-direction-button.active {
    background: #171b21;
    color: #fff;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.06);
}


/* asset fields */

.v2-swap-field {
    padding:
        16px
        17px
        17px;

    border:
        1px solid var(--v2-border);

    border-radius: var(--v2-radius-md);

    background: var(--v2-field);

    transition:
        border-color 160ms ease,
        background 160ms ease;
}

.v2-swap-field:focus-within {
    border-color:
        rgba(247, 147, 26, 0.34);

    background: #0b0e13;
}

.v2-field-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 10px;
}

.v2-field-heading span {
    color: #8e96a2;

    font-size: 12px;
    font-weight: 700;
}

.v2-field-heading small {
    color: #666e7a;

    font-size: 11px;
}

.v2-amount-line {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.v2-amount-line input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    padding: 0;

    background: transparent;
    color: #fff;

    font: inherit;
    font-size:
        clamp(26px, 5vw, 34px);

    font-weight: 650;
    letter-spacing: -0.04em;
}

.v2-amount-line input::placeholder {
    color: #434a54;
}

.v2-amount-line input::-webkit-outer-spin-button,
.v2-amount-line input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.v2-asset-pill {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 9px;

    min-width: 116px;

    padding:
        8px
        10px;

    border:
        1px solid var(--v2-border);

    border-radius: 12px;

    background: #12161c;
}

.v2-asset-pill > div {
    display: flex;
    flex-direction: column;

    gap: 1px;
}

.v2-asset-pill strong {
    color: #fff;

    font-size: 13px;
}

.v2-asset-pill small {
    color: #737b87;

    font-size: 10px;
}

.v2-coin {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-size: 16px;
    font-weight: 900;
}

.v2-coin-btc {
    background: #f7931a;
    color: #fff;
}

.v2-coin-xmr {
    background:
        linear-gradient(
            to bottom,
            #ff6600 0 50%,
            #4c4c4c 50% 100%
        );

    color: #fff;
}


/* bridge */

.v2-switch-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: 11px;

    height: 42px;

    margin:
        -1px 0;
}

.v2-switch-row > span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.07)
        );
}

.v2-switch-row > span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.07),
            transparent
        );
}

.v2-switch-button {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border:
        1px solid var(--v2-border-strong);

    border-radius: 12px;

    background: #15191f;
    color: var(--v2-accent);

    cursor: pointer;

    font-size: 20px;
    font-weight: 700;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease;
}

.v2-switch-button:hover {
    transform: rotate(180deg);

    border-color:
        rgba(247, 147, 26, 0.34);

    background: #191e25;
}


/* receive */

.v2-receive-field {
    margin-bottom: 14px;
}

.v2-estimate-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.v2-estimate-copy strong {
    color: #d9dde3;

    font-size: 21px;
    letter-spacing: -0.03em;
}

.v2-estimate-copy small {
    color: #69717c;

    font-size: 11px;
}


/* quote info */

.v2-quote-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 1px;

    margin: 4px 0 17px;

    overflow: hidden;

    border:
        1px solid var(--v2-border);

    border-radius: 13px;

    background: var(--v2-border);
}

.v2-quote-info > div {
    min-width: 0;

    padding:
        11px
        12px;

    background: #0b0e13;
}

.v2-quote-info span,
.v2-quote-info strong {
    display: block;
}

.v2-quote-info span {
    margin-bottom: 3px;

    color: #646c78;

    font-size: 10px;
}

.v2-quote-info strong {
    overflow: hidden;

    color: #b9c0c9;

    font-size: 11px;
    font-weight: 650;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* primary action */

.v2-primary-button {
    width: 100%;
    min-height: 53px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    border: 0;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--v2-accent),
            #eb8118
        );

    color: #111;

    cursor: pointer;

    text-decoration: none;

    font: inherit;
    font-size: 14px;
    font-weight: 850;

    box-shadow:
        0 13px 32px
        rgba(247, 147, 26, 0.15);

    transition:
        transform 160ms ease,
        filter 160ms ease,
        box-shadow 160ms ease;
}

.v2-primary-button:hover {
    transform: translateY(-1px);

    filter: brightness(1.06);

    box-shadow:
        0 16px 38px
        rgba(247, 147, 26, 0.20);
}

.v2-button-arrow {
    font-size: 18px;
}

.v2-track-link {
    display: block;

    margin-top: 14px;

    color: #747c87;

    text-align: center;
    text-decoration: none;

    font-size: 11px;
}

.v2-track-link strong {
    color: #b1b7c0;

    font-weight: 700;
}

.v2-track-link:hover strong {
    color: var(--v2-accent);
}


/* ======================================================
   TRUST STRIP
   ====================================================== */

.v2-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top:
        1px solid var(--v2-border);

    border-bottom:
        1px solid var(--v2-border);
}

.v2-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;

    padding:
        24px
        18px;

    border-right:
        1px solid var(--v2-border);
}

.v2-trust-item:first-child {
    padding-left: 0;
}

.v2-trust-item:last-child {
    border-right: 0;
}

.v2-trust-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(247, 147, 26, 0.15);

    border-radius: 10px;

    background: var(--v2-accent-soft);
    color: var(--v2-accent);

    font-size: 10px;
    font-weight: 850;
}

.v2-trust-item > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.v2-trust-item strong {
    color: #e5e8ec;

    font-size: 13px;
}

.v2-trust-item small {
    overflow: hidden;

    color: #69717d;

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ======================================================
   SECTIONS
   ====================================================== */

.v2-section {
    padding:
        112px 0
        24px;
}

.v2-section-heading {
    max-width: 660px;

    margin-bottom: 48px;
}

.v2-section-heading > span {
    display: block;

    margin-bottom: 13px;

    color: var(--v2-accent);

    font-size: 11px;
    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.v2-section-heading h2 {
    margin:
        0 0
        15px;

    color: var(--v2-text);

    font-size:
        clamp(31px, 4vw, 46px);

    line-height: 1.08;
    letter-spacing: -0.045em;
}

.v2-section-heading p {
    margin: 0;

    color: var(--v2-muted);

    font-size: 15px;
    line-height: 1.7;
}


/* ======================================================
   HOW IT WORKS
   ====================================================== */

.v2-steps {
    display: grid;
    grid-template-columns:
        1fr
        70px
        1fr
        70px
        1fr;

    align-items: start;
}

.v2-step {
    min-width: 0;
}

.v2-step-number {
    width: 41px;
    height: 41px;

    display: grid;
    place-items: center;

    margin-bottom: 21px;

    border:
        1px solid rgba(247, 147, 26, 0.18);

    border-radius: 12px;

    background: var(--v2-accent-soft);
    color: var(--v2-accent);

    font-size: 11px;
    font-weight: 850;
}

.v2-step-content h3 {
    margin:
        0 0
        9px;

    color: #f1f3f5;

    font-size: 17px;
    letter-spacing: -0.02em;
}

.v2-step-content p {
    margin: 0;

    color: #79818d;

    font-size: 13px;
    line-height: 1.7;
}

.v2-step-line {
    height: 1px;

    margin:
        20px
        15px 0;

    background:
        linear-gradient(
            90deg,
            rgba(247, 147, 26, 0.18),
            rgba(255, 255, 255, 0.08),
            rgba(247, 147, 26, 0.18)
        );
}


/* ======================================================
   FEATURES
   ====================================================== */

.v2-feature-grid {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);

    gap: 14px;
}

.v2-feature-card {
    min-height: 190px;

    padding: 27px;

    border:
        1px solid var(--v2-border);

    border-radius:
        var(--v2-radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(16, 20, 26, 0.9),
            rgba(10, 13, 17, 0.82)
        );

    transition:
        border-color 180ms ease,
        transform 180ms ease;
}

.v2-feature-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(247, 147, 26, 0.19);
}

.v2-feature-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    margin-bottom: 28px;

    border:
        1px solid rgba(247, 147, 26, 0.14);

    border-radius: 11px;

    background: var(--v2-accent-soft);
    color: var(--v2-accent);

    font-size: 17px;
    font-weight: 800;
}

.v2-feature-card h3 {
    margin:
        0 0
        8px;

    color: #f1f3f5;

    font-size: 17px;
}

.v2-feature-card p {
    max-width: 430px;

    margin: 0;

    color: #78808c;

    font-size: 13px;
    line-height: 1.65;
}


/* ======================================================
   BOTTOM CTA
   ====================================================== */

.v2-bottom-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin:
        110px 0
        70px;

    padding:
        39px
        42px;

    border:
        1px solid rgba(247, 147, 26, 0.16);

    border-radius:
        var(--v2-radius-xl);

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(247, 147, 26, 0.11),
            transparent 35%
        ),
        #0c0f14;
}

.v2-bottom-cta h2 {
    margin:
        7px 0
        5px;

    color: #fff;

    font-size: 28px;
    letter-spacing: -0.04em;
}

.v2-bottom-cta p {
    margin: 0;

    color: #767e89;

    font-size: 13px;
}

.v2-cta-button {
    width: auto;
    min-width: 175px;

    padding:
        0 22px;
}


/* ======================================================
   FOOTER
   ====================================================== */

.v2-footer {
    display: block;

    padding:
        48px 0
        26px;

    border-top:
        1px solid var(--v2-border);

    background: transparent;
}

.v2-footer-main {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        150px
        150px;

    gap: 70px;

    padding-bottom: 42px;
}

.v2-footer-brand p {
    max-width: 330px;

    margin:
        18px 0
        0;

    color: #686f7a;

    font-size: 12px;
    line-height: 1.65;
}

.v2-footer-column {
    display: flex;
    flex-direction: column;

    gap: 11px;
}

.v2-footer-column > strong {
    margin-bottom: 4px;

    color: #e1e4e8;

    font-size: 12px;
}

.v2-footer-column > a {
    color: #737b86;

    text-decoration: none;

    font-size: 12px;
}

.v2-footer-column > a:hover {
    color: var(--v2-accent);
}

.v2-footer-bottom {
    min-height: 55px;

    display: grid;
    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 30px;

    padding-top: 20px;

    border-top:
        1px solid var(--v2-border);

    color: #5e6671;

    font-size: 10px;
}

.v2-footer-bottom p {
    margin: 0;

    text-align: center;
}

.v2-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 900px) {

    .v2-desktop-navigation {
        display: none;
    }

    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 13px;
    }

    .mobile-menu-button {
        display: grid;
        place-items: center;

        width: 39px;
        height: 39px;

        border:
            1px solid var(--v2-border);

        border-radius: 11px;

        background: #10141a;
        color: #fff;

        font-size: 18px;
    }

    .v2-mobile-menu {
        top: 68px;

        border:
            1px solid var(--v2-border);

        border-radius: 16px;

        background: #0d1116;

        box-shadow:
            0 24px 60px rgba(0, 0, 0, 0.45);
    }

    .v2-trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-trust-item:nth-child(2) {
        border-right: 0;
    }

    .v2-trust-item:nth-child(-n + 2) {
        border-bottom:
            1px solid var(--v2-border);
    }

    .v2-trust-item:first-child {
        padding-left: 18px;
    }

    .v2-steps {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .v2-step-line {
        display: none;
    }

}


@media (max-width: 650px) {

    .site-shell {
        width:
            min(100% - 24px, 1180px);
    }

    .v2-header {
        min-height: 68px;
    }

    .v2-brand-symbol {
        width: 33px;
        height: 33px;
    }

    .v2-brand-name {
        font-size: 17px;
    }

    .v2-hero {
        min-height: auto;

        padding:
            60px 0
            55px;
    }

    .v2-hero-copy {
        margin-bottom: 29px;
    }

    .v2-eyebrow {
        margin-bottom: 16px;
    }

    .v2-hero h1 {
        font-size:
            clamp(37px, 12vw, 54px);
    }

    .v2-hero-description {
        max-width: 420px;

        font-size: 14px;
    }

    .v2-swap-card {
        padding: 14px;

        border-radius: 21px;
    }

    .v2-card-top {
        padding:
            3px
            3px
            0;
    }

    .v2-amount-line {
        gap: 9px;
    }

    .v2-amount-line input {
        font-size: 27px;
    }

    .v2-asset-pill {
        min-width: 104px;

        padding:
            7px
            8px;
    }

    .v2-asset-pill small {
        display: none;
    }

    .v2-quote-info {
        grid-template-columns: 1fr;
    }

    .v2-quote-info > div {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 18px;
    }

    .v2-quote-info span {
        margin: 0;
    }

    .v2-trust-strip {
        grid-template-columns: 1fr;
    }

    .v2-trust-item {
        border-right: 0;
        border-bottom:
            1px solid var(--v2-border);
    }

    .v2-trust-item:first-child {
        padding-left: 18px;
    }

    .v2-trust-item:nth-child(2) {
        border-bottom:
            1px solid var(--v2-border);
    }

    .v2-trust-item:last-child {
        border-bottom: 0;
    }

    .v2-section {
        padding-top: 80px;
    }

    .v2-section-heading {
        margin-bottom: 34px;
    }

    .v2-feature-grid {
        grid-template-columns: 1fr;
    }

    .v2-feature-card {
        min-height: 170px;

        padding: 23px;
    }

    .v2-bottom-cta {
        flex-direction: column;
        align-items: flex-start;

        margin:
            80px 0
            55px;

        padding: 28px;
    }

    .v2-cta-button {
        width: 100%;
    }

    .v2-footer-main {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            38px
            24px;
    }

    .v2-footer-brand {
        grid-column:
            1 / -1;
    }

    .v2-footer-bottom {
        grid-template-columns: 1fr;

        gap: 9px;

        text-align: left;
    }

    .v2-footer-bottom p {
        text-align: left;
    }

}

/* ===== MIKASWAP V2 BRAND RESTORE START ===== */

/*
   MikaSwap V2 uses the established MikaSwap palette:
   green = primary product/action color
   orange = secondary brand highlight
*/

:root {
    --v2-green: #39c994;
    --v2-green-light: #65ddb4;
    --v2-green-soft: rgba(32, 139, 106, 0.19);

    --v2-orange: #e58b45;
    --v2-orange-soft: rgba(229, 139, 69, 0.12);

    --v2-accent: #39c994;
    --v2-accent-hover: #65ddb4;
    --v2-accent-soft: rgba(32, 139, 106, 0.19);

    --v2-bg: #0b1118;
    --v2-bg-deep: #091017;

    --v2-card: #131d26;
    --v2-card-2: #1a2630;
    --v2-field: #111b25;

    --v2-border: rgba(168, 190, 201, 0.16);
    --v2-border-strong: rgba(168, 190, 201, 0.23);

    --v2-text: rgba(255, 255, 255, 0.92);
    --v2-muted: rgba(222, 232, 237, 0.68);
    --v2-muted-2: rgba(190, 204, 211, 0.48);

    --v2-shadow:
        0 28px 80px rgba(0, 0, 0, 0.32);
}


/* background — same MikaSwap green/orange atmosphere */

body {
    background:
        radial-gradient(
            circle at 8% 4%,
            rgba(229, 139, 69, 0.075),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 10%,
            rgba(57, 201, 148, 0.095),
            transparent 29%
        ),
        #0b1118 !important;

    color: var(--v2-text);
}


/* ------------------------------------------------------
   ORIGINAL MIKASWAP LOGO PERSONALITY
   ------------------------------------------------------ */

.v2-brand-symbol {
    width: 40px;
    height: 40px;

    overflow: hidden;

    border-radius:
        50% 50% 46% 54%;

    background: #39c994;

    color: white;

    box-shadow:
        0 9px 26px rgba(57, 201, 148, 0.23);
}

.v2-brand-symbol::after {
    content: "";

    display: block;

    position: absolute;

    right: -8px;
    bottom: -8px;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background: #e58b45;
}

.v2-brand-symbol span {
    position: relative;
    z-index: 2;

    color: white;

    font-size: 17px;
    font-weight: 900;
}

.v2-brand-symbol.small {
    width: 34px;
    height: 34px;
}

.v2-brand-name > span {
    color: #e58b45;
}


/* ------------------------------------------------------
   HEADER
   ------------------------------------------------------ */

.v2-header {
    border-bottom:
        1px solid rgba(168, 190, 201, 0.14);
}

.v2-desktop-navigation > a {
    color: rgba(222, 232, 237, 0.70);
}

.v2-desktop-navigation > a:hover {
    color: #65ddb4;
}

.v2-status-chip {
    border-color:
        rgba(57, 201, 148, 0.27);

    background:
        rgba(32, 139, 106, 0.17);

    color: #8be8cf;
}


/* ------------------------------------------------------
   HERO
   ------------------------------------------------------ */

.v2-eyebrow {
    border-color:
        rgba(57, 201, 148, 0.22);

    background:
        rgba(32, 139, 106, 0.10);

    color: rgba(222, 232, 237, 0.80);
}

.v2-eyebrow-dot {
    background: #39c994;

    box-shadow:
        0 0 16px rgba(57, 201, 148, 0.55);
}

/*
   Orange remains the visual brand highlight,
   rather than turning the whole website orange.
*/

.v2-hero h1 span {
    color: #e58b45;
}

.v2-hero-description {
    color: rgba(222, 232, 237, 0.66);
}


/* ------------------------------------------------------
   MAIN SWAP CARD
   ------------------------------------------------------ */

.v2-swap-card {
    border-color:
        rgba(168, 190, 201, 0.19);

    background:
        linear-gradient(
            155deg,
            rgba(26, 38, 48, 0.97),
            rgba(15, 24, 32, 0.99)
        );

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.30);
}

/* subtle orange brand line */

.v2-swap-card::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(229, 139, 69, 0.62),
            transparent
        );
}

.v2-route-live {
    color: #70e1c2;
}

.v2-route-live > span,
.system-status-dot {
    background: #39c994;

    box-shadow:
        0 0 0 4px rgba(57, 201, 148, 0.10),
        0 0 13px rgba(57, 201, 148, 0.35);
}


/* ------------------------------------------------------
   DIRECTION SELECTOR
   ------------------------------------------------------ */

.v2-direction-tabs {
    border-color:
        rgba(168, 190, 201, 0.14);

    background: #0d151e;
}

.v2-direction-button {
    color: rgba(190, 204, 211, 0.62);
}

.v2-direction-button:hover {
    color: #dfe8e5;
}

.v2-direction-button.active {
    border:
        1px solid rgba(57, 201, 148, 0.31);

    background:
        rgba(32, 139, 106, 0.22);

    color: #7be0c2;

    box-shadow:
        none;
}


/* ------------------------------------------------------
   SEND / RECEIVE FIELDS
   ------------------------------------------------------ */

.v2-swap-field {
    border-color:
        rgba(168, 190, 201, 0.16);

    background: #111b25;
}

.v2-swap-field:focus-within {
    border-color:
        rgba(57, 201, 148, 0.45);

    background: #121e28;

    box-shadow:
        0 0 0 3px rgba(57, 201, 148, 0.06);
}

.v2-field-heading span {
    color: rgba(207, 219, 225, 0.68);
}

.v2-field-heading small {
    color: rgba(190, 204, 211, 0.43);
}

.v2-asset-pill {
    border-color:
        rgba(168, 190, 201, 0.16);

    background: #1a2630;
}

.v2-asset-pill small {
    color: rgba(190, 204, 211, 0.50);
}


/* BTC/XMR retain their real asset colors */

.v2-coin-btc {
    background: #f7931a;

    box-shadow:
        0 7px 18px rgba(247, 147, 26, 0.22);
}

.v2-coin-xmr {
    background:
        linear-gradient(
            to bottom,
            #ff6600 0 52%,
            #4c4c4c 52% 100%
        );

    box-shadow:
        0 7px 18px rgba(255, 102, 0, 0.18);
}


/* ------------------------------------------------------
   CENTRAL SWAP BUTTON — MIKA ORANGE
   ------------------------------------------------------ */

.v2-switch-button {
    border-color:
        rgba(229, 139, 69, 0.31);

    background:
        rgba(229, 139, 69, 0.11);

    color: #e58b45;
}

.v2-switch-button:hover {
    border-color:
        rgba(229, 139, 69, 0.52);

    background:
        rgba(229, 139, 69, 0.16);
}


/* ------------------------------------------------------
   QUOTE INFORMATION
   ------------------------------------------------------ */

.v2-quote-info {
    border-color:
        rgba(168, 190, 201, 0.14);

    background:
        rgba(168, 190, 201, 0.12);
}

.v2-quote-info > div {
    background: #111b25;
}

.v2-quote-info span {
    color: rgba(190, 204, 211, 0.46);
}

.v2-quote-info strong {
    color: rgba(235, 241, 244, 0.80);
}


/* ------------------------------------------------------
   PRIMARY ACTION — MIKASWAP GREEN
   ------------------------------------------------------ */

.v2-primary-button {
    background:
        linear-gradient(
            135deg,
            #39c994,
            #2daf83
        );

    color: #07110f;

    box-shadow:
        0 14px 32px rgba(57, 201, 148, 0.18);
}

.v2-primary-button:hover {
    filter: brightness(1.05);

    box-shadow:
        0 17px 38px rgba(57, 201, 148, 0.24);
}

.v2-track-link strong {
    color: rgba(222, 232, 237, 0.76);
}

.v2-track-link:hover strong {
    color: #65ddb4;
}


/* ------------------------------------------------------
   TRUST STRIP
   ------------------------------------------------------ */

.v2-trust-strip {
    border-color:
        rgba(168, 190, 201, 0.14);
}

.v2-trust-item {
    border-color:
        rgba(168, 190, 201, 0.14);
}

.v2-trust-icon {
    border-color:
        rgba(57, 201, 148, 0.20);

    background:
        rgba(32, 139, 106, 0.14);

    color: #65ddb4;
}


/* ------------------------------------------------------
   SECTION HEADINGS
   ------------------------------------------------------ */

.v2-section-heading > span {
    color: #39c994;
}

.v2-section-heading p {
    color: rgba(222, 232, 237, 0.62);
}


/* ------------------------------------------------------
   HOW IT WORKS
   ------------------------------------------------------ */

.v2-step-number {
    border-color:
        rgba(57, 201, 148, 0.22);

    background:
        rgba(32, 139, 106, 0.15);

    color: #65ddb4;
}

.v2-step-line {
    background:
        linear-gradient(
            90deg,
            rgba(57, 201, 148, 0.22),
            rgba(168, 190, 201, 0.12),
            rgba(229, 139, 69, 0.22)
        );
}


/* ------------------------------------------------------
   FEATURE CARDS
   ------------------------------------------------------ */

.v2-feature-card {
    border-color:
        rgba(168, 190, 201, 0.15);

    background:
        linear-gradient(
            145deg,
            rgba(26, 38, 48, 0.88),
            rgba(15, 24, 32, 0.88)
        );
}

.v2-feature-card:hover {
    border-color:
        rgba(57, 201, 148, 0.30);
}

.v2-feature-icon {
    border-color:
        rgba(229, 139, 69, 0.20);

    background:
        rgba(229, 139, 69, 0.10);

    color: #e58b45;
}


/* ------------------------------------------------------
   BOTTOM CTA
   ------------------------------------------------------ */

.v2-bottom-cta {
    border-color:
        rgba(57, 201, 148, 0.20);

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(57, 201, 148, 0.12),
            transparent 38%
        ),
        radial-gradient(
            circle at 5% 100%,
            rgba(229, 139, 69, 0.07),
            transparent 35%
        ),
        #111b25;
}


/* ------------------------------------------------------
   FOOTER
   ------------------------------------------------------ */

.v2-footer,
.v2-footer-bottom {
    border-color:
        rgba(168, 190, 201, 0.13);
}

.v2-footer-column > a:hover {
    color: #65ddb4;
}


/* mobile */

@media (max-width: 900px) {

    .mobile-menu-button {
        border-color:
            rgba(168, 190, 201, 0.17);

        background: #131d26;
    }

    .v2-mobile-menu {
        border-color:
            rgba(168, 190, 201, 0.18);

        background: #131d26;
    }

}

/* ===== MIKASWAP V2 BRAND RESTORE END ===== */


/* ==========================================================
   MIKASWAP V2 — TRACK ORDER
   ========================================================== */

.v2-track-page {
    width: min(720px, 100%);
    margin: 0 auto;

    padding:
        92px 0
        100px;
}

.v2-track-hero {
    max-width: 650px;

    margin:
        0 auto
        36px;

    text-align: center;
}

.v2-track-hero .v2-eyebrow {
    margin-bottom: 18px;
}

.v2-track-hero h1 {
    margin:
        0 0
        14px;

    color: rgba(255, 255, 255, 0.94);

    font-size:
        clamp(39px, 7vw, 58px);

    line-height: 1;
    letter-spacing: -0.055em;
}

.v2-track-hero p {
    max-width: 570px;

    margin: 0 auto;

    color:
        rgba(222, 232, 237, 0.64);

    font-size: 15px;
    line-height: 1.7;
}


.v2-track-card,
.v2-recent-orders {
    border:
        1px solid
        rgba(168, 190, 201, 0.18);

    border-radius: 24px;

    background:
        linear-gradient(
            155deg,
            rgba(26, 38, 48, 0.97),
            rgba(15, 24, 32, 0.98)
        );

    box-shadow:
        0 26px 70px
        rgba(0, 0, 0, 0.26);
}


.v2-track-card {
    position: relative;

    overflow: hidden;

    padding: 25px;
}

.v2-track-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 14%;
    right: 14%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(229, 139, 69, 0.62),
            transparent
        );
}


.v2-track-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

.v2-track-card-heading h2 {
    margin:
        4px 0
        0;

    color: #fff;

    font-size: 20px;
    letter-spacing: -0.025em;
}


.v2-track-form label {
    display: block;

    margin-bottom: 9px;

    color:
        rgba(207, 219, 225, 0.70);

    font-size: 12px;
    font-weight: 700;
}


.v2-track-input-wrap {
    display: flex;
    align-items: center;

    margin-bottom: 14px;

    border:
        1px solid
        rgba(168, 190, 201, 0.18);

    border-radius: 14px;

    background: #111b25;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.v2-track-input-wrap:focus-within {
    border-color:
        rgba(57, 201, 148, 0.45);

    box-shadow:
        0 0 0 3px
        rgba(57, 201, 148, 0.07);
}

.v2-track-id-icon {
    width: 50px;
    height: 54px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    color: #65ddb4;

    font-size: 18px;
    font-weight: 850;
}

.v2-track-input-wrap input {
    width: 100%;
    height: 54px;

    padding:
        0 16px 0 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #fff;

    font: inherit;
    font-size: 16px;
    font-weight: 700;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}

.v2-track-input-wrap input::placeholder {
    color:
        rgba(190, 204, 211, 0.34);
}


.v2-track-error {
    margin:
        0 0
        14px;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(239, 93, 93, 0.34);

    border-radius: 11px;

    color: #ffadad;

    background:
        rgba(145, 35, 35, 0.15);

    font-size: 12px;
}


.v2-track-help {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 17px;

    padding-top: 17px;

    border-top:
        1px solid
        rgba(168, 190, 201, 0.12);
}

.v2-track-help-icon {
    width: 22px;
    height: 22px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(57, 201, 148, 0.24);

    border-radius: 50%;

    color: #65ddb4;

    background:
        rgba(32, 139, 106, 0.13);

    font-size: 11px;
    font-weight: 850;
}

.v2-track-help p {
    margin: 1px 0 0;

    color:
        rgba(190, 204, 211, 0.50);

    font-size: 11px;
    line-height: 1.6;
}


/* recent orders */

.v2-recent-orders {
    margin-top: 18px;

    padding: 24px;
}

.v2-recent-orders .recent-orders-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 18px;
}

.v2-recent-orders
.recent-orders-heading h2 {
    margin:
        4px 0
        0;

    color: #fff;

    font-size: 18px;
}

.v2-recent-orders
.clear-recent-button {
    padding:
        8px 11px;

    border:
        1px solid
        rgba(168, 190, 201, 0.17);

    border-radius: 9px;

    background: #17232e;

    color:
        rgba(222, 232, 237, 0.67);

    cursor: pointer;

    font: inherit;
    font-size: 10px;
    font-weight: 700;
}

.v2-recent-orders
.clear-recent-button:hover {
    border-color:
        rgba(229, 139, 69, 0.30);

    color: #e58b45;
}

.v2-recent-orders
.recent-orders-empty {
    margin: 0;

    padding:
        28px 20px;

    border:
        1px dashed
        rgba(168, 190, 201, 0.15);

    border-radius: 13px;

    color:
        rgba(190, 204, 211, 0.46);

    background:
        rgba(11, 17, 24, 0.34);

    text-align: center;

    font-size: 12px;
}


/* dynamically-created recent order cards */

.v2-recent-orders
.recent-order-item,
.v2-recent-orders
.recent-order-card,
.v2-recent-orders
.recent-order-row {
    border-color:
        rgba(168, 190, 201, 0.15) !important;

    background:
        #111b25 !important;
}


/* ==========================================================
   MIKASWAP V2 — EXCHANGE PAGE
   ========================================================== */

.swap-v2-body {
    background:
        radial-gradient(
            circle at 8% 4%,
            rgba(229, 139, 69, 0.075),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 10%,
            rgba(57, 201, 148, 0.095),
            transparent 29%
        ),
        #0b1118 !important;

    color:
        rgba(255, 255, 255, 0.92);
}


.swap-v2-body .site-shell {
    width:
        min(1180px, calc(100% - 36px));

    margin:
        0 auto;
}


/* navigation */

.v2-nav-current {
    color: #65ddb4 !important;
}

.v2-exchange-mobile-home {
    display: none;

    color:
        rgba(222, 232, 237, 0.72);

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
}


/* heading */

.swap-v2-body
.v2-exchange-heading {
    max-width: 720px;

    margin:
        74px auto
        35px;

    text-align: center;
}

.swap-v2-body
.v2-exchange-heading
.v2-eyebrow {
    margin-bottom: 16px;
}

.swap-v2-body
.page-heading h1 {
    margin:
        0 0
        13px;

    color:
        rgba(255, 255, 255, 0.94);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif;

    font-size:
        clamp(40px, 6vw, 58px);

    line-height: 1.02;

    letter-spacing:
        -0.055em;
}

.swap-v2-body
.page-heading p {
    max-width: 590px;

    margin: 0 auto;

    color:
        rgba(222, 232, 237, 0.62);

    font-size: 14px;
    line-height: 1.7;
}


/* Main exchange becomes centered */

.swap-v2-body
.swap-layout {
    width: min(720px, 100%);

    display: grid;

    grid-template-columns: 1fr;

    gap: 17px;

    margin:
        0 auto
        90px;
}


/* Main card */

.swap-v2-body
.production-card {
    border:
        1px solid
        rgba(168, 190, 201, 0.18);

    border-radius: 24px;

    background:
        linear-gradient(
            155deg,
            rgba(26, 38, 48, 0.97),
            rgba(15, 24, 32, 0.98)
        );

    box-shadow:
        0 28px 76px
        rgba(0, 0, 0, 0.29);
}


.swap-v2-body
.swap-form-card {
    position: relative;

    overflow: hidden;

    padding: 24px;
}

.swap-v2-body
.swap-form-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 14%;
    right: 14%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(229, 139, 69, 0.60),
            transparent
        );
}


/* Form heading */

.swap-v2-body
.form-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 19px;
}

.swap-v2-body
.form-heading h2 {
    margin: 0;

    color: #fff;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif;

    font-size: 19px;

    letter-spacing:
        -0.025em;
}

.swap-v2-body
.form-heading p {
    margin:
        4px 0
        0;

    color:
        rgba(190, 204, 211, 0.50);

    font-size: 11px;
}

.swap-v2-body
.status-live {
    padding:
        7px 10px;

    border:
        1px solid
        rgba(57, 201, 148, 0.25);

    border-radius: 999px;

    background:
        rgba(32, 139, 106, 0.15);

    color: #70e1c2;

    font-size: 10px;
    font-weight: 800;
}


/* Direction tabs */

.swap-v2-body
.direction-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 4px;

    margin-bottom: 13px;

    padding: 4px;

    border:
        1px solid
        rgba(168, 190, 201, 0.14);

    border-radius: 13px;

    background: #0d151e;
}

.swap-v2-body
.direction-tab {
    min-height: 43px;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color:
        rgba(190, 204, 211, 0.62);

    font-size: 13px;
    font-weight: 800;
}

.swap-v2-body
.direction-tab.active {
    border:
        1px solid
        rgba(57, 201, 148, 0.31);

    background:
        rgba(32, 139, 106, 0.22);

    color: #7be0c2;
}


/* Send / Receive boxes */

.swap-v2-body
.asset-entry {
    padding:
        17px
        18px;

    border:
        1px solid
        rgba(168, 190, 201, 0.16);

    border-radius: 15px;

    background: #111b25;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.swap-v2-body
.asset-entry:focus-within {
    border-color:
        rgba(57, 201, 148, 0.44);

    box-shadow:
        0 0 0 3px
        rgba(57, 201, 148, 0.06);
}

.swap-v2-body
.field-eyebrow {
    margin-bottom: 9px;

    color:
        rgba(207, 219, 225, 0.66);

    font-size: 11px;
    font-weight: 700;

    text-transform: none;
}

.swap-v2-body
.amount-row {
    min-height: 48px;
}

.swap-v2-body
.amount-input,
.swap-v2-body
.receive-number {
    color: #fff !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif;

    font-size:
        clamp(27px, 5vw, 34px);

    font-weight: 700;

    letter-spacing:
        -0.04em;
}

.swap-v2-body
.amount-input::placeholder {
    color:
        rgba(190, 204, 211, 0.32) !important;
}

.swap-v2-body
.asset-badge {
    border:
        1px solid
        rgba(168, 190, 201, 0.16);

    border-radius: 12px;

    background: #1a2630;

    color: #fff;
}


/* limits */

.swap-v2-body
.amount-limit-row {
    margin-top: 13px;

    padding-top: 12px;

    border-top:
        1px solid
        rgba(168, 190, 201, 0.11);
}

.swap-v2-body
.amount-limit-row span {
    color:
        rgba(190, 204, 211, 0.43);

    font-size: 9px;
}

.swap-v2-body
.amount-limit-row strong {
    color:
        rgba(222, 232, 237, 0.78);

    font-size: 10px;
}


/* central swap arrow */

.swap-v2-body
.swap-bridge {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    margin:
        -1px auto;

    position: relative;
    z-index: 4;

    border:
        1px solid
        rgba(229, 139, 69, 0.32);

    border-radius: 12px;

    background:
        rgba(229, 139, 69, 0.12);

    color: #e58b45;

    font-size: 18px;

    box-shadow:
        0 7px 20px
        rgba(0, 0, 0, 0.20);
}


/* quote */

.swap-v2-body
.quote-table {
    margin-top: 13px;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(168, 190, 201, 0.14);

    border-radius: 13px;

    background: #111b25;
}

.swap-v2-body
.quote-line {
    color:
        rgba(190, 204, 211, 0.50);

    font-size: 11px;
}

.swap-v2-body
.quote-line strong {
    color:
        rgba(238, 244, 246, 0.84);

    font-size: 11px;
}

.swap-v2-body
.quote-summary-note {
    color:
        rgba(190, 204, 211, 0.40);

    font-size: 10px;
}


/* confirmations */

.swap-v2-body
.confirmation-policy {
    margin-top: 13px;

    border:
        1px solid
        rgba(57, 201, 148, 0.18);

    border-radius: 14px;

    background:
        rgba(32, 139, 106, 0.095);
}

.swap-v2-body
.confirmation-policy-icon {
    background:
        rgba(57, 201, 148, 0.18);

    color: #65ddb4;
}

.swap-v2-body
.confirmation-policy-label {
    color:
        rgba(190, 204, 211, 0.45);
}

.swap-v2-body
.confirmation-policy-content strong {
    color:
        rgba(242, 247, 248, 0.88);
}

.swap-v2-body
.confirmation-policy-content p {
    color:
        rgba(190, 204, 211, 0.52);
}


/* receive address */

.swap-v2-body
.address-section {
    margin-top: 16px;
}

.swap-v2-body
.address-label {
    color:
        rgba(207, 219, 225, 0.69);

    font-size: 11px;
}

.swap-v2-body
.address-input {
    min-height: 54px;

    border:
        1px solid
        rgba(168, 190, 201, 0.18);

    border-radius: 13px;

    background: #111b25 !important;

    color: #fff !important;
}

.swap-v2-body
.address-input:focus {
    border-color:
        rgba(57, 201, 148, 0.45);

    box-shadow:
        0 0 0 3px
        rgba(57, 201, 148, 0.07);
}

.swap-v2-body
.address-help {
    color:
        rgba(190, 204, 211, 0.43);
}


/* Actual working submit button */

.swap-v2-body
#createOrderButton {
    min-height: 54px !important;

    border: 0 !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            #39c994,
            #2daf83
        ) !important;

    color: #07110f !important;

    font-size: 13px;
    font-weight: 850 !important;

    box-shadow:
        0 14px 32px
        rgba(57, 201, 148, 0.18);
}

.swap-v2-body
#createOrderButton:not(:disabled):hover {
    filter: brightness(1.06);

    transform:
        translateY(-1px);
}

.swap-v2-body
#createOrderButton:disabled {
    opacity: 0.42 !important;

    cursor: not-allowed;
}


/* Existing-order link */

.swap-v2-body
.track-existing-order-link {
    display: block;

    margin-top: 14px;

    color:
        rgba(190, 204, 211, 0.50);

    text-align: center;

    font-size: 11px;
}

.swap-v2-body
.track-existing-order-link:hover {
    color: #65ddb4;
}


/* ==========================================================
   FEE PANEL — compact and below exchange instead of sidebar
   ========================================================== */

.swap-v2-body
.side-panel {
    padding: 0;

    border: 0;

    background: transparent;

    box-shadow: none;
}

.swap-v2-body
.side-panel > h3,
.swap-v2-body
.side-panel > .side-points {
    display: none;
}

.swap-v2-body
.fee-schedule {
    padding: 20px;

    border:
        1px solid
        rgba(168, 190, 201, 0.15);

    border-radius: 19px;

    background:
        rgba(17, 27, 37, 0.88);
}

.swap-v2-body
.fee-schedule-heading {
    margin-bottom: 14px;
}

.swap-v2-body
.fee-schedule-heading span {
    color:
        rgba(190, 204, 211, 0.45);
}

.swap-v2-body
.fee-schedule-heading h3 {
    margin:
        3px 0 0;

    color: #fff;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif;

    font-size: 17px;
}

.swap-v2-body
.fee-included-chip {
    border:
        1px solid
        rgba(57, 201, 148, 0.20);

    color: #70e1c2 !important;

    background:
        rgba(32, 139, 106, 0.12);
}

.swap-v2-body
.fee-tier {
    min-height: 38px;

    border-color:
        rgba(168, 190, 201, 0.10);

    color:
        rgba(190, 204, 211, 0.60);
}

.swap-v2-body
.fee-tier strong {
    color:
        rgba(238, 244, 246, 0.86);
}

.swap-v2-body
.fee-schedule-note {
    color:
        rgba(190, 204, 211, 0.42);
}


/* ==========================================================
   CREATED ORDER / TRACKING PANEL
   Keep all existing tracking IDs intact.
   ========================================================== */

.swap-v2-body
.tracking-panel {
    color:
        rgba(255, 255, 255, 0.90);
}

.swap-v2-body
.tracking-primary-card,
.swap-v2-body
.tracking-address-card,
.swap-v2-body
.tracking-summary,
.swap-v2-body
.tracking-warning {
    border-color:
        rgba(168, 190, 201, 0.16);

    background:
        #111b25;
}

.swap-v2-body
.tracking-status {
    border-color:
        rgba(57, 201, 148, 0.25);

    color: #70e1c2;

    background:
        rgba(32, 139, 106, 0.14);
}

.swap-v2-body
.tracking-progress-fill {
    background:
        linear-gradient(
            90deg,
            #39c994,
            #65ddb4
        );
}

.swap-v2-body
.tracking-step.active
.tracking-step-marker,
.swap-v2-body
.tracking-step.completed
.tracking-step-marker {
    border-color: #39c994;

    background: #39c994;

    color: #07110f;
}


/* Mobile */

@media (max-width: 900px) {

    .swap-v2-body
    .v2-desktop-navigation {
        display: none;
    }

    .swap-v2-body
    .v2-exchange-mobile-home {
        display: inline-flex;
    }

}


@media (max-width: 650px) {

    .v2-track-page {
        padding:
            62px 0
            70px;
    }

    .v2-track-card,
    .v2-recent-orders {
        border-radius: 19px;
    }

    .v2-track-card {
        padding: 17px;
    }

    .v2-track-card-heading {
        align-items: flex-start;
    }

    .v2-track-card-heading
    .v2-route-live {
        font-size: 9px;
    }


    .swap-v2-body
    .site-shell {
        width:
            calc(100% - 24px);
    }

    .swap-v2-body
    .v2-exchange-heading {
        margin:
            52px auto
            27px;
    }

    .swap-v2-body
    .page-heading h1 {
        font-size: 38px;
    }

    .swap-v2-body
    .swap-form-card {
        padding: 15px;
    }

    .swap-v2-body
    .form-heading {
        align-items: flex-start;
    }

    .swap-v2-body
    .amount-limit-row {
        gap: 15px;
    }

    .swap-v2-body
    .amount-limit-row > div {
        min-width: 0;
    }

}


/* ==========================================================
   MIKASWAP V2 — COMPACT PASS
   ========================================================== */

/* Homepage hero */

.v2-hero {
    min-height: 620px;

    padding:
        64px 0
        58px;
}

.v2-hero-copy {
    margin-bottom: 28px;
}

.v2-hero h1 {
    font-size:
        clamp(40px, 5.3vw, 62px);
}


/* Homepage quick-swap card */

.v2-swap-card {
    width: min(100%, 510px);

    padding: 18px;

    border-radius: 22px;
}

.v2-card-top {
    margin-bottom: 13px;
}

.v2-direction-tabs {
    margin-bottom: 10px;
}

.v2-direction-button {
    min-height: 38px;
}

.v2-swap-field {
    padding:
        13px
        14px
        14px;

    border-radius: 13px;
}

.v2-field-heading {
    margin-bottom: 7px;
}

.v2-amount-line input {
    font-size:
        clamp(25px, 4vw, 30px);
}

.v2-asset-pill {
    min-width: 108px;

    padding:
        6px
        8px;
}

.v2-coin {
    width: 28px;
    height: 28px;

    font-size: 14px;
}

.v2-switch-row {
    height: 36px;
}

.v2-switch-button {
    width: 35px;
    height: 35px;

    border-radius: 10px;

    font-size: 17px;
}

.v2-receive-field {
    margin-bottom: 10px;
}

.v2-estimate-copy strong {
    font-size: 18px;
}

.v2-quote-info {
    margin-bottom: 13px;
}

.v2-quote-info > div {
    padding:
        9px
        10px;
}

.v2-primary-button {
    min-height: 48px;
}


/* Trust strip */

.v2-trust-item {
    padding:
        18px
        15px;
}


/* ==========================================================
   COMPACT EXCHANGE PAGE
   ========================================================== */

.swap-v2-body
.v2-exchange-heading {
    margin:
        54px auto
        26px;
}

.swap-v2-body
.page-heading h1 {
    font-size:
        clamp(36px, 5vw, 49px);
}


/* Main exchange width */

.swap-v2-body
.swap-layout {
    width: min(600px, 100%);

    margin:
        0 auto
        75px;
}


/* Actual working exchange card */

.swap-v2-body
.swap-form-card {
    padding: 18px;

    border-radius: 21px;
}

.swap-v2-body
.form-heading {
    margin-bottom: 14px;
}

.swap-v2-body
.form-heading h2 {
    font-size: 17px;
}


/* Direction selector */

.swap-v2-body
.direction-tabs {
    margin-bottom: 10px;
}

.swap-v2-body
.direction-tab {
    min-height: 39px;
}


/* Amount cards */

.swap-v2-body
.asset-entry {
    padding:
        13px
        15px;

    border-radius: 13px;
}

.swap-v2-body
.amount-row {
    min-height: 42px;
}

.swap-v2-body
.amount-input,
.swap-v2-body
.receive-number {
    font-size:
        clamp(25px, 4vw, 30px);
}

.swap-v2-body
.amount-limit-row {
    margin-top: 9px;

    padding-top: 9px;
}


/* Swap arrow */

.swap-v2-body
.swap-bridge {
    width: 35px;
    height: 35px;

    border-radius: 10px;

    font-size: 16px;
}


/* Quote + confirmations */

.swap-v2-body
.quote-table {
    margin-top: 10px;

    padding:
        11px
        13px;
}

.swap-v2-body
.confirmation-policy {
    margin-top: 10px;
}


/* Address */

.swap-v2-body
.address-section {
    margin-top: 13px;
}

.swap-v2-body
.address-input {
    min-height: 49px;
}


/* Submit */

.swap-v2-body
#createOrderButton {
    min-height: 49px !important;
}


/* Fee card */

.swap-v2-body
.fee-schedule {
    padding: 16px;

    border-radius: 17px;
}


/* ==========================================================
   COMPACT TRACK PAGE
   ========================================================== */

.v2-track-page {
    width: min(620px, 100%);

    padding:
        65px 0
        80px;
}

.v2-track-hero {
    margin-bottom: 27px;
}

.v2-track-hero h1 {
    font-size:
        clamp(37px, 6vw, 49px);
}

.v2-track-card {
    padding: 19px;

    border-radius: 21px;
}

.v2-recent-orders {
    padding: 18px;

    border-radius: 19px;
}


/* Mobile stays comfortable */

@media (max-width: 650px) {

    .v2-hero {
        padding:
            46px 0
            45px;
    }

    .v2-swap-card {
        width: 100%;
    }

    .swap-v2-body
    .swap-layout {
        width: 100%;
    }

    .swap-v2-body
    .swap-form-card {
        padding: 14px;
    }

}


/* ==========================================================
   MIKASWAP V2 — TRACK PAGE CLEAN RESET
   Overrides legacy track-page styling.
   ========================================================== */

.v2-track-page {
    width: min(560px, 100%) !important;
    max-width: 560px !important;

    margin: 0 auto !important;

    padding:
        62px 0
        85px !important;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.v2-track-page .v2-track-hero {
    width: 100% !important;
    max-width: 540px !important;

    margin:
        0 auto
        28px !important;

    padding: 0 !important;

    text-align: center !important;
}

.v2-track-page .v2-track-hero .v2-eyebrow {
    display: inline-flex !important;

    margin:
        0 auto
        17px !important;
}

.v2-track-page .v2-track-hero h1 {
    margin:
        0 0
        12px !important;

    color:
        rgba(255,255,255,0.94) !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif !important;

    font-size:
        clamp(36px, 5vw, 48px) !important;

    line-height: 1.05 !important;
    letter-spacing: -0.05em !important;

    text-align: center !important;
}

.v2-track-page .v2-track-hero p {
    width: 100% !important;
    max-width: 500px !important;

    margin: 0 auto !important;

    color:
        rgba(222,232,237,0.62) !important;

    font-size: 13px !important;
    line-height: 1.65 !important;

    text-align: center !important;
}


/* ----------------------------------------------------------
   MAIN TRACK CARD
   ---------------------------------------------------------- */

.v2-track-page .v2-track-card {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding: 20px !important;

    border:
        1px solid
        rgba(168,190,201,0.18) !important;

    border-radius: 20px !important;

    background:
        linear-gradient(
            155deg,
            rgba(26,38,48,0.98),
            rgba(15,24,32,0.98)
        ) !important;

    box-shadow:
        0 24px 65px
        rgba(0,0,0,0.27) !important;
}


/* top row */

.v2-track-page .v2-track-card-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    gap: 20px !important;

    margin:
        0 0
        20px !important;

    padding: 0 !important;
}

.v2-track-page
.v2-track-card-heading > div:first-child {
    min-width: 0 !important;
}

.v2-track-page
.v2-track-card-heading h2 {
    margin:
        4px 0
        0 !important;

    color: #fff !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif !important;

    font-size: 18px !important;
    line-height: 1.2 !important;
}

.v2-track-page
.v2-track-card-heading
.v2-route-live {
    flex: 0 0 auto !important;

    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;

    padding:
        7px
        10px !important;

    border:
        1px solid
        rgba(57,201,148,0.23) !important;

    border-radius: 999px !important;

    background:
        rgba(32,139,106,0.13) !important;

    color: #70e1c2 !important;

    font-size: 10px !important;
    font-weight: 750 !important;
}


/* ----------------------------------------------------------
   FORM RESET
   ---------------------------------------------------------- */

.v2-track-page .track-form,
.v2-track-page .v2-track-form {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    grid-template-columns: none !important;
}

.v2-track-page .track-form label {
    display: block !important;

    width: 100% !important;

    margin:
        0 0
        8px !important;

    color:
        rgba(207,219,225,0.68) !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    text-align: left !important;
}


/* ----------------------------------------------------------
   ORDER ID INPUT
   ---------------------------------------------------------- */

.v2-track-page .v2-track-input-wrap {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    max-width: none !important;

    height: 54px !important;

    margin:
        0 0
        13px !important;

    padding: 0 !important;

    overflow: hidden !important;

    border:
        1px solid
        rgba(168,190,201,0.18) !important;

    border-radius: 13px !important;

    background: #111b25 !important;
}

.v2-track-page .v2-track-input-wrap:focus-within {
    border-color:
        rgba(57,201,148,0.48) !important;

    box-shadow:
        0 0 0 3px
        rgba(57,201,148,0.07) !important;
}

.v2-track-page .v2-track-id-icon {
    width: 46px !important;
    height: 52px !important;

    flex:
        0 0
        46px !important;

    display: grid !important;
    place-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #65ddb4 !important;

    font-size: 17px !important;
    font-weight: 850 !important;
}

.v2-track-page #trackOrderId {
    display: block !important;

    flex: 1 1 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 52px !important;

    margin: 0 !important;

    padding:
        0
        15px
        0
        0 !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #fff !important;

    box-shadow: none !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    letter-spacing:
        0.025em !important;

    text-transform: uppercase !important;
}

.v2-track-page
#trackOrderId::placeholder {
    color:
        rgba(190,204,211,0.31) !important;
}


/* ----------------------------------------------------------
   TRACK BUTTON
   ---------------------------------------------------------- */

.v2-track-page
.v2-track-form
.v2-primary-button {
    display: flex !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 50px !important;

    margin: 0 !important;

    border-radius: 13px !important;
}


/* ----------------------------------------------------------
   INFO MESSAGE
   ---------------------------------------------------------- */

.v2-track-page .v2-track-help {
    display: flex !important;
    align-items: flex-start !important;

    width: 100% !important;

    gap: 9px !important;

    margin:
        16px 0
        0 !important;

    padding:
        15px 0
        0 !important;

    border-top:
        1px solid
        rgba(168,190,201,0.11) !important;
}

.v2-track-page
.v2-track-help p {
    margin: 1px 0 0 !important;

    color:
        rgba(190,204,211,0.47) !important;

    font-size: 10px !important;
    line-height: 1.55 !important;
}


/* ----------------------------------------------------------
   ERROR
   ---------------------------------------------------------- */

.v2-track-page .v2-track-error {
    width: 100% !important;

    margin:
        0 0
        13px !important;
}


/* ----------------------------------------------------------
   RECENT ORDERS
   ---------------------------------------------------------- */

.v2-track-page .v2-recent-orders {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin:
        15px 0
        0 !important;

    padding: 18px !important;

    border:
        1px solid
        rgba(168,190,201,0.15) !important;

    border-radius: 18px !important;

    background:
        rgba(17,27,37,0.85) !important;

    box-shadow: none !important;
}

.v2-track-page
.v2-recent-orders
.recent-orders-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 15px !important;

    width: 100% !important;

    margin:
        0 0
        13px !important;
}

.v2-track-page
.v2-recent-orders
.recent-orders-heading h2 {
    margin:
        4px 0
        0 !important;

    color: #fff !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif !important;

    font-size: 16px !important;
}

.v2-track-page
.recent-orders-list {
    width: 100% !important;
}

.v2-track-page
.recent-orders-empty {
    width: 100% !important;

    margin: 0 !important;

    padding:
        20px
        15px !important;

    border:
        1px dashed
        rgba(168,190,201,0.13) !important;

    border-radius: 11px !important;

    background:
        rgba(11,17,24,0.30) !important;

    color:
        rgba(190,204,211,0.43) !important;

    text-align: center !important;

    font-size: 10px !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 650px) {

    .v2-track-page {
        width: 100% !important;

        padding:
            48px 0
            65px !important;
    }

    .v2-track-page
    .v2-track-hero {
        margin-bottom:
            23px !important;
    }

    .v2-track-page
    .v2-track-hero h1 {
        font-size:
            36px !important;
    }

    .v2-track-page
    .v2-track-card {
        padding:
            16px !important;

        border-radius:
            18px !important;
    }

    .v2-track-page
    .v2-track-card-heading {
        margin-bottom:
            17px !important;
    }

    .v2-track-page
    .v2-track-card-heading
    .v2-route-live {
        padding:
            6px
            8px !important;

        font-size:
            9px !important;
    }

}


/* ==========================================================
   MIKASWAP V2 — FOOTER SOCIAL ICONS
   ========================================================== */

.v2-social-links {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.v2-social-link {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    color:
        rgba(222, 232, 237, 0.68) !important;

    text-decoration: none;

    font-size: 12px;

    transition:
        color 160ms ease,
        transform 160ms ease;
}

.v2-social-link:hover {
    color: #fff !important;

    transform:
        translateX(2px);
}

.v2-social-icon {
    width: 29px;
    height: 29px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(168, 190, 201, 0.17);

    border-radius: 9px;

    background:
        #151f29;

    transition:
        border-color 160ms ease,
        background 160ms ease;
}

.v2-social-icon svg {
    width: 15px;
    height: 15px;
}


/* Telegram */

.v2-social-telegram
.v2-social-icon {
    color: #ffffff;

    background:
        rgba(34, 158, 217, 0.92);

    border-color:
        rgba(34, 158, 217, 0.42);
}

.v2-social-telegram
.v2-social-icon svg {
    fill: currentColor;
}


/* X */

.v2-social-x
.v2-social-icon {
    color: #ffffff;

    background: #080808;

    border-color:
        rgba(255, 255, 255, 0.18);
}


/* mobile */

@media (max-width: 650px) {

    .v2-social-links {
        align-items: flex-start;
    }

}


/* ==========================================================
   MIKASWAP FOOTER SOCIAL FIX
   Strongly scoped to prevent legacy SVG rules interfering.
   ========================================================== */

.v2-footer .mika-social-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    gap: 9px !important;

    width: auto !important;
    height: auto !important;

    margin-top: 3px !important;
}


.v2-footer .mika-social-button {
    width: 36px !important;
    height: 36px !important;

    min-width: 36px !important;
    max-width: 36px !important;

    min-height: 36px !important;
    max-height: 36px !important;

    flex: 0 0 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 10px !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease !important;
}


.v2-footer .mika-social-button svg {
    display: block !important;

    width: 17px !important;
    height: 17px !important;

    min-width: 17px !important;
    max-width: 17px !important;

    min-height: 17px !important;
    max-height: 17px !important;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;

    transform: none !important;
}


.v2-footer .mika-social-telegram {
    border:
        1px solid rgba(34, 158, 217, 0.44) !important;

    background: #229ed9 !important;

    color: #ffffff !important;
}

.v2-footer .mika-social-telegram svg {
    fill: #ffffff !important;
}


.v2-footer .mika-social-x {
    border:
        1px solid rgba(255, 255, 255, 0.19) !important;

    background: #090909 !important;

    color: #ffffff !important;
}

.v2-footer .mika-social-x svg {
    fill: none !important;

    stroke: #ffffff !important;
}


.v2-footer .mika-social-button:hover {
    transform: translateY(-2px) !important;
}


.v2-footer .mika-community-handle {
    display: block !important;

    margin-top: 8px !important;

    color:
        rgba(190, 204, 211, 0.46) !important;

    font-size: 10px !important;
}


@media (max-width: 650px) {

    .v2-footer .mika-social-button {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        max-width: 38px !important;

        min-height: 38px !important;
        max-height: 38px !important;

        flex-basis: 38px !important;
    }

}


/* ==========================================================
   MIKASWAP V2 — REAL HOMEPAGE SWAP
   ========================================================== */

.v2-real-home-swap {
    width: min(100%, 520px);
}


/* Hide technical direction input */

.v2-real-home-swap .hidden-select {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* Direction buttons */

.v2-real-home-swap .direction-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 4px;

    margin-bottom: 10px;

    padding: 4px;

    border:
        1px solid
        rgba(168, 190, 201, 0.14);

    border-radius: 13px;

    background: #0d151e;
}

.v2-real-home-swap .direction-tab {
    min-height: 39px;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color:
        rgba(190, 204, 211, 0.62);

    cursor: pointer;

    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.v2-real-home-swap .direction-tab.active {
    border:
        1px solid
        rgba(57, 201, 148, 0.31);

    background:
        rgba(32, 139, 106, 0.22);

    color: #7be0c2;
}


/* Send / receive */

.v2-real-home-swap
.v2-home-real-field {
    padding:
        13px
        14px;

    border:
        1px solid
        rgba(168, 190, 201, 0.16);

    border-radius: 13px;

    background: #111b25;
}

.v2-real-home-swap
.v2-home-real-field:focus-within {
    border-color:
        rgba(57, 201, 148, 0.45);

    box-shadow:
        0 0 0 3px
        rgba(57, 201, 148, 0.06);
}


.v2-real-home-swap
.field-eyebrow {
    margin-bottom: 7px;

    color:
        rgba(207, 219, 225, 0.67);

    font-size: 11px;
    font-weight: 700;
}


.v2-real-home-swap
.amount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 43px;
}


.v2-real-home-swap
.amount-input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    padding: 0;

    background: transparent;

    color: #fff !important;

    font-size:
        clamp(25px, 4vw, 30px);

    font-weight: 700;

    letter-spacing:
        -0.04em;
}

.v2-real-home-swap
.amount-input::placeholder {
    color:
        rgba(190, 204, 211, 0.30) !important;
}


.v2-real-home-swap
.receive-number {
    min-width: 0;

    outline: none;

    color: #fff !important;

    font-size:
        clamp(25px, 4vw, 30px);

    font-weight: 700;

    letter-spacing:
        -0.04em;
}


.v2-real-home-swap
.asset-badge {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(168, 190, 201, 0.16);

    border-radius: 11px;

    background: #1a2630;

    color: #fff;

    font-size: 12px;
    font-weight: 800;
}


.v2-real-home-swap
.coin-circle {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    flex: 0 0 29px;

    border-radius: 50%;

    color: white;

    font-size: 14px;
    font-weight: 900;
}


.v2-real-home-swap
.coin-btc {
    background: #f7931a;

    box-shadow:
        0 6px 16px
        rgba(247, 147, 26, 0.23);
}


.v2-real-home-swap
.coin-xmr {
    background:
        linear-gradient(
            to bottom,
            #ff6600 0 52%,
            #4c4c4c 52% 100%
        );
}


/* Limits */

.v2-real-home-swap
.amount-limit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-top: 9px;

    padding-top: 9px;

    border-top:
        1px solid
        rgba(168, 190, 201, 0.10);
}


.v2-real-home-swap
.amount-limit-row > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.v2-real-home-swap
.amount-limit-row > div:last-child {
    text-align: right;
}


.v2-real-home-swap
.amount-limit-row span {
    color:
        rgba(190, 204, 211, 0.42);

    font-size: 9px;
}


.v2-real-home-swap
.amount-limit-row strong {
    color:
        rgba(222, 232, 237, 0.76);

    font-size: 10px;
}


/* Switch */

.v2-real-home-swap
.v2-home-real-bridge {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    position: relative;
    z-index: 5;

    margin:
        -1px auto;

    border:
        1px solid
        rgba(229, 139, 69, 0.33);

    border-radius: 10px;

    background:
        rgba(229, 139, 69, 0.12);

    color: #e58b45;

    font-size: 16px;

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, 0.20);
}


/* Quote */

.v2-real-home-swap
.v2-home-quote-table {
    margin-top: 10px;

    padding:
        11px
        13px;

    border:
        1px solid
        rgba(168, 190, 201, 0.14);

    border-radius: 12px;

    background: #111b25;
}


.v2-real-home-swap
.quote-line {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        4px 0;

    color:
        rgba(190, 204, 211, 0.49);

    font-size: 10px;
}


.v2-real-home-swap
.quote-line strong {
    color:
        rgba(239, 244, 246, 0.85);

    font-size: 10px;

    text-align: right;
}


/* Confirmations */

.v2-real-home-swap
.v2-home-confirmation {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 10px;

    padding:
        11px
        12px;

    border:
        1px solid
        rgba(57, 201, 148, 0.17);

    border-radius: 12px;

    background:
        rgba(32, 139, 106, 0.085);
}


.v2-real-home-swap
.confirmation-policy-icon {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background:
        rgba(57, 201, 148, 0.16);

    color: #65ddb4;

    font-size: 11px;
    font-weight: 900;
}


.v2-real-home-swap
.confirmation-policy-content {
    min-width: 0;
}


.v2-real-home-swap
.confirmation-policy-label {
    display: block;

    margin-bottom: 2px;

    color:
        rgba(190, 204, 211, 0.42);

    font-size: 8px;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}


.v2-real-home-swap
.confirmation-policy-content strong {
    display: block;

    color:
        rgba(240, 245, 247, 0.86);

    font-size: 10px;
}


.v2-real-home-swap
.confirmation-policy-content p {
    margin:
        3px 0
        0;

    color:
        rgba(190, 204, 211, 0.46);

    font-size: 9px;
    line-height: 1.45;
}


/* Address */

.v2-real-home-swap
.v2-home-address {
    margin-top: 11px;
}


.v2-real-home-swap
.address-label {
    display: block;

    margin-bottom: 6px;

    color:
        rgba(207, 219, 225, 0.68);

    font-size: 10px;
    font-weight: 700;
}


.v2-real-home-swap
.address-input {
    width: 100%;

    min-height: 48px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(168, 190, 201, 0.18);

    border-radius: 12px;

    outline: 0;

    background: #111b25;

    color: #fff;

    font: inherit;
    font-size: 11px;
}


.v2-real-home-swap
.address-input:focus {
    border-color:
        rgba(57, 201, 148, 0.47);

    box-shadow:
        0 0 0 3px
        rgba(57, 201, 148, 0.07);
}


.v2-real-home-swap
.address-input::placeholder {
    color:
        rgba(190, 204, 211, 0.30);
}


.v2-real-home-swap
.address-help {
    margin-top: 5px;

    color:
        rgba(190, 204, 211, 0.42);

    font-size: 9px;
}


/* Real Create Swap button */

.v2-real-home-swap
#createOrderButton {
    width: 100%;

    min-height: 49px;

    margin-top: 13px;

    border: 0;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #39c994,
            #2daf83
        );

    color: #07110f;

    cursor: pointer;

    font: inherit;
    font-size: 12px;
    font-weight: 850;

    box-shadow:
        0 14px 30px
        rgba(57, 201, 148, 0.17);
}


.v2-real-home-swap
#createOrderButton:disabled {
    opacity: 0.42;

    cursor: not-allowed;
}


.v2-real-home-swap
#createOrderButton:not(:disabled):hover {
    filter: brightness(1.06);

    transform:
        translateY(-1px);
}


@media (max-width: 650px) {

    .v2-real-home-swap {
        width: 100%;
    }

    .v2-real-home-swap
    .amount-limit-row {
        gap: 10px;
    }

}


/* ==========================================================
   HOMEPAGE SHARED FEE SCHEDULE
   ========================================================== */

.v2-home-fees-wrap {
    width: min(100%, 520px);

    margin:
        14px auto
        0;

    padding: 16px;

    border:
        1px solid
        rgba(168, 190, 201, 0.15);

    border-radius: 17px;

    background:
        rgba(17, 27, 37, 0.88);
}


.v2-home-fees-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 12px;
}


.v2-home-fees-title > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.v2-home-fees-title strong {
    color: #ffffff;

    font-size: 15px;
}


.v2-home-fees-note {
    padding:
        6px
        9px;

    border:
        1px solid
        rgba(57, 201, 148, 0.20);

    border-radius: 999px;

    background:
        rgba(32, 139, 106, 0.12);

    color: #70e1c2;

    font-size: 9px;
    font-weight: 750;
}


/*
   Hide the duplicate large heading inside the shared
   schedule on the homepage only.
*/

.v2-home-fees-wrap
.fee-schedule-heading {
    display: none !important;
}


.v2-home-fees-wrap
.fee-schedule {
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


.v2-home-fees-wrap
.fee-tier {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        7px
        2px;

    border-bottom:
        1px solid
        rgba(168, 190, 201, 0.09);

    color:
        rgba(207, 219, 225, 0.62);

    font-size: 10px;
}


.v2-home-fees-wrap
.fee-tier:last-of-type {
    border-bottom: 0;
}


.v2-home-fees-wrap
.fee-tier strong {
    flex: 0 0 auto;

    color:
        rgba(244, 248, 249, 0.88);

    font-size: 10px;
}


.v2-home-fees-wrap
.fee-limit-tier strong {
    color: #65ddb4;
}


.v2-home-fees-wrap
.fee-schedule-note {
    margin:
        10px 0
        0;

    color:
        rgba(190, 204, 211, 0.42);

    font-size: 9px;
    line-height: 1.5;
}


@media (max-width: 650px) {

    .v2-home-fees-wrap {
        width: 100%;

        padding: 14px;
    }

}


/* ==========================================================
   HOMEPAGE FEE HEADING — FINAL CLEANUP
   ========================================================== */

.v2-home-fees-wrap
.v2-home-fees-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 4px !important;

    width: 100% !important;

    margin:
        0 0
        13px !important;

    padding: 0 !important;
}


.v2-home-fees-wrap
.v2-home-fees-title
.v2-card-label {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        rgba(190, 204, 211, 0.55) !important;

    font-size: 9px !important;
    font-weight: 850 !important;

    line-height: 1.2 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.11em !important;
}


.v2-home-fees-wrap
.v2-home-fees-title > strong {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 16px !important;
    font-weight: 750 !important;

    line-height: 1.25 !important;

    letter-spacing: -0.02em !important;
}


/*
   Homepage already has its own Fees & limits heading,
   so hide the duplicated heading from the shared component.
*/

.v2-home-fees-wrap
.fee-schedule-heading {
    display: none !important;
}


/* remove old "same rates as Swap" chip if cached markup remains */

.v2-home-fees-wrap
.v2-home-fees-note {
    display: none !important;
}


/* make the shared schedule itself seamless */

.v2-home-fees-wrap
.fee-schedule {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* consistent rows */

.v2-home-fees-wrap
.fee-tier {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px !important;

    min-height: 35px !important;

    margin: 0 !important;

    padding:
        7px
        1px !important;

    border-bottom:
        1px solid
        rgba(168, 190, 201, 0.09) !important;
}


.v2-home-fees-wrap
.fee-tier span {
    margin: 0 !important;

    color:
        rgba(207, 219, 225, 0.64) !important;

    font-size: 10px !important;

    line-height: 1.35 !important;
}


.v2-home-fees-wrap
.fee-tier strong {
    flex: 0 0 auto !important;

    margin: 0 !important;

    color:
        rgba(245, 248, 249, 0.90) !important;

    font-size: 10px !important;

    line-height: 1.35 !important;

    white-space: nowrap !important;
}


.v2-home-fees-wrap
.fee-limit-tier strong {
    color: #65ddb4 !important;
}


/* ==========================================================
   MIKASWAP — CLEAN MONERO TOKEN ICON
   ========================================================== */

.coin-circle.coin-xmr,
#sendCoin.coin-xmr,
#receiveCoin.coin-xmr {
    background:
        url("/static/brand/monero-token.svg?v=2")
        center center /
        contain
        no-repeat
        !important;

    color: transparent !important;

    text-shadow: none !important;

    border: 0 !important;

    overflow: visible !important;

    box-shadow:
        0 5px 15px
        rgba(255, 102, 0, 0.20)
        !important;
}


/*
   Kill any old CSS-generated pieces from
   the previous Monero icon.
*/

.coin-circle.coin-xmr::before,
.coin-circle.coin-xmr::after,
#sendCoin.coin-xmr::before,
#sendCoin.coin-xmr::after,
#receiveCoin.coin-xmr::before,
#receiveCoin.coin-xmr::after {
    content: none !important;

    display: none !important;
}


/* Slightly cleaner rendering */

.coin-circle.coin-xmr {
    background-color:
        transparent
        !important;

    background-image:
        url("/static/brand/monero-token.svg?v=2")
        !important;

    background-repeat:
        no-repeat
        !important;

    background-position:
        center
        !important;

    background-size:
        100% 100%
        !important;
}


/* ==========================================================
   FINAL MONERO TOKEN ICON OVERRIDE
   ========================================================== */

span.coin-circle.coin-xmr,
#sendCoin.coin-xmr,
#receiveCoin.coin-xmr,
.asset-badge .coin-xmr {
    width: 30px !important;
    height: 30px !important;

    min-width: 30px !important;
    max-width: 30px !important;

    min-height: 30px !important;
    max-height: 30px !important;

    flex: 0 0 30px !important;

    display: inline-block !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background-color: transparent !important;

    background-image:
        url("/static/brand/monero-token.svg?v=20260829-xmr3")
        !important;

    background-repeat: no-repeat !important;

    background-position: center center !important;

    background-size: 30px 30px !important;

    color: transparent !important;

    font-size: 0 !important;

    line-height: 0 !important;

    text-indent: -9999px !important;

    overflow: hidden !important;

    box-shadow:
        0 5px 14px rgba(255, 102, 0, 0.24)
        !important;
}


span.coin-circle.coin-xmr::before,
span.coin-circle.coin-xmr::after,
#sendCoin.coin-xmr::before,
#sendCoin.coin-xmr::after,
#receiveCoin.coin-xmr::before,
#receiveCoin.coin-xmr::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   MIKASWAP MONERO LOGO — CLEAN ORANGE VERSION
   ========================================================== */

#sendCoin.coin-xmr,
#receiveCoin.coin-xmr,
.coin-circle.coin-xmr {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;
    max-width: 32px !important;

    min-height: 32px !important;
    max-height: 32px !important;

    flex: 0 0 32px !important;

    border-radius: 50% !important;

    background:
        url("/static/brand/monero-token.svg?v=20260829-clean4")
        center center /
        32px 32px
        no-repeat
        !important;

    color: transparent !important;

    font-size: 0 !important;
    line-height: 0 !important;

    text-indent: -9999px !important;

    border: 0 !important;

    box-shadow:
        0 5px 15px rgba(255, 102, 0, 0.26)
        !important;

    overflow: hidden !important;
}


#sendCoin.coin-xmr::before,
#sendCoin.coin-xmr::after,
#receiveCoin.coin-xmr::before,
#receiveCoin.coin-xmr::after,
.coin-circle.coin-xmr::before,
.coin-circle.coin-xmr::after {
    display: none !important;
    content: none !important;
}


/* ==========================================================
   OFFICIAL MONERO SYMBOL
   Source: Monero Project press kit
   ========================================================== */

#sendCoin.coin-xmr,
#receiveCoin.coin-xmr,
.coin-circle.coin-xmr,
.asset-badge .coin-xmr {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;
    max-width: 32px !important;

    min-height: 32px !important;
    max-height: 32px !important;

    flex: 0 0 32px !important;

    display: inline-block !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    background-color: transparent !important;

    background-image:
        url("/static/brand/monero-symbol-official.png?v=20260829-xmr-final-1")
        !important;

    background-repeat:
        no-repeat
        !important;

    background-position:
        center center
        !important;

    background-size:
        contain
        !important;

    color:
        transparent
        !important;

    font-size:
        0
        !important;

    line-height:
        0
        !important;

    text-indent:
        -9999px
        !important;

    box-shadow:
        none
        !important;

    overflow:
        hidden
        !important;
}


#sendCoin.coin-xmr::before,
#sendCoin.coin-xmr::after,
#receiveCoin.coin-xmr::before,
#receiveCoin.coin-xmr::after,
.coin-circle.coin-xmr::before,
.coin-circle.coin-xmr::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   STANDARD BITCOIN TOKEN SYMBOL
   ========================================================== */

#sendCoin.coin-btc,
#receiveCoin.coin-btc,
.coin-circle.coin-btc,
.asset-badge .coin-btc {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;
    max-width: 32px !important;

    min-height: 32px !important;
    max-height: 32px !important;

    flex: 0 0 32px !important;

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background-color: transparent !important;

    background-image:
        url("/static/brand/bitcoin-symbol-official.svg?v=20260829-btc-final-1")
        !important;

    background-repeat:
        no-repeat
        !important;

    background-position:
        center center
        !important;

    background-size:
        contain
        !important;

    color:
        transparent
        !important;

    font-size:
        0
        !important;

    line-height:
        0
        !important;

    text-indent:
        -9999px
        !important;

    overflow:
        hidden
        !important;

    box-shadow:
        none
        !important;
}


#sendCoin.coin-btc::before,
#sendCoin.coin-btc::after,
#receiveCoin.coin-btc::before,
#receiveCoin.coin-btc::after,
.coin-circle.coin-btc::before,
.coin-circle.coin-btc::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   MikaSwap live availability pulse
   ========================================================== */

.status-live,
.private-chip {
    animation:
        mika-live-breathe 2.2s ease-in-out infinite;
    will-change:
        box-shadow,
        border-color,
        filter;
}

@keyframes mika-live-breathe {
    0%,
    100% {
        box-shadow:
            0 0 0 rgba(57, 201, 148, 0),
            0 0 8px rgba(57, 201, 148, 0.08);

        filter:
            brightness(1);
    }

    50% {
        box-shadow:
            0 0 0 3px rgba(57, 201, 148, 0.07),
            0 0 18px rgba(57, 201, 148, 0.22);

        filter:
            brightness(1.08);
    }
}


/*
 * Respect visitors who disable animation
 * in their operating-system accessibility settings.
 */
@media (prefers-reduced-motion: reduce) {
    .status-live,
    .private-chip {
        animation: none !important;
    }
}



/* ==========================================================
   MikaSwap homepage LIVE heartbeat
   ========================================================== */

.v2-route-live {
    animation:
        mika-route-live-breathe 2.2s ease-in-out infinite;
}

.v2-route-live > span {
    transform-origin: center;

    animation:
        mika-route-live-dot 1.7s ease-in-out infinite;
}


@keyframes mika-route-live-breathe {
    0%,
    100% {
        filter:
            brightness(1);

        text-shadow:
            0 0 0 rgba(57, 201, 148, 0);
    }

    50% {
        filter:
            brightness(1.16);

        text-shadow:
            0 0 10px rgba(57, 201, 148, 0.30);
    }
}


@keyframes mika-route-live-dot {
    0%,
    100% {
        transform:
            scale(1);

        box-shadow:
            0 0 0 4px rgba(57, 201, 148, 0.10),
            0 0 10px rgba(57, 201, 148, 0.30);
    }

    50% {
        transform:
            scale(1.35);

        box-shadow:
            0 0 0 7px rgba(57, 201, 148, 0.08),
            0 0 20px rgba(57, 201, 148, 0.70);
    }
}


@media (prefers-reduced-motion: reduce) {
    .v2-route-live,
    .v2-route-live > span {
        animation:
            none !important;
    }
}



/* ==========================================================
   MikaSwap live tracking timeline
   Completed = check
   Active    = rotating loader
   Future    = original step number
   ========================================================== */


/* Keep markers ready for custom states */
.swap-v2-body .tracking-step-marker {
    position: relative;

    display: inline-grid;
    place-items: center;

    overflow: visible;

    transition:
        background 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        color 220ms ease,
        transform 220ms ease;
}


/* ----------------------------------------------------------
   COMPLETED STEP
   ---------------------------------------------------------- */

.swap-v2-body
.tracking-step.complete
.tracking-step-marker {
    border-color:
        #39c994 !important;

    border-radius:
        50% !important;

    background:
        #39c994 !important;

    color:
        transparent !important;

    box-shadow:
        0 0 0 4px rgba(57, 201, 148, 0.08),
        0 0 14px rgba(57, 201, 148, 0.22);

    font-size:
        0 !important;
}


.swap-v2-body
.tracking-step.complete
.tracking-step-marker::before {
    content: "✓";

    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color:
        #07110f;

    font-size:
        20px;

    font-weight:
        950;

    line-height:
        1;
}


/* Completed text gets the subtle green state */
.swap-v2-body
.tracking-step.complete
.tracking-step-copy strong {
    color:
        #65ddb4;
}


/* ----------------------------------------------------------
   ACTIVE / CURRENT STEP
   ---------------------------------------------------------- */

.swap-v2-body
.tracking-step.active
.tracking-step-marker {
    border-color:
        rgba(57, 201, 148, 0.28) !important;

    border-radius:
        50% !important;

    background:
        rgba(32, 139, 106, 0.12) !important;

    color:
        transparent !important;

    box-shadow:
        0 0 0 4px rgba(57, 201, 148, 0.06),
        0 0 18px rgba(57, 201, 148, 0.16);

    font-size:
        0 !important;
}


/*
 * Rotating segmented-looking ring.
 */
.swap-v2-body
.tracking-step.active
.tracking-step-marker::before {
    content: "";

    position: absolute;

    width:
        24px;

    height:
        24px;

    border:
        3px solid rgba(101, 221, 180, 0.18);

    border-top-color:
        #65ddb4;

    border-right-color:
        #39c994;

    border-radius:
        50%;

    animation:
        mika-tracking-spinner 0.78s linear infinite;
}


.swap-v2-body
.tracking-step.active
.tracking-step-copy strong {
    color:
        #8aebcf;

    text-shadow:
        0 0 12px rgba(57, 201, 148, 0.18);
}


@keyframes mika-tracking-spinner {
    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


/* ----------------------------------------------------------
   FUTURE STEPS
   Keep their normal 02 / 03 / 04 / 05 numbers.
   ---------------------------------------------------------- */

.swap-v2-body
.tracking-step:not(.active):not(.complete)
.tracking-step-marker {
    opacity:
        0.66;
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .swap-v2-body
    .tracking-step.active
    .tracking-step-marker::before {
        animation:
            none !important;

        border-color:
            #39c994;
    }
}



/* ==========================================================
   MikaSwap tracking order ID — compact
   ========================================================== */

.swap-v2-body #trackingOrderId {
    font-size:
        clamp(20px, 2vw, 23px) !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -0.015em !important;
}


/* Tablet */
@media (max-width: 900px) {

    .swap-v2-body #trackingOrderId {
        font-size:
            clamp(19px, 3.2vw, 21px) !important;
    }

}


/* Mobile */
@media (max-width: 560px) {

    .swap-v2-body #trackingOrderId {
        font-size:
            clamp(17px, 5vw, 19px) !important;

        line-height:
            1.3 !important;
    }

}



/* ==========================================================
   MikaSwap tracking order ID — clean aligned format
   ========================================================== */

.swap-v2-body #trackingOrderId {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace !important;

    font-size:
        clamp(19px, 1.8vw, 22px) !important;

    font-weight:
        700 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        0.01em !important;

    white-space:
        nowrap !important;

    text-wrap:
        nowrap !important;

    overflow-wrap:
        normal !important;

    word-break:
        normal !important;

    font-variant-ligatures:
        none;

    max-width:
        100%;

    overflow-x:
        auto;
}


/* Mobile */
@media (max-width: 560px) {

    .swap-v2-body #trackingOrderId {
        font-size:
            clamp(15px, 4.2vw, 18px) !important;

        letter-spacing:
            0 !important;
    }

}



/* ==========================================================
   MikaSwap tracking order ID — final compact version
   ========================================================== */

.swap-v2-body #trackingOrderId {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace !important;

    font-size:
        clamp(15px, 1.45vw, 18px) !important;

    font-weight:
        700 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        0 !important;

    white-space:
        nowrap !important;

    text-wrap:
        nowrap !important;

    overflow:
        visible !important;

    overflow-x:
        visible !important;

    word-break:
        normal !important;

    overflow-wrap:
        normal !important;

    width:
        auto !important;

    max-width:
        100% !important;
}


/* Mobile */
@media (max-width: 560px) {

    .swap-v2-body #trackingOrderId {
        font-size:
            clamp(12px, 3.7vw, 14px) !important;
    }

}