/* /Features/L2/L2Page.razor.rz.scp.css */
.pair-form[b-8lni83mies] {
    display: flex;
    gap: 6px;
}

.stat-balance[b-8lni83mies] {
    margin-top: 6px;
}
/* /Features/Liquidity/LiquidityPage.razor.rz.scp.css */
.range[b-hl86ps0x8o],
.exchange[b-hl86ps0x8o] {
    font-weight: 500;
}

.exchange[b-hl86ps0x8o] {
    text-transform: capitalize;
}

.balance-col[b-hl86ps0x8o] {
    width: 130px;
    min-width: 110px;
}

.stat-balance[b-hl86ps0x8o] {
    margin-top: 6px;
}

th.group[b-hl86ps0x8o] {
    height: 26px;
    border-bottom: 0;
    color: var(--text-2);
    text-align: center;
}

.group[b-hl86ps0x8o],
.group-start[b-hl86ps0x8o] {
    border-left: 1px solid var(--line);
}

/* Narrow cards keep only the essential columns */
@container (max-width: 820px) {
    .opt[b-hl86ps0x8o] {
        display: none;
    }
}
/* /Features/Prices/PricesPage.razor.rz.scp.css */
.exchange[b-hak3u0wwt3] {
    font-weight: 500;
    text-transform: capitalize;
}

.mid[b-hak3u0wwt3] {
    font-weight: 600;
}

.crossed[b-hak3u0wwt3] {
    color: var(--warn);
    text-decoration: underline dotted;
    cursor: help;
}

.deviation-col[b-hak3u0wwt3] {
    width: 100px;
}

/* Diverging bar centered on the average mid */
.deviation[b-hak3u0wwt3] {
    position: relative;
    width: 80px;
    height: 6px;
    margin-left: auto;
    border-radius: 3px;
    background: var(--surface-3);
}

.deviation[b-hak3u0wwt3]::after {
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 50%;
    width: 1px;
    background: var(--text-3);
}

.deviation span[b-hak3u0wwt3] {
    position: absolute;
    top: 0;
    bottom: 0;
}

.deviation .above[b-hak3u0wwt3] {
    left: 50%;
    border-radius: 0 3px 3px 0;
    background: var(--up);
}

.deviation .below[b-hak3u0wwt3] {
    right: 50%;
    border-radius: 3px 0 0 3px;
    background: var(--down);
}

/* Narrow cards keep only the essential columns */
@container (max-width: 760px) {
    .opt[b-hak3u0wwt3] {
        display: none;
    }
}
/* /Features/Shared/Card/Card.razor.rz.scp.css */
.card[b-xzv9s47i6i] {
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.card-head[b-xzv9s47i6i] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
}

.card-head h2[b-xzv9s47i6i] {
    font-size: 13px;
    font-weight: 600;
}

.card-meta[b-xzv9s47i6i] {
    color: var(--text-3);
    font-size: 12px;
}

.card-spacer[b-xzv9s47i6i] {
    flex: 1;
}

.card-body[b-xzv9s47i6i] {
    container-type: inline-size;
    padding: 12px;
}

.card-body.flush[b-xzv9s47i6i] {
    padding: 0;
    overflow-x: auto;
}
/* /Features/Shared/Layout/HeaderBar/HeaderBar.razor.rz.scp.css */
.topbar[b-yx5thf8ckd] {
    grid-area: top;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand[b-yx5thf8ckd] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.brand b[b-yx5thf8ckd] {
    color: var(--accent);
    font-weight: 700;
}

.mark[b-yx5thf8ckd] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--accent-soft);
    color: var(--accent);
}

.spacer[b-yx5thf8ckd] {
    flex: 1;
}

.icon-btn[b-yx5thf8ckd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.icon-btn:hover[b-yx5thf8ckd] {
    background: var(--surface-3);
    color: var(--text);
}

:root[data-theme="light"] .when-dark[b-yx5thf8ckd],
:root:not([data-theme="light"]) .when-light[b-yx5thf8ckd] {
    display: none;
}

.when-dark[b-yx5thf8ckd], .when-light[b-yx5thf8ckd] {
    display: inline-flex;
}

@media (max-width: 640px) {
    .link-text[b-yx5thf8ckd] {
        display: none;
    }
}
/* /Features/Shared/Layout/MainLayout.razor.rz.scp.css */
.shell[b-xul9dtew8n] {
    display: grid;
    grid-template-areas:
        "top top"
        "side main";
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    transition: grid-template-columns .18s ease;
}

:root[data-sidebar="collapsed"] .shell[b-xul9dtew8n] {
    grid-template-columns: var(--sidebar-rail) minmax(0, 1fr);
}

.sidebar[b-xul9dtew8n] {
    grid-area: side;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.content[b-xul9dtew8n] {
    grid-area: main;
    overflow: auto;
}

.backdrop[b-xul9dtew8n] {
    display: none;
}

/* Phones: the collapsed sidebar is hidden, the expanded one overlays the page */
@media (max-width: 640px) {
    .shell[b-xul9dtew8n],
    :root[data-sidebar="collapsed"] .shell[b-xul9dtew8n] {
        grid-template-columns: 0 minmax(0, 1fr);
    }

    .sidebar[b-xul9dtew8n] {
        position: fixed;
        top: var(--topbar-h);
        bottom: 0;
        left: 0;
        z-index: 30;
        width: 220px;
        transform: translateX(-100%);
        transition: transform .18s ease;
    }

    :root[data-sidebar="expanded"] .sidebar[b-xul9dtew8n] {
        transform: none;
        box-shadow: var(--shadow);
    }

    :root[data-sidebar="expanded"] .backdrop[b-xul9dtew8n] {
        display: block;
        position: fixed;
        inset: var(--topbar-h) 0 0 0;
        z-index: 20;
        background: rgba(0, 0, 0, .45);
    }
}
/* /Features/Shared/Layout/NavMenu/NavMenu.razor.rz.scp.css */
.menu[b-rkkifx4joh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 8px;
}

.section[b-rkkifx4joh] {
    padding: 4px 10px 6px;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.menu[b-rkkifx4joh]  a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--radius);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.menu[b-rkkifx4joh]  a:hover {
    background: var(--surface-2);
    color: var(--text);
}

.menu[b-rkkifx4joh]  a.active {
    background: var(--accent-soft);
    color: var(--text);
}

.menu[b-rkkifx4joh]  a.active svg {
    color: var(--accent);
}

.menu[b-rkkifx4joh]  svg {
    flex: none;
}

/* Icon rail */
:root[data-sidebar="collapsed"] .label[b-rkkifx4joh],
:root[data-sidebar="collapsed"] .section[b-rkkifx4joh] {
    display: none;
}

:root[data-sidebar="collapsed"] .menu[b-rkkifx4joh]  a {
    justify-content: center;
    padding: 0;
}

/* Phones always show labels, the sidebar is an overlay there */
@media (max-width: 640px) {
    :root[data-sidebar] .label[b-rkkifx4joh],
    :root[data-sidebar] .section[b-rkkifx4joh] {
        display: initial;
    }

    :root[data-sidebar] .menu[b-rkkifx4joh]  a {
        justify-content: flex-start;
        padding: 0 10px;
    }
}
/* /Features/Shared/OrderBook/OrderBookLadder.razor.rz.scp.css */
.book[b-8sl4qh0z78] {
    padding: 4px 0 6px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.book.l2[b-8sl4qh0z78] {
    --cols: minmax(92px, 1.3fr) minmax(72px, 1fr) minmax(72px, 1fr) minmax(62px, .8fr) minmax(56px, .7fr) minmax(70px, .8fr) minmax(76px, 1fr) minmax(60px, .7fr);
}

.book.l3[b-8sl4qh0z78] {
    --cols: minmax(92px, 1.3fr) minmax(72px, 1fr) minmax(72px, 1fr) minmax(62px, .8fr) minmax(76px, 1fr) minmax(60px, .7fr) minmax(64px, .7fr);
}

.book.l2.no-counts[b-8sl4qh0z78] {
    --cols: minmax(92px, 1.3fr) minmax(72px, 1fr) minmax(72px, 1fr) minmax(62px, .8fr) minmax(76px, 1fr) minmax(60px, .7fr);
}

.row[b-8sl4qh0z78] {
    position: relative;
    display: grid;
    grid-template-columns: var(--cols);
    align-items: center;
    height: 22px;
}

.row > span[b-8sl4qh0z78] {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 0 8px;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.row > span:first-child[b-8sl4qh0z78] {
    padding-left: 12px;
    text-align: left;
}

.row > span:last-child[b-8sl4qh0z78] {
    padding-right: 12px;
}

.row.head[b-8sl4qh0z78] {
    height: 28px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--border);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 500;
}

/* Two right anchored bars: faint cumulative depth and a stronger bar for the level size */
.row.ask[b-8sl4qh0z78]::before,
.row.bid[b-8sl4qh0z78]::before,
.row.ask[b-8sl4qh0z78]::after,
.row.bid[b-8sl4qh0z78]::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 0;
    bottom: 1px;
}

.row.ask[b-8sl4qh0z78]::before,
.row.bid[b-8sl4qh0z78]::before {
    width: var(--depth);
    opacity: .45;
}

.row.ask[b-8sl4qh0z78]::after,
.row.bid[b-8sl4qh0z78]::after {
    width: var(--size);
}

.row.ask[b-8sl4qh0z78]::before,
.row.ask[b-8sl4qh0z78]::after {
    background: var(--down-soft);
}

.row.bid[b-8sl4qh0z78]::before,
.row.bid[b-8sl4qh0z78]::after {
    background: var(--up-soft);
}

.row.ask:hover[b-8sl4qh0z78],
.row.bid:hover[b-8sl4qh0z78] {
    background: var(--surface-2);
}

.ask .price[b-8sl4qh0z78] {
    color: var(--down);
}

.bid .price[b-8sl4qh0z78] {
    color: var(--up);
}

.row.spread[b-8sl4qh0z78] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    height: 34px;
    margin: 3px 0;
    padding: 0 12px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.row.spread > span[b-8sl4qh0z78] {
    padding: 0;
}

.mid[b-8sl4qh0z78] {
    font-size: 15px;
    font-weight: 600;
}

.spread-info[b-8sl4qh0z78] {
    display: flex;
    gap: 8px;
    color: var(--text-2);
}

/* Narrow cards keep only the essential columns */
@container (max-width: 640px) {
    .opt[b-8sl4qh0z78] {
        display: none;
    }

    .book.l2[b-8sl4qh0z78] {
        --cols: minmax(88px, 1.3fr) minmax(64px, 1fr) minmax(64px, 1fr) minmax(60px, .7fr) minmax(70px, 1fr);
    }

    .book.l2.no-counts[b-8sl4qh0z78] {
        --cols: minmax(88px, 1.3fr) minmax(64px, 1fr) minmax(64px, 1fr) minmax(70px, 1fr);
    }

    .book.l3[b-8sl4qh0z78] {
        --cols: minmax(88px, 1.3fr) minmax(64px, 1fr) minmax(64px, 1fr) minmax(70px, 1fr);
    }
}
/* /Features/Shared/PageHeader/PageHeader.razor.rz.scp.css */
.page-head[b-5ilovxdx8b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-height: 32px;
}

.titles[b-5ilovxdx8b] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.titles h1[b-5ilovxdx8b] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.titles p[b-5ilovxdx8b] {
    color: var(--text-3);
    font-size: 12px;
    white-space: nowrap;
}

.status[b-5ilovxdx8b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.status.live[b-5ilovxdx8b] {
    background: var(--up-soft);
    color: var(--up);
}

.dot[b-5ilovxdx8b] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse-b-5ilovxdx8b 2s ease-in-out infinite;
}

@keyframes pulse-b-5ilovxdx8b {
    50% { opacity: .35; }
}

.tools[b-5ilovxdx8b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
/* /Features/Shared/Stat/Stat.razor.rz.scp.css */
.stat[b-uzaqbpxae6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--surface);
}

.label[b-uzaqbpxae6] {
    color: var(--text-3);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.value[b-uzaqbpxae6] {
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.value.up[b-uzaqbpxae6] { color: var(--up); }
.value.down[b-uzaqbpxae6] { color: var(--down); }

.hint[b-uzaqbpxae6] {
    overflow: hidden;
    color: var(--text-3);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}