.dt-terminal {
    --bg: #050910;
    --sidebar: #080d14;
    --panel: #0a111a;
    --panel2: #0d1520;
    --border: #1b2736;
    --border2: #233247;
    --text: #f2f5fa;
    --muted: #6e7e94;
    --blue: #4d79ff;
    --green: #18dba1;
    --red: #ff526c;

    margin: 0;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
}


.dt-shell {
    height: 100vh;

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


.dt-sidebar {
    height: 100vh;

    padding: 20px 15px;

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

    background:
        linear-gradient(
            180deg,
            #090f17,
            #070b11
        );

    display: flex;
    flex-direction: column;
}


.dt-brand {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 2px 6px 22px;
}


.dt-logo {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #4572ff,
            #3ccfff
        );

    font-weight: 800;
}


.dt-brand strong,
.dt-brand span {
    display: block;
}


.dt-brand strong {
    font-size: 17px;
}


.dt-brand span {
    margin-top: 2px;

    color: #506177;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.dt-account-card {
    margin-top: 8px;

    padding: 15px;

    border: 1px solid #1d2a3a;
    border-radius: 10px;

    background: #0c141e;
}


.dt-account-label {
    color: #738299;

    font-size: 9px;

    letter-spacing: 1px;
}


.online-dot {
    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 5px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 9px rgba(24,219,161,.8);
}


.dt-account-card > strong {
    display: block;

    margin-top: 8px;

    font-size: 22px;
}


.dt-account-card small {
    display: block;

    margin-top: 4px;

    color: #56677c;

    font-size: 10px;
}


.dt-menu {
    margin-top: 25px;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.dt-menu a {
    padding: 11px 12px;

    display: flex;
    align-items: center;
    gap: 10px;

    border-radius: 7px;

    color: #75859a;

    font-size: 13px;
}


.dt-menu a:hover {
    color: white;

    background: #0e1722;
}


.dt-menu a.active {
    color: white;

    background: #121c29;

    box-shadow:
        inset 2px 0 #4c78ff;
}


.dt-sidebar-user {
    margin-top: auto;
}


.dt-user {
    padding: 13px 5px;

    display: flex;
    align-items: center;
    gap: 10px;
}


.dt-user strong,
.dt-user span {
    display: block;
}


.dt-user span {
    margin-top: 3px;

    color: #5c6d82;

    font-size: 10px;
}


.dt-user i {
    width: 5px;
    height: 5px;
}


.dt-sidebar-user button {
    width: 100%;

    padding: 9px;

    border: 1px solid #1c2939;
    border-radius: 7px;

    background: #0a1119;

    color: #75859a;

    cursor: pointer;
}


.dt-main {
    height: 100vh;

    min-width: 0;

    overflow-y: auto;

    background: #060a10;
}


.dt-topbar {
    min-height: 73px;

    padding: 0 22px;

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

    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        auto
        auto
        auto;

    gap: 28px;

    align-items: center;
}


.dt-symbol {
    display: flex;
    align-items: center;
    gap: 10px;
}


.btc-round {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #f59e0b;

    color: white;

    font-size: 19px;
}


.dt-symbol span,
.dt-symbol strong {
    display: block;
}


.dt-symbol span {
    color: #66768b;

    font-size: 9px;
}


.dt-symbol strong {
    margin-top: 2px;

    font-size: 14px;
}


.symbol-arrow {
    margin-left: 5px;

    border: 0;

    background: transparent;

    color: #687990;

    cursor: pointer;
}


.dt-market-status {
    color: #687990;

    font-size: 9px;

    letter-spacing: 1px;
}


.dt-live-price {
    text-align: right;
}


.dt-live-price span,
.dt-live-price strong,
.dt-live-price small {
    display: block;
}


.dt-live-price span {
    color: #596a80;

    font-size: 8px;
}


.dt-live-price strong {
    margin-top: 2px;

    font-size: 16px;
}


.dt-live-price small {
    margin-top: 1px;

    color: var(--green);

    font-weight: 700;
}


.dt-balance {
    padding-left: 25px;

    border-left: 1px solid #202d3d;

    text-align: right;
}


.dt-balance span,
.dt-balance strong {
    display: block;
}


.dt-balance span {
    color: #58697f;

    font-size: 8px;
}


.dt-balance strong {
    margin-top: 3px;

    font-size: 19px;
}


.dt-stats {
    min-height: 58px;

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

    display: grid;

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


.dt-stats div {
    padding: 11px 20px;

    border-right: 1px solid #172230;
}


.dt-stats div:last-child {
    border-right: 0;
}


.dt-stats span,
.dt-stats strong {
    display: block;
}


.dt-stats span {
    color: #526378;

    font-size: 8px;

    letter-spacing: .8px;
}


.dt-stats strong {
    margin-top: 4px;

    font-size: 12px;
}


.dt-workspace {
    min-height: 610px;

    display: grid;

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

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


.dt-chart-area {
    min-width: 0;

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


.dt-chart-head {
    min-height: 51px;

    padding: 0 17px;

    border-bottom: 1px solid #172230;

    display: grid;

    grid-template-columns:
        1fr
        auto
        auto;

    gap: 20px;

    align-items: center;
}


.dt-chart-head > div:first-child strong,
.dt-chart-head > div:first-child span {
    display: block;
}


.section-label {
    color: #52647a;

    font-size: 7px;

    letter-spacing: 1.2px;
}


.dt-chart-head > div:first-child strong {
    margin-top: 2px;

    font-size: 12px;
}


.timeframes {
    display: flex;
    gap: 4px;
}


.timeframes button {
    border: 0;
    border-radius: 5px;

    padding: 6px 9px;

    background: transparent;

    color: #627287;

    font-size: 11px;

    cursor: pointer;
}


.timeframes button:hover {
    color: white;

    background: #121b27;
}


.timeframes button.active {
    color: white;

    background: #172231;
}


.chart-live {
    color: #65758a;

    font-size: 8px;

    letter-spacing: .7px;
}


#chart {
    width: 100%;
    height: 500px;

    background: #070c12;
}


.chart-footer {
    min-height: 57px;

    padding: 0 18px;

    border-top: 1px solid #172230;

    display: flex;

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


.chart-footer div:last-child {
    text-align: right;
}


.chart-footer span,
.chart-footer strong {
    display: block;
}


.chart-footer span {
    color: #506177;

    font-size: 7px;

    letter-spacing: 1px;
}


.chart-footer strong {
    margin-top: 3px;

    font-size: 11px;
}


.dt-order-panel {
    padding: 20px;

    background:
        linear-gradient(
            180deg,
            #0b121b,
            #080e15
        );
}


.order-header {
    display: flex;

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

    margin-bottom: 25px;
}


.order-header span:first-child {
    color: #596b81;

    font-size: 8px;

    letter-spacing: 1px;
}


.order-header h2 {
    margin: 4px 0 0;

    font-size: 20px;
}


.order-live {
    color: #66778c;

    font-size: 8px;
}


.order-section {
    margin-bottom: 20px;
}


.order-section label,
.direction-label {
    display: block;

    margin-bottom: 8px;

    color: #586a80;

    font-size: 8px;

    letter-spacing: 1px;
}


.amount-input {
    min-height: 46px;

    padding: 0 12px;

    border: 1px solid #263449;
    border-radius: 8px;

    background: #070c12;

    display: flex;
    align-items: center;
}


.amount-input > span {
    color: #8794a6;

    font-size: 15px;
}


.amount-input input {
    min-width: 0;

    flex: 1;

    padding: 0 10px;

    border: 0;

    background: transparent;

    color: white;

    outline: none;

    font-size: 15px;
}


.amount-input small {
    color: #58687d;

    font-size: 9px;
}


.quick-amounts {
    margin-top: 7px;

    display: grid;

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

    gap: 5px;
}


.quick-amounts button {
    padding: 7px 2px;

    border: 1px solid #202d3e;
    border-radius: 5px;

    background: #101722;

    color: #728198;

    font-size: 10px;

    cursor: pointer;
}


.quick-amounts button:hover {
    border-color: #36517a;

    color: white;
}


.order-section select {
    width: 100%;

    padding: 12px;

    border: 1px solid #263449;
    border-radius: 8px;

    background: #070c12;

    color: white;

    outline: none;
}


.payout-card {
    margin: 21px 0;

    padding: 14px;

    border: 1px solid #1a2839;
    border-radius: 9px;

    background: #070c12;
}


.payout-card div {
    display: flex;

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

    margin: 5px 0;
}


.payout-card span {
    color: #596b81;

    font-size: 9px;
}


.payout-card strong {
    color: var(--green);

    font-size: 13px;
}


.trade-direction {
    width: 100%;

    margin-top: 8px;

    padding: 13px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    gap: 12px;

    text-align: left;

    cursor: pointer;

    transition:
        transform .15s ease,
        filter .15s ease;
}


.trade-direction:hover {
    transform: translateY(-1px);

    filter: brightness(1.08);
}


.trade-direction strong,
.trade-direction small {
    display: block;
}


.trade-direction small {
    margin-top: 2px;

    opacity: .62;

    font-size: 9px;
}


.trade-icon {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    font-size: 18px;
}


.trade-direction.higher {
    border: 1px solid rgba(24,219,161,.25);

    background: rgba(24,219,161,.11);

    color: var(--green);
}


.trade-direction.higher .trade-icon {
    background: rgba(24,219,161,.13);
}


.trade-direction.lower {
    border: 1px solid rgba(255,82,108,.25);

    background: rgba(255,82,108,.11);

    color: var(--red);
}


.trade-direction.lower .trade-icon {
    background: rgba(255,82,108,.13);
}


.order-note {
    margin-top: 18px;

    padding-top: 15px;

    border-top: 1px solid #1a2635;

    display: flex;

    justify-content: space-between;
}


.order-note span {
    color: #55677d;

    font-size: 8px;
}


.order-note strong {
    font-size: 10px;
}


.dt-trades {
    min-height: 175px;
}


.trade-tabs {
    height: 43px;

    padding: 0 18px;

    border-bottom: 1px solid #172230;

    display: flex;

    align-items: center;

    gap: 25px;
}


.trade-tabs button {
    height: 100%;

    border: 0;
    border-bottom: 2px solid transparent;

    background: transparent;

    color: #65758a;

    font-size: 11px;

    cursor: pointer;
}


.trade-tabs button.active {
    border-bottom-color: #4c79ff;

    color: white;
}


.trade-table-head {
    min-height: 34px;

    padding: 0 20px;

    border-bottom: 1px solid #131e2b;

    display: grid;

    grid-template-columns:
        1.3fr
        1fr
        1fr
        1.2fr
        1fr
        1fr;

    align-items: center;

    color: #4f6074;

    font-size: 7px;

    letter-spacing: .8px;
}


.empty-trades {
    padding: 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    color: #586a80;
}


.empty-icon {
    width: 35px;
    height: 35px;

    margin-bottom: 8px;

    display: grid;
    place-items: center;

    border: 1px solid #1e2c3e;
    border-radius: 50%;

    color: #50677f;
}


.empty-trades strong {
    color: #8e9bad;

    font-size: 11px;
}


.empty-trades span {
    margin-top: 4px;

    font-size: 9px;
}


@media (max-width: 1050px) {

    .dt-shell {
        grid-template-columns: 78px minmax(0, 1fr);
    }


    .dt-brand > div:last-child,
    .dt-account-card,
    .dt-menu a {
        font-size: 0;
    }


    .dt-menu a {
        justify-content: center;
    }


    .dt-menu a span {
        font-size: 17px;
    }


    .dt-user > div:last-child,
    .dt-sidebar-user button {
        display: none;
    }


    .dt-user {
        justify-content: center;
    }

}


@media (max-width: 820px) {

    .dt-terminal {
        overflow: auto;
    }


    .dt-shell {
        height: auto;

        grid-template-columns: 1fr;
    }


    .dt-sidebar {
        display: none;
    }


    .dt-main {
        height: auto;
    }


    .dt-topbar {
        grid-template-columns: 1fr auto;
    }


    .dt-market-status,
    .dt-live-price {
        display: none;
    }


    .dt-stats {
        overflow-x: auto;

        grid-template-columns:
            repeat(5, 145px);
    }


    .dt-workspace {
        grid-template-columns: 1fr;
    }


    .dt-chart-area {
        border-right: 0;
    }


    .dt-order-panel {
        border-top: 1px solid var(--border);
    }


    .trade-table-head {
        display: none;
    }

}

/* ===== TERMINAL V2 DESKTOP POLISH ===== */

@media (min-width: 821px) {

    .dt-main {
        overflow-y: auto;
    }

    .dt-workspace {
        min-height: 540px;
    }

    #chart {
        height: 430px;
    }

    .dt-chart-area {
        min-height: 540px;
    }

    .dt-trades {
        min-height: 135px;
    }

    .empty-trades {
        padding: 18px;
    }

    .dt-sidebar {
        min-height: 100vh;
    }

    .dt-sidebar-user {
        margin-top: auto;
        padding-top: 24px;
    }

    .dt-order-panel {
        padding: 18px;
    }

    .order-header {
        margin-bottom: 18px;
    }

    .order-section {
        margin-bottom: 16px;
    }

    .payout-card {
        margin: 16px 0;
    }
}


/* MULTI-ASSET SELECTOR */

.dt-asset-selector {
    margin-left: 12px;
    padding: 7px 28px 7px 9px;

    border: 1px solid #233247;
    border-radius: 7px;

    background: #0a1119;
    color: #dce5ef;

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

    outline: none;
    cursor: pointer;
}

.dt-asset-selector:hover,
.dt-asset-selector:focus {
    border-color: #3e5b7c;
}

@media (max-width: 700px) {
    .dt-asset-selector {
        margin-left: 5px;
        max-width: 115px;
    }
}


/* ============================================================
   TOP ASSET DROPDOWN
============================================================ */

.dt-symbol {
    position: relative;
}

.dt-asset-menu {
    position: absolute;

    top: calc(100% + 12px);
    left: 0;

    width: 235px;

    display: none;

    padding: 7px;

    border: 1px solid #233247;
    border-radius: 10px;

    background: #0a1119;

    box-shadow:
        0 18px 45px rgba(0,0,0,.45);

    z-index: 500;
}

.dt-asset-menu.open {
    display: block;
}

.dt-asset-menu button {
    width: 100%;

    display: grid;

    grid-template-columns:
        32px
        1fr;

    grid-template-rows:
        auto auto;

    gap: 1px 10px;

    align-items: center;

    padding: 10px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: white;

    text-align: left;

    cursor: pointer;
}

.dt-asset-menu button:hover {
    background: #121d2a;
}

.dt-asset-menu b {
    grid-row: 1 / 3;

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #162536;

    font-size: 15px;
}

.dt-asset-menu span {
    color: #718298;

    font-size: 9px;
}

.dt-asset-menu strong {
    font-size: 11px;
}

.symbol-arrow {
    cursor: pointer;
}


/* USER SIDEBAR LOGOUT */

.dt-logout-link {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 13px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #74849a;

    font: inherit;
    font-size: 12px;

    text-align: left;
    cursor: pointer;
}

.dt-logout-link:hover {
    color: #ff526c;
    background: rgba(255,82,108,.07);
}