.up-market-lens {
    --market-bg: #060c15;
    --market-panel: #0d1727;
    --market-card: #101b2d;
    --market-border: #26354e;
    --market-text: #f6f8fc;
    --market-muted: #94a2b8;
    --market-cyan: #79dfef;

    position: relative;
    overflow: hidden;
    padding:
        clamp(72px, 8vw, 115px)
        clamp(15px, 3vw, 44px);

    border-top: 1px solid rgba(83, 110, 148, .24);
    border-bottom: 1px solid rgba(83, 110, 148, .24);

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(57, 185, 219, .12),
            transparent 33rem
        ),
        radial-gradient(
            circle at 85% 40%,
            rgba(142, 91, 230, .09),
            transparent 34rem
        ),
        linear-gradient(
            rgba(60, 91, 132, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(60, 91, 132, .045) 1px,
            transparent 1px
        ),
        var(--market-bg);

    background-size:
        auto,
        auto,
        80px 80px,
        80px 80px,
        auto;
}

.up-market-wrap {
    width: min(100%, 1540px);
    margin-inline: auto;
}

.up-market-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 38px;
    margin-bottom: 40px;
}

.up-market-kicker {
    margin: 0 0 14px;
    color: var(--market-cyan);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .18em;
}

.up-market-header h2 {
    margin: 0;
    color: var(--market-text);
    font-size: clamp(48px, 6vw, 88px);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .95;
}

.up-market-header h2 span {
    color: var(--market-cyan);
}

.up-market-description {
    max-width: 780px;
    margin: 20px 0 0;
    color: var(--market-muted);
    font-size: 18px;
    line-height: 1.7;
}

.up-market-status {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 270px;
    padding: 22px;
    border: 1px solid #2b3c59;
    border-radius: 22px;
    background: rgba(14, 25, 42, .92);
}

.up-market-status-dot {
    width: 12px;
    aspect-ratio: 1;
    margin-top: 4px;
    border-radius: 50%;
    background: #71df86;
    box-shadow: 0 0 18px rgba(113, 223, 134, .72);
}

.up-market-status small {
    color: var(--market-muted);
    font-weight: 850;
    letter-spacing: .12em;
}

.up-market-status strong {
    display: block;
    margin: 6px 0;
    color: var(--market-text);
    font-size: 22px;
}

.up-market-status time {
    color: var(--market-muted);
    font-size: 13px;
}

.up-market-panel {
    overflow: hidden;
    border: 1px solid var(--market-border);
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(17, 29, 49, .98),
            rgba(9, 17, 30, .99)
        );
    box-shadow: 0 28px 70px rgba(0, 0, 0, .24);
}

.up-market-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    padding: 24px clamp(22px, 3vw, 40px);
    border-bottom: 1px solid var(--market-border);
}

.up-market-modes {
    display: flex;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--market-border);
    border-radius: 16px;
    background: #091220;
}

.up-market-modes button {
    min-height: 44px;
    padding: 0 19px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--market-muted);
    font-weight: 800;
    cursor: pointer;
}

.up-market-modes button.is-active {
    background:
        linear-gradient(
            135deg,
            #73dceb,
            #39b7ec
        );
    color: #04111b;
    box-shadow: 0 9px 25px rgba(57, 183, 236, .18);
}

.up-market-toolbar p {
    margin: 0;
    color: var(--market-muted);
}

.up-market-source {
    padding:
        clamp(30px, 4vw, 54px)
        clamp(22px, 4vw, 58px)
        30px;
}

.up-market-source label {
    display: block;
    margin-bottom: 12px;
    color: var(--market-muted);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .05em;
}

.up-market-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 14px;
}

.up-market-input-box {
    display: flex;
    align-items: center;
    min-height: 88px;
    padding: 0 25px;
    border: 1px solid #30415e;
    border-radius: 18px;
    background: #08111f;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.up-market-input-box:focus-within {
    border-color: rgba(121, 223, 239, .7);
    box-shadow: 0 0 0 4px rgba(121, 223, 239, .09);
}

.up-market-input-box span {
    margin-right: 13px;
    color: var(--market-cyan);
    font-size: 34px;
    font-weight: 850;
}

.up-market-input-box input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--market-text);
    font-size: clamp(32px, 4vw, 53px);
    font-weight: 900;
    letter-spacing: -.035em;
}

.up-market-input-row select {
    min-height: 88px;
    padding: 0 20px;
    border: 1px solid #30415e;
    border-radius: 18px;
    outline: 0;
    background: #0b1627;
    color: var(--market-text);
    font-size: 20px;
    font-weight: 850;
    cursor: pointer;
}

.up-market-quick-values {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 15px;
}

.up-market-quick-values button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--market-border);
    border-radius: 999px;
    background: rgba(12, 23, 40, .82);
    color: var(--market-muted);
    cursor: pointer;
}

.up-market-quick-values button:hover {
    border-color: rgba(121, 223, 239, .5);
    color: var(--market-cyan);
}

.up-market-summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 0 clamp(22px, 4vw, 58px) 22px;
    color: var(--market-muted);
}

.up-market-summary span {
    color: var(--market-text);
    font-weight: 750;
}

.up-market-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding:
        0 clamp(22px, 4vw, 58px)
        clamp(35px, 4vw, 56px);
}

.up-market-card {
    --asset-color: #79dfef;
    --asset-rgb: 121, 223, 239;

    position: relative;
    overflow: hidden;
    min-height: 218px;
    padding: 25px;
    border: 1px solid var(--market-border);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(18, 30, 51, .98),
            rgba(11, 20, 35, .98)
        );
    text-align: left;
    cursor: pointer;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.up-market-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--asset-rgb), .52);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

.up-market-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -65px;
    width: 170px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--asset-color);
    opacity: .12;
    filter: blur(20px);
}

.up-market-card[data-symbol="BTC"],
.up-market-card[data-symbol="THB"] {
    --asset-color: #f1a64b;
    --asset-rgb: 241, 166, 75;
}

.up-market-card[data-symbol="XMR"] {
    --asset-color: #ff7043;
    --asset-rgb: 255, 112, 67;
}

.up-market-card[data-symbol="ETH"] {
    --asset-color: #9f8df5;
    --asset-rgb: 159, 141, 245;
}

.up-market-card[data-symbol="USDT"] {
    --asset-color: #4ed3a1;
    --asset-rgb: 78, 211, 161;
}

.up-market-card[data-symbol="SOL"] {
    --asset-color: #c56cf0;
    --asset-rgb: 197, 108, 240;
}

.up-market-card[data-symbol="USD"] {
    --asset-color: #74dc8c;
    --asset-rgb: 116, 220, 140;
}

.up-market-card[data-symbol="EUR"] {
    --asset-color: #6fa9f5;
    --asset-rgb: 111, 169, 245;
}

.up-market-card[data-symbol="GBP"] {
    --asset-color: #dd76ba;
    --asset-rgb: 221, 118, 186;
}

.up-market-card[data-symbol="JPY"] {
    --asset-color: #f27a7a;
    --asset-rgb: 242, 122, 122;
}

.up-market-card[data-symbol="SGD"] {
    --asset-color: #64ced9;
    --asset-rgb: 100, 206, 217;
}

.up-market-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.up-market-card-name {
    color: var(--market-muted);
    font-size: 15px;
}

.up-market-card-symbol {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(var(--asset-rgb), .12);
    color: var(--asset-color);
    font-size: 13px;
    font-weight: 900;
}

.up-market-card-value {
    display: block;
    margin: 28px 0 9px;
    color: var(--market-text);
    font-size: clamp(28px, 2.7vw, 43px);
    line-height: 1.08;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.up-market-card-subvalue {
    display: block;
    min-height: 23px;
    color: var(--market-muted);
    font-size: 14px;
}

.up-market-card-change {
    display: inline-flex;
    margin-top: 17px;
    color: var(--market-muted);
    font-size: 13px;
}

.up-market-card-change.is-up {
    color: #72df86;
}

.up-market-card-change.is-down {
    color: #ef7979;
}

.up-market-loading {
    grid-column: 1 / -1;
    min-height: 180px;
    display: grid;
    place-items: center;
    color: var(--market-muted);
}

.up-market-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    padding: 22px clamp(22px, 3vw, 40px);
    border-top: 1px solid var(--market-border);
    background: rgba(7, 15, 27, .65);
}

.up-market-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.up-market-proof span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--market-border);
    border-radius: 999px;
    color: var(--market-muted);
    font-size: 12px;
}

.up-market-proof span::before {
    content: "";
    width: 7px;
    aspect-ratio: 1;
    margin-right: 7px;
    border-radius: 50%;
    background: #71df86;
    box-shadow: 0 0 9px rgba(113, 223, 134, .62);
}

.up-market-footer p {
    max-width: 520px;
    margin: 0;
    color: #748298;
    font-size: 12px;
    text-align: right;
    line-height: 1.6;
}

@media (max-width: 1080px) {
    .up-market-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .up-market-lens {
        padding: 68px 15px;
    }

    .up-market-header {
        grid-template-columns: 1fr;
    }

    .up-market-status {
        min-width: 0;
    }

    .up-market-toolbar,
    .up-market-summary,
    .up-market-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .up-market-modes {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

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

    .up-market-input-box,
    .up-market-input-row select {
        min-height: 76px;
    }

    .up-market-results {
        grid-template-columns: 1fr;
    }

    .up-market-card {
        min-height: 195px;
    }

    .up-market-footer p {
        text-align: left;
    }
}

/* XRP */
.up-market-card[data-symbol="XRP"] {
    --asset-color: #61c4f2;
    --asset-rgb: 97, 196, 242;
}

/* UNLOCKPOOL-PHASE22E2-EIGHT-ASSET-CARDS */
.up-market-card[data-symbol="BNB"] {
    --card-accent: #f3ba2f;
}

.up-market-card[data-symbol="ADA"] {
    --card-accent: #4f7dff;
}

.up-market-card[data-symbol="DOGE"] {
    --card-accent: #c7a43a;
}

.up-market-card[data-symbol="TRX"] {
    --card-accent: #ef3340;
}

/* UNLOCKPOOL-PHASE22E3-COMPACT-GRID */

/* Desktop: 4 cards per row, 2 rows for 8 assets */
.up-market-results,
.up-market-cards,
.up-market-result-grid,
.up-market-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

/* Compact card dimensions */
.up-market-card {
    min-width: 0 !important;
    padding: 18px 18px 16px !important;
    border-radius: 16px !important;
}

/* Smaller card header */
.up-market-card-head,
.up-market-card-header {
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.up-market-card-name,
.up-market-card-title,
.up-market-card h3,
.up-market-card strong:first-child {
    font-size: 14px !important;
    line-height: 1.3 !important;
}

/* Smaller symbol badge */
.up-market-card-symbol,
.up-market-symbol,
.up-market-badge {
    min-width: 38px !important;
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
}

/* Main converted amount */
.up-market-value,
.up-market-result-value,
.up-market-card-value {
    font-size: clamp(24px, 2vw, 34px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Secondary rate and change text */
.up-market-rate,
.up-market-secondary,
.up-market-card-rate,
.up-market-change,
.up-market-card-change {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

/* Reduce spacing inside result cards */
.up-market-card > * + * {
    margin-top: 8px !important;
}

/* Tablet: 2 columns */
@media (max-width: 980px) {
    .up-market-results,
    .up-market-cards,
    .up-market-result-grid,
    .up-market-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile: 1 column */
@media (max-width: 560px) {
    .up-market-results,
    .up-market-cards,
    .up-market-result-grid,
    .up-market-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .up-market-card {
        padding: 16px !important;
    }

    .up-market-value,
    .up-market-result-value,
    .up-market-card-value {
        font-size: 26px !important;
    }
}