.record-native-page {
    --rec-vw: var(--shell-vw, 100vw);
    min-height: 100vh;
    padding-bottom: calc(110 * var(--rec-vw) / 750);
    box-sizing: border-box;
    background: var(--app-bg, #f5f7f9);
}

.record-native-page .quotation-shell {
    max-width: 620px;
    margin: 0 auto;
    padding: calc(24 * var(--rec-vw) / 750) calc(26 * var(--rec-vw) / 750) calc(32 * var(--rec-vw) / 750);
    box-sizing: border-box;
}

.record-native-page .order-page-main-tabs {
    display: flex;
    align-items: center;
    gap: calc(28 * var(--rec-vw) / 750);
    margin-bottom: calc(20 * var(--rec-vw) / 750);
    border-bottom: 1px solid var(--app-line, #e5ebf5);
    background: #ffffff;
    border-radius: var(--app-radius, calc(16 * var(--rec-vw) / 750)) var(--app-radius, calc(16 * var(--rec-vw) / 750)) 0 0;
    padding: 0 calc(20 * var(--rec-vw) / 750);
}

.record-native-page .order-page-main-tab {
    position: relative;
    padding: calc(18 * var(--rec-vw) / 750) 0 calc(14 * var(--rec-vw) / 750);
    border: 0;
    background: transparent;
    color: var(--app-muted, #8a93a8);
    font-size: calc(30 * var(--rec-vw) / 750);
    font-weight: 600;
    font-family: PingFang SC, sans-serif;
    cursor: pointer;
}

.record-native-page .order-page-main-tab.active {
    color: var(--app-blue, #2f73f6);
}

.record-native-page .order-page-main-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(4 * var(--rec-vw) / 750);
    border-radius: calc(4 * var(--rec-vw) / 750);
    background: var(--app-blue, #2f73f6);
}

.record-native-page .quotation-tabs {
    display: flex;
    gap: calc(8 * var(--rec-vw) / 750);
    align-items: center;
    padding: calc(6 * var(--rec-vw) / 750);
    margin: 0 0 calc(20 * var(--rec-vw) / 750);
    border-radius: calc(999 * var(--rec-vw) / 750);
    background: var(--app-blue-soft, #eef3ff);
    border: 1px solid var(--app-line, #e5ebf5);
}

.record-native-page .quotation-tab {
    flex: 1 1 0;
    min-height: calc(52 * var(--rec-vw) / 750);
    padding: 0 calc(12 * var(--rec-vw) / 750);
    border: 0;
    border-radius: calc(999 * var(--rec-vw) / 750);
    background: transparent;
    color: var(--app-muted, #8a93a8);
    font-size: calc(24 * var(--rec-vw) / 750);
    font-weight: 600;
    font-family: PingFang SC, sans-serif;
    cursor: pointer;
}

.record-native-page .quotation-tab.active {
    color: #ffffff;
    background: var(--app-blue, #2f73f6);
}

.record-native-page .quotation-empty {
    padding: calc(40 * var(--rec-vw) / 750) calc(18 * var(--rec-vw) / 750);
    border-radius: calc(14 * var(--rec-vw) / 750);
    color: var(--app-muted, #8a93a8);
    text-align: center;
    background: #ffffff;
    border: 1px solid var(--app-line, #e5ebf5);
    font-size: calc(26 * var(--rec-vw) / 750);
    box-shadow: var(--app-shadow, 0 calc(8 * var(--rec-vw) / 750) calc(28 * var(--rec-vw) / 750) rgba(33, 63, 124, 0.07));
}

.record-native-page .order-trade-card {
    margin-bottom: calc(16 * var(--rec-vw) / 750);
    padding: calc(22 * var(--rec-vw) / 750);
    border-radius: calc(14 * var(--rec-vw) / 750);
    background: #ffffff;
    border: 1px solid var(--app-line, #e5ebf5);
    color: var(--app-text, #24314f);
    box-shadow: var(--app-shadow, 0 calc(8 * var(--rec-vw) / 750) calc(28 * var(--rec-vw) / 750) rgba(33, 63, 124, 0.07));
}

.record-native-page .order-trade-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(16 * var(--rec-vw) / 750);
    padding: calc(10 * var(--rec-vw) / 750) 0;
    font-size: calc(26 * var(--rec-vw) / 750);
}

.record-native-page .order-trade-label {
    flex: 0 0 auto;
    color: var(--app-muted, #8a93a8);
}

.record-native-page .order-trade-value {
    text-align: right;
    color: var(--app-text, #24314f);
    word-break: break-word;
}

.record-native-page .buy-up {
    color: var(--app-success, #0a9217);
}

.record-native-page .buy-down {
    color: var(--app-danger, #ff1a17);
}

.record-native-page .profit-up {
    color: var(--app-success, #0a9217);
}

.record-native-page .profit-down {
    color: var(--app-danger, #ff1a17);
}

.record-native-page .fund-order-card {
    background: #ffffff;
    border: 1px solid var(--app-line, #e5ebf5);
    border-radius: calc(14 * var(--rec-vw) / 750);
    padding: calc(22 * var(--rec-vw) / 750);
    margin-bottom: calc(16 * var(--rec-vw) / 750);
    box-shadow: var(--app-shadow, 0 calc(8 * var(--rec-vw) / 750) calc(28 * var(--rec-vw) / 750) rgba(33, 63, 124, 0.07));
}

.record-native-page .fund-order-card-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: calc(10 * var(--rec-vw) / 750);
    margin-bottom: calc(20 * var(--rec-vw) / 750);
}

.record-native-page .fund-order-status {
    border-radius: calc(8 * var(--rec-vw) / 750);
    padding: calc(6 * var(--rec-vw) / 750) calc(12 * var(--rec-vw) / 750);
    background: rgba(47, 115, 246, 0.12);
    color: var(--app-blue, #2f73f6);
    font-size: calc(20 * var(--rec-vw) / 750);
    white-space: nowrap;
}

.record-native-page .fund-order-title {
    font-size: calc(26 * var(--rec-vw) / 750);
    color: var(--app-text, #24314f);
    min-width: 0;
}

.record-native-page .fund-order-redeem {
    border: 0;
    border-radius: calc(8 * var(--rec-vw) / 750);
    padding: calc(8 * var(--rec-vw) / 750) calc(14 * var(--rec-vw) / 750);
    background: var(--app-danger, #ff1a17);
    color: #fff;
    font-size: calc(22 * var(--rec-vw) / 750);
    cursor: pointer;
    white-space: nowrap;
}

.record-native-page .fund-order-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(16 * var(--rec-vw) / 750) calc(10 * var(--rec-vw) / 750);
}

.record-native-page .fund-order-cell {
    min-width: 0;
}

.record-native-page .fund-order-label {
    display: block;
    font-size: calc(20 * var(--rec-vw) / 750);
    color: var(--app-muted, #8a93a8);
    line-height: 1.35;
    margin-bottom: calc(8 * var(--rec-vw) / 750);
}

.record-native-page .fund-order-cell strong {
    display: block;
    font-size: calc(26 * var(--rec-vw) / 750);
    color: var(--app-text, #24314f);
    font-weight: 600;
    word-break: break-word;
}

.record-native-page .fund-order-cell--penalty strong {
    color: var(--app-danger, #ff1a17);
}

.record-native-page .fund-order-cell--penalty {
    grid-column: 1 / -1;
}