/* ============================================================
   ROVEN — FUTURES PAGE
   Exact path:
   public_html/futures.css

   Dedicated only to:
   public_html/futures.html
   ============================================================ */


/* ============================================================
   1. VARIABLES
   ============================================================ */

.roven-futures-page {

    --gold: #F0B90B;
    --gold-hover: #DFAE00;

    --white: #FFFFFF;

    --background: #FFFFFF;
    --background-soft: #F7F8FA;
    --background-muted: #F2F4F7;

    --text: #181A20;
    --secondary: #667085;
    --muted: #98A2B3;

    --border: #E4E7EC;
    --border-dark: #D0D5DD;

    --green: #0ECB81;
    --green-hover: #0ABF78;
    --green-soft: #ECFDF3;

    --red: #F6465D;
    --red-hover: #E53E54;
    --red-soft: #FFF1F3;

    --content-width: 1080px;

    --safe-top:
        env(
            safe-area-inset-top,
            0px
        );

    --safe-bottom:
        env(
            safe-area-inset-bottom,
            0px
        );

    --bottom-nav-height: 72px;

    width: 100%;
    min-width: 320px;

    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;

    padding-bottom:
        calc(
            var(--bottom-nav-height)
            +
            12px
            +
            var(--safe-bottom)
        );

    overflow-x: hidden;

    background: var(--background);
    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
}


/* ============================================================
   2. RESET
   ============================================================ */

.roven-futures-page *,
.roven-futures-page *::before,
.roven-futures-page *::after {
    box-sizing: border-box;
}


.roven-futures-page a {
    color: inherit;

    text-decoration: none;

    -webkit-tap-highlight-color: transparent;
}


.roven-futures-page button,
.roven-futures-page input,
.roven-futures-page select {
    font: inherit;
}


.roven-futures-page button {
    padding: 0;

    border: 0;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;

    color: inherit;

    -webkit-tap-highlight-color: transparent;
}


.roven-futures-page button:not(:disabled) {
    cursor: pointer;
}


.roven-futures-page button:disabled {
    cursor: not-allowed;
}


.roven-futures-page img,
.roven-futures-page svg,
.roven-futures-page canvas {
    display: block;

    max-width: 100%;
}


.roven-futures-page [hidden] {
    display: none !important;
}


/* ============================================================
   3. ACCESSIBILITY
   ============================================================ */

.roven-futures-page .skip-link {

    position: fixed;

    top: 8px;
    left: 8px;

    z-index: 99999;

    transform: translateY(-180%);

    padding:
        8px
        11px;

    border-radius: 7px;

    background: var(--text);
    color: #FFFFFF;

    font-size: 11px;
}


.roven-futures-page .skip-link:focus {
    transform: translateY(0);
}


.roven-visually-hidden {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ============================================================
   4. HEADER
   ============================================================ */

.roven-futures-header {

    position: sticky;

    top: 0;

    z-index: 100;

    width: 100%;

    border-bottom:
        1px solid
        var(--border);

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


.roven-futures-header__inner {

    width:
        min(
            var(--content-width),
            calc(100% - 32px)
        );

    min-height:
        calc(
            64px
            +
            var(--safe-top)
        );

    margin-inline: auto;

    padding-top:
        var(--safe-top);

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


/* ============================================================
   5. LOGO
   ============================================================ */

.roven-futures-logo {

    display: inline-flex;

    align-items: center;

    min-width: 0;
}


.roven-futures-logo img {

    width: auto !important;
    height: 30px !important;

    max-width: 160px !important;
    max-height: 30px !important;

    object-fit: contain !important;
}


/* ============================================================
   6. MENU BUTTON
   ============================================================ */

.roven-futures-menu-button {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: var(--secondary);
}


.roven-futures-menu-button:hover {

    background: var(--background-soft);

    color: var(--text);
}


.roven-futures-menu-button svg {

    width: 21px !important;
    height: 21px !important;
}


/* ============================================================
   7. MARKET MODE BAR
   ============================================================ */

.roven-futures-mode-bar {

    width: 100%;

    border-bottom:
        1px solid
        var(--border);

    background: #FFFFFF;
}


.roven-futures-mode-bar__inner {

    width:
        min(
            var(--content-width),
            calc(100% - 32px)
        );

    min-height: 44px;

    margin-inline: auto;

    display: flex;

    align-items: center;
}


.roven-futures-mode {

    position: relative;

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    color: var(--secondary);

    font-size: 12px;
    font-weight: 500;
}


.roven-futures-mode.is-active {

    color: var(--text);

    font-weight: 600;
}


.roven-futures-mode.is-active::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    border-radius: 999px;

    background: var(--gold);
}


/* ============================================================
   8. MAIN
   ============================================================ */

.roven-futures-main {

    width: 100%;

    min-width: 0;
}


.roven-futures-container {

    width:
        min(
            var(--content-width),
            100%
        );

    margin-inline: auto;

    min-width: 0;
}


/* ============================================================
   9. ALERT
   ============================================================ */

.roven-futures-alert {

    margin:
        12px
        16px
        0;

    padding:
        10px
        12px;

    border:
        1px solid
        #FECDCA;

    border-left:
        3px solid
        var(--red);

    border-radius: 8px;

    background: var(--red-soft);

    color: #B42318;

    font-size: 10px;
    line-height: 1.5;
}


/* ============================================================
   10. SYMBOL SECTION
   ============================================================ */

.roven-futures-symbol-section {

    min-height: 70px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        11px
        16px;

    border-bottom:
        1px solid
        var(--border);
}


.roven-futures-symbol-section__left {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.roven-futures-symbol-button {

    min-width: 0;

    min-height: 32px;

    display: inline-flex;

    align-items: center;

    gap: 6px;
}


.roven-futures-symbol {

    overflow: hidden;

    color: var(--text);

    font-size: 16px;
    font-weight: 600;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.roven-futures-perp-badge {

    display: inline-flex;

    align-items: center;

    min-height: 18px;

    padding:
        2px
        5px;

    border-radius: 4px;

    background: var(--background-soft);

    color: var(--secondary);

    font-size: 8px;
    font-weight: 600;
}


.roven-futures-symbol-arrow {

    width: 15px !important;
    height: 15px !important;

    color: var(--secondary);
}


.roven-futures-symbol-change {

    display: block;

    margin-top: 1px;

    min-height: 16px;

    color: var(--secondary);

    font-size: 10px;

    font-variant-numeric: tabular-nums;
}


.roven-futures-symbol-change.is-positive {
    color: var(--green);
}


.roven-futures-symbol-change.is-negative {
    color: var(--red);
}


/* ============================================================
   11. CHART BUTTON
   ============================================================ */

.roven-futures-chart-button {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    color: var(--secondary);
}


.roven-futures-chart-button:hover {

    background: var(--background-soft);

    color: var(--text);
}


.roven-futures-chart-button svg {

    width: 21px !important;
    height: 21px !important;
}


/* ============================================================
   12. TRADING WORKSPACE
   ============================================================ */

.roven-futures-trading-workspace {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(132px, 0.88fr);

    border-bottom:
        1px solid
        var(--border);
}


.roven-futures-order-panel {

    min-width: 0;

    padding:
        13px
        12px
        17px;

    border-right:
        1px solid
        var(--border);
}


.roven-futures-market-panel {

    min-width: 0;

    padding:
        13px
        10px
        17px;
}


/* ============================================================
   13. MARGIN / LEVERAGE
   ============================================================ */

.roven-futures-control-row {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 6px;
}


.roven-futures-control {

    min-width: 0;
    min-height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        6px
        7px;

    border:
        1px solid
        var(--border);

    border-radius: 6px;

    background: var(--background-soft);

    color: var(--text);

    font-size: 10px;
    font-weight: 500;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.roven-futures-control:hover {

    border-color: var(--border-dark);

    background: #FFFFFF;
}


/* ============================================================
   14. ORDER TYPE
   ============================================================ */

.roven-futures-order-type {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 13px;

    border-bottom:
        1px solid
        var(--border);
}


.roven-futures-order-type__button {

    position: relative;

    min-height: 39px;

    display: inline-flex;

    align-items: center;

    color: var(--secondary);

    font-size: 11px;
    font-weight: 500;
}


.roven-futures-order-type__button.is-active {

    color: var(--text);

    font-weight: 600;
}


.roven-futures-order-type__button.is-active::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    background: var(--gold);
}


/* ============================================================
   15. FIELDS
   ============================================================ */

.roven-futures-field {
    margin-top: 12px;
}


.roven-futures-field__label {

    display: block;

    margin-bottom: 5px;

    color: var(--secondary);

    font-size: 9px;
    font-weight: 500;
}


.roven-futures-input-shell {

    position: relative;

    min-width: 0;

    display: flex;

    align-items: center;
}


.roven-futures-input {

    width: 100%;

    min-width: 0;
    min-height: 41px;

    padding:
        8px
        48px
        8px
        9px;

    border:
        1px solid
        var(--border-dark);

    border-radius: 7px;

    outline: 0;

    background: var(--background-soft);

    color: var(--text);

    font-size: 10px;

    font-variant-numeric: tabular-nums;
}


.roven-futures-input::placeholder {
    color: var(--muted);
}


.roven-futures-input:focus {

    border-color: var(--gold);

    background: #FFFFFF;

    box-shadow:
        0
        0
        0
        2px
        rgba(
            240,
            185,
            11,
            0.10
        );
}


.roven-futures-input[aria-invalid="true"] {
    border-color: var(--red);
}


.roven-futures-input-unit {

    position: absolute;

    right: 8px;

    max-width: 40px;

    overflow: hidden;

    color: var(--secondary);

    font-size: 8px;
    font-weight: 600;

    white-space: nowrap;

    text-overflow: ellipsis;

    pointer-events: none;
}


.roven-futures-field-error {

    display: block;

    min-height: 13px;

    margin-top: 3px;

    color: #B42318;

    font-size: 8px;
}


/* ============================================================
   16. AVAILABLE
   ============================================================ */

.roven-futures-available-row {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-top: 10px;

    color: var(--secondary);

    font-size: 9px;
}


.roven-futures-available-row strong {

    min-width: 0;

    color: var(--text);

    font-size: 9px;
    font-weight: 500;

    text-align: right;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    font-variant-numeric: tabular-nums;
}


/* ============================================================
   17. CALCULATIONS
   ============================================================ */

.roven-futures-calculation {

    margin-top: 10px;

    padding-top: 7px;

    border-top:
        1px solid
        var(--border);
}


.roven-futures-calculation--sell {
    margin-top: 13px;
}


.roven-futures-calculation__row {

    min-height: 23px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 7px;

    color: var(--secondary);

    font-size: 8px;
}


.roven-futures-calculation__row strong {

    color: var(--text);

    font-size: 8px;
    font-weight: 500;

    text-align: right;

    font-variant-numeric: tabular-nums;
}


/* ============================================================
   18. BUY / SELL BUTTONS
   CRITICAL FIX
   ============================================================ */

.roven-futures-order-button {

    position: relative;

    width: 100%;

    min-height: 44px;

    display: flex !important;

    align-items: center;
    justify-content: center;

    margin-top: 9px;

    padding:
        9px
        8px !important;

    border: 0 !important;

    border-radius: 7px;

    color: #FFFFFF !important;

    -webkit-text-fill-color:
        #FFFFFF !important;

    font-size: 11px;
    line-height: 1;
    font-weight: 600;

    opacity: 1 !important;

    visibility: visible !important;

    transition:
        background-color 150ms ease,
        transform 150ms ease;
}


/* BUY */

.roven-futures-order-button--buy {

    background:
        var(--green) !important;

    color:
        #FFFFFF !important;

    -webkit-text-fill-color:
        #FFFFFF !important;
}


.roven-futures-order-button--buy:not(:disabled):hover {

    background:
        var(--green-hover) !important;
}


/* SELL */

.roven-futures-order-button--sell {

    background:
        var(--red) !important;

    color:
        #FFFFFF !important;

    -webkit-text-fill-color:
        #FFFFFF !important;
}


.roven-futures-order-button--sell:not(:disabled):hover {

    background:
        var(--red-hover) !important;
}


/*
 * IMPORTANT:
 * Disabled Futures buttons remain clearly visible.
 *
 * Disabled means:
 * - cannot submit yet
 * - NOT visually hidden
 */

.roven-futures-order-button:disabled {

    opacity: 1 !important;

    visibility: visible !important;

    cursor: not-allowed !important;

    color: #FFFFFF !important;

    -webkit-text-fill-color:
        #FFFFFF !important;
}


.roven-futures-order-button--buy:disabled {

    background:
        var(--green) !important;

    border:
        1px solid
        var(--green) !important;
}


.roven-futures-order-button--sell:disabled {

    background:
        var(--red) !important;

    border:
        1px solid
        var(--red) !important;
}


/*
 * Small visual indication that the action is disabled
 * without removing its green / red identity.
 */

.roven-futures-order-button:disabled::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    pointer-events: none;
}


/* ============================================================
   19. FUNDING
   ============================================================ */

.roven-futures-funding {

    padding-bottom: 9px;

    border-bottom:
        1px solid
        var(--border);
}


.roven-futures-funding__label {

    display: block;

    color: var(--secondary);

    font-size: 7.5px;
}


.roven-futures-funding__value {

    display: block;

    margin-top: 3px;

    color: var(--text);

    font-size: 9px;
    font-weight: 600;

    font-variant-numeric: tabular-nums;
}


.roven-futures-funding__value.is-positive {
    color: var(--green);
}


.roven-futures-funding__value.is-negative {
    color: var(--red);
}


.roven-futures-funding__countdown {

    display: block;

    margin-top: 2px;

    color: var(--secondary);

    font-size: 8px;

    font-variant-numeric: tabular-nums;
}


/* ============================================================
   20. ORDERBOOK HEAD
   ============================================================ */

.roven-futures-orderbook-head {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 5px;

    padding:
        9px
        0
        5px;

    color: var(--muted);

    font-size: 7px;
}


.roven-futures-orderbook-head span:last-child {
    text-align: right;
}


.roven-futures-orderbook-head small {
    font-size: 6px;
}


/* ============================================================
   21. ORDERBOOK
   ============================================================ */

.roven-futures-orderbook {

    width: 100%;

    display: grid;
}


.roven-futures-orderbook-row {

    min-height: 24px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    align-items: center;

    gap: 5px;

    font-size: 8px;

    font-variant-numeric: tabular-nums;
}


.roven-futures-orderbook-row span {

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.roven-futures-orderbook-row span:last-child {

    color: var(--secondary);

    text-align: right;
}


.roven-futures-orderbook--sell
.roven-futures-orderbook-row
span:first-child {
    color: var(--red);
}


.roven-futures-orderbook--buy
.roven-futures-orderbook-row
span:first-child {
    color: var(--green);
}


/* ============================================================
   22. MARKET PRICE
   ============================================================ */

.roven-futures-market-price {

    padding:
        9px
        0;

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);
}


.roven-futures-market-price__last {

    display: block;

    color: var(--text);

    font-size: 15px;
    line-height: 1.1;
    font-weight: 600;

    font-variant-numeric: tabular-nums;
}


.roven-futures-market-price__last.is-positive {
    color: var(--green);
}


.roven-futures-market-price__last.is-negative {
    color: var(--red);
}


.roven-futures-market-price__mark {

    display: block;

    margin-top: 3px;

    color: var(--secondary);

    font-size: 8px;

    font-variant-numeric: tabular-nums;
}


/* ============================================================
   23. ORDERBOOK FOOTER
   ============================================================ */

.roven-futures-orderbook-footer {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 6px;

    margin-top: 9px;
}


.roven-futures-precision-label {

    color: var(--secondary);

    font-size: 7px;
}


.roven-futures-precision-select {

    min-height: 29px;

    padding:
        4px
        22px
        4px
        6px;

    border:
        1px solid
        var(--border);

    border-radius: 6px;

    outline: 0;

    background: #FFFFFF;

    color: var(--text);

    font-size: 8px;
}


/* ============================================================
   24. ACCOUNT SECTION
   ============================================================ */

.roven-futures-account-section {

    width: 100%;

    border-bottom:
        1px solid
        var(--border);
}


/* ============================================================
   25. ACCOUNT TABS
   ============================================================ */

.roven-futures-account-tabs {

    min-height: 49px;

    display: flex;

    align-items: center;

    gap: 21px;

    padding:
        0
        16px;

    overflow-x: auto;

    border-bottom:
        1px solid
        var(--border);

    scrollbar-width: none;
}


.roven-futures-account-tabs::-webkit-scrollbar {
    display: none;
}


.roven-futures-account-tab {

    position: relative;

    min-height: 49px;

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: var(--secondary);

    font-size: 10px;
    font-weight: 500;

    white-space: nowrap;
}


.roven-futures-account-tab.is-active {

    color: var(--text);

    font-weight: 600;
}


.roven-futures-account-tab.is-active::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    background: var(--gold);
}


.roven-futures-account-tab__count {

    min-width: 17px;
    height: 17px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0
        4px;

    border-radius: 999px;

    background: var(--background-soft);

    color: var(--secondary);

    font-size: 8px;
}


/* ============================================================
   26. ACCOUNT TOOLBAR
   ============================================================ */

.roven-futures-account-toolbar {

    min-height: 46px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        7px
        16px;

    border-bottom:
        1px solid
        var(--border);
}


.roven-futures-hide-symbols {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--secondary);

    font-size: 9px;

    cursor: pointer;
}


.roven-futures-hide-symbols input {

    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}


.roven-futures-checkbox {

    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    display: grid;

    place-items: center;

    border:
        1px solid
        var(--border-dark);

    border-radius: 4px;

    background: #FFFFFF;
}


.roven-futures-hide-symbols
input:checked
+
.roven-futures-checkbox {

    border-color: var(--gold);

    background: var(--gold);
}


.roven-futures-hide-symbols
input:checked
+
.roven-futures-checkbox::after {

    content: "";

    width: 7px;
    height: 4px;

    border-left:
        1.5px solid
        var(--text);

    border-bottom:
        1.5px solid
        var(--text);

    transform:
        rotate(-45deg)
        translateY(-1px);
}


.roven-futures-close-all {

    min-height: 31px;

    padding:
        5px
        9px;

    border:
        1px solid
        var(--border) !important;

    border-radius: 6px;

    color: var(--text);

    font-size: 9px;
    font-weight: 600;
}


.roven-futures-close-all:disabled {

    color: var(--muted);

    opacity: 0.65;
}


/* ============================================================
   27. ACCOUNT PANEL
   ============================================================ */

.roven-futures-account-panel {

    min-height: 145px;

    padding:
        10px
        16px
        18px;
}


/* ============================================================
   28. LOADING / EMPTY
   ============================================================ */

.roven-futures-loading,
.roven-futures-state {

    min-height: 120px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 18px;

    text-align: center;
}


.roven-futures-loading {

    color: var(--muted);

    font-size: 9px;
}


.roven-futures-loading::before {

    content: "";

    width: 20px;
    height: 20px;

    margin-bottom: 9px;

    border:
        2px solid
        var(--border);

    border-top-color:
        var(--gold);

    border-radius: 50%;

    animation:
        rovenFuturesSpin
        700ms
        linear
        infinite;
}


.roven-futures-state strong {

    color: var(--text);

    font-size: 11px;
    font-weight: 600;
}


.roven-futures-state span {

    display: block;

    margin-top: 4px;

    color: var(--secondary);

    font-size: 9px;
}


.roven-futures-state button {

    min-height: 32px;

    margin-top: 9px;

    padding:
        5px
        10px;

    border:
        1px solid
        var(--border) !important;

    border-radius: 6px;

    font-size: 9px;
    font-weight: 600;
}


/* ============================================================
   29. POSITIONS
   ============================================================ */

.roven-futures-positions-list {

    border-top:
        1px solid
        var(--border);
}


.roven-futures-position-card {

    padding:
        11px
        0;

    border-bottom:
        1px solid
        var(--border);
}


.roven-futures-position-card__head {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 9px;
}


.roven-futures-position-card__symbol {

    font-size: 11px;
    font-weight: 600;
}


.roven-futures-position-card__side {

    font-size: 9px;
    font-weight: 600;
}


.roven-futures-position-card__side.is-long {
    color: var(--green);
}


.roven-futures-position-card__side.is-short {
    color: var(--red);
}


.roven-futures-position-card__grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;

    margin-top: 9px;
}


.roven-futures-position-card__grid span {

    display: block;

    color: var(--secondary);

    font-size: 8px;
}


.roven-futures-position-card__grid strong {

    display: block;

    margin-top: 2px;

    font-size: 9px;
    font-weight: 600;

    font-variant-numeric: tabular-nums;
}


/* ============================================================
   30. ORDERS
   ============================================================ */

.roven-futures-orders-mobile {

    border-top:
        1px solid
        var(--border);
}


.roven-futures-order-card {

    padding:
        11px
        0;

    border-bottom:
        1px solid
        var(--border);
}


.roven-futures-order-card__head {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 9px;
}


.roven-futures-order-card__symbol {

    font-size: 11px;
    font-weight: 600;
}


.roven-futures-order-card__side {

    font-size: 9px;
    font-weight: 600;
}


.roven-futures-order-card__side.is-buy {
    color: var(--green);
}


.roven-futures-order-card__side.is-sell {
    color: var(--red);
}


.roven-futures-order-card__grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;

    margin-top: 9px;
}


.roven-futures-order-card__grid span {

    display: block;

    color: var(--secondary);

    font-size: 8px;
}


.roven-futures-order-card__grid strong {

    display: block;

    margin-top: 2px;

    font-size: 9px;
    font-weight: 600;
}


.roven-futures-order-card__action {

    min-height: 30px;

    margin-top: 9px;

    padding:
        5px
        9px !important;

    border:
        1px solid
        var(--border) !important;

    border-radius: 6px;

    color: #B42318 !important;

    font-size: 8px;
    font-weight: 600;
}


/* ============================================================
   31. ORDERS TABLE
   ============================================================ */

.roven-futures-orders-table-wrap {

    width: 100%;

    overflow-x: auto;
}


.roven-futures-orders-table {

    width: 100%;

    min-width: 760px;

    border-collapse: collapse;
}


.roven-futures-orders-table th {

    padding:
        9px
        7px;

    border-bottom:
        1px solid
        var(--border);

    color: var(--secondary);

    font-size: 8px;
    font-weight: 500;

    text-align: right;
}


.roven-futures-orders-table th:first-child {
    text-align: left;
}


.roven-futures-orders-table td {

    padding:
        10px
        7px;

    border-bottom:
        1px solid
        var(--border);

    font-size: 9px;

    text-align: right;

    white-space: nowrap;

    font-variant-numeric: tabular-nums;
}


.roven-futures-orders-table td:first-child {
    text-align: left;
}


/* ============================================================
   32. CHART CONTROL
   ============================================================ */

.roven-futures-chart-control {

    width: 100%;

    border-bottom:
        1px solid
        var(--border);
}


.roven-futures-chart-row-button {

    width: 100%;

    min-height: 46px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        0
        16px;

    font-size: 10px;
    font-weight: 600;
}


.roven-futures-chart-row-button svg {

    width: 17px !important;
    height: 17px !important;
}


/* ============================================================
   33. CHART PANEL
   ============================================================ */

.roven-futures-chart-panel {

    width: 100%;

    border-bottom:
        1px solid
        var(--border);

    background: #FFFFFF;
}


.roven-futures-chart-panel__head {

    min-height: 53px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        9px
        16px;

    border-bottom:
        1px solid
        var(--border);
}


.roven-futures-chart-panel__symbol {

    display: block;

    font-size: 12px;
    font-weight: 600;
}


.roven-futures-chart-panel__type {

    display: block;

    margin-top: 1px;

    color: var(--secondary);

    font-size: 8px;
}


.roven-futures-chart-close {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    color: var(--secondary);
}


.roven-futures-chart-close svg {

    width: 18px !important;
    height: 18px !important;
}


/* ============================================================
   34. TIMEFRAMES
   ============================================================ */

.roven-futures-chart-timeframes {

    min-height: 40px;

    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        0
        16px;

    overflow-x: auto;

    border-bottom:
        1px solid
        var(--border);

    scrollbar-width: none;
}


.roven-futures-chart-timeframes::-webkit-scrollbar {
    display: none;
}


.roven-futures-timeframe {

    flex: 0 0 auto;

    min-height: 40px;

    color: var(--secondary);

    font-size: 9px;
}


.roven-futures-timeframe.is-active {

    color: #806400;

    font-weight: 600;
}


/* ============================================================
   35. CHART
   ============================================================ */

.roven-futures-chart-container {

    position: relative;

    width: 100%;

    min-height: 310px;

    overflow: hidden;

    background: #FFFFFF;
}


.roven-futures-chart-container canvas {

    width: 100% !important;
    height: 100% !important;
}


.roven-futures-chart-loading {

    position: absolute;

    inset: 0;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #FFFFFF;

    color: var(--muted);

    font-size: 9px;
}


/* ============================================================
   36. SHEETS
   ============================================================ */

.roven-futures-sheet {

    position: fixed;

    inset: 0;

    z-index: 1000;
}


.roven-futures-sheet__backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(
            24,
            26,
            32,
            0.38
        );
}


.roven-futures-sheet__content {

    position: absolute;

    left: 50%;
    bottom: 0;

    width:
        min(
            100%,
            520px
        );

    max-height:
        calc(
            90vh
            -
            var(--safe-top)
        );

    overflow-y: auto;

    transform:
        translateX(-50%);

    padding:
        16px
        17px
        calc(
            20px
            +
            var(--safe-bottom)
        );

    border-radius:
        17px
        17px
        0
        0;

    background: #FFFFFF;

    box-shadow:
        0
        -18px
        48px
        rgba(
            16,
            24,
            40,
            0.15
        );
}


.roven-futures-sheet__head {

    min-height: 46px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding-bottom: 9px;

    border-bottom:
        1px solid
        var(--border);
}


.roven-futures-sheet__head h2 {

    margin: 0;

    font-size: 15px;
    font-weight: 600;
}


.roven-futures-sheet__close {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    color: var(--secondary);

    font-size: 22px;
}


/* ============================================================
   37. SYMBOL SEARCH / LIST
   ============================================================ */

.roven-futures-symbol-search {

    margin-top: 12px;
}


.roven-futures-symbol-search input {

    width: 100%;

    min-height: 42px;

    padding:
        9px
        11px;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    outline: 0;

    background: var(--background-soft);

    font-size: 11px;
}


.roven-futures-symbol-search input:focus {

    border-color: var(--gold);

    background: #FFFFFF;
}


.roven-futures-symbol-list {
    margin-top: 10px;
}


.roven-futures-symbol-option {

    width: 100%;

    min-height: 53px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        8px
        0;

    border-bottom:
        1px solid
        var(--border) !important;

    text-align: left;
}


.roven-futures-symbol-option__symbol {

    display: block;

    font-size: 11px;
    font-weight: 600;
}


.roven-futures-symbol-option__name {

    display: block;

    margin-top: 2px;

    color: var(--secondary);

    font-size: 8px;
}


.roven-futures-symbol-option__price {

    font-size: 10px;
    font-weight: 500;

    font-variant-numeric: tabular-nums;
}


/* ============================================================
   38. SHEET OPTIONS
   ============================================================ */

.roven-futures-sheet-option {

    width: 100%;

    display: block;

    padding:
        13px
        0;

    border-bottom:
        1px solid
        var(--border) !important;

    text-align: left;
}


.roven-futures-sheet-option strong {

    display: block;

    font-size: 12px;
    font-weight: 600;
}


.roven-futures-sheet-option span {

    display: block;

    margin-top: 3px;

    color: var(--secondary);

    font-size: 9px;
}


.roven-futures-sheet-option.is-active strong {
    color: #806400;
}


/* ============================================================
   39. LEVERAGE
   ============================================================ */

.roven-futures-leverage-value {

    padding:
        20px
        0
        12px;

    text-align: center;
}


.roven-futures-leverage-value strong {

    font-size: 30px;
    font-weight: 600;
}


#futuresLeverageInput {

    width: 100%;

    min-height: 43px;

    padding:
        8px
        10px;

    border:
        1px solid
        var(--border-dark);

    border-radius: 8px;

    outline: 0;

    text-align: center;

    font-size: 12px;
}


#futuresLeverageInput:focus {
    border-color: var(--gold);
}


.roven-futures-leverage-presets {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 7px;

    margin-top: 11px;
}


.roven-futures-leverage-presets button {

    min-height: 37px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--border) !important;

    border-radius: 7px;

    background: var(--background-soft);

    font-size: 10px;
    font-weight: 600;
}


.roven-futures-leverage-presets button.is-active {

    border-color:
        var(--gold) !important;

    background: #FFF8DB;

    color: #806400;
}


.roven-futures-sheet-primary {

    width: 100%;

    min-height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 15px;

    padding: 8px !important;

    border-radius: 8px;

    background:
        var(--gold) !important;

    color:
        var(--text) !important;

    font-size: 11px;
    font-weight: 600;
}


/* ============================================================
   40. MENU LINKS
   ============================================================ */

.roven-futures-menu-link {

    min-height: 48px;

    display: flex;

    align-items: center;

    border-bottom:
        1px solid
        var(--border);

    font-size: 11px;
    font-weight: 500;
}


/* ============================================================
   41. DIALOG
   ============================================================ */

.roven-futures-dialog {

    position: fixed;

    inset: 0;

    z-index: 1100;
}


.roven-futures-dialog__backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(
            24,
            26,
            32,
            0.40
        );
}


.roven-futures-dialog__content {

    position: absolute;

    top: 50%;
    left: 50%;

    width:
        min(
            390px,
            calc(100% - 32px)
        );

    transform:
        translate(
            -50%,
            -50%
        );

    padding: 20px;

    border:
        1px solid
        var(--border);

    border-radius: 14px;

    background: #FFFFFF;

    box-shadow:
        0
        18px
        50px
        rgba(
            16,
            24,
            40,
            0.16
        );
}


.roven-futures-dialog__content h2 {

    margin: 0;

    font-size: 16px;
    font-weight: 600;
}


.roven-futures-dialog__content p {

    margin:
        8px
        0
        0;

    color: var(--secondary);

    font-size: 10px;
}


.roven-futures-dialog__actions {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;

    margin-top: 17px;
}


.roven-futures-dialog__cancel,
.roven-futures-dialog__confirm {

    min-height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 7px;

    font-size: 10px;
    font-weight: 600;
}


.roven-futures-dialog__cancel {

    border:
        1px solid
        var(--border) !important;

    background:
        var(--background-soft);
}


.roven-futures-dialog__confirm {

    background:
        var(--red) !important;

    color:
        #FFFFFF !important;
}


/* ============================================================
   42. POSITIVE / NEGATIVE
   ============================================================ */

.roven-futures-page .is-positive {
    color: var(--green) !important;
}


.roven-futures-page .is-negative {
    color: var(--red) !important;
}


/* ============================================================
   43. BOTTOM NAV
   ============================================================ */

.roven-futures-page
.roven-bottom-nav {

    position: fixed;

    left: 50%;
    bottom: 0;

    z-index: 500;

    width:
        min(
            100%,
            var(--content-width)
        );

    min-height:
        calc(
            var(--bottom-nav-height)
            +
            var(--safe-bottom)
        );

    transform:
        translateX(-50%);

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    padding:
        6px
        5px
        max(
            6px,
            var(--safe-bottom)
        );

    border-top:
        1px solid
        var(--border);

    background:
        rgba(
            255,
            255,
            255,
            0.985
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


.roven-futures-page
.roven-bottom-nav__item {

    position: relative;

    min-width: 0;
    min-height: 55px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 4px;

    padding:
        4px
        2px;

    border-radius: 9px;

    color: #737A86;

    font-size: 9px;
    font-weight: 500;
}


.roven-futures-page
.roven-bottom-nav__item.is-active {
    color: var(--text);
}


.roven-futures-page
.roven-bottom-nav__item.is-active::before {

    content: "";

    position: absolute;

    top: 2px;
    left: 50%;

    width: 18px;
    height: 2px;

    transform:
        translateX(-50%);

    border-radius: 999px;

    background: var(--gold);
}


.roven-futures-page
.roven-bottom-nav__icon {

    width: 25px;
    height: 25px;

    display: grid;

    place-items: center;
}


.roven-futures-page
.roven-bottom-nav__icon svg {

    width: 21px !important;
    height: 21px !important;
}


.roven-futures-page
.roven-bottom-nav__label {

    max-width: 100%;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* ============================================================
   44. SMALL MOBILE
   ============================================================ */

@media (
    max-width: 359px
) {

    .roven-futures-header__inner,
    .roven-futures-mode-bar__inner {

        width:
            calc(
                100% - 24px
            );
    }


    .roven-futures-symbol-section {

        padding-left: 12px;
        padding-right: 12px;
    }


    .roven-futures-trading-workspace {

        grid-template-columns:
            minmax(0, 1fr)
            123px;
    }


    .roven-futures-order-panel {

        padding:
            10px
            8px
            14px;
    }


    .roven-futures-market-panel {

        padding:
            10px
            6px
            14px;
    }


    .roven-futures-control {

        padding:
            5px
            3px;

        font-size: 9px;
    }


    .roven-futures-order-type {

        gap: 12px;
    }


    .roven-futures-input {

        padding-right: 40px;
    }


    .roven-futures-order-button {

        min-height: 42px;

        font-size: 10px;
    }


    .roven-futures-orderbook-row {
        font-size: 7px;
    }


    .roven-futures-market-price__last {
        font-size: 13px;
    }

}


/* ============================================================
   45. MOBILE TABLE BEHAVIOUR
   ============================================================ */

@media (
    max-width: 959px
) {

    .roven-futures-orders-table-wrap {
        display: none !important;
    }


    .roven-futures-orders-mobile:not([hidden]) {
        display: block !important;
    }

}


/* ============================================================
   46. TABLET
   ============================================================ */

@media (
    min-width: 640px
) {

    .roven-futures-header__inner,
    .roven-futures-mode-bar__inner {

        width:
            min(
                var(--content-width),
                calc(100% - 52px)
            );
    }


    .roven-futures-symbol-section {

        padding:
            13px
            24px;
    }


    .roven-futures-trading-workspace {

        grid-template-columns:
            minmax(0, 1fr)
            300px;
    }


    .roven-futures-order-panel {

        padding:
            18px
            19px
            21px;
    }


    .roven-futures-market-panel {

        padding:
            18px
            17px
            21px;
    }


    .roven-futures-order-button {

        min-height: 44px;

        font-size: 11px;
    }


    .roven-futures-position-card__grid,
    .roven-futures-order-card__grid {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }


    .roven-futures-chart-container {
        min-height: 380px;
    }

}


/* ============================================================
   47. DESKTOP
   ============================================================ */

@media (
    min-width: 960px
) {

    .roven-futures-orders-mobile {
        display: none !important;
    }


    .roven-futures-orders-table-wrap:not([hidden]) {
        display: block !important;
    }


    .roven-futures-header__inner,
    .roven-futures-mode-bar__inner,
    .roven-futures-container {

        width:
            min(
                var(--content-width),
                calc(100% - 80px)
            );
    }


    .roven-futures-symbol-section {

        padding:
            14px
            0;
    }


    .roven-futures-trading-workspace {

        grid-template-columns:
            minmax(0, 1fr)
            360px;
    }


    .roven-futures-order-panel {

        padding:
            22px
            28px
            26px;
    }


    .roven-futures-market-panel {

        padding:
            22px
            24px
            26px;
    }


    .roven-futures-account-tabs,
    .roven-futures-account-toolbar,
    .roven-futures-account-panel,
    .roven-futures-chart-row-button,
    .roven-futures-chart-panel__head,
    .roven-futures-chart-timeframes {

        padding-left: 0;
        padding-right: 0;
    }


    .roven-futures-chart-container {
        min-height: 450px;
    }

}


/* ============================================================
   48. ANIMATIONS
   ============================================================ */

@keyframes rovenFuturesSpin {

    to {
        transform: rotate(360deg);
    }

}


/* ============================================================
   49. REDUCED MOTION
   ============================================================ */

@media (
    prefers-reduced-motion: reduce
) {

    .roven-futures-page *,
    .roven-futures-page *::before,
    .roven-futures-page *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}