:root {
    --page: #f3f1e9;
    --page-deep: #e9e6db;
    --surface: #fffef9;
    --surface-soft: #f8f7f1;
    --navy: #102638;
    --navy-soft: #294254;
    --muted: #687985;
    --line: #d9ddd8;
    --green: #0b8068;
    --green-dark: #076452;
    --green-soft: #dff3eb;
    --orange: #e58b45;
    --orange-soft: #fff0e2;
    --danger: #b84545;
    --danger-soft: #fde9e7;
    --white: #ffffff;
    --shadow:
        0 22px 60px rgba(16, 38, 56, 0.11);
    --shadow-small:
        0 10px 30px rgba(16, 38, 56, 0.075);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--navy);
    background:
        radial-gradient(
            circle at 8% 4%,
            rgba(229, 139, 69, 0.12),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(11, 128, 104, 0.11),
            transparent 28%
        ),
        var(--page);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
input,
select {
    font: inherit;
}

a {
    color: inherit;
}

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

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 86px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--navy);
    text-decoration: none;
    font-size: 21px;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.brand-symbol {
    position: relative;
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    overflow: hidden;
    border-radius: 50% 50% 46% 54%;
    color: white;
    background: var(--green);
    box-shadow: 0 10px 25px rgba(11, 128, 104, 0.25);
}

.brand-symbol::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--orange);
}

.brand-symbol span {
    position: relative;
    z-index: 1;
}

.header-links {
    display: flex;
    align-items: center;
    gap: 23px;
}

.header-link {
    color: var(--navy-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.private-chip {
    padding: 9px 13px;
    border: 1px solid rgba(11, 128, 104, 0.22);
    border-radius: 999px;
    color: var(--green-dark);
    background: rgba(223, 243, 235, 0.76);
    font-size: 12px;
    font-weight: 800;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
    gap: 65px;
    align-items: center;
    min-height: calc(100vh - 110px);
    padding: 45px 0 90px;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: 13px;
    font-weight: 800;
}

.hero-kicker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
}

.hero h1 {
    max-width: 700px;
    margin: 25px 0 20px;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(52px, 7vw, 84px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.hero-highlight {
    color: var(--green);
}

.hero-description {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.72;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 30px;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 850;
    cursor: pointer;
    transition:
        transform 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: white;
    background: var(--green);
    box-shadow: 0 16px 32px rgba(11, 128, 104, 0.23);
}

.button-primary:hover {
    background: var(--green-dark);
}

.button-secondary {
    border: 1px solid var(--line);
    color: var(--navy);
    background: rgba(255, 254, 249, 0.66);
}

.hero-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 36px;
}

.hero-point {
    padding: 15px;
    border: 1px solid rgba(16, 38, 56, 0.09);
    border-radius: 14px;
    background: rgba(255, 254, 249, 0.55);
}

.hero-point strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}

.hero-point span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.swap-window {
    position: relative;
    padding: 28px;
    border: 1px solid rgba(16, 38, 56, 0.09);
    border-radius: 28px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.swap-window::before {
    content: "";
    position: absolute;
    inset: 18px -16px -18px 16px;
    z-index: -1;
    border-radius: 28px;
    background: var(--green-soft);
}

.swap-window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.swap-window-title {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 24px;
    font-weight: 700;
}

.availability {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 800;
}

.availability-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
}

.preview-box,
.asset-entry {
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.field-eyebrow {
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.preview-amount,
.receive-number {
    font-size: 30px;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.preview-line,
.amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.asset-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-weight: 850;
}

.coin-circle {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    background: var(--navy);
    font-size: 13px;
}

.swap-bridge {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: -5px auto;
    border: 5px solid var(--surface);
    border-radius: 50%;
    color: white;
    background: var(--orange);
    font-weight: 900;
}

.quote-table {
    display: grid;
    gap: 11px;
    margin: 19px 0;
    padding: 17px;
    border-radius: 15px;
    background: #f1f4f1;
}

.quote-line {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted);
    font-size: 13px;
}

.quote-line strong {
    color: var(--navy);
    text-align: right;
}

.info-strip {
    display: flex;
    gap: 11px;
    margin-top: 16px;
    padding: 13px;
    border-radius: 13px;
    color: var(--navy-soft);
    background: var(--orange-soft);
    font-size: 12px;
    line-height: 1.5;
}

.principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-bottom: 85px;
}

.principle {
    padding: 24px;
    border: 1px solid rgba(16, 38, 56, 0.09);
    border-radius: 20px;
    background: rgba(255, 254, 249, 0.69);
}

.principle-number {
    color: var(--orange);
    font-family: Georgia, serif;
    font-size: 26px;
    font-weight: 700;
}

.principle h2 {
    margin: 16px 0 8px;
    font-size: 17px;
}

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

/* Swap page */

.page-heading {
    max-width: 760px;
    margin: 45px auto 27px;
    text-align: center;
}

.page-heading h1 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(40px, 6vw, 62px);
    letter-spacing: -0.045em;
}

.page-heading p {
    margin: 14px 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.swap-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
    align-items: start;
    max-width: 980px;
    margin: 0 auto 80px;
}

.production-card {
    border: 1px solid rgba(16, 38, 56, 0.1);
    border-radius: 23px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.swap-form-card {
    padding: 28px;
}

.side-panel {
    padding: 22px;
}

.form-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.form-heading h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 28px;
}

.form-heading p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.status-live {
    align-self: flex-start;
    padding: 8px 11px;
    border-radius: 999px;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: 11px;
    font-weight: 850;
}

.direction-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-bottom: 18px;
}

.direction-tab {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--navy-soft);
    background: var(--surface-soft);
    font-weight: 800;
    cursor: pointer;
}

.direction-tab.active {
    border-color: rgba(11, 128, 104, 0.35);
    color: var(--green-dark);
    background: var(--green-soft);
}

.hidden-select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.amount-input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--navy);
    background: transparent;
    font-size: 30px;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.address-section {
    margin-top: 18px;
}

.address-label {
    display: block;
    margin-bottom: 8px;
    color: var(--navy-soft);
    font-size: 13px;
    font-weight: 800;
}

.address-input {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    outline: 0;
    color: var(--navy);
    background: var(--surface-soft);
}

.address-input:focus {
    border-color: rgba(11, 128, 104, 0.6);
    box-shadow: 0 0 0 4px rgba(11, 128, 104, 0.08);
}

.address-help {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.error-message {
    margin-bottom: 18px;
    padding: 13px 14px;
    border: 1px solid rgba(184, 69, 69, 0.2);
    border-radius: 13px;
    color: var(--danger);
    background: var(--danger-soft);
}

.order-success {
    padding: 22px;
    border: 1px solid rgba(11, 128, 104, 0.22);
    border-radius: 17px;
    background: var(--green-soft);
}

.order-success h2 {
    margin-top: 0;
    font-family: Georgia, serif;
}

.order-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.order-detail {
    padding: 13px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.62);
}

.order-detail span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.order-detail strong {
    display: block;
    margin-top: 5px;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.side-panel h3 {
    margin: 0 0 17px;
    font-family: Georgia, serif;
    font-size: 21px;
}

.side-points {
    display: grid;
    gap: 15px;
}

.side-point {
    display: flex;
    gap: 11px;
}

.side-point-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: 12px;
    font-weight: 900;
}

.side-point strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}

.side-point p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.private-notice {
    margin-top: 18px;
    padding: 13px;
    border-radius: 13px;
    color: var(--navy-soft);
    background: var(--orange-soft);
    font-size: 12px;
    line-height: 1.5;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 19px;
    font-size: 13px;
}

@media (max-width: 920px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .swap-window {
        max-width: 650px;
    }

    .swap-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .header-links .header-link {
        display: none;
    }

    .hero-points,
    .principles {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-top: 30px;
    }

    .hero h1 {
        font-size: 53px;
    }

    .order-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .site-shell {
        width: min(100% - 22px, 1180px);
    }

    .site-header {
        min-height: 70px;
    }

    .brand {
        font-size: 18px;
    }

    .private-chip {
        padding: 7px 9px;
        font-size: 10px;
    }

    .swap-window,
    .swap-form-card {
        padding: 18px;
    }

    .form-heading {
        display: grid;
    }

    .hero-actions {
        display: grid;
    }

    .button {
        width: 100%;
    }

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

/* ==========================================================
   MikaSwap theme controls and branded asset icons
   ========================================================== */

:root {
    --btc: #f7931a;
    --xmr-orange: #ff6600;
    --xmr-dark: #4c4c4c;
}

body.dark-theme {
    --page: #0c1117;
    --page-deep: #111820;
    --surface: #151c24;
    --surface-soft: #1b242d;
    --navy: #f2f6f7;
    --navy-soft: #c2ced2;
    --muted: #8fa0a7;
    --line: #2b3740;
    --green: #20a884;
    --green-dark: #53cfad;
    --green-soft: #17382f;
    --orange-soft: #392a1c;
    --white: #1b242d;
    --shadow:
        0 22px 60px rgba(0, 0, 0, 0.38);
    --shadow-small:
        0 10px 30px rgba(0, 0, 0, 0.28);

    background:
        radial-gradient(
            circle at 8% 4%,
            rgba(229, 139, 69, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(32, 168, 132, 0.1),
            transparent 28%
        ),
        var(--page);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--navy-soft);
    background: var(--surface);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.theme-switch {
    position: relative;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: var(--line);
}

.theme-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--surface);
    transition: transform 160ms ease;
}

body.dark-theme .theme-switch {
    background: var(--green);
}

body.dark-theme .theme-switch::after {
    transform: translateX(15px);
}

.coin-circle.coin-btc {
    color: white;
    background: var(--btc);
    box-shadow: 0 5px 14px rgba(247, 147, 26, 0.28);
}

.coin-circle.coin-xmr {
    position: relative;
    overflow: hidden;
    color: white;
    background:
        linear-gradient(
            to bottom,
            var(--xmr-orange) 0 52%,
            var(--xmr-dark) 52% 100%
        );
    box-shadow: 0 5px 14px rgba(255, 102, 0, 0.23);
}

.coin-circle.coin-xmr::after {
    content: "";
    position: absolute;
    bottom: 4px;
    width: 18px;
    height: 9px;
    border: 3px solid white;
    border-top: 0;
    transform: rotate(180deg);
}

.coin-circle.coin-xmr span {
    position: relative;
    z-index: 2;
}

.liquidity-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 15px;
    overflow: hidden;
    border: 1px solid rgba(11, 128, 104, 0.14);
    border-radius: 14px;
    background: rgba(11, 128, 104, 0.14);
}

.liquidity-point {
    padding: 13px;
    background: var(--green-soft);
}

.liquidity-point strong {
    display: block;
    color: var(--green-dark);
    font-size: 12px;
}

.liquidity-point span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.mobile-menu-button {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--navy);
    background: var(--surface);
    font-size: 22px;
    cursor: pointer;
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 70px;
    right: 11px;
    z-index: 20;
    min-width: 210px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.mobile-menu.open {
    display: grid;
}

.mobile-menu a,
.mobile-menu button {
    padding: 12px;
    border: 0;
    border-radius: 10px;
    color: var(--navy);
    background: transparent;
    text-align: left;
    text-decoration: none;
    font-weight: 750;
}

.mobile-menu a:hover,
.mobile-menu button:hover {
    background: var(--surface-soft);
}

.site-header {
    position: relative;
}

@media (max-width: 700px) {
    .header-links {
        display: none;
    }

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

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

/* ==========================================================
   Dark-mode contrast fixes
   ========================================================== */

body.dark-theme {
    color: var(--navy);
}

body.dark-theme .site-header,
body.dark-theme .production-card,
body.dark-theme .swap-window,
body.dark-theme .preview-box,
body.dark-theme .asset-entry,
body.dark-theme .principle,
body.dark-theme .hero-point,
body.dark-theme .quote-table,
body.dark-theme .address-input,
body.dark-theme .asset-badge,
body.dark-theme .theme-toggle,
body.dark-theme .mobile-menu {
    color: var(--navy);
}

body.dark-theme .swap-window,
body.dark-theme .production-card {
    background:
        linear-gradient(
            160deg,
            #18222c,
            #111820
        );
}

body.dark-theme .preview-box,
body.dark-theme .asset-entry,
body.dark-theme .hero-point,
body.dark-theme .principle,
body.dark-theme .quote-table,
body.dark-theme .address-input {
    border-color: #33414c;
    background: #1b252f;
}

body.dark-theme .preview-amount,
body.dark-theme .receive-number,
body.dark-theme .amount-input,
body.dark-theme .quote-line strong,
body.dark-theme .asset-badge,
body.dark-theme .swap-window-title,
body.dark-theme .form-heading h2,
body.dark-theme .page-heading h1,
body.dark-theme .principle h2,
body.dark-theme .hero-point strong {
    color: #f4f7f8;
}

body.dark-theme .field-eyebrow,
body.dark-theme .quote-line,
body.dark-theme .address-help,
body.dark-theme .hero-description,
body.dark-theme .hero-point span,
body.dark-theme .principle p,
body.dark-theme .form-heading p {
    color: #a8b6bd;
}

body.dark-theme .address-input,
body.dark-theme .amount-input,
body.dark-theme select {
    color: #f4f7f8;
}

body.dark-theme .address-input::placeholder,
body.dark-theme .amount-input::placeholder {
    color: #73848d;
}

body.dark-theme .button-secondary {
    border-color: #33414c;
    color: #f4f7f8;
    background: #19232c;
}

body.dark-theme .info-strip,
body.dark-theme .private-notice {
    color: #f1d4b7;
    background: #38291d;
}

.home-amount-input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--navy);
    background: transparent;
    font-size: 30px;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.home-route-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.home-route-button {
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--navy-soft);
    background: var(--surface-soft);
    font-weight: 800;
    cursor: pointer;
}

.home-route-button.active {
    border-color: rgba(11, 128, 104, 0.4);
    color: var(--green-dark);
    background: var(--green-soft);
}

body.dark-theme .home-route-button {
    border-color: #33414c;
    color: #c5d0d5;
    background: #1b252f;
}

body.dark-theme .home-route-button.active {
    border-color: #20a884;
    color: #7be0c2;
    background: #17382f;
}

body.dark-theme .home-amount-input {
    color: #f4f7f8;
}

/* ==========================================================
   Privacy-focused homepage visual
   ========================================================== */

.privacy-stage {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid rgba(16, 38, 56, 0.1);
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(11, 128, 104, 0.18),
            transparent 30%
        ),
        linear-gradient(
            160deg,
            rgba(255, 254, 249, 0.96),
            rgba(238, 245, 240, 0.92)
        );
    box-shadow: var(--shadow);
}

body.dark-theme .privacy-stage {
    border-color: #2d3a44;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(32, 168, 132, 0.16),
            transparent 34%
        ),
        linear-gradient(
            160deg,
            #17212a,
            #10171e
        );
}

.privacy-grid {
    position: absolute;
    inset: 0;
    opacity: 0.34;
    background-image:
        linear-gradient(
            rgba(11, 128, 104, 0.09) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11, 128, 104, 0.09) 1px,
            transparent 1px
        );
    background-size: 42px 42px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 18%,
            black 82%,
            transparent
        );
}

.privacy-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(11, 128, 104, 0.22);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.privacy-orbit::before,
.privacy-orbit::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(11, 128, 104, 0.17);
    border-radius: 50%;
}

.privacy-orbit::before {
    inset: 45px;
}

.privacy-orbit::after {
    inset: 105px;
}

.privacy-core {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    border-radius: 38px;
    color: white;
    background:
        linear-gradient(
            145deg,
            var(--green),
            var(--green-dark)
        );
    box-shadow:
        0 22px 50px rgba(11, 128, 104, 0.28),
        0 0 0 14px rgba(11, 128, 104, 0.08);
    transform: translate(-50%, -50%) rotate(45deg);
}

.privacy-core-content {
    display: grid;
    place-items: center;
    gap: 4px;
    transform: rotate(-45deg);
}

.privacy-shield {
    font-size: 31px;
}

.privacy-core-content strong {
    font-size: 13px;
}

.privacy-node {
    position: absolute;
    display: grid;
    place-items: center;
    width: 105px;
    min-height: 78px;
    padding: 12px;
    border: 1px solid rgba(16, 38, 56, 0.1);
    border-radius: 18px;
    color: var(--navy);
    background: rgba(255, 254, 249, 0.9);
    box-shadow: var(--shadow-small);
    text-align: center;
}

body.dark-theme .privacy-node {
    border-color: #33414c;
    color: #f4f7f8;
    background: rgba(27, 37, 47, 0.92);
}

.privacy-node strong {
    display: block;
    margin-top: 6px;
    font-size: 12px;
}

.privacy-node span {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
}

.privacy-node-wallet {
    top: 14%;
    left: 8%;
}

.privacy-node-liquidity {
    top: 13%;
    right: 8%;
}

.privacy-node-confirmations {
    bottom: 14%;
    left: 8%;
}

.privacy-node-payout {
    right: 8%;
    bottom: 14%;
}

.privacy-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 310px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(11, 128, 104, 0.54),
            transparent
        );
    transform-origin: center;
}

.privacy-line-one {
    transform: translate(-50%, -50%) rotate(34deg);
}

.privacy-line-two {
    transform: translate(-50%, -50%) rotate(-34deg);
}

.privacy-pulse-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 20px var(--green);
    animation: privacyPulse 2.8s ease-in-out infinite;
}

.privacy-dot-one {
    top: 31%;
    left: 29%;
}

.privacy-dot-two {
    right: 27%;
    bottom: 29%;
    animation-delay: 1.3s;
}

@keyframes privacyPulse {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

.privacy-caption {
    position: absolute;
    right: 24px;
    bottom: 22px;
    left: 24px;
    padding: 15px;
    border: 1px solid rgba(11, 128, 104, 0.15);
    border-radius: 15px;
    color: var(--navy-soft);
    background: rgba(223, 243, 235, 0.82);
    text-align: center;
    font-size: 12px;
    line-height: 1.55;
}

body.dark-theme .privacy-caption {
    border-color: rgba(32, 168, 132, 0.22);
    color: #c4d2d7;
    background: rgba(23, 56, 47, 0.8);
}

/* Telegram support */

.telegram-support {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 17px;
    border: 1px solid rgba(34, 158, 217, 0.22);
    border-radius: 14px;
    color: #0d6f9e;
    background: rgba(34, 158, 217, 0.08);
    text-decoration: none;
    font-weight: 850;
    transition:
        transform 160ms ease,
        background 160ms ease;
}

.telegram-support:hover {
    transform: translateY(-2px);
    background: rgba(34, 158, 217, 0.14);
}

.telegram-logo {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    color: white;
    background: #229ed9;
    box-shadow: 0 8px 18px rgba(34, 158, 217, 0.24);
}

.telegram-logo svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

body.dark-theme .telegram-support {
    color: #78cff8;
    background: rgba(34, 158, 217, 0.12);
}

.support-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 0 0 80px;
    padding: 20px 22px;
    border: 1px solid rgba(16, 38, 56, 0.09);
    border-radius: 20px;
    background: rgba(255, 254, 249, 0.68);
}

body.dark-theme .support-strip {
    border-color: #2d3a44;
    background: rgba(21, 28, 36, 0.84);
}

.support-strip h2 {
    margin: 0 0 5px;
    font-size: 17px;
}

.support-strip p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 700px) {
    .privacy-stage {
        min-height: 510px;
    }

    .privacy-orbit {
        width: 280px;
        height: 280px;
    }

    .privacy-node {
        width: 92px;
        min-height: 70px;
        padding: 9px;
    }

    .privacy-node-wallet,
    .privacy-node-confirmations {
        left: 4%;
    }

    .privacy-node-liquidity,
    .privacy-node-payout {
        right: 4%;
    }

    .support-strip {
        display: grid;
    }
}

/* ==========================================================
   MikaSwap production layout v1
   ========================================================== */

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] body {
    --page: #0b1016;
    --surface: #121920;
    --surface-soft: #182129;
    --navy: #f4f7f8;
    --navy-soft: #c3cdd1;
    --muted: #8e9da4;
    --line: #29343d;
    --green: #39c994;
    --green-dark: #65ddb4;
    --green-soft: #14372d;
    --orange-soft: #382819;
    --white: #182129;

    background: var(--page);
}

.site-backdrop {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    pointer-events: none;
}

.backdrop-grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image:
        linear-gradient(
            rgba(57, 201, 148, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(57, 201, 148, 0.08) 1px,
            transparent 1px
        );
    background-size: 54px 54px;
    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 78%
        );
}

.backdrop-glow {
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    filter: blur(125px);
    opacity: 0.16;
}

.backdrop-glow-one {
    top: -310px;
    left: -220px;
    background: var(--green);
}

.backdrop-glow-two {
    right: -330px;
    bottom: -310px;
    background: #397bc9;
}

.backdrop-orbit {
    position: absolute;
    border: 1px solid rgba(57, 201, 148, 0.08);
    border-radius: 50%;
}

.backdrop-orbit-one {
    top: 12%;
    right: -260px;
    width: 600px;
    height: 600px;
}

.backdrop-orbit-two {
    bottom: 9%;
    left: -190px;
    width: 420px;
    height: 420px;
}

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

.desktop-navigation a {
    color: var(--navy-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 720;
}

.desktop-navigation a:hover {
    color: var(--navy);
}

.theme-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--navy-soft);
    background: var(--surface);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.minimal-hero {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(430px, 1.08fr);
    gap: 66px;
    align-items: center;
    min-height: calc(100vh - 95px);
    padding: 65px 0 100px;
}

.minimal-hero h1 {
    margin: 24px 0 21px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(56px, 7.2vw, 91px);
    line-height: 0.94;
    letter-spacing: -0.062em;
}

.minimal-hero h1 span {
    display: block;
    color: var(--green);
}

.minimal-hero-description {
    max-width: 640px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.75;
}

.compact-assurances {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 25px;
    color: var(--navy-soft);
    font-size: 13px;
    font-weight: 720;
}

.liquidity-visual {
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 27px;
    background:
        linear-gradient(
            150deg,
            color-mix(in srgb, var(--surface) 95%, transparent),
            color-mix(in srgb, var(--surface-soft) 92%, transparent)
        );
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.visual-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 19px;
    padding: 8px 11px;
    border-radius: 999px;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: 11px;
    font-weight: 850;
}

.visual-route {
    display: grid;
    gap: 10px;
}

.visual-node {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: center;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface);
}

.visual-node.primary {
    border-color:
        color-mix(in srgb, var(--green) 42%, var(--line));
    background:
        color-mix(in srgb, var(--green-soft) 56%, var(--surface));
}

.visual-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: 900;
}

.wallet-icon {
    color: #f7931a;
    background: rgba(247, 147, 26, 0.13);
}

.liquidity-icon {
    color: white;
    background: var(--green);
    box-shadow: 0 10px 22px rgba(57, 201, 148, 0.22);
}

.payout-icon {
    color: #68a8ff;
    background: rgba(77, 142, 232, 0.13);
}

.visual-node span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.visual-node strong {
    display: block;
    margin-top: 3px;
    font-size: 15px;
}

.visual-node p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.visual-connector {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 0 20px;
}

.visual-connector span {
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            color-mix(in srgb, var(--green) 55%, transparent)
        );
}

.visual-connector span:last-child {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--green) 55%, transparent),
            transparent
        );
}

.visual-connector small {
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}

.visual-footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.how-section {
    padding: 70px 0 100px;
}

.section-heading {
    max-width: 700px;
    margin-bottom: 35px;
}

.section-heading > span,
.section-label {
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.section-heading h2,
.trust-section h2,
.support-banner h2 {
    margin: 12px 0 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 5vw, 50px);
    letter-spacing: -0.04em;
}

.section-heading p,
.support-banner p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.how-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
}

.how-card {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
        color-mix(in srgb, var(--surface) 90%, transparent);
}

.how-number {
    color: var(--green);
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 800;
}

.how-card h3 {
    margin: 17px 0 9px;
    font-size: 16px;
}

.how-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.58;
}

.trust-section {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
    padding: 80px 0 110px;
    border-top: 1px solid var(--line);
}

.trust-list-minimal {
    display: grid;
}

.trust-list-minimal article {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.trust-list-minimal article > span {
    color: var(--green);
    font-family: Georgia, serif;
    font-weight: 800;
}

.trust-list-minimal strong {
    font-size: 15px;
}

.trust-list-minimal p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.support-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    margin-bottom: 95px;
    padding: 29px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        color-mix(in srgb, var(--surface) 91%, transparent);
}

.support-banner h2 {
    font-size: 31px;
}

.site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: center;
    padding: 32px 0 40px;
    border-top: 1px solid var(--line);
}

.footer-brand p,
.footer-disclaimer {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.footer-links {
    display: flex;
    gap: 18px;
}

.footer-links a {
    color: var(--navy-soft);
    text-decoration: none;
    font-size: 12px;
    font-weight: 750;
}

.footer-disclaimer {
    max-width: 370px;
    margin-left: auto;
    text-align: right;
}

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

.floating-telegram {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px 9px 9px;
    border: 1px solid rgba(34, 158, 217, 0.26);
    border-radius: 999px;
    color: #eefaff;
    background: rgba(19, 35, 45, 0.92);
    box-shadow: 0 15px 38px rgba(0, 0, 0, 0.27);
    backdrop-filter: blur(16px);
    text-decoration: none;
}

.floating-telegram-text {
    display: grid;
    font-size: 10px;
}

.floating-telegram-text strong {
    font-size: 12px;
}

@media (max-width: 940px) {
    .minimal-hero {
        grid-template-columns: 1fr;
    }

    .liquidity-visual {
        max-width: 680px;
    }

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

    .trust-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 700px) {
    .desktop-navigation {
        display: none;
    }

    .minimal-hero {
        padding-top: 42px;
    }

    .minimal-hero h1 {
        font-size: 54px;
    }

    .how-grid {
        grid-template-columns: 1fr;
    }

    .support-banner,
    .site-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .footer-disclaimer {
        margin-left: 0;
        text-align: left;
    }

    .floating-telegram-text {
        display: none;
    }

    .floating-telegram {
        padding: 8px;
    }
}

/* Mobile header theme control */

.mobile-header-actions {
    display: none;
    align-items: center;
    gap: 9px;
}

.mobile-theme-button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--navy);
    background: var(--surface);
    font-size: 18px;
    cursor: pointer;
}

.mobile-theme-button:active,
.mobile-menu-button:active {
    transform: scale(0.96);
}

@media (max-width: 700px) {
    .mobile-header-actions {
        display: flex;
    }

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

    .mobile-menu {
        top: 64px;
        right: 0;
        left: auto;
        width: min(260px, calc(100vw - 22px));
    }
}

/* ==========================================================
   Readability and mobile contrast improvements
   ========================================================== */

html[data-theme="dark"] body {
    --navy: #f7fafb;
    --navy-soft: #d5dfe3;
    --muted: #aebbc1;
    --line: #34424d;
    --surface: #131c24;
    --surface-soft: #1a2530;
}

html[data-theme="light"] body {
    --navy: #102638;
    --navy-soft: #344d5e;
    --muted: #5f727d;
}

/* Improve important secondary text */
.page-heading p,
.minimal-hero-description,
.form-heading p,
.address-help,
.visual-node p,
.how-card p,
.trust-list-minimal p,
.support-banner p,
.footer-disclaimer,
.footer-brand p {
    color: var(--muted);
    font-weight: 500;
}

/* Stronger labels */
.field-eyebrow,
.address-label,
.visual-node span,
.section-label,
.section-heading > span {
    color: var(--navy-soft);
}

/* Improve cards and form contrast in dark mode */
html[data-theme="dark"] .production-card,
html[data-theme="dark"] .asset-entry,
html[data-theme="dark"] .direction-tab,
html[data-theme="dark"] .address-input,
html[data-theme="dark"] .quote-table {
    border-color: #3a4a56;
}

html[data-theme="dark"] .asset-entry,
html[data-theme="dark"] .address-input,
html[data-theme="dark"] .quote-table {
    background: #1a2530;
}

html[data-theme="dark"] .amount-input,
html[data-theme="dark"] .receive-number,
html[data-theme="dark"] .quote-line strong,
html[data-theme="dark"] .address-input,
html[data-theme="dark"] .asset-badge {
    color: #ffffff;
}

html[data-theme="dark"] .direction-tab {
    color: #d4dee2;
}

html[data-theme="dark"] .direction-tab.active {
    color: #68e0b6;
}

/* More readable input cursor and selection */
.amount-input,
.address-input {
    caret-color: var(--green);
}

.amount-input::selection,
.address-input::selection {
    color: white;
    background: var(--green);
}

/* Mobile sizing refinements */
@media (max-width: 700px) {
    .page-heading {
        margin-top: 30px;
        margin-bottom: 24px;
    }

    .page-heading h1 {
        font-size: 45px;
        line-height: 1.02;
    }

    .page-heading p {
        font-size: 17px;
        line-height: 1.55;
    }

    .swap-form-card {
        padding: 20px;
    }

    .form-heading h2 {
        font-size: 37px;
    }

    .form-heading p {
        font-size: 15px;
    }

    .field-eyebrow {
        font-size: 12px;
    }

    .amount-input,
    .receive-number {
        font-size: 36px;
    }

    .direction-tab {
        min-height: 64px;
        font-size: 17px;
    }

    .asset-entry {
        padding: 21px;
    }
}

/* ==========================================================
   MikaSwap support drawer
   ========================================================== */

.floating-support-button {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 16px 8px 8px;
    border: 1px solid rgba(34, 158, 217, 0.28);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(15, 31, 42, 0.94);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(18px);
    cursor: pointer;
}

.support-button-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: white;
    background: #229ed9;
}

.support-button-icon svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.support-button-copy {
    display: grid;
    text-align: left;
}

.support-button-copy small {
    color: #b7c8d0;
    font-size: 10px;
}

.support-button-copy strong {
    font-size: 13px;
}

.support-drawer {
    position: fixed;
    right: 20px;
    bottom: 92px;
    z-index: 90;
    width: min(390px, calc(100vw - 30px));
    max-height: calc(100vh - 125px);
    overflow-y: auto;
    padding: 21px;
    border: 1px solid var(--line);
    border-radius: 23px;
    color: var(--navy);
    background: var(--surface);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(0.97);
    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease;
}

.support-drawer.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.support-drawer-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.support-drawer-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.support-drawer-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
}

.support-drawer-header h2 {
    margin: 8px 0 0;
    font-family: Georgia, serif;
    font-size: 27px;
}

.support-close-button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--navy);
    background: var(--surface-soft);
    font-size: 24px;
    cursor: pointer;
}

.support-welcome {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    margin-top: 20px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.support-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: white;
    background: var(--green);
    font-weight: 900;
}

.support-welcome strong {
    font-size: 14px;
}

.support-welcome p,
.support-safety p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.support-safety {
    margin-top: 13px;
    padding: 14px;
    border-radius: 14px;
    color: #f6cf9f;
    background: var(--orange-soft);
}

.support-safety strong {
    font-size: 12px;
}

.support-topic-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.support-topic-list a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--navy);
    background: transparent;
    text-decoration: none;
    font-size: 13px;
    font-weight: 780;
}

.support-topic-list a:hover {
    background: var(--surface-soft);
}

.support-topic-list span {
    color: var(--green);
    font-family: Georgia, serif;
    font-weight: 850;
}

.support-telegram-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 53px;
    margin-top: 16px;
    border-radius: 14px;
    color: white;
    background: #229ed9;
    text-decoration: none;
    font-weight: 850;
}

.support-response-note {
    margin: 12px 0 0;
    color: var(--muted);
    text-align: center;
    font-size: 10px;
    line-height: 1.45;
}

.support-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(2, 8, 14, 0.42);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(2px);
    transition:
        opacity 180ms ease,
        visibility 180ms ease;
}

.support-overlay.open {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 700px) {
    .floating-support-button {
        right: 16px;
        bottom: 17px;
        padding: 8px;
    }

    .support-button-copy {
        display: none;
    }

    .support-drawer {
        right: 10px;
        bottom: 80px;
        width: calc(100vw - 20px);
        max-height: calc(100vh - 105px);
    }
}

/* Private-build badge contrast fix */

.private-chip {
    border: 1px solid rgba(57, 201, 148, 0.38);
    color: #0d6f57;
    background: #d8f4e8;
    box-shadow: 0 6px 18px rgba(57, 201, 148, 0.12);
}

html[data-theme="dark"] .private-chip {
    border-color: rgba(101, 221, 180, 0.42);
    color: #8ff0cf;
    background: #153c31;
    box-shadow: 0 6px 18px rgba(57, 201, 148, 0.13);
}

/* ==========================================================
   MikaSwap operational status badge
   ========================================================== */

.private-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(38, 176, 127, 0.3);
    border-radius: 999px;
    color: #087255;
    background: rgba(217, 247, 235, 0.94);
    box-shadow:
        0 8px 22px rgba(38, 176, 127, 0.11);
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.system-status-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #20b77f;
    box-shadow: 0 0 12px rgba(32, 183, 127, 0.72);
}

.system-status-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(32, 183, 127, 0.45);
    border-radius: 50%;
    animation: systemStatusPulse 2.4s ease-out infinite;
}

@keyframes systemStatusPulse {
    0% {
        opacity: 0.8;
        transform: scale(0.55);
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

html[data-theme="dark"] .private-chip {
    border-color: rgba(101, 221, 180, 0.28);
    color: #8ff0cf;
    background: rgba(20, 55, 45, 0.94);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .system-status-dot {
    background: #55dda9;
    box-shadow: 0 0 14px rgba(85, 221, 169, 0.78);
}

@media (max-width: 700px) {
    .private-chip {
        min-height: 36px;
        padding: 0 11px;
        font-size: 10px;
    }
}

/* MikaSwap fee schedule */

.fee-schedule {
    margin-top: 22px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface-soft);
}

.fee-schedule-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.fee-schedule-heading span:first-child {
    color: var(--green-dark);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.fee-schedule-heading h3 {
    margin: 5px 0 0;
    font-family: Georgia, serif;
    font-size: 21px;
}

.fee-included-chip {
    padding: 6px 8px;
    border-radius: 999px;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.fee-tier {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
}

.fee-tier strong {
    color: var(--navy);
    white-space: nowrap;
}

.fee-schedule-note {
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

html[data-theme="dark"] .fee-schedule {
    border-color: #3a4a56;
    background: #17222b;
}

@media (max-width: 700px) {
    .fee-schedule {
        padding: 15px;
    }

    .fee-schedule-heading {
        display: grid;
    }

    .fee-included-chip {
        justify-self: start;
    }
}

/* Amount input and minimum-value hint */

.amount-input::placeholder {
    color: color-mix(
        in srgb,
        var(--muted) 72%,
        transparent
    );
    opacity: 1;
}

.amount-limit-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
}

.amount-limit-row strong {
    color: var(--navy-soft);
    font-weight: 800;
}

html[data-theme="dark"] .amount-input::placeholder {
    color: #72858f;
}

html[data-theme="dark"] .amount-limit-row {
    border-color: #344550;
}

html[data-theme="dark"] .amount-limit-row strong {
    color: #cbd7dc;
}

@media (max-width: 700px) {
    .amount-input {
        font-size: 38px;
    }

    .amount-input::placeholder {
        font-size: 38px;
    }

    .amount-limit-row {
        font-size: 12px;
    }
}


/* MikaSwap specialist homepage */

.specialist-hero {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(430px, 1.05fr);
    gap: 68px;
    align-items: center;
    min-height: calc(100vh - 92px);
    padding: 65px 0 100px;
}

.specialist-hero h1 {
    margin: 24px 0 21px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(58px, 7.2vw, 92px);
    line-height: 0.94;
    letter-spacing: -0.062em;
}

.specialist-hero h1 span {
    display: block;
    color: var(--green);
}

.specialist-description {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.75;
}

.specialist-visual {
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background:
        linear-gradient(
            150deg,
            color-mix(in srgb, var(--surface) 95%, transparent),
            color-mix(in srgb, var(--surface-soft) 91%, transparent)
        );
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.route-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 19px;
    padding: 8px 11px;
    border-radius: 999px;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: 11px;
    font-weight: 850;
}

.route-flow {
    display: grid;
    gap: 10px;
}

.route-node {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}

.route-node-primary {
    border-color:
        color-mix(in srgb, var(--green) 46%, var(--line));
    background:
        color-mix(in srgb, var(--green-soft) 58%, var(--surface));
}

.route-coin {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    border-radius: 16px;
    color: white;
    font-size: 20px;
    font-weight: 900;
}

.route-btc {
    background: #f7931a;
    box-shadow: 0 10px 24px rgba(247, 147, 26, 0.23);
}

.route-mika {
    background: var(--green);
    box-shadow: 0 10px 24px rgba(57, 201, 148, 0.22);
}

.route-xmr {
    background:
        linear-gradient(
            to bottom,
            #ff6600 0 53%,
            #4c4c4c 53% 100%
        );
    box-shadow: 0 10px 24px rgba(255, 102, 0, 0.19);
}

.route-node span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.route-node strong {
    display: block;
    margin-top: 3px;
    font-size: 15px;
}

.route-node p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.48;
}

.route-connector {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 0 20px;
}

.route-connector span {
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            color-mix(in srgb, var(--green) 62%, transparent)
        );
}

.route-connector span:last-child {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--green) 62%, transparent),
            transparent
        );
}

.route-connector small {
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}

.promise-section {
    padding: 75px 0 105px;
}

.promise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 34px;
}

.promise-card {
    padding: 23px;
    border: 1px solid var(--line);
    border-radius: 19px;
    background:
        color-mix(in srgb, var(--surface) 91%, transparent);
    transition:
        transform 170ms ease,
        border-color 170ms ease;
}

.promise-card:hover {
    border-color:
        color-mix(in srgb, var(--green) 45%, var(--line));
    transform: translateY(-3px);
}

.promise-number {
    color: var(--green);
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 800;
}

.promise-card h3 {
    margin: 17px 0 9px;
    font-size: 16px;
}

.promise-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.58;
}

@media (max-width: 940px) {
    .specialist-hero {
        grid-template-columns: 1fr;
    }

    .specialist-visual {
        max-width: 680px;
    }

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

@media (max-width: 700px) {
    .specialist-hero {
        padding-top: 42px;
    }

    .specialist-hero h1 {
        font-size: 52px;
    }

    .specialist-description {
        font-size: 17px;
    }

    .promise-grid {
        grid-template-columns: 1fr;
    }

    .route-node {
        grid-template-columns: 45px 1fr;
        padding: 16px;
    }

    .route-coin {
        width: 44px;
        height: 44px;
    }
}


/* MikaSwap swap-form final UI polish */

.receive-number {
    min-height: 48px;
    color: var(--navy);
    overflow-wrap: anywhere;
}

.receive-number:has(+ .asset-badge) {
    line-height: 1.1;
}

.receive-quote-note {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

.amount-limit-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.amount-limit-row > div {
    display: grid;
    gap: 5px;
}

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

.amount-limit-row span {
    color: var(--muted);
}

.amount-limit-row strong {
    color: var(--navy-soft);
    font-size: 12px;
}

.swap-submit-button {
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.swap-submit-button:disabled {
    opacity: 0.46;
    cursor: not-allowed;
    box-shadow: none;
    filter: saturate(0.55);
}

.swap-submit-button.ready {
    opacity: 1;
    cursor: pointer;
    box-shadow:
        0 15px 38px rgba(57, 201, 148, 0.25),
        0 0 0 1px rgba(57, 201, 148, 0.12);
}

.swap-submit-button.ready:hover {
    transform: translateY(-2px);
}

html[data-theme="dark"] .receive-quote-note {
    border-color: #344550;
    color: #aebbc1;
}

html[data-theme="dark"] .receive-number {
    color: #f7fafb;
}

@media (max-width: 700px) {
    .receive-number {
        font-size: 28px;
    }

    .receive-number:not(:empty) {
        line-height: 1.15;
    }

    .amount-limit-row {
        gap: 12px;
    }

    .amount-limit-row strong {
        font-size: 11px;
    }
}


/* Compact estimated-receive card */

.receive-number {
    min-height: auto;
    max-width: calc(100% - 125px);
    color: var(--muted);
    font-size: 24px;
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: -0.025em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.receive-number.has-quote {
    color: var(--navy);
    font-size: 36px;
    font-weight: 850;
}

.quote-summary-note {
    margin: 15px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

.receive-quote-note {
    display: none;
}

@media (max-width: 700px) {
    .receive-number {
        max-width: calc(100% - 112px);
        font-size: 20px;
    }

    .receive-number.has-quote {
        font-size: 31px;
    }

    .quote-summary-note {
        font-size: 12px;
    }
}


/* Matching send and receive amount styling */

.amount-input,
.receive-number {
    color: var(--muted);
    font-size: 34px;
    font-weight: 780;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

.amount-input {
    min-width: 0;
}

.amount-input:not(:placeholder-shown) {
    color: var(--navy);
    font-weight: 850;
}

.amount-input::placeholder {
    color: var(--muted);
    opacity: 0.78;
}

.receive-number {
    min-height: auto;
    max-width: calc(100% - 125px);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        color 160ms ease,
        opacity 160ms ease,
        transform 160ms ease;
}

.receive-number.has-quote {
    color: var(--navy);
    font-weight: 850;
    opacity: 1;
    transform: translateY(0);
}

.asset-badge {
    flex: 0 0 auto;
}

.coin-circle {
    width: 32px;
    height: 32px;
}

html[data-theme="dark"] .amount-input:not(:placeholder-shown),
html[data-theme="dark"] .receive-number.has-quote {
    color: #ffffff;
}

html[data-theme="dark"] .amount-input::placeholder,
html[data-theme="dark"] .receive-number {
    color: #748690;
}

@media (max-width: 700px) {
    .amount-input,
    .receive-number {
        font-size: 31px;
    }

    .receive-number {
        max-width: calc(100% - 112px);
    }

    .coin-circle {
        width: 31px;
        height: 31px;
    }
}

@media (max-width: 390px) {
    .amount-input,
    .receive-number {
        font-size: 27px;
    }
}

/* Final empty-state amount balance */

.receive-number {
    color: var(--muted);
    font-size: 29px;
    font-weight: 760;
    opacity: 0.72;
}

.receive-number.has-quote {
    color: var(--navy);
    font-size: 31px;
    font-weight: 850;
    opacity: 1;
}

html[data-theme="dark"] .receive-number {
    color: #748690;
    opacity: 0.72;
}

html[data-theme="dark"] .receive-number.has-quote {
    color: #ffffff;
    opacity: 1;
}

@media (max-width: 700px) {
    .receive-number {
        font-size: 27px;
    }

    .receive-number.has-quote {
        font-size: 29px;
    }
}

/* ==========================================================
   Final unified BTC and XMR amount styling
   ========================================================== */

.amount-input,
.receive-number {
    width: 100%;
    min-width: 0;
    max-width: calc(100% - 128px);
    min-height: 52px;

    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;

    color: #748690;
    background: transparent;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 32px;
    font-weight: 760;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;

    opacity: 0.78;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* BTC empty placeholder */
.amount-input::placeholder {
    color: #748690;
    opacity: 1;
}

/* BTC after the trader types */
.amount-input:not(:placeholder-shown) {
    color: var(--navy);
    font-size: 32px;
    font-weight: 850;
    opacity: 1;
}

/* XMR after a quote exists */
.receive-number.has-quote {
    color: var(--navy);
    font-size: 32px;
    font-weight: 850;
    opacity: 1;
}

/* Dark-mode consistency */
html[data-theme="dark"] .amount-input,
html[data-theme="dark"] .amount-input::placeholder,
html[data-theme="dark"] .receive-number {
    color: #748690;
}

html[data-theme="dark"]
.amount-input:not(:placeholder-shown),
html[data-theme="dark"]
.receive-number.has-quote {
    color: #ffffff;
}

/* Prevent older rules from resizing only one field */
.receive-number,
.receive-number.has-quote {
    transform: none;
}

@media (max-width: 700px) {
    .amount-input,
    .amount-input:not(:placeholder-shown),
    .receive-number,
    .receive-number.has-quote {
        max-width: calc(100% - 118px);
        min-height: 48px;
        font-size: 29px;
    }
}

@media (max-width: 390px) {
    .amount-input,
    .amount-input:not(:placeholder-shown),
    .receive-number,
    .receive-number.has-quote {
        max-width: calc(100% - 108px);
        font-size: 26px;
    }
}


/* BTC-native MikaSwap fee display */

#feeText {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    transition: color 160ms ease;
}

#feeText.fee-valid {
    color: var(--green-dark);
}

.fee-tier span {
    font-variant-numeric: tabular-nums;
}

.fee-tier strong {
    font-variant-numeric: tabular-nums;
}

.fee-schedule-note {
    line-height: 1.65;
}

@media (max-width: 700px) {
    .fee-tier {
        align-items: flex-start;
    }

    .fee-tier span {
        max-width: 60%;
        line-height: 1.45;
    }

    .fee-tier strong {
        max-width: 40%;
        text-align: right;
        line-height: 1.45;
    }
}

/* ==========================================================
   Definitive matching BTC and XMR amount layout
   ========================================================== */

/* Both amount rows use identical columns */
.asset-entry .amount-row,
.preview-box .preview-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    width: 100%;
}

/* Remove all older width and clipping restrictions */
.amount-input,
.receive-number {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 44px;

    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;

    color: #748690;
    background: transparent;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 29px;
    font-weight: 760;
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;

    opacity: 0.76;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    transform: none;
}

/* Same empty appearance */
.amount-input::placeholder {
    color: #748690;
    opacity: 1;
}

/* Same active appearance */
.amount-input:not(:placeholder-shown),
.receive-number.has-quote {
    color: var(--navy);
    font-size: 29px;
    font-weight: 850;
    opacity: 1;
}

/* Keep asset badge from squeezing the number */
.asset-badge {
    flex: none;
    min-width: 105px;
    justify-content: center;
}

/* Dark-mode consistency */
html[data-theme="dark"] .amount-input,
html[data-theme="dark"] .amount-input::placeholder,
html[data-theme="dark"] .receive-number {
    color: #748690;
}

html[data-theme="dark"] .amount-input:not(:placeholder-shown),
html[data-theme="dark"] .receive-number.has-quote {
    color: #ffffff;
}

/* Make the maximum row clearer */
.fee-limit-tier {
    color: var(--navy-soft);
}

.fee-limit-tier strong {
    color: var(--green-dark);
}

@media (max-width: 700px) {
    .asset-entry .amount-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .amount-input,
    .receive-number,
    .amount-input:not(:placeholder-shown),
    .receive-number.has-quote {
        width: 100%;
        max-width: none;
        min-height: 40px;
        font-size: 27px;
    }

    .asset-badge {
        min-width: 103px;
    }
}

@media (max-width: 390px) {
    .amount-input,
    .receive-number,
    .amount-input:not(:placeholder-shown),
    .receive-number.has-quote {
        font-size: 24px;
    }

    .asset-badge {
        min-width: 96px;
    }
}

/* Exact empty-state color match for BTC and XMR */

.amount-input::placeholder,
.receive-number:not(.has-quote) {
    color: #748690 !important;
    opacity: 0.76 !important;
    font-weight: 760 !important;
}

html[data-theme="dark"] .amount-input::placeholder,
html[data-theme="dark"] .receive-number:not(.has-quote) {
    color: #748690 !important;
    opacity: 0.76 !important;
}

/* Keep active values bright */
.amount-input:not(:placeholder-shown),
.receive-number.has-quote {
    color: var(--navy) !important;
    opacity: 1 !important;
    font-weight: 850 !important;
}

html[data-theme="dark"] .amount-input:not(:placeholder-shown),
html[data-theme="dark"] .receive-number.has-quote {
    color: #ffffff !important;
}

/* ==========================================================
   Final exact BTC/XMR empty amount match
   ========================================================== */

.amount-input,
.receive-number,
.amount-input::placeholder {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 29px !important;
    font-weight: 760 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    font-variant-numeric: tabular-nums !important;

    color: rgba(116, 134, 144, 0.80) !important;
    opacity: 1 !important;
}

/* Actual typed BTC and calculated XMR values */
.amount-input:not(:placeholder-shown),
.receive-number.has-quote {
    color: rgba(255, 255, 255, 0.80) !important;
    font-size: 29px !important;
    font-weight: 850 !important;
    opacity: 1 !important;
}

@media (max-width: 700px) {
    .amount-input,
    .receive-number,
    .amount-input::placeholder,
    .amount-input:not(:placeholder-shown),
    .receive-number.has-quote {
        font-size: 27px !important;
    }
}

@media (max-width: 390px) {
    .amount-input,
    .receive-number,
    .amount-input::placeholder,
    .amount-input:not(:placeholder-shown),
    .receive-number.has-quote {
        font-size: 24px !important;
    }
}

/* ==========================================================
   Final exact BTC/XMR empty amount match
   ========================================================== */

.amount-input,
.receive-number,
.amount-input::placeholder {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 29px !important;
    font-weight: 760 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    font-variant-numeric: tabular-nums !important;

    color: rgba(116, 134, 144, 0.80) !important;
    opacity: 1 !important;
}

/* Actual typed BTC and calculated XMR values */
.amount-input:not(:placeholder-shown),
.receive-number.has-quote {
    color: rgba(255, 255, 255, 0.80) !important;
    font-size: 29px !important;
    font-weight: 850 !important;
    opacity: 1 !important;
}

@media (max-width: 700px) {
    .amount-input,
    .receive-number,
    .amount-input::placeholder,
    .amount-input:not(:placeholder-shown),
    .receive-number.has-quote {
        font-size: 27px !important;
    }
}

@media (max-width: 390px) {
    .amount-input,
    .receive-number,
    .amount-input::placeholder,
    .amount-input:not(:placeholder-shown),
    .receive-number.has-quote {
        font-size: 24px !important;
    }
}

/* ==========================================================
   Homepage secondary-text brightness balance
   ========================================================== */

/* Keep the main hero title strong */
.specialist-hero h1 {
    color: rgba(255, 255, 255, 0.92);
}

.specialist-hero h1 span {
    color: var(--green);
}

/* Dim descriptive and supporting text by about 20% */
.specialist-description,
.route-node p,
.promise-card p,
.section-heading p,
.how-card p,
.support-banner p,
.compact-assurances,
.visual-node p,
.footer-brand p,
.footer-disclaimer {
    color: rgba(207, 219, 225, 0.78) !important;
}

/* Slightly dim card labels without weakening headings */
.route-node span,
.section-label,
.section-heading > span,
.promise-number,
.how-number {
    opacity: 0.84;
}

/* Keep important headings readable but softer than pure white */
.route-node strong,
.promise-card h3,
.how-card h3,
.support-banner h2 {
    color: rgba(255, 255, 255, 0.88);
}

/* Navigation should also avoid harsh pure white */
.desktop-navigation a,
.header-link {
    color: rgba(226, 234, 238, 0.82);
}

.desktop-navigation a:hover,
.header-link:hover {
    color: rgba(255, 255, 255, 0.95);
}

/* Mobile text balance */
@media (max-width: 700px) {
    .specialist-description {
        color: rgba(207, 219, 225, 0.78) !important;
    }

    .compact-assurances {
        color: rgba(226, 234, 238, 0.82) !important;
    }
}

/* ==========================================================
   MikaSwap unified dark design system
   This final section overrides earlier page-specific colors.
   ========================================================== */

html[data-theme="dark"] body {
    /* Backgrounds */
    --page: #0b1118;
    --surface: #131d26;
    --surface-soft: #1a2630;
    --surface-raised: #202d37;

    /* Unified text hierarchy */
    --text-primary: rgba(255, 255, 255, 0.92);
    --text-secondary: rgba(222, 232, 237, 0.72);
    --text-muted: rgba(190, 204, 211, 0.52);
    --text-disabled: rgba(190, 204, 211, 0.34);

    /* Existing variable compatibility */
    --navy: var(--text-primary);
    --navy-soft: var(--text-secondary);
    --muted: var(--text-muted);

    /* Borders and accents */
    --line: rgba(168, 190, 201, 0.18);
    --green: #39c994;
    --green-dark: #65ddb4;
    --green-soft: rgba(32, 139, 106, 0.19);
}

/* ----------------------------------------------------------
   Global primary text
   ---------------------------------------------------------- */

html[data-theme="dark"] body,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .form-heading h2,
html[data-theme="dark"] .page-heading h1,
html[data-theme="dark"] .specialist-hero h1,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .promise-card h3,
html[data-theme="dark"] .how-card h3,
html[data-theme="dark"] .route-node strong,
html[data-theme="dark"] .quote-line strong,
html[data-theme="dark"] .address-label,
html[data-theme="dark"] .support-banner h2,
html[data-theme="dark"] .fee-schedule-heading h3 {
    color: var(--text-primary) !important;
}

/* Green hero accent remains green */
html[data-theme="dark"] .specialist-hero h1 span,
html[data-theme="dark"] .hero-highlight {
    color: var(--green) !important;
}

/* ----------------------------------------------------------
   Global secondary text
   ---------------------------------------------------------- */

html[data-theme="dark"] .specialist-description,
html[data-theme="dark"] .minimal-hero-description,
html[data-theme="dark"] .hero-description,
html[data-theme="dark"] .page-heading p,
html[data-theme="dark"] .form-heading p,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .promise-card p,
html[data-theme="dark"] .how-card p,
html[data-theme="dark"] .route-node p,
html[data-theme="dark"] .support-banner p,
html[data-theme="dark"] .address-help,
html[data-theme="dark"] .fee-schedule-note,
html[data-theme="dark"] .quote-summary-note,
html[data-theme="dark"] .footer-brand p,
html[data-theme="dark"] .footer-disclaimer {
    color: var(--text-secondary) !important;
}

/* ----------------------------------------------------------
   Global muted text
   ---------------------------------------------------------- */

html[data-theme="dark"] .field-eyebrow,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .section-heading > span,
html[data-theme="dark"] .route-node > div > span,
html[data-theme="dark"] .quote-line > span,
html[data-theme="dark"] .amount-limit-row span,
html[data-theme="dark"] .fee-tier span,
html[data-theme="dark"] .visual-node span,
html[data-theme="dark"] .support-response-note {
    color: var(--text-muted) !important;
}

/* ----------------------------------------------------------
   Navigation and footer
   ---------------------------------------------------------- */

html[data-theme="dark"] .desktop-navigation a,
html[data-theme="dark"] .header-link,
html[data-theme="dark"] .mobile-menu a,
html[data-theme="dark"] .footer-links a {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .desktop-navigation a:hover,
html[data-theme="dark"] .header-link:hover,
html[data-theme="dark"] .mobile-menu a:hover,
html[data-theme="dark"] .footer-links a:hover {
    color: var(--text-primary) !important;
}

/* ----------------------------------------------------------
   Unified card appearance
   ---------------------------------------------------------- */

html[data-theme="dark"] .production-card,
html[data-theme="dark"] .swap-form-card,
html[data-theme="dark"] .asset-entry,
html[data-theme="dark"] .quote-table,
html[data-theme="dark"] .fee-schedule,
html[data-theme="dark"] .promise-card,
html[data-theme="dark"] .how-card,
html[data-theme="dark"] .route-node,
html[data-theme="dark"] .specialist-visual,
html[data-theme="dark"] .support-banner,
html[data-theme="dark"] .order-assurance {
    border-color: var(--line) !important;
}

html[data-theme="dark"] .asset-entry,
html[data-theme="dark"] .quote-table,
html[data-theme="dark"] .fee-schedule {
    background: var(--surface-soft) !important;
}

/* ----------------------------------------------------------
   Exact matching BTC and XMR amount typography
   ---------------------------------------------------------- */

html[data-theme="dark"] .amount-input,
html[data-theme="dark"] .amount-input::placeholder,
html[data-theme="dark"] .receive-number {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;

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

    color: var(--text-muted) !important;
    background: transparent !important;
    opacity: 1 !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 29px !important;
    font-weight: 760 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    font-variant-numeric: tabular-nums !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    transform: none !important;
}

/* Actual entered/calculated values use the same brightness */
html[data-theme="dark"] .amount-input:not(:placeholder-shown),
html[data-theme="dark"] .receive-number.has-quote {
    color: var(--text-primary) !important;
    font-size: 29px !important;
    font-weight: 850 !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------
   Receiving-address input
   ---------------------------------------------------------- */

html[data-theme="dark"] .address-input {
    color: var(--text-primary) !important;
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
}

html[data-theme="dark"] .address-input::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */

html[data-theme="dark"] .button-primary:not(:disabled) {
    color: rgba(255, 255, 255, 0.94) !important;
}

html[data-theme="dark"] .button-primary:disabled {
    color: var(--text-disabled) !important;
    opacity: 0.62 !important;
}

/* ----------------------------------------------------------
   Operational status and chips
   ---------------------------------------------------------- */

html[data-theme="dark"] .private-chip,
html[data-theme="dark"] .route-status,
html[data-theme="dark"] .hero-kicker,
html[data-theme="dark"] .fee-included-chip {
    color: var(--green-dark) !important;
}

/* ----------------------------------------------------------
   Mobile sizing remains identical across both pages
   ---------------------------------------------------------- */

@media (max-width: 700px) {
    html[data-theme="dark"] .amount-input,
    html[data-theme="dark"] .amount-input::placeholder,
    html[data-theme="dark"] .receive-number,
    html[data-theme="dark"] .amount-input:not(:placeholder-shown),
    html[data-theme="dark"] .receive-number.has-quote {
        font-size: 27px !important;
    }

    html[data-theme="dark"] .specialist-description,
    html[data-theme="dark"] .page-heading p,
    html[data-theme="dark"] .form-heading p {
        color: var(--text-secondary) !important;
    }
}

@media (max-width: 390px) {
    html[data-theme="dark"] .amount-input,
    html[data-theme="dark"] .amount-input::placeholder,
    html[data-theme="dark"] .receive-number,
    html[data-theme="dark"] .amount-input:not(:placeholder-shown),
    html[data-theme="dark"] .receive-number.has-quote {
        font-size: 24px !important;
    }
}

/* Telegram-only support panel */

.support-drawer {
    width: min(370px, calc(100vw - 30px));
}

.support-telegram-action {
    margin-top: 18px;
}

.support-response-note {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
}

@media (max-width: 700px) {
    .support-drawer {
        width: calc(100vw - 20px);
    }
}


/* MikaSwap confirmation policy card */

.confirmation-policy {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    margin: 18px 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
}

.confirmation-policy-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: var(--green-dark);
    background: var(--green-soft);
    font-weight: 900;
}

.confirmation-policy-label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.confirmation-policy-content strong {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
}

.confirmation-policy-content p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

/* ==========================================================
   MikaSwap real BTC deposit order
   ========================================================== */

.real-order-panel {
    max-width: 760px;
    margin: 42px auto 90px;
    padding: 27px;
    border: 1px solid var(--line);
    border-radius: 25px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.real-order-panel[hidden] {
    display: none;
}

.real-order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 22px;
}

.real-order-eyebrow {
    color: var(--green-dark);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.real-order-header h2 {
    margin: 7px 0 0;
    font-family: Georgia, serif;
    font-size: 31px;
    letter-spacing: -0.035em;
}

.real-order-status {
    padding: 8px 11px;
    border-radius: 999px;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.deposit-amount-card,
.deposit-address-card {
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface-soft);
}

.deposit-amount-card span,
.deposit-address-card > span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.deposit-amount-card strong {
    color: var(--text-primary);
    font-size: 31px;
    font-variant-numeric: tabular-nums;
}

.deposit-address-card {
    margin-top: 12px;
}

.deposit-address-card code {
    display: block;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 14px;
    line-height: 1.6;
}

.copy-deposit-button {
    min-height: 41px;
    margin-top: 14px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--text-primary);
    background: var(--surface);
    font-weight: 800;
    cursor: pointer;
}

.real-order-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
    margin-top: 13px;
}

.real-order-grid > div {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.real-order-grid span {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.real-order-grid strong {
    color: var(--text-primary);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.real-order-progress {
    height: 7px;
    margin-top: 19px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-soft);
}

.real-order-progress-bar {
    width: 8%;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
    transition: width 420ms ease;
}

.real-order-message {
    margin: 14px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.real-order-safety {
    margin: 18px 0;
    padding: 15px;
    border: 1px solid rgba(229, 139, 69, 0.24);
    border-radius: 14px;
    background: var(--orange-soft);
}

.real-order-safety strong {
    color: var(--text-primary);
    font-size: 12px;
}

.real-order-safety p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.55;
}

.real-swap-error {
    margin-top: 15px;
    padding: 13px;
    border: 1px solid rgba(184, 69, 69, 0.35);
    border-radius: 12px;
    color: #ffb8b8;
    background: rgba(184, 69, 69, 0.14);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .real-order-panel {
        margin-top: 25px;
        padding: 20px;
    }

    .real-order-header {
        display: grid;
    }

    .real-order-status {
        justify-self: start;
    }

    .real-order-grid {
        grid-template-columns: 1fr;
    }

    .deposit-amount-card strong {
        font-size: 27px;
    }
}

/* ==========================================================
   MikaSwap permanent order tracking page
   ========================================================== */

.tracking-panel {
    padding: 27px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
}

.tracking-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}

.tracking-eyebrow {
    color: var(--green-dark);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tracking-header h2 {
    margin: 6px 0 0;
    color: var(--text-primary);
    font-family: Georgia, serif;
    font-size: 30px;
}

.tracking-status {
    padding: 8px 11px;
    border-radius: 999px;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.tracking-primary-card,
.tracking-address-card {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.tracking-primary-card span,
.tracking-address-card > span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.tracking-primary-card strong {
    color: var(--text-primary);
    font-size: 28px;
    font-variant-numeric: tabular-nums;
}

.tracking-address-card {
    margin-top: 12px;
}

.tracking-address-card code {
    display: block;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 14px;
    line-height: 1.6;
}

.tracking-copy-button {
    min-height: 41px;
    margin-top: 13px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--text-primary);
    background: var(--surface);
    font-weight: 800;
}

.tracking-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
    margin-top: 12px;
}

.tracking-summary > div {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.tracking-summary span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.tracking-summary strong {
    color: var(--text-primary);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.tracking-progress {
    height: 7px;
    margin-top: 19px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-soft);
}

.tracking-progress-fill {
    width: 8%;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
    transition: width 350ms ease;
}

.tracking-steps {
    display: grid;
    gap: 9px;
    margin-top: 18px;
}

.tracking-step {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 750;
}

.tracking-step span {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 10px;
    background: var(--surface-soft);
    font-size: 9px;
}

.tracking-step.active {
    color: var(--text-primary);
}

.tracking-step.active span,
.tracking-step.complete span {
    color: var(--green-dark);
    background: var(--green-soft);
}

.tracking-message {
    margin: 17px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.tracking-warning {
    margin-top: 17px;
    padding: 14px;
    border: 1px solid rgba(229, 139, 69, 0.25);
    border-radius: 13px;
    background: rgba(229, 139, 69, 0.11);
}

.tracking-warning strong {
    color: var(--text-primary);
    font-size: 12px;
}

.tracking-warning p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.55;
}

.tracking-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 19px;
}

.tracking-links a {
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 700px) {
    .tracking-panel {
        padding: 20px;
    }

    .tracking-header {
        display: grid;
    }

    .tracking-status {
        justify-self: start;
    }

    .tracking-summary {
        grid-template-columns: 1fr;
    }

    .tracking-primary-card strong {
        font-size: 25px;
    }
}

/* ==========================================================
   MikaSwap amount validation, copy ID and order tracking
   ========================================================== */

.amount-input.amount-invalid {
    color: #ff8f8f !important;
    caret-color: #ff8f8f;
}

.amount-entry-invalid {
    border-color: rgba(239, 93, 93, 0.72) !important;
    box-shadow:
        0 0 0 3px rgba(239, 93, 93, 0.10);
}

.amount-entry-invalid .amount-limit-row strong {
    color: #ff8f8f !important;
}

.tracking-id-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.tracking-id-row h2 {
    margin: 0;
}

.copy-order-id-button,
.clear-recent-button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-secondary);
    background: var(--surface-soft);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.track-page {
    max-width: 820px;
    padding-top: 70px;
    padding-bottom: 100px;
}

.track-hero {
    text-align: center;
}

.track-eyebrow {
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.track-hero h1 {
    margin: 12px 0;
    color: var(--text-primary);
    font-family: Georgia, serif;
    font-size: clamp(42px, 8vw, 65px);
    letter-spacing: -0.045em;
}

.track-hero p {
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-secondary);
    line-height: 1.65;
}

.track-card,
.recent-orders-card {
    margin-top: 28px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
}

.track-form label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-weight: 800;
}

.track-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 11px;
}

.track-input-row input {
    min-width: 0;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--text-primary);
    background: var(--surface-soft);
    text-transform: uppercase;
}

.track-input-row input::placeholder {
    color: var(--text-muted);
}

.track-error {
    margin-top: 14px;
    padding: 13px;
    border: 1px solid rgba(239, 93, 93, 0.36);
    border-radius: 12px;
    color: #ffadad;
    background: rgba(239, 93, 93, 0.11);
}

.recent-orders-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.recent-orders-heading span {
    color: var(--green-dark);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.recent-orders-heading h2 {
    margin: 5px 0 0;
    color: var(--text-primary);
    font-family: Georgia, serif;
    font-size: 28px;
}

.recent-orders-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.recent-orders-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.recent-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    text-decoration: none;
    background: var(--surface-soft);
}

.recent-order-item strong {
    display: block;
    color: var(--text-primary);
}

.recent-order-item div > span {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11px;
}

.recent-order-status {
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

@media (max-width: 700px) {
    .track-page {
        padding-top: 40px;
    }

    .track-input-row {
        grid-template-columns: 1fr;
    }

    .track-input-row .button {
        width: 100%;
    }

    .recent-order-item {
        align-items: flex-start;
    }
}

/* Visible Track Order link */

.track-existing-order-link {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--text-secondary);
    background: var(--surface-soft);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.track-existing-order-link:hover {
    color: var(--green-dark);
    border-color: rgba(57, 201, 148, 0.42);
}

/* Visible Track Order link */

.track-existing-order-link {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--text-secondary);
    background: var(--surface-soft);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.track-existing-order-link:hover {
    color: var(--green-dark);
    border-color: rgba(57, 201, 148, 0.42);
}

/* ==========================================================
   MikaSwap final quote and Bitcoin payment QR
   ========================================================== */

#feeText {
    max-width: 68%;
    color: var(--green) !important;
    text-align: right;
    line-height: 1.45;
}

.bitcoin-qr-card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-top: 17px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
}

.bitcoin-qr-card img {
    display: block;
    width: 116px;
    height: 116px;
    padding: 7px;
    border-radius: 11px;
    background: #ffffff;
    object-fit: contain;
}

.bitcoin-qr-card strong {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
}

.bitcoin-qr-card p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.55;
}

.tracking-address-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 700px) {
    #feeText {
        max-width: 72%;
        font-size: 12px;
    }

    .bitcoin-qr-card {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .bitcoin-qr-card img {
        width: 96px;
        height: 96px;
    }
}

/* Final live quote message */

#feeText {
    color: var(--green) !important;
    max-width: 72%;
    text-align: right;
    line-height: 1.45;
}

/* Final direction-switch and limit layout fixes */

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

.amount-limit-row strong {
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .amount-limit-row {
        gap: 18px;
    }

    .amount-limit-row > div {
        width: 50%;
    }

    .amount-limit-row strong {
        font-size: 11px;
        line-height: 1.4;
    }
}

/* Fixed BTC and XMR swap limits */

.amount-limit-row strong {
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
}

@media (max-width: 700px) {
    .amount-limit-row strong {
        font-size: 12px;
        line-height: 1.45;
    }
}

/* ==========================================================
   MikaSwap private Operations Center
   ========================================================== */

.admin-page,
.admin-login-page {
    padding-top: 55px;
    padding-bottom: 100px;
}

.admin-login-page {
    max-width: 650px;
}

.admin-login-card,
.admin-section {
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 23px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.admin-login-card h1,
.admin-page-header h1 {
    margin: 9px 0 12px;
    font-family: Georgia, serif;
    font-size: clamp(38px, 7vw, 62px);
    letter-spacing: -0.045em;
}

.admin-login-card > p,
.admin-page-header p {
    max-width: 690px;
    color: var(--muted);
    line-height: 1.65;
}

.admin-eyebrow {
    color: var(--green-dark);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-login-form {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.admin-login-form label,
.admin-complete-form label {
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
}

.admin-login-form input,
.admin-complete-form input {
    min-height: 50px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--navy);
    background: var(--surface-soft);
}

.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
}

.admin-logout-button,
.admin-copy-button,
.admin-cancel-form button {
    min-height: 35px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--navy-soft);
    background: var(--surface-soft);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.admin-alert {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 13px;
    font-size: 13px;
    line-height: 1.5;
}

.admin-alert-success {
    border: 1px solid rgba(11, 128, 104, 0.28);
    color: var(--green-dark);
    background: var(--green-soft);
}

.admin-alert-error {
    border: 1px solid rgba(184, 69, 69, 0.35);
    color: var(--danger);
    background: var(--danger-soft);
}

.admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 11px;
    margin-top: 30px;
}

.admin-summary-grid article {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
}

.admin-summary-grid span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-summary-grid strong {
    display: block;
    margin-top: 7px;
    font-size: 25px;
}

.admin-ready-summary {
    border-color: rgba(11, 128, 104, 0.35) !important;
    background: var(--green-soft) !important;
}

.admin-section {
    margin-top: 25px;
}

.admin-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.admin-section-heading span {
    color: var(--green-dark);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-section-heading h2 {
    margin: 5px 0 0;
    font-family: Georgia, serif;
    font-size: 29px;
}

.admin-section-heading > strong {
    color: var(--muted);
    font-size: 12px;
}

.admin-order-list,
.admin-history-list {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.admin-order-card {
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface-soft);
}

.admin-order-top,
.admin-order-id-row {
    display: flex;
    align-items: center;
    gap: 11px;
}

.admin-order-top {
    justify-content: space-between;
    align-items: flex-start;
}

.admin-order-id-row a {
    color: var(--navy);
    font-size: 18px;
    font-weight: 850;
    text-decoration: none;
}

.admin-order-top > div > span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
}

.admin-status {
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--navy-soft);
    background: var(--page-deep);
    font-size: 10px;
    font-weight: 850;
    text-transform: capitalize;
    white-space: nowrap;
}

.admin-status-ready_for_payout,
.admin-status-completed {
    color: var(--green-dark);
    background: var(--green-soft);
}

.admin-status-expired,
.admin-status-cancelled {
    color: var(--danger);
    background: var(--danger-soft);
}

.admin-order-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-top: 15px;
}

.admin-order-grid > div {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.admin-order-grid span,
.admin-address-block > span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-order-grid strong {
    font-size: 12px;
}

.admin-address-block {
    margin-top: 10px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.admin-address-block code {
    display: block;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.55;
}

.admin-complete-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: 15px;
    padding: 15px;
    border: 1px solid rgba(11, 128, 104, 0.30);
    border-radius: 14px;
    background: var(--green-soft);
}

.admin-complete-form label {
    grid-column: 1 / -1;
}

.admin-cancel-form {
    margin-top: 13px;
}

.admin-cancel-form button {
    color: var(--danger);
}

.admin-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: inherit;
    text-decoration: none;
    background: var(--surface-soft);
}

.admin-history-item strong {
    display: block;
}

.admin-history-item div span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
}

.admin-empty {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 900px) {
    .admin-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .admin-order-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .admin-page,
    .admin-login-page {
        padding-top: 30px;
    }

    .admin-page-header {
        display: grid;
    }

    .admin-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-order-top {
        display: grid;
    }

    .admin-status {
        justify-self: start;
    }

    .admin-order-grid {
        grid-template-columns: 1fr;
    }

    .admin-complete-form {
        grid-template-columns: 1fr;
    }

    .admin-complete-form .button {
        width: 100%;
    }
}

/* ==========================================================
   MikaSwap Operations Center redesign
   ========================================================== */

.ops-app {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 820px;
    margin: 32px 0 80px;
    overflow: hidden;
    border: 1px solid #263442;
    border-radius: 26px;
    color: #f5f7fb;
    background: #0b1118;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.ops-sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px 18px;
    border-right: 1px solid #263442;
    background:
        linear-gradient(
            180deg,
            #111b25 0%,
            #0d151e 100%
        );
}

.ops-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 7px 24px;
}

.ops-brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    color: #07110f;
    background: #59d7b5;
    font-weight: 900;
}

.ops-brand strong,
.ops-brand span {
    display: block;
}

.ops-brand strong {
    color: #ffffff;
    font-size: 16px;
}

.ops-brand span {
    margin-top: 3px;
    color: #9fabb9;
    font-size: 10px;
}

.ops-navigation {
    display: grid;
    gap: 8px;
}

.ops-nav-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 49px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #b8c2cf;
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.ops-nav-button strong {
    min-width: 26px;
    padding: 5px 7px;
    border-radius: 999px;
    color: #dfe6ee;
    background: #1b2834;
    font-size: 10px;
    text-align: center;
}

.ops-nav-button:hover {
    color: #ffffff;
    background: #17232e;
}

.ops-nav-button.active {
    border-color: rgba(89, 215, 181, 0.32);
    color: #6ce1c1;
    background: rgba(31, 126, 105, 0.22);
}

.ops-nav-button.active strong {
    color: #07110f;
    background: #59d7b5;
}

.ops-sidebar-note {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
    border: 1px solid #273645;
    border-radius: 14px;
    background: #111b25;
}

.ops-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    margin-top: 4px;
    border-radius: 50%;
    background: #59d7b5;
    box-shadow: 0 0 14px rgba(89, 215, 181, 0.7);
}

.ops-sidebar-note strong {
    color: #edf5f2;
    font-size: 11px;
}

.ops-sidebar-note p {
    margin: 5px 0 0;
    color: #96a5b4;
    font-size: 9px;
    line-height: 1.45;
}

.ops-logout-form {
    margin-top: 12px;
}

.ops-logout-form button {
    width: 100%;
    min-height: 42px;
    border: 1px solid #2a3948;
    border-radius: 12px;
    color: #b8c2cf;
    background: #121c26;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.ops-main {
    min-width: 0;
    padding: 30px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(42, 122, 104, 0.16),
            transparent 30%
        ),
        #0b1118;
}

.ops-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
}

.ops-eyebrow,
.ops-panel-heading span {
    color: #59d7b5;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ops-header h1 {
    margin: 7px 0 8px;
    color: #ffffff;
    font-family: Georgia, serif;
    font-size: clamp(34px, 5vw, 54px);
    letter-spacing: -0.04em;
}

.ops-header p {
    max-width: 650px;
    margin: 0;
    color: #aeb8c7;
    font-size: 13px;
    line-height: 1.65;
}

.ops-header-security {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #2b3a48;
    border-radius: 999px;
    color: #b9c5d1;
    background: #111b25;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.ops-header-security span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #59d7b5;
}

.ops-alert {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 13px;
    font-size: 12px;
}

.ops-alert-success {
    border: 1px solid rgba(89, 215, 181, 0.35);
    color: #8be8cf;
    background: rgba(27, 111, 92, 0.20);
}

.ops-alert-error {
    border: 1px solid rgba(245, 101, 101, 0.35);
    color: #ffaaaa;
    background: rgba(143, 47, 47, 0.22);
}

.ops-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 27px;
}

.ops-stats article {
    min-width: 0;
    padding: 15px;
    border: 1px solid #263442;
    border-radius: 15px;
    background: #111a24;
}

.ops-stats span,
.ops-stats small {
    display: block;
}

.ops-stats span {
    color: #aeb8c7;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
}

.ops-stats strong {
    display: block;
    margin: 7px 0 4px;
    color: #ffffff;
    font-size: 25px;
}

.ops-stats small {
    overflow: hidden;
    color: #778798;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-stat-ready {
    border-color: rgba(89, 215, 181, 0.42) !important;
    background: rgba(27, 111, 92, 0.22) !important;
}

.ops-content-panel {
    margin-top: 22px;
    padding: 21px;
    border: 1px solid #263442;
    border-radius: 20px;
    background: rgba(16, 25, 35, 0.94);
}

.ops-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #243340;
}

.ops-panel-heading h2 {
    margin: 5px 0 0;
    color: #ffffff;
    font-family: Georgia, serif;
    font-size: 28px;
}

.ops-panel-heading > strong {
    color: #9eacba;
    font-size: 11px;
}

.ops-orders {
    display: grid;
    gap: 14px;
    margin-top: 17px;
}

.ops-order-card {
    padding: 17px;
    border: 1px solid #2a3947;
    border-radius: 16px;
    background: #121c26;
}

.ops-order-card[hidden] {
    display: none !important;
}

.ops-order-header,
.ops-order-id-row,
.ops-order-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ops-order-header {
    justify-content: space-between;
    align-items: flex-start;
}

.ops-order-id-row a {
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    text-decoration: none;
}

.ops-direction {
    display: block;
    margin-top: 5px;
    color: #9dacba;
    font-size: 10px;
    font-weight: 750;
}

.ops-copy-button {
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid #314252;
    border-radius: 9px;
    color: #dbe3ec;
    background: #17232e;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.ops-copy-button:hover {
    border-color: #59d7b5;
    color: #6ce1c1;
}

.ops-order-status {
    padding: 7px 10px;
    border-radius: 999px;
    color: #c5d0da;
    background: #202d39;
    font-size: 9px;
    font-weight: 900;
    text-transform: capitalize;
    white-space: nowrap;
}

.ops-order-status-ready_for_payout,
.ops-order-status-completed {
    color: #70e1c2;
    background: rgba(24, 116, 95, 0.30);
}

.ops-order-status-expired,
.ops-order-status-cancelled {
    color: #ffaaaa;
    background: rgba(142, 50, 50, 0.28);
}

.ops-order-status-confirming,
.ops-order-status-payment_detected {
    color: #f8cf83;
    background: rgba(137, 93, 23, 0.26);
}

.ops-order-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin-top: 15px;
}

.ops-order-metrics > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid #293947;
    border-radius: 12px;
    background: #0e1720;
}

.ops-order-metrics span,
.ops-address-card > span {
    display: block;
    margin-bottom: 6px;
    color: #91a0ae;
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
}

.ops-order-metrics strong {
    display: block;
    overflow-wrap: anywhere;
    color: #f1f4f8;
    font-size: 11px;
    line-height: 1.45;
}

.ops-countdown {
    color: #72dfc1 !important;
}

.ops-countdown.expired {
    color: #ff9f9f !important;
}

.ops-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.ops-address-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid #293947;
    border-radius: 12px;
    background: #0e1720;
}

.ops-address-card code {
    display: block;
    margin-bottom: 11px;
    overflow-wrap: anywhere;
    color: #e4eaf0;
    font-size: 10px;
    line-height: 1.55;
}

.ops-order-footer {
    justify-content: space-between;
    margin-top: 12px;
}

.ops-order-footer a {
    color: #63d9ba;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
}

.ops-order-footer code {
    max-width: 70%;
    overflow-wrap: anywhere;
    color: #8f9ead;
    font-size: 8px;
}

.ops-payout-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 11px;
    align-items: end;
    margin-top: 15px;
    padding: 14px;
    border: 1px solid rgba(89, 215, 181, 0.36);
    border-radius: 13px;
    background: rgba(25, 102, 84, 0.18);
}

.ops-payout-form label {
    display: block;
    margin-bottom: 7px;
    color: #bcd0c9;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
}

.ops-payout-form input {
    width: 100%;
    min-height: 45px;
    padding: 0 13px;
    border: 1px solid #385247;
    border-radius: 10px;
    outline: none;
    color: #ffffff;
    background: #0d1715;
    font-size: 11px;
}

.ops-payout-form input:focus {
    border-color: #59d7b5;
    box-shadow: 0 0 0 3px rgba(89, 215, 181, 0.12);
}

.ops-payout-form button {
    min-height: 45px;
    padding: 0 17px;
    border: 0;
    border-radius: 10px;
    color: #06120e;
    background: #59d7b5;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.ops-empty-state {
    padding: 55px 20px;
    text-align: center;
}

.ops-empty-state div {
    display: grid;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #07110f;
    background: #59d7b5;
    font-size: 20px;
    font-weight: 900;
}

.ops-empty-state h3 {
    margin: 14px 0 7px;
    color: #ffffff;
}

.ops-empty-state p {
    margin: 0;
    color: #91a0ae;
    font-size: 11px;
}

@media (max-width: 1050px) {
    .ops-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .ops-order-metrics {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 780px) {
    .ops-app {
        grid-template-columns: 1fr;
        margin-top: 18px;
        border-radius: 20px;
    }

    .ops-sidebar {
        border-right: 0;
        border-bottom: 1px solid #263442;
    }

    .ops-navigation {
        grid-template-columns: repeat(2, 1fr);
    }

    .ops-sidebar-note {
        margin-top: 18px;
    }

    .ops-main {
        padding: 20px 15px;
    }

    .ops-header {
        display: grid;
    }

    .ops-header-security {
        justify-self: start;
    }

    .ops-address-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .ops-navigation {
        grid-template-columns: 1fr;
    }

    .ops-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .ops-order-header {
        display: grid;
    }

    .ops-order-status {
        justify-self: start;
    }

    .ops-order-metrics {
        grid-template-columns: 1fr;
    }

    .ops-payout-form {
        grid-template-columns: 1fr;
    }

    .ops-payout-form button {
        width: 100%;
    }

    .ops-order-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .ops-order-footer code {
        max-width: 100%;
    }
}

.ops-copy-amount {
    margin-top: 10px;
}

.ops-payout-amount-box strong {
    color: #ffffff;
    font-size: 13px;
}

/* Larger, clearer admin dashboard text */

.ops-order-id-row a {
    font-size: 21px;
}

.ops-direction {
    font-size: 12px;
}

.ops-order-metrics span,
.ops-address-card > span {
    font-size: 10px;
}

.ops-order-metrics strong {
    font-size: 14px;
    line-height: 1.5;
}

.ops-payout-amount-box strong {
    font-size: 16px;
}

.ops-address-card code {
    font-size: 12px;
    line-height: 1.65;
}

.ops-copy-button {
    min-height: 35px;
    padding: 0 12px;
    font-size: 10px;
}

.ops-order-status {
    font-size: 10px;
}

.ops-order-footer a {
    font-size: 12px;
}

.ops-nav-button {
    font-size: 13px;
}

.ops-stats span {
    font-size: 10px;
}

.ops-stats strong {
    font-size: 29px;
}

.ops-stats small {
    font-size: 9px;
}

@media (max-width: 540px) {
    .ops-order-metrics strong {
        font-size: 15px;
    }

    .ops-payout-amount-box strong {
        font-size: 17px;
    }

    .ops-address-card code {
        font-size: 13px;
    }
}

/* Admin readability - slightly larger */

.ops-order-id-row a {
    font-size: 23px;
}

.ops-direction {
    font-size: 13px;
}

.ops-order-metrics span,
.ops-address-card > span {
    font-size: 11px;
}

.ops-order-metrics strong {
    font-size: 16px;
}

.ops-payout-amount-box strong {
    font-size: 18px;
    font-weight: 800;
}

.ops-address-card code {
    font-size: 13px;
    line-height: 1.7;
}

.ops-copy-button {
    font-size: 11px;
    min-height: 38px;
}

.ops-order-status {
    font-size: 11px;
    padding: 8px 14px;
}

.ops-nav-button {
    font-size: 14px;
    font-weight: 700;
}

.ops-stats span {
    font-size: 11px;
}

.ops-stats strong {
    font-size: 34px;
}

.admin-section-heading h2 {
    font-size: 36px;
}

.admin-page-header h1 {
    font-size: clamp(48px, 7vw, 72px);
}


/* MikaSwap uses one permanent dark identity. */

[data-theme-toggle],
.theme-button,
.mobile-theme-button,
.theme-toggle {
    display: none !important;
}


/* ==========================================================
   MikaSwap underpayment handling
   ========================================================== */

.ops-underpayment-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-top: 14px;
    padding: 15px;
    border: 1px solid rgba(248, 207, 131, 0.42);
    border-radius: 13px;
    background: rgba(137, 93, 23, 0.18);
}

.ops-underpayment-panel > div {
    min-width: 0;
}

.ops-underpayment-panel span {
    display: block;
    margin-bottom: 6px;
    color: #f8cf83;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ops-underpayment-panel strong {
    display: block;
    color: #fff3d6;
    font-size: 13px;
}

.ops-underpayment-panel p,
.ops-underpayment-panel small {
    display: block;
    margin: 6px 0 0;
    color: #cdbf9f;
    font-size: 10px;
    line-height: 1.55;
}

.ops-underpayment-panel form {
    flex: 0 0 auto;
}

.ops-underpayment-panel button {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(248, 207, 131, 0.55);
    border-radius: 10px;
    color: #1b1306;
    background: #f8cf83;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.ops-underpayment-panel button:hover {
    transform: translateY(-1px);
}

@media (max-width: 700px) {
    .ops-underpayment-panel {
        display: grid;
    }

    .ops-underpayment-panel button {
        width: 100%;
    }
}


/* Customer underpayment and remainder-payment notices */

.tracking-message-underpaid {
    padding: 15px;
    border: 1px solid rgba(255, 101, 101, 0.55);
    border-radius: 12px;
    color: #ff9f9f !important;
    background: rgba(145, 35, 35, 0.22);
    font-weight: 850 !important;
    line-height: 1.65;
}

.tracking-message-success {
    padding: 15px;
    border: 1px solid rgba(89, 215, 181, 0.55);
    border-radius: 12px;
    color: #70e1c2 !important;
    background: rgba(25, 102, 84, 0.24);
    font-weight: 850 !important;
    line-height: 1.65;
}

/* ==========================================================
   MikaSwap organized order-tracking interface
   ========================================================== */

.tracking-panel {
    --tracking-green: #58d7b5;
    --tracking-green-soft: rgba(49, 191, 153, 0.14);
    --tracking-green-line: rgba(88, 215, 181, 0.58);
    --tracking-muted-line: rgba(145, 164, 176, 0.22);

    min-width: 0;
}

/* Page-level typography */

.page-heading h1 {
    font-size: clamp(44px, 6vw, 68px);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.page-heading p {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.65;
}

.form-heading h2 {
    font-size: clamp(28px, 3vw, 36px);
}

/* Tracking header */

.tracking-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px 24px;
    align-items: start;
}

.tracking-header > div {
    min-width: 0;
}

.tracking-eyebrow {
    font-size: 11px;
    letter-spacing: 0.1em;
}

.tracking-id-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 10px;
    min-width: 0;
    margin-top: 7px;
}

#trackingOrderId {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: var(--text-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(25px, 2.65vw, 34px) !important;
    font-weight: 700;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-wrap: pretty;
}

.tracking-status {
    position: static;
    align-self: start;
    max-width: 220px;
    padding: 8px 12px;
    border: 1px solid rgba(88, 215, 181, 0.22);
    border-radius: 999px;
    white-space: normal;
    color: var(--tracking-green);
    background: var(--tracking-green-soft);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.3;
    text-align: center;
}

/* Compact and consistent copy buttons */

.copy-order-id-button,
.tracking-copy-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    min-width: 0;
    min-height: 34px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text-secondary);
    background: rgba(10, 18, 25, 0.44);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.copy-order-id-button:hover,
.tracking-copy-button:hover {
    transform: translateY(-1px);
    border-color: rgba(88, 215, 181, 0.42);
    color: var(--tracking-green);
    background: rgba(49, 191, 153, 0.09);
}

/* Amount card */

.tracking-primary-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    align-items: end;
    margin-top: 20px;
    padding: 18px;
}

.tracking-primary-card > span {
    grid-column: 1 / -1;
    margin: 0;
}

.tracking-primary-card strong {
    min-width: 0;
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

#copyTrackingAmount {
    align-self: center;
}

/* Address card */

.tracking-address-card {
    padding: 18px;
}

.tracking-address-card code {
    font-size: 13px;
    line-height: 1.65;
}

.tracking-address-actions {
    margin-top: 11px;
}

.tracking-address-actions .tracking-copy-button {
    margin: 0;
}

/* Summary cards */

.tracking-summary {
    gap: 10px;
}

.tracking-summary > div {
    min-width: 0;
    padding: 14px;
}

.tracking-summary span {
    font-size: 10px;
    letter-spacing: 0.06em;
}

.tracking-summary strong {
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Main progress bar */

.tracking-progress {
    height: 6px;
    margin-top: 22px;
    background: rgba(145, 164, 176, 0.14);
}

.tracking-progress-fill {
    box-shadow:
        0 0 16px rgba(88, 215, 181, 0.34);
}

/* Vertical progress timeline */

.tracking-steps {
    position: relative;
    display: grid;
    gap: 0;
    margin-top: 24px;
}

.tracking-step {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    min-height: 78px;
    padding: 0 0 18px;
    color: var(--text-muted);
    font-size: inherit;
    font-weight: inherit;
}

/* Future vertical connector */

.tracking-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 39px;
    bottom: -1px;
    left: 19px;
    width: 2px;
    border-radius: 999px;
    background: var(--tracking-muted-line);
}

/* Completed connector */

.tracking-step.complete:not(:last-child)::before {
    background: var(--tracking-green-line);
}

.tracking-step-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(145, 164, 176, 0.20);
    border-radius: 50%;
    color: #70818b;
    background: #15212a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.02em;
    transition:
        color 200ms ease,
        border-color 200ms ease,
        background 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease;
}

.tracking-step-copy {
    min-width: 0;
    padding-top: 2px;
}

.tracking-step-copy strong {
    display: block;
    color: #86969f;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    transition: color 180ms ease;
}

.tracking-step-copy small {
    display: block;
    max-width: 580px;
    margin-top: 5px;
    color: #60717a;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    transition: color 180ms ease;
}

/* Completed step */

.tracking-step.complete .tracking-step-marker {
    border-color: var(--tracking-green);
    color: #071410;
    background: var(--tracking-green);
    font-size: 17px;
    box-shadow:
        0 0 0 4px rgba(88, 215, 181, 0.08);
}

.tracking-step.complete .tracking-step-copy strong {
    color: var(--tracking-green);
}

.tracking-step.complete .tracking-step-copy small {
    color: #76998f;
}

/* Current active step */

.tracking-step.active .tracking-step-marker {
    border-color: var(--tracking-green);
    color: var(--tracking-green);
    background: rgba(49, 191, 153, 0.12);
    box-shadow:
        0 0 0 5px rgba(88, 215, 181, 0.08),
        0 0 20px rgba(88, 215, 181, 0.18);
    transform: scale(1.04);
    animation: mikaswapCurrentStep 2.2s ease-in-out infinite;
}

.tracking-step.active .tracking-step-copy strong {
    color: var(--text-primary);
    font-size: 15px;
}

.tracking-step.active .tracking-step-copy small {
    color: var(--text-secondary);
}

@keyframes mikaswapCurrentStep {
    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(88, 215, 181, 0.07),
            0 0 16px rgba(88, 215, 181, 0.14);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(88, 215, 181, 0.04),
            0 0 24px rgba(88, 215, 181, 0.24);
    }
}

/* Status message */

.tracking-message {
    margin-top: 4px;
    padding: 15px 16px;
    border: 1px solid rgba(145, 164, 176, 0.16);
    border-radius: 13px;
    color: var(--text-secondary);
    background: rgba(15, 27, 36, 0.72);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.65;
}

.tracking-message-underpaid {
    border-color: rgba(255, 101, 101, 0.55);
    color: #ffadad !important;
    background: rgba(145, 35, 35, 0.20);
}

.tracking-message-success {
    border-color: rgba(89, 215, 181, 0.48);
    color: #78e4c6 !important;
    background: rgba(25, 102, 84, 0.20);
}

/* Warning and footer links */

.tracking-warning {
    margin-top: 14px;
}

.tracking-warning strong {
    font-size: 12px;
}

.tracking-warning p {
    font-size: 11px;
}

.tracking-links {
    gap: 16px;
}

.tracking-links a {
    font-size: 12px;
}

/* Tablet layout */

@media (max-width: 900px) {
    .tracking-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .tracking-status {
        justify-self: start;
    }

    #trackingOrderId {
        font-size: clamp(24px, 4.6vw, 31px) !important;
    }
}

/* Mobile layout */

@media (max-width: 560px) {
    .page-heading h1 {
        font-size: clamp(38px, 12vw, 48px);
    }

    .page-heading p {
        font-size: 14px;
    }

    .tracking-panel {
        padding: 17px;
    }

    #trackingOrderId {
        font-size: clamp(21px, 7vw, 27px) !important;
        line-height: 1.16 !important;
    }

    .tracking-primary-card {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .tracking-primary-card > span {
        grid-column: auto;
    }

    .tracking-primary-card strong {
        font-size: 24px;
    }

    #copyTrackingAmount {
        justify-self: start;
    }

    .copy-order-id-button,
    .tracking-copy-button {
        min-height: 33px;
        padding: 0 11px;
        font-size: 10px;
    }

    .tracking-step {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 12px;
        min-height: 74px;
    }

    .tracking-step-marker {
        width: 36px;
        height: 36px;
    }

    .tracking-step:not(:last-child)::before {
        top: 35px;
        left: 17px;
    }

    .tracking-step-copy strong {
        font-size: 13px;
    }

    .tracking-step.active .tracking-step-copy strong {
        font-size: 14px;
    }

    .tracking-step-copy small {
        font-size: 10px;
    }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .tracking-step.active .tracking-step-marker {
        animation: none;
    }
}


/* =========================================================
   MikaSwap footer social buttons
   ========================================================= */

.footer-links {
    display: flex;
    align-items: center;
    gap: 22px;
}

.footer-nav-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-social-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 7px 12px 7px 8px;
    border: 1px solid var(--line);
    border-radius: 15px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.035);
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease;
}

.footer-links .footer-social-link {
    text-decoration: none;
}

.footer-social-link:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.07);
}

.footer-social-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
}

.footer-social-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.footer-social-telegram .footer-social-icon {
    background: #229ed9;
}

.footer-social-x .footer-social-icon {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.footer-social-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
}

.footer-social-copy small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.footer-social-copy strong {
    color: var(--navy-soft);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .footer-links {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 620px) {
    .footer-social-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .footer-social-link {
        width: 100%;
        box-sizing: border-box;
    }
}