/* Customer flow layer: retains the Admin-derived palette and base controls. */
:root {
    --flow-carbon: #101311;
    --flow-graphite: #343a40;
    --flow-silver: #aab2bd;
    --flow-frost: #f4f7fa;
    --flow-blue: #3b82f6;
    --flow-buy: #087a54;
    --flow-sell: #b72b3a;
    --flow-ink: #17212b;
    --flow-muted: #647280;
    --flow-line: rgba(52,58,64,.16);
    --flow-glass: linear-gradient(138deg, rgba(255,255,255,.86), rgba(227,237,248,.62));
    --flow-shadow: 0 15px 35px rgba(16,19,17,.10), inset 0 1px 0 rgba(255,255,255,.96);
}

body {
    margin: 0;
    background-color: #e8eef5;
}

.customer-app {
    min-width: 0;
}

    .customer-app .customer-layout {
        gap: 22px;
    }

    .customer-app .customer-main {
        min-width: 0;
    }

    .customer-app :is(button,a,summary) {
        -webkit-tap-highlight-color: transparent;
    }

        .customer-app :is(button,a,summary):focus-visible {
            outline: 3px solid var(--flow-blue);
            outline-offset: 3px;
        }

        .customer-app :is(button,a,summary):active {
            transform: translateY(1px);
        }

    .customer-app .side-caption {
        margin: -16px 14px 30px;
        color: #aabfd2;
        font-size: 12px;
    }

    .customer-app .customer-sidebar .customer-signout {
        margin-top: auto;
        width: 100%;
    }

    .customer-app .customer-topbar {
        align-items: center;
    }

    .customer-app .topbar-leading {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .customer-app .topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
    }

        .customer-app .topbar-actions .customer-user {
            font-size: 13px;
        }

    .customer-app .demo-badge,
    .customer-app .source-chip,
    .customer-app .market-state {
        display: inline-flex;
        align-items: center;
        width: max-content;
        border: 1px solid rgba(59,130,246,.22);
        border-radius: 5px;
        padding: 4px 8px;
        background: rgba(226,239,255,.72);
        color: #21569a;
        font-size: 11px;
        font-weight: 700;
    }

    .customer-app .source-chip {
        border-color: rgba(183,43,58,.22);
        background: rgba(255,239,241,.85);
        color: #982737;
    }

    .customer-app .balance-trigger {
        border: 1px solid rgba(59,130,246,.32);
        border-radius: 6px;
        padding: 9px 14px;
        color: #154c9a;
        background: rgba(230,242,255,.76);
        box-shadow: inset 0 1px 0 #fff;
        font-weight: 750;
        transition: background-color 0.15s, border-color 0.15s;
    }

        .customer-app .balance-trigger:hover,
        .customer-app .balance-trigger:focus-visible {
            background: rgba(195,224,255,.98);
            border-color: var(--flow-blue);
            box-shadow: 0 0 0 4px rgba(59,130,246,.13), inset 0 1px 0 #fff;
        }

        .customer-app .balance-trigger.prominent {
            white-space: nowrap;
            color: #fff;
            background: rgba(16,19,17,.9);
            border-color: rgba(16,19,17,.8);
        }

            .customer-app .balance-trigger.prominent:hover {
                background: #174b87;
            }

    .customer-app .menu-toggle {
        display: none;
    }

    .customer-app .flow-page {
        display: grid;
        gap: 20px;
        padding-bottom: 24px;
    }

    .customer-app .section-heading,
    .customer-app .dashboard-intro {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
    }

        .customer-app .section-heading h2,
        .customer-app .dashboard-intro h2 {
            margin: 0;
            color: var(--flow-ink);
            font-size: 19px;
            line-height: 1.45;
        }

        .customer-app .section-heading p {
            margin: 3px 0 0;
            color: var(--flow-muted);
            font-size: 12px;
        }

        .customer-app .section-heading a {
            color: #1857a5;
            font-size: 13px;
            font-weight: 750;
            text-decoration: none;
            white-space: nowrap;
        }

            .customer-app .section-heading a:hover {
                color: #0d3971;
                text-decoration: underline;
            }

    .customer-app .dashboard-intro {
        padding: 8px 2px 0;
    }

    .customer-app .market-note {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px 12px;
        border-right: 3px solid var(--flow-blue);
        color: #3d5268;
        background: rgba(235,244,255,.6);
        font-size: 12px;
    }

    .customer-app .daily-balance {
        display: grid;
        gap: 12px;
        padding: 4px 0;
    }

    .customer-app .daily-balance-grid {
        display: grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 10px;
    }

        .customer-app .daily-balance-grid > div {
            display: grid;
            align-content: space-between;
            gap: 12px;
            min-width: 0;
            min-height: 90px;
            padding: 14px;
            border: 1px solid rgba(255,255,255,.9);
            border-radius: 7px;
            background: var(--flow-glass);
            box-shadow: var(--flow-shadow), 0 0 0 1px rgba(52,58,64,.05);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

            .customer-app .daily-balance-grid > div:hover {
                border-color: rgba(59,130,246,.48);
                background: rgba(233,245,255,.95);
                box-shadow: 0 12px 28px rgba(38,93,151,.17), inset 0 1px 0 #fff;
            }

        .customer-app .daily-balance-grid small {
            color: var(--flow-muted);
            font-size: 11px;
        }

        .customer-app .daily-balance-grid strong {
            color: #243241;
            font-size: 11px;
        }

        .customer-app .daily-balance-grid .signed-value {
            justify-content: flex-start;
            text-align: right;
        }

    .customer-app .daily-coin-line {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 18px;
        padding: 8px 3px;
        color: var(--flow-muted);
        font-size: 11px;
    }

        .customer-app .daily-coin-line > span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .customer-app .daily-coin-line .signed-value strong {
            font-size: 11px;
        }

    .customer-app :is(.rate-board,.today-orders,.trade-form,.trade-aside,.statement-summary,.statement-list,.customer-details,.order-list) {
        min-width: 0;
    }

    .customer-app .rate-board,
    .customer-app .today-orders {
        display: grid;
        gap: 12px;
    }

    .customer-app .rate-card,
    .customer-app .trade-form,
    .customer-app .trade-aside,
    .customer-app .order-card,
    .customer-app .statement-entry,
    .customer-app .statement-summary > div,
    .customer-app .customer-details,
    .customer-app .demo-review {
        border: 1px solid rgba(255,255,255,.88);
        border-radius: 8px;
        background: var(--flow-glass);
        box-shadow: var(--flow-shadow), 0 0 0 1px rgba(52,58,64,.06);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .customer-app .rate-card {
        padding: 16px;
        transition: border-color 0.15s, background-color 0.15s;
    }

        .customer-app .rate-card:hover {
            border-color: rgba(59,130,246,.45);
            background: linear-gradient(130deg, rgba(255,255,255,.97), rgba(215,234,255,.77));
            box-shadow: 0 19px 38px rgba(33,76,130,.16), inset 0 1px 0 #fff;
        }

    .customer-app .rate-card-head {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 11px;
    }

        .customer-app .rate-card-head h3 {
            margin: 0;
            font-size: 16px;
            color: #18242d;
        }

        .customer-app .rate-card-head p {
            margin: 3px 0 0;
            font-size: 11px;
            color: var(--flow-muted);
        }

    .customer-app .rate-unit {
        color: #597088;
        font-size: 11px;
        white-space: nowrap;
    }

    .customer-app .rate-row {
        display: grid;
        grid-template-columns: minmax(112px,.58fr) repeat(2,minmax(0,1fr));
        align-items: stretch;
        gap: 10px;
    }

        .customer-app .rate-row + .rate-row {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--flow-line);
        }

    .customer-app .rate-row-label {
        display: grid;
        align-content: center;
        gap: 3px;
    }

        .customer-app .rate-row-label strong {
            color: #243241;
            font-size: 13px;
        }

        .customer-app .rate-row-label small {
            color: var(--flow-muted);
            font-size: 10px;
        }

    .customer-app .rate-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
        min-height: 58px;
        padding: 9px 13px;
        border: 1px solid transparent;
        border-radius: 6px;
        text-align: right;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
        transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
    }

        .customer-app .rate-button span {
            flex: 0 0 auto;
            font-size: 12px;
            font-weight: 700;
        }

        .customer-app .rate-button strong {
            font-size: 17px;
            font-weight: 800;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .customer-app .rate-button.buy {
            color: #055b3e;
            border-color: rgba(8,122,84,.25);
            background: linear-gradient(120deg, rgba(208,249,229,.78), rgba(232,255,245,.55));
        }

        .customer-app .rate-button.sell {
            color: #a62132;
            border-color: rgba(183,43,58,.25);
            background: linear-gradient(120deg, rgba(255,219,223,.8), rgba(255,241,243,.55));
        }

        .customer-app .rate-button.buy:hover,
        .customer-app .rate-button.buy:focus-visible {
            color: #fff;
            background: #087a54;
            border-color: #055b3e;
            box-shadow: 0 9px 22px rgba(8,122,84,.27), inset 0 1px 0 rgba(255,255,255,.2);
        }

        .customer-app .rate-button.sell:hover,
        .customer-app .rate-button.sell:focus-visible {
            color: #fff;
            background: #b72b3a;
            border-color: #952333;
            box-shadow: 0 9px 22px rgba(183,43,58,.25), inset 0 1px 0 rgba(255,255,255,.2);
        }

    .customer-app .quote-reference {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
        min-height: 52px;
        padding: 9px 13px;
        border: 1px dashed rgba(52,58,64,.2);
        border-radius: 6px;
        background: rgba(255,255,255,.5);
    }

        .customer-app .quote-reference span {
            font-size: 11px;
            font-weight: 700;
        }

        .customer-app .quote-reference strong {
            font-size: 14px;
            overflow-wrap: anywhere;
        }

        .customer-app .quote-reference.buy {
            color: #0a6c4b;
        }

        .customer-app .quote-reference.sell {
            color: #a62132;
        }

    .customer-app .order-list {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
    }

    .customer-app .order-card {
        display: grid;
        gap: 13px;
        padding: 16px;
        transition: border-color 0.15s, background-color 0.15s;
    }

    .customer-app .order-card-top small {
        color: var(--flow-muted)
    }

    .customer-app .order-card-top strong {
        color: #243241 !important;
    }

    .customer-app .order-card:hover {
        border-color: rgba(59,130,246,.38);
        background: rgba(247,251,255,.94);
        box-shadow: 0 15px 28px rgba(35,75,120,.12), inset 0 1px 0 #fff;
    }

    .customer-app .order-card-top,
    .customer-app .order-card-top > div,
    .customer-app .order-card-foot {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .customer-app .order-card-top {
        justify-content: space-between;
        min-width: 0;
    }

        .customer-app .order-card-top strong {
            font-size: 13px;
        }

    .customer-app .order-side {
        font-size: 11px;
        font-weight: 800;
    }

    .customer-app .order-status {
        padding: 4px 7px;
        border-radius: 4px;
        font-size: 10px;
        white-space: nowrap;
        background: rgba(52,58,64,.09);
    }

        .customer-app .order-status.status-pendingapproval {
            color: #78520d !important;
            background: rgba(201,143,42,.15);
        }

        .customer-app .order-status.status-approved {
            color: #076b49 !important;
            background: rgba(8,122,84,.12);
        }

        .customer-app .order-status.status-rejected {
            color: #a62132 !important;
            background: rgba(183,43,58,.12);
        }


.order-status.status-pendingapproval {
    color: #78520d !important;
    background: rgba(201,143,42,.15);
}

.order-status.status-approved {
    color: #076b49 !important;
    background: rgba(8,122,84,.12);
}

.order-status.status-rejected {
    color: #a62132 !important;
    background: rgba(183,43,58,.12);
}

.customer-app .order-card-values {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}


    .customer-app .order-card-values > div {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .customer-app .order-card-values small {
        font-size: 11px;
        color: var(--flow-muted) !important;
    }

    .customer-app .order-card-values strong {
        font-size: 14px;
        overflow-wrap: anywhere;
        color: #243241 !important;
    }

.customer-app .order-card-foot {
    justify-content: space-between;
    color: var(--flow-muted);
    font-size: 10px;
    border-top: 1px solid var(--flow-line);
    padding-top: 9px;
}

.customer-app .rejection-reason {
    margin: 0;
    color: #a62132;
    font-size: 12px;
}

.customer-app .flow-toast {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    padding: 11px 13px;
    color: #0a6848;
    background: rgba(217,250,233,.91);
    border: 1px solid rgba(8,122,84,.25);
    border-radius: 6px;
    font-weight: 700;
}

    .customer-app .flow-toast button {
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 22px;
        line-height: 1;
    }

.customer-app .trade-layout {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(240px,.72fr);
    align-items: start;
    gap: 17px;
}

.customer-app .trade-form {
    padding: 20px;
}

.customer-app .trade-product-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 20px;
}

    .customer-app .trade-product-tabs button,
    .customer-app .order-filters button {
        min-height: 36px;
        border: 1px solid rgba(52,58,64,.17);
        border-radius: 5px;
        padding: 7px 11px;
        background: rgba(255,255,255,.68);
        color: #273748;
        font-size: 12px;
        font-weight: 700;
        transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    }

        .customer-app .trade-product-tabs button:hover,
        .customer-app .order-filters button:hover {
            border-color: var(--flow-blue);
            background: rgba(218,237,255,.93);
            box-shadow: 0 0 0 3px rgba(59,130,246,.12);
        }

        .customer-app .trade-product-tabs button.active,
        .customer-app .order-filters button.active {
            background: #174e95;
            color: #fff;
            border-color: #174e95;
        }

.customer-app .trade-context {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--flow-line);
}

    .customer-app .trade-context small {
        color: var(--flow-muted);
        font-size: 11px;
    }

    .customer-app .trade-context h3 {
        margin: 3px 0 0;
        font-size: 18px;
    }

    .customer-app .trade-context > span {
        color: var(--flow-muted);
        font-size: 12px;
    }

.customer-app .trade-form .customer-mode {
    margin: 18px 0 0;
    width: 100%;
}

    .customer-app .trade-form .customer-mode button {
        flex: 1;
        min-width: 0;
        font-weight: 750;
    }

        .customer-app .trade-form .customer-mode button:first-child.selected {
            background: var(--flow-buy);
        }

        .customer-app .trade-form .customer-mode button:last-child.selected {
            background: var(--flow-sell);
        }

.customer-app .trade-form .entry-mode {
    margin-top: 16px;
}

    .customer-app .trade-form .entry-mode button.selected {
        background: #174e95 !important;
    }

.customer-app .current-rate,
.customer-app .mesghal-reference {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 16px;
    padding: 13px 14px;
    border: 1px solid rgba(59,130,246,.18);
    border-radius: 6px;
    background: rgba(234,243,253,.72);
}

    .customer-app .current-rate span,
    .customer-app .mesghal-reference span {
        color: #465b6e;
        font-size: 12px;
    }

    .customer-app .current-rate strong,
    .customer-app .mesghal-reference strong {
        font-size: 17px;
    }

    .customer-app .current-rate small,
    .customer-app .mesghal-reference small {
        width: 100%;
        color: #6a7886;
        font-size: 10px;
    }

.customer-app .credit {
    color: #087a54 !important;
}

.customer-app .debt {
    color: #b72b3a !important;
}

.customer-app .neutral {
    color: #506174 !important;
}

.customer-app .trade-entry {
    display: grid;
    gap: 7px;
    margin-top: 18px;
    color: #354657;
    font-size: 13px;
    font-weight: 700;
}

    .customer-app .trade-entry input {
        width: 100%;
        min-height: 51px;
        font-size: 19px;
        font-weight: 750;
        text-align: right;
    }

.customer-app .trade-calculation {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    margin-top: 13px;
}

    .customer-app .trade-calculation > div {
        display: grid;
        gap: 6px;
        padding: 12px;
        border: 1px solid rgba(52,58,64,.14);
        border-radius: 6px;
        background: rgba(255,255,255,.58);
    }

    .customer-app .trade-calculation > .calculation-remainder {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 12px;
        border-color: rgba(59,130,246,.22);
        background: rgba(230,242,255,.62);
    }

    .customer-app .trade-calculation span {
        color: var(--flow-muted);
        font-size: 11px;
    }

    .customer-app .trade-calculation strong {
        font-size: 15px;
        overflow-wrap: anywhere;
    }

.customer-app .form-error {
    color: #a62132;
    font-size: 12px;
}

.customer-app .trade-disclaimer {
    margin: 14px 0;
    color: #5c6b78;
    font-size: 11px;
    line-height: 1.8;
}

.customer-app .submit-order {
    width: 100%;
    min-height: 48px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

    .customer-app .submit-order.buy,
    .customer-app .confirm-actions .buy {
        background: var(--flow-buy);
    }

    .customer-app .submit-order.sell,
    .customer-app .confirm-actions .sell {
        background: var(--flow-sell);
    }

    .customer-app .submit-order:not(:disabled):hover {
        filter: brightness(.88);
        box-shadow: 0 8px 20px rgba(16,19,17,.18);
    }

.customer-app .trade-aside {
    display: grid;
    gap: 13px;
    padding: 18px;
}

    .customer-app .trade-aside h3 {
        margin: 0;
        font-size: 15px;
    }

    .customer-app .trade-aside > div {
        display: grid;
        gap: 4px;
        padding-top: 10px;
        border-top: 1px solid var(--flow-line);
    }

    .customer-app .trade-aside span {
        color: var(--flow-muted);
        font-size: 11px;
    }

    .customer-app .trade-aside strong {
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .customer-app .trade-aside button {
        min-height: 38px;
        border: 1px solid rgba(59,130,246,.26);
        border-radius: 5px;
        background: rgba(230,241,255,.8);
        color: #174e95;
        font-weight: 700;
    }

        .customer-app .trade-aside button:hover {
            border-color: var(--flow-blue);
            background: #d4eaff;
        }

.customer-app .order-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.customer-app .orders-page .order-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.customer-app .demo-review {
    padding: 13px 16px;
}

    .customer-app .demo-review summary {
        cursor: pointer;
        font-weight: 750;
        color: #25456a;
    }

    .customer-app .demo-review p {
        color: var(--flow-muted);
        font-size: 12px;
    }

.customer-app .review-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--flow-line);
    font-size: 12px;
}

    .customer-app .review-row > div {
        display: flex;
        gap: 7px;
    }

    .customer-app .review-row button {
        border: 1px solid rgba(52,58,64,.2);
        border-radius: 5px;
        padding: 7px 9px;
        background: rgba(255,255,255,.73);
    }

        .customer-app .review-row button:first-child:hover {
            color: white;
            background: var(--flow-buy);
        }

        .customer-app .review-row button:last-child:hover {
            color: white;
            background: var(--flow-sell);
        }

.customer-app .statement-summary {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}

    .customer-app .statement-summary > div {
        display: grid;
        gap: 8px;
        padding: 15px;
    }

    .customer-app .statement-summary small {
        color: var(--flow-muted);
    }

.customer-app .statement-list {
    display: grid;
    gap: 8px;
}

.customer-app .tahesab-table-wrap {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 7px;
    background: rgba(249,252,255,.77);
    box-shadow: var(--flow-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.customer-app .tahesab-table {
    width: 100%;
    min-width: 1170px;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 11px;
}

    .customer-app .tahesab-table th {
        position: sticky;
        top: 0;
        padding: 12px 10px;
        background: rgba(52,58,64,.94);
        color: #fff;
        text-align: right;
        font-weight: 750;
    }

    .customer-app .tahesab-table td {
        padding: 12px 10px;
        border-bottom: 1px solid var(--flow-line);
        color: var(--flow-ink);
    }

        .customer-app .tahesab-table td:nth-child(5) {
            min-width: 260px;
            white-space: normal;
            line-height: 1.6;
        }

    .customer-app .tahesab-table tbody tr:hover {
        background: rgba(213,233,255,.64);
    }

    .customer-app .tahesab-table .signed-value {
        justify-content: flex-start;
        text-align: right;
    }

        .customer-app .tahesab-table .signed-value strong {
            font-size: 11px;
        }

.customer-app .statement-mobile-list {
    display: none;
}

.customer-app .rules-list {
    display: grid;
    border-top: 1px solid var(--flow-line);
}

    .customer-app .rules-list section {
        display: grid;
        grid-template-columns: minmax(140px,.35fr) 1fr;
        gap: 12px 26px;
        padding: 18px 4px;
        border-bottom: 1px solid var(--flow-line);
    }

    .customer-app .rules-list h3 {
        margin: 0;
        color: var(--flow-ink);
        font-size: 14px;
    }

    .customer-app .rules-list p {
        margin: 0;
        color: #415366;
        font-size: 13px;
        line-height: 1.95;
    }

.customer-app .statement-entry {
    overflow: hidden;
}

    .customer-app .statement-entry:hover,
    .customer-app .statement-entry[open] {
        border-color: rgba(59,130,246,.4);
        background: rgba(247,251,255,.93);
    }

    .customer-app .statement-entry summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 13px 15px;
        list-style: none;
        cursor: pointer;
    }

        .customer-app .statement-entry summary::-webkit-details-marker {
            display: none;
        }

        .customer-app .statement-entry summary > span:first-child {
            display: grid;
            gap: 4px;
            min-width: 0;
        }

        .customer-app .statement-entry summary strong {
            font-size: 13px;
        }

        .customer-app .statement-entry summary small {
            color: var(--flow-muted);
            font-size: 10px;
        }

        .customer-app .statement-entry summary > span:last-child {
            font-weight: 750;
            font-size: 13px;
            text-align: left;
        }

    .customer-app .statement-entry dl {
        display: grid;
        gap: 5px;
        margin: 0;
        padding: 0 15px 14px;
    }

        .customer-app .statement-entry dl div {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            border-top: 1px solid var(--flow-line);
            padding-top: 7px;
        }

    .customer-app .statement-entry dt {
        color: var(--flow-muted);
        font-size: 11px;
    }

    .customer-app .statement-entry dd {
        margin: 0;
        font-size: 11px;
    }

.customer-app .statement-note,
.customer-app .profile-note {
    color: var(--flow-muted);
    font-size: 12px;
}

.customer-app .customer-details {
    padding: 9px 16px;
}

    .customer-app .customer-details div {
        min-width: 0;
    }

    .customer-app .customer-details dd {
        color: var(--flow-ink);
    }

.customer-app .profile-page > .customer-signout {
    width: max-content;
    margin: 0;
}

.customer-app .customer-pager button {
    color: var(--flow-carbon);
}

    .customer-app .customer-pager button:not(:disabled):hover {
        color: var(--flow-carbon);
        background: #d9ebff;
    }

.customer-app .signed-value {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    text-align: left;
}

    .customer-app .signed-value strong {
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .customer-app .signed-value small {
        font-size: 11px;
        font-weight: 750;
    }

.customer-app .modal-scrim,
.customer-app .menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(16,19,17,.52);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.customer-app .balance-dialog,
.customer-app .confirm-dialog {
    width: min(610px,100%);
    max-height: min(90vh,900px);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 8px;
    background: linear-gradient(140deg, rgba(255,255,255,.94), rgba(225,237,249,.91));
    box-shadow: 0 26px 75px rgba(0,0,0,.27), inset 0 1px 0 white;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.customer-app :is(.balance-dialog,.confirm-dialog) header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--flow-line);
}

.customer-app :is(.balance-dialog,.confirm-dialog) h2 {
    margin: 6px 0 0;
    font-size: 18px;
}

.customer-app :is(.balance-dialog,.confirm-dialog) header button,
.customer-app .mobile-menu header button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(52,58,64,.18);
    border-radius: 5px;
    background: rgba(255,255,255,.7);
    color: var(--flow-carbon);
    font-size: 23px;
}

    .customer-app :is(.balance-dialog,.confirm-dialog) header button:hover {
        background: #d5eaff;
        border-color: var(--flow-blue);
    }

.customer-app .balance-rows {
    display: grid;
    margin-top: 7px;
}

.customer-app .balance-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--flow-line);
    font-size: 13px;
}

    .customer-app .balance-row > span:first-child {
        color: #425267;
    }

    .customer-app .balance-row.coin-row {
        display: grid;
    }

.customer-app .coin-balances {
    display: grid;
    gap: 9px;
}

    .customer-app .coin-balances > div {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 10px;
        border: 1px solid rgba(52,58,64,.11);
        border-radius: 5px;
        background: rgba(255,255,255,.52);
    }

.customer-app .total-row {
    padding: 15px 10px;
    margin-top: 9px;
    border: 1px solid rgba(59,130,246,.24);
    border-radius: 6px;
    background: rgba(224,239,255,.7);
    font-weight: 750;
}

.customer-app .balance-footnote {
    margin: 12px 0 0;
    color: var(--flow-muted);
    font-size: 11px;
    line-height: 1.8;
}

.customer-app .confirm-dialog dl {
    margin: 10px 0;
}

    .customer-app .confirm-dialog dl div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--flow-line);
    }

.customer-app .confirm-dialog dt {
    color: var(--flow-muted);
}

.customer-app .confirm-dialog dd {
    margin: 0;
    font-weight: 750;
}

.customer-app .confirm-dialog p {
    color: var(--flow-muted);
    font-size: 12px;
}

.customer-app .confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
}

    .customer-app .confirm-actions button {
        min-height: 41px;
        padding: 7px 16px;
        border: 1px solid rgba(52,58,64,.18);
        border-radius: 5px;
        background: rgba(255,255,255,.74);
        font-weight: 750;
    }

    .customer-app .confirm-actions :is(.buy,.sell) {
        border-color: transparent;
        color: #fff;
    }

    .customer-app .confirm-actions button:hover {
        filter: brightness(.9);
        box-shadow: 0 6px 15px rgba(0,0,0,.14);
    }

.customer-app .menu-scrim {
    place-items: stretch start;
    padding: 0;
}

.customer-app .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: min(320px,85vw);
    min-height: 100vh;
    padding: max(17px,env(safe-area-inset-top)) 15px 22px;
    border-left: 1px solid rgba(255,255,255,.45);
    background: linear-gradient(140deg, rgba(255,255,255,.96), rgba(222,236,250,.95));
    box-shadow: -18px 0 48px rgba(0,0,0,.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

    .customer-app .mobile-menu header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

        .customer-app .mobile-menu header strong {
            font: 800 25px Arial,sans-serif;
        }

.customer-app .menu-account {
    display: grid;
    gap: 3px;
    margin-bottom: 16px;
    padding: 11px 12px;
    border: 1px solid rgba(59,130,246,.2);
    border-radius: 6px;
    background: rgba(255,255,255,.52);
}

    .customer-app .menu-account small {
        color: var(--flow-muted);
    }

.customer-app .mobile-menu a,
.customer-app .mobile-menu > button {
    display: block;
    width: 100%;
    min-height: 45px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--flow-ink);
    background: transparent;
    text-align: right;
    text-decoration: none;
    font-weight: 700;
}

    .customer-app .mobile-menu a:hover,
    .customer-app .mobile-menu a:focus-visible {
        border-color: rgba(59,130,246,.25);
        color: #164b93;
        background: #d9ebff;
    }

.customer-app .mobile-menu > button {
    margin-top: auto;
    border-color: rgba(183,43,58,.25);
    color: #a62132;
    background: rgba(255,235,238,.69);
}

    .customer-app .mobile-menu > button:hover {
        color: white;
        background: var(--flow-sell);
    }

.customer-app .customer-login {
    gap: 10px;
}

    .customer-app .customer-login .demo-note {
        margin: 2px 0;
        font-size: 11px;
        color: var(--flow-muted);
    }


.customer-app .rate-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.customer-app .rate-mesqal {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 58px;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 6px;
    text-align: right;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

    .customer-app .rate-mesqal.buy {
        color: #055b3e;
        border-color: rgba(8,122,84,.25);
        background: linear-gradient(120deg, rgba(208,249,229,.78), rgba(232,255,245,.55));
    }

.customer-app .rate-mesqal.sell {
    color: #a62132;
    border-color: rgba(183,43,58,.25);
    background: linear-gradient(120deg, rgba(255,219,223,.8), rgba(255,241,243,.55));
}


/* Forced mobile preview: phone-width layout even in a desktop browser. */
body[data-layout="mobile"] .customer-app {
    width: min(440px,100%);
    margin: 0 auto;
    min-height: 100vh;
    box-shadow: 0 0 42px rgba(16,19,17,.18);
}

    body[data-layout="mobile"] .customer-app .customer-layout {
        display: block;
        max-width: 440px;
        padding: 10px 10px 105px;
    }

    body[data-layout="mobile"] .customer-app .customer-sidebar {
        display: none;
    }

    body[data-layout="mobile"] .customer-app .customer-main {
        padding: 0 0 20px;
    }

    body[data-layout="mobile"] .customer-app .mobile-bottom-nav {
        position: fixed;
        z-index: 100;
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 2px;
        bottom: max(9px,env(safe-area-inset-bottom));
        left: 50%;
        width: min(420px,calc(100% - 20px));
        padding: 7px;
        border: 1px solid rgba(255,255,255,.3);
        border-radius: 8px;
        background: linear-gradient(125deg,rgba(52,58,64,.91),rgba(16,19,17,.95));
        box-shadow: 0 18px 37px rgba(16,19,17,.3), inset 0 1px 0 rgba(255,255,255,.25);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: translateX(-50%);
    }

        body[data-layout="mobile"] .customer-app .mobile-bottom-nav a {
            display: grid;
            justify-items: center;
            align-content: center;
            min-height: 56px;
            padding: 5px 2px;
            border-radius: 5px;
            color: #d1d8e0;
            font-size: 11px;
            font-weight: 650;
            text-align: center;
            text-decoration: none;
            line-height: 1.3;
        }

            body[data-layout="mobile"] .customer-app .mobile-bottom-nav a:hover,
            body[data-layout="mobile"] .customer-app .mobile-bottom-nav a.active {
                color: #fff;
                background: rgba(59,130,246,.66);
                box-shadow: inset 0 1px 0 rgba(255,255,255,.26),0 3px 11px rgba(0,0,0,.15);
            }

    body[data-layout="mobile"] .customer-app .menu-toggle {
        display: flex;
    }

    body[data-layout="mobile"] .customer-app .trade-layout,
    body[data-layout="mobile"] .customer-app .order-list,
    body[data-layout="mobile"] .customer-app .orders-page .order-list {
        grid-template-columns: 1fr;
    }

    body[data-layout="mobile"] .customer-app .customer-topbar {
        min-height: 69px;
        padding: 9px 10px;
    }

        body[data-layout="mobile"] .customer-app .customer-topbar h1 {
            font-size: 16px;
        }

    body[data-layout="mobile"] .customer-app .topbar-actions .customer-user,
    body[data-layout="mobile"] .customer-app .topbar-actions .demo-badge {
        display: none;
    }

    body[data-layout="mobile"] .customer-app .topbar-actions .balance-trigger {
        padding: 7px 8px;
        font-size: 11px;
    }

    body[data-layout="mobile"] .customer-app .dashboard-intro {
        align-items: flex-start;
    }

        body[data-layout="mobile"] .customer-app .dashboard-intro .balance-trigger {
            padding: 8px 9px;
            font-size: 11px;
        }

    body[data-layout="mobile"] .customer-app .rate-card {
        padding: 12px;
    }

    body[data-layout="mobile"] .customer-app .rate-row {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px;
    }

    body[data-layout="mobile"] .customer-app .rate-row-label {
        grid-column: 1/-1;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    body[data-layout="mobile"] .customer-app .rate-button {
        display: grid;
        align-content: center;
        gap: 3px;
        min-height: 58px;
        padding: 7px 9px;
    }

        body[data-layout="mobile"] .customer-app .rate-button strong {
            font-size: 13px;
            overflow-wrap: anywhere;
            white-space: normal;
        }

    body[data-layout="mobile"] .customer-app .trade-form {
        padding: 14px 12px;
    }

    body[data-layout="mobile"] .customer-app .trade-product-tabs {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    body[data-layout="mobile"] .customer-app .statement-summary,
    body[data-layout="mobile"] .customer-app .customer-details {
        grid-template-columns: 1fr;
    }

    body[data-layout="mobile"] .customer-app .daily-balance-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    body[data-layout="mobile"] .customer-app .tahesab-table-wrap {
        display: none;
    }

    body[data-layout="mobile"] .customer-app .statement-mobile-list {
        display: grid;
        gap: 8px;
    }

    body[data-layout="mobile"] .customer-app .rules-list section {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    body[data-layout="mobile"] .customer-app .review-row {
        align-items: flex-start;
        flex-direction: column;
    }

/* Forced desktop preview retains the desktop information density. */
body[data-layout="desktop"] .customer-app .customer-layout {
    grid-template-columns: 230px minmax(0,1fr);
}

body[data-layout="desktop"] .customer-app .customer-sidebar {
    display: flex;
}

body[data-layout="desktop"] .customer-app .mobile-bottom-nav,
body[data-layout="desktop"] .customer-app .menu-toggle {
    display: none;
}

@media (max-width: 920px) {
    body[data-layout="auto"] .customer-app .customer-layout {
        display: block;
        max-width: 740px;
        padding: 10px 10px 105px;
    }

    body[data-layout="auto"] .customer-app .customer-sidebar {
        display: none;
    }

    body[data-layout="auto"] .customer-app .mobile-bottom-nav {
        display: grid;
    }

    body[data-layout="auto"] .customer-app .menu-toggle {
        display: flex;
    }

    body[data-layout="auto"] .customer-app .trade-layout {
        grid-template-columns: 1fr;
    }

    body[data-layout="auto"] .customer-app .daily-balance-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

body[data-layout="mobile"] .customer-app .customer-topbar,
body[data-layout="auto"] .customer-app .customer-topbar {
    min-width: 0;
}

.customer-app .menu-toggle {
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(59,130,246,.24);
    border-radius: 5px;
    background: rgba(234,244,255,.71);
}

    .customer-app .menu-toggle span {
        display: block;
        width: 16px;
        height: 2px;
        border-radius: 2px;
        background: #1c4e87;
    }

    .customer-app .menu-toggle:hover {
        background: #cfe5ff;
        box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    }

.customer-app .mobile-bottom-nav {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}

    .customer-app .mobile-bottom-nav a {
        gap: 3px;
        font-size: 12px !important;
    }

    .customer-app .mobile-bottom-nav .nav-mark {
        width: 17px !important;
        height: 17px !important;
        margin: 0 0 2px !important;
        border-radius: 50% !important;
        border: 4px solid rgba(214,224,237,.55);
        background: transparent !important;
    }

    .customer-app .mobile-bottom-nav a.active .nav-mark {
        border-color: #fff;
        box-shadow: 0 0 9px rgba(255,255,255,.48);
    }

@media (max-width: 620px) {
    body[data-layout="auto"] .customer-app .tahesab-table-wrap {
        display: none;
    }

    body[data-layout="auto"] .customer-app .statement-mobile-list {
        display: grid;
        gap: 8px;
    }

    .customer-app .rules-list section {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .customer-app .customer-topbar {
        min-height: 69px;
        padding: 9px 10px;
    }

        .customer-app .customer-topbar h1 {
            font-size: 16px;
        }

    .customer-app .topbar-actions .customer-user {
        display: none;
    }

    .customer-app .topbar-actions .demo-badge {
        display: none;
    }

    .customer-app .topbar-actions .balance-trigger {
        padding: 7px 8px;
        font-size: 11px;
    }

    .customer-app .dashboard-intro {
        align-items: flex-start;
    }

        .customer-app .dashboard-intro h2 {
            font-size: 18px;
        }

        .customer-app .dashboard-intro .balance-trigger {
            padding: 8px 9px;
            font-size: 11px;
        }

    .customer-app .section-heading h2 {
        font-size: 16px;
    }

    .customer-app .rate-card {
        padding: 12px;
    }

    .customer-app .rate-row {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px;
    }

    .customer-app .rate-row-label {
        grid-column: 1/-1;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .customer-app .rate-button {
        display: grid;
        align-content: center;
        gap: 3px;
        min-height: 58px;
        padding: 7px 9px;
    }

        .customer-app .rate-button strong {
            font-size: 13px;
            overflow-wrap: anywhere;
            white-space: normal;
        }

        .customer-app .rate-button span {
            font-size: 11px;
        }

    .customer-app .order-list,
    .customer-app .orders-page .order-list {
        grid-template-columns: 1fr;
    }

    .customer-app .order-card {
        gap: 10px;
        padding: 12px;
    }

    .customer-app .trade-layout {
        grid-template-columns: 1fr;
    }

    .customer-app .trade-form {
        padding: 14px 12px;
    }

    .customer-app .trade-product-tabs {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

        .customer-app .trade-product-tabs button {
            min-width: 0;
        }

    .customer-app .review-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .customer-app .statement-summary {
        grid-template-columns: 1fr;
    }

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

    .customer-app .statement-entry summary > span:last-child {
        font-size: 12px;
    }

    .customer-app .balance-row {
        gap: 10px;
    }
}

@media (max-width: 360px) {
    .customer-app .customer-topbar h1 {
        font-size: 14px;
    }

    .customer-app .rate-button strong {
        font-size: 12px;
    }

    .customer-app .order-card-values strong {
        font-size: 12px;
    }
}

@supports selector(body:has(input:focus)) {
    body[data-layout="mobile"]:has(.customer-app input:focus) .mobile-bottom-nav {
        opacity: 0;
        pointer-events: none;
    }
}