/*
 * MetaGenius trading terminal
 *
 * One visual language for the spot, futures and binary terminals, matching the
 * graphite and amber Genesis interface. Scoped to [data-mg-terminal] so nothing
 * here can reach the marketing pages or the rest of the dashboard.
 *
 * Layout follows the convention every serious exchange settled on: dense panels
 * sharing hairline borders rather than floating cards, micro-label headers,
 * tabular numerals so digits do not jump as prices tick, and green/red reserved
 * strictly for direction so the amber brand accent never competes with it.
 */

[data-mg-terminal] {
    --t-bg: #09090b;
    --t-surface: #0e0e11;
    --t-surface-2: #141418;
    --t-surface-3: #1b1b20;
    --t-line: rgba(255, 255, 255, .07);
    --t-line-2: rgba(255, 255, 255, .13);
    --t-text: #ededf0;
    --t-text-2: #9d9da7;
    --t-text-3: #6b6b76;
    --t-accent: #e8913a;
    --t-accent-ink: #12100d;
    --t-accent-soft: rgba(232, 145, 58, .13);
    --t-accent-line: rgba(232, 145, 58, .34);
    --t-up: #21b380;
    --t-up-soft: rgba(33, 179, 128, .13);
    --t-down: #e2544c;
    --t-down-soft: rgba(226, 84, 76, .13);
    --t-r: 10px;
    --t-r-sm: 7px;
    --t-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /*
     * The site already has a --mg-* theme with a light and a dark variant, and
     * these pages were resolving the light one. Pointing those variables at the
     * dark values here flips every existing rule that reads them in one move,
     * which is what the tables, panels and inputs are built on. Chasing each
     * selector instead would mean an !important arms race that the next theme
     * tweak would quietly undo.
     */
    --mg-bg: #09090b;
    --mg-card: #0e0e11;
    --mg-card-2: #16161a;
    --mg-fg: #ededf0;
    --mg-fg-2: #9d9da7;
    --mg-fg-3: #6b6b76;
    --mg-border: rgba(255, 255, 255, .07);
    --mg-border-strong: rgba(255, 255, 255, .14);
    --mg-accent: #e8913a;
    --mg-accent-2: #f0a75c;
    --mg-header: rgba(9, 9, 11, .85);
    --mg-shadow: none;
    --panel-bg: var(--mg-card);
    --body-background: var(--mg-bg);

    /*
     * The table rules reach for these two rather than the --mg-* set, and they
     * are HSL triplets rather than colours, so they have to be given in the same
     * form. Without them the header row and body keep the light fill even though
     * everything around them has gone dark.
     */
    --section-bg: 240 6% 7%;
    --section-bg-two: 240 6% 9%;
    --white: 240 6% 6%;
    --body-color: var(--t-text);

    /*
     * The brand seed is a blue (color.php?color=0052ff) and the binary sheet
     * reaches for it by name, which is where the leftover blue in the tabs,
     * borders and spinners came from. Amber is the Genesis accent, so point
     * every alias at it instead of hunting them one selector at a time.
     */
    --accent-blue: #e8913a;
    --accent-blue-dark: #d17f2c;
    --base: 30 80% 57%;
    --base-two: 33 85% 64%;
    --primary: 30 80% 57%;

    background: var(--t-bg);
    color: var(--t-text);
}

/*
 * Light mode.
 *
 * Forcing dark everywhere left a black terminal sitting inside a white page,
 * which is worse than either theme on its own. Because every rule below reads
 * these variables, restating the palette here flips all three terminals with
 * nothing else to change. The direction colours are darkened rather than
 * reused: the green and red that read well on near-black are too bright to
 * hold their meaning against white.
 */
html[data-theme="light"] [data-mg-terminal] {
    --t-bg: #f6f7f9;
    --t-surface: #ffffff;
    --t-surface-2: #f2f3f5;
    --t-surface-3: #e8eaed;
    --t-line: rgba(16, 18, 24, .10);
    --t-line-2: rgba(16, 18, 24, .18);
    --t-text: #16181d;
    --t-text-2: #5b6068;
    --t-text-3: #555b64;
    --t-accent: #b96a12;
    --t-accent-ink: #ffffff;
    --t-accent-soft: rgba(185, 106, 18, .10);
    --t-accent-line: rgba(185, 106, 18, .30);
    --t-up: #0a8f60;
    --t-up-soft: rgba(10, 143, 96, .11);
    --t-down: #cc352c;
    --t-down-soft: rgba(204, 53, 44, .11);

    --mg-bg: #f6f7f9;
    --mg-card: #ffffff;
    --mg-card-2: #f2f3f5;
    --mg-fg: #16181d;
    --mg-fg-2: #5b6068;
    --mg-fg-3: #858b95;
    --mg-border: rgba(16, 18, 24, .10);
    --mg-border-strong: rgba(16, 18, 24, .18);
    --mg-accent: #b96a12;
    --mg-accent-2: #d07f22;
    --mg-header: rgba(255, 255, 255, .85);

    --section-bg: 220 14% 97%;
    --section-bg-two: 220 14% 94%;
    --white: 0 0% 100%;
    --accent-blue: #b96a12;
    --accent-blue-dark: #9c5a0f;
}

/* The spot terminal shipped a light body behind a dark chart. */
[data-mg-terminal].bg-color,
[data-mg-terminal] .bg-color {
    background: var(--t-bg) !important;
}

[data-mg-terminal] .container,
[data-mg-terminal] .custom--container {
    max-width: 1800px;
}

[data-mg-terminal].py-60 {
    padding-top: 14px !important;
    padding-bottom: 40px !important;
}

/* ---------------------------------------------------------------- numerals */

[data-mg-terminal] .amount,
[data-mg-terminal] .price,
[data-mg-terminal] .total,
[data-mg-terminal] .value,
[data-mg-terminal] td,
[data-mg-terminal] input[type="number"],
[data-mg-terminal] .form--control,
[data-mg-terminal] .trade-price,
[data-mg-terminal] .trade-amount,
[data-mg-terminal] .buy-sell__price-btc,
[data-mg-terminal] .mg-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ----------------------------------------------------------------- panels */

[data-mg-terminal] .card,
[data-mg-terminal] .glass-card,
[data-mg-terminal] .custom--card,
[data-mg-terminal] .mg-panel {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-r) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: var(--t-text);
}

[data-mg-terminal] .card-header,
[data-mg-terminal] .mg-panel__head {
    background: transparent !important;
    border-bottom: 1px solid var(--t-line) !important;
    padding: 10px 14px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

[data-mg-terminal] .card-header h4,
[data-mg-terminal] .card-header h5,
[data-mg-terminal] .card-header h6,
[data-mg-terminal] .mg-panel__title {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-text-3);
}

[data-mg-terminal] .card-body {
    padding: 12px 14px !important;
}

/* Section headings that were rendering near-invisible on the dark surface. */
[data-mg-terminal] h1,
[data-mg-terminal] h2,
[data-mg-terminal] h3,
[data-mg-terminal] h4,
[data-mg-terminal] h5,
[data-mg-terminal] h6 {
    color: var(--t-text);
}

[data-mg-terminal] .text--secondary,
[data-mg-terminal] .text-muted,
[data-mg-terminal] small {
    color: var(--t-text-2) !important;
}

/* ------------------------------------------------------------ market head */

[data-mg-terminal] .mg-ticker {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--t-surface);
    border: 1px solid var(--t-line);
    border-radius: var(--t-r);
}

[data-mg-terminal] .mg-ticker__pair {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
}

[data-mg-terminal] .mg-ticker__last {
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

[data-mg-terminal] .mg-ticker__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 84px;
}

[data-mg-terminal] .mg-ticker__stat dt,
[data-mg-terminal] .mg-ticker__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--t-text-3);
}

[data-mg-terminal] .mg-ticker__stat dd,
[data-mg-terminal] .mg-ticker__value {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--t-text);
}

/* ----------------------------------------------------------------- tables */

[data-mg-terminal] table {
    color: var(--t-text);
    margin: 0;
    width: 100%;
}

/*
 * The header row is claimed by `.table.table-two thead tr th`, so these have to
 * carry at least as much weight to land. Redefining the variables above covers
 * the same ground, but only while those rules keep reading them.
 */
[data-mg-terminal] .table thead th,
[data-mg-terminal] .table thead tr th,
[data-mg-terminal] .table.table-two thead tr th,
[data-mg-terminal] .table tbody,
[data-mg-terminal] .table.table-two tbody {
    background: var(--t-surface) !important;
    background-color: var(--t-surface) !important;
    color: var(--t-text-3) !important;
}

[data-mg-terminal] .table tbody,
[data-mg-terminal] .table.table-two tbody {
    color: var(--t-text) !important;
}

[data-mg-terminal] table th {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--t-line) !important;
    padding: 8px 12px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--t-text-3) !important;
    white-space: nowrap;
}

[data-mg-terminal] table td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--t-line) !important;
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    color: var(--t-text) !important;
    vertical-align: middle;
}

[data-mg-terminal] table tbody tr:last-child td {
    border-bottom: 0 !important;
}

[data-mg-terminal] table tbody tr {
    transition: background .12s ease;
}

[data-mg-terminal] table tbody tr:hover td {
    background: var(--t-surface-2) !important;
}

[data-mg-terminal] .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--t-line-2) transparent;
}

[data-mg-terminal] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-mg-terminal] ::-webkit-scrollbar-thumb {
    background: var(--t-line-2);
    border-radius: 4px;
}

[data-mg-terminal] ::-webkit-scrollbar-track {
    background: transparent;
}

/* ------------------------------------------------------------- order book */

[data-mg-terminal] .mg-book__head {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 8px 14px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--t-text-3);
    border-bottom: 1px solid var(--t-line);
}

[data-mg-terminal] .mg-book__head span:nth-child(2),
[data-mg-terminal] .mg-book__head span:nth-child(3) {
    text-align: right;
}

[data-mg-terminal] .mg-book__row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 3.5px 14px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

[data-mg-terminal] .mg-book__row > span:nth-child(2),
[data-mg-terminal] .mg-book__row > span:nth-child(3) {
    text-align: right;
    position: relative;
}

/* Depth is drawn behind the row so the numbers stay legible. */
[data-mg-terminal] .mg-book__depth {
    position: absolute;
    inset: 0 0 0 auto;
    pointer-events: none;
    opacity: .16;
}

[data-mg-terminal] .mg-book__row--ask .mg-book__depth { background: var(--t-down); }
[data-mg-terminal] .mg-book__row--bid .mg-book__depth { background: var(--t-up); }
[data-mg-terminal] .mg-book__row--ask > span:first-child { color: var(--t-down); }
[data-mg-terminal] .mg-book__row--bid > span:first-child { color: var(--t-up); }
[data-mg-terminal] .mg-book__row:hover { background: var(--t-surface-2); }

[data-mg-terminal] .mg-book__mid {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 14px;
    border-top: 1px solid var(--t-line);
    border-bottom: 1px solid var(--t-line);
    background: var(--t-surface-2);
}

[data-mg-terminal] .mg-book__mid strong {
    font-size: 16px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

[data-mg-terminal] .mg-book__mid span {
    font-size: 11.5px;
    color: var(--t-text-3);
}

/* --------------------------------------------------------------- controls */

[data-mg-terminal] .form--control,
[data-mg-terminal] .form-control,
[data-mg-terminal] .form-select,
[data-mg-terminal] select,
[data-mg-terminal] textarea,
[data-mg-terminal] input[type="text"],
[data-mg-terminal] input[type="number"] {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-r-sm) !important;
    color: var(--t-text) !important;
    font-size: 13px !important;
    height: 40px;
    box-shadow: none !important;
    transition: border-color .14s ease, background .14s ease;
}

[data-mg-terminal] textarea {
    height: auto;
}

[data-mg-terminal] .form--control:focus,
[data-mg-terminal] .form-control:focus,
[data-mg-terminal] select:focus,
[data-mg-terminal] input:focus {
    background: var(--t-surface-3) !important;
    border-color: var(--t-accent-line) !important;
    outline: none;
}

[data-mg-terminal] .form--control::placeholder,
[data-mg-terminal] .form-control::placeholder,
[data-mg-terminal] input::placeholder {
    color: var(--t-text-3) !important;
    opacity: 1;
}

[data-mg-terminal] .input--group {
    display: flex;
    align-items: center;
    background: var(--t-surface-2);
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-sm);
    overflow: hidden;
    transition: border-color .14s ease;
}

[data-mg-terminal] .input--group:focus-within {
    border-color: var(--t-accent-line);
}

[data-mg-terminal] .input--group .form--control,
[data-mg-terminal] .input--group .form-control,
[data-mg-terminal] .input--group input {
    border: 0 !important;
    background: transparent !important;
    flex: 1;
    min-width: 0;
}

[data-mg-terminal] .input--group .input-group-text,
[data-mg-terminal] .input--group > span:last-child {
    background: transparent;
    border: 0;
    padding: 0 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--t-text-3);
    white-space: nowrap;
}

/* Number spinners add clutter and let a stray scroll change an order size. */
[data-mg-terminal] input[type="number"]::-webkit-outer-spin-button,
[data-mg-terminal] input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[data-mg-terminal] input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

[data-mg-terminal] label,
[data-mg-terminal] .form-label,
[data-mg-terminal] .buy-sell__price-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--t-text-3);
}

/* ------------------------------------------------------------------- tabs */

[data-mg-terminal] .custom--tab,
[data-mg-terminal] .nav-tabs {
    border: 0 !important;
    gap: 2px;
    padding: 3px;
    background: var(--t-surface-2);
    border-radius: var(--t-r-sm);
    display: inline-flex;
}

[data-mg-terminal] .custom--tab .nav-link,
[data-mg-terminal] .nav-tabs .nav-link {
    border: 0 !important;
    border-radius: 5px !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600;
    color: var(--t-text-2) !important;
    background: transparent !important;
    transition: color .14s ease, background .14s ease;
}

[data-mg-terminal] .custom--tab .nav-link:hover,
[data-mg-terminal] .nav-tabs .nav-link:hover {
    color: var(--t-text) !important;
}

[data-mg-terminal] .custom--tab .nav-link.active,
[data-mg-terminal] .nav-tabs .nav-link.active {
    color: var(--t-text) !important;
    background: var(--t-surface-3) !important;
}

/* ---------------------------------------------------------------- buttons */

[data-mg-terminal] .btn--base,
[data-mg-terminal] .btn-primary {
    background: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    color: var(--t-accent-ink) !important;
    font-weight: 650;
    border-radius: var(--t-r-sm) !important;
}

[data-mg-terminal] .btn--base:hover,
[data-mg-terminal] .btn-primary:hover {
    filter: brightness(1.07);
}

/*
 * The fee note is a plain flex item in a row whose currency label is absolutely
 * positioned at the right edge, so the two printed on top of each other. It
 * belongs under the field anyway.
 */
[data-mg-terminal] .buy-sell__price .input--group.group-two {
    flex-wrap: wrap;
}

[data-mg-terminal] .buy-sell__price .input--group.group-two > span.fs-10 {
    order: 9;
    width: 100%;
    margin-top: 6px;
    text-align: right;
    color: var(--t-text-3);
}

/*
 * The order buttons inherited the accent and came out amber, which loses the
 * one colour convention every exchange shares. Long is green, short is red,
 * matching the side tabs directly above them.
 */
[data-mg-terminal] .buy-btn,
[data-mg-terminal] .longBtn,
[data-mg-terminal] .btn--base-two.buy-btn {
    background: var(--t-up) !important;
    border-color: var(--t-up) !important;
    color: #fff !important;
}

[data-mg-terminal] .sell-btn,
[data-mg-terminal] .shortBtn,
[data-mg-terminal] .btn--danger.sell-btn {
    background: var(--t-down) !important;
    border-color: var(--t-down) !important;
    color: #fff !important;
}

[data-mg-terminal] .buy-btn:hover,
[data-mg-terminal] .sell-btn:hover {
    filter: brightness(1.07);
}

[data-mg-terminal] .text--base,
[data-mg-terminal] a.text--base {
    color: var(--t-accent) !important;
}

[data-mg-terminal] .btn {
    border-radius: var(--t-r-sm);
    font-size: 13px;
    font-weight: 600;
}

[data-mg-terminal] .mg-side-btn {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: var(--t-r-sm);
    font-size: 14px;
    font-weight: 650;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter .14s ease, transform .08s ease;
}

[data-mg-terminal] .mg-side-btn:active { transform: translateY(1px); }
[data-mg-terminal] .mg-side-btn:hover { filter: brightness(1.08); }
[data-mg-terminal] .mg-side-btn--buy { background: var(--t-up); }
[data-mg-terminal] .mg-side-btn--sell { background: var(--t-down); }

[data-mg-terminal] .text--success,
[data-mg-terminal] .up { color: var(--t-up) !important; }

[data-mg-terminal] .text--danger,
[data-mg-terminal] .down { color: var(--t-down) !important; }

/* Bootstrap blue was cutting across the amber brand in the futures rail. */
[data-mg-terminal] .text-primary { color: var(--t-accent) !important; }
[data-mg-terminal] .bg-primary { background: var(--t-accent) !important; }

/* ---------------------------------------------------------- percent range */

[data-mg-terminal] .range-list__number {
    font-size: 10.5px;
    color: var(--t-text-3);
}

[data-mg-terminal] .ui-slider,
[data-mg-terminal] .ui-widget.ui-widget-content {
    background: var(--t-surface-3) !important;
    border: 0 !important;
    height: 4px !important;
    border-radius: 2px !important;
}

[data-mg-terminal] .ui-slider .ui-widget-header,
[data-mg-terminal] .ui-slider-range {
    background: var(--t-accent) !important;
    border-radius: 2px !important;
}

[data-mg-terminal] .ui-slider .ui-state-default,
[data-mg-terminal] .ui-slider-handle {
    background: var(--t-accent) !important;
    border: 2px solid var(--t-bg) !important;
    border-radius: 50% !important;
    width: 13px !important;
    height: 13px !important;
    top: -5px !important;
    cursor: grab;
}

/* -------------------------------------------------------------- pair list */

[data-mg-terminal] .market-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--t-line);
    font-size: 12.5px;
    cursor: pointer;
    transition: background .12s ease;
}

[data-mg-terminal] .market-item:hover {
    background: var(--t-surface-2);
}

[data-mg-terminal] .market-item.active {
    background: var(--t-accent-soft);
    box-shadow: inset 2px 0 0 var(--t-accent);
}

/* ------------------------------------------------------------ empty state */

[data-mg-terminal] .mg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 34px 18px;
    text-align: center;
    color: var(--t-text-3);
}

[data-mg-terminal] .mg-empty i {
    font-size: 26px;
    opacity: .45;
}

[data-mg-terminal] .mg-empty p {
    margin: 0;
    font-size: 12.5px;
}

/* Skeleton rows should breathe rather than sit as dead grey blocks. */
[data-mg-terminal] .skeleton {
    background: linear-gradient(90deg, var(--t-surface-2) 25%, var(--t-surface-3) 37%, var(--t-surface-2) 63%);
    background-size: 400% 100%;
    animation: mgShimmer 1.4s ease infinite;
    border-radius: 4px;
}

@keyframes mgShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ------------------------------------------------------------------ notes */

[data-mg-terminal] .mg-note {
    display: flex;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--t-r-sm);
    background: var(--t-accent-soft);
    border: 1px solid var(--t-accent-line);
    font-size: 12px;
    line-height: 1.5;
    color: var(--t-text-2);
}

[data-mg-terminal] .mg-note i {
    color: var(--t-accent);
    margin-top: 1px;
}

/* --------------------------------------------------- value changed pulse */

/*
 * Prices tick constantly. A brief tint on the cell that moved reads as motion
 * without the layout shifting, which is what made the old repaint look jumpy.
 */
[data-mg-terminal] .mg-tick-up { animation: mgTickUp .45s ease-out; }
[data-mg-terminal] .mg-tick-down { animation: mgTickDown .45s ease-out; }

@keyframes mgTickUp {
    0% { background-color: var(--t-up-soft); }
    100% { background-color: transparent; }
}

@keyframes mgTickDown {
    0% { background-color: var(--t-down-soft); }
    100% { background-color: transparent; }
}

/* ----------------------------------------------------- binary: stake block */

/*
 * `.trade-amount` is also an order-book cell class elsewhere on the site, and
 * that rule turned this block into a flex row: the input and the percentage
 * chips ended up side by side, squeezing each chip to 20px so "25%" stacked one
 * character per line. Re-establish the block here rather than renaming, which
 * would mean touching the binary JS that keys off these names.
 */
[data-mg-terminal] .trade-panel .trade-amount {
    display: block !important;
    width: 100%;
}

[data-mg-terminal] .trade-panel .trade-amount__input-wrapper {
    display: flex !important;
    width: 100%;
    gap: 8px;
}

[data-mg-terminal] .trade-panel .trade-amount__input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: var(--t-r-sm) !important;
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-line) !important;
    height: 46px;
    font-size: 17px !important;
    font-variant-numeric: tabular-nums;
}

[data-mg-terminal] .trade-panel .trade-amount__controls {
    display: flex !important;
    flex-direction: row !important;
    flex: 0 0 auto;
    gap: 8px;
}

[data-mg-terminal] .trade-panel .trade-amount__btn {
    width: 46px;
    height: 46px;
    border-radius: var(--t-r-sm);
    background: var(--t-surface-2);
    border: 1px solid var(--t-line);
    color: var(--t-text-2);
}

[data-mg-terminal] .trade-panel .trade-amount__btn:hover {
    background: var(--t-surface-3);
    border-color: var(--t-accent-line);
    color: var(--t-accent);
}

[data-mg-terminal] .trade-panel .trade-stake-chips {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin-top: 10px;
}

[data-mg-terminal] .trade-panel .trade-stake-chip {
    width: 100%;
    height: 32px;
    padding: 0;
    white-space: nowrap;
    border-radius: 6px;
    background: var(--t-surface-2);
    border: 1px solid var(--t-line);
    color: var(--t-text-2);
    font-size: 11.5px;
    font-weight: 600;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

[data-mg-terminal] .trade-panel .trade-stake-chip:hover,
[data-mg-terminal] .trade-panel .trade-stake-chip.active {
    background: var(--t-accent-soft);
    border-color: var(--t-accent-line);
    color: var(--t-accent);
}

[data-mg-terminal] .trade-panel {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-r) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

[data-mg-terminal] .trade-panel__section {
    margin-bottom: 14px;
}

[data-mg-terminal] .chart-container {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-r) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

[data-mg-terminal] .trade-risk-note {
    display: flex;
    gap: 9px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: var(--t-r-sm);
    background: var(--t-accent-soft);
    border: 1px solid var(--t-accent-line);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--t-text-2);
}

[data-mg-terminal] .trade-risk-note i {
    color: var(--t-accent);
    margin-top: 2px;
}

/* Higher/lower are the two outcomes of the trade, so they carry the direction
   colours and nothing else on the panel is allowed to compete with them. */
[data-mg-terminal] .trade-panel__actions button,
[data-mg-terminal] .binary-action-btn {
    height: 46px;
    border-radius: var(--t-r-sm);
    font-weight: 650;
    font-size: 14px;
    border: 0;
    color: #fff;
}

[data-mg-terminal] .trade-profit__amount {
    font-variant-numeric: tabular-nums;
    color: var(--t-up);
}

/* The history rail carries its own near-black fill, which stayed put in light
   mode and left a dark band under an otherwise light page. */
[data-mg-terminal] .trade-terminal {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line);
    color: var(--t-text);
}

[data-mg-terminal] .trade-terminal__header {
    background: var(--t-surface-2) !important;
    border-bottom: 1px solid var(--t-line);
}

/*
 * The coin suffix, the duration clock and the payout captions were all fixed
 * white, so on a light panel the amount field lost its unit, the duration box
 * looked empty and the payout lost its labels.
 */
[data-mg-terminal] .coin-symbol,
[data-mg-terminal] .timer-value {
    color: var(--t-text) !important;
}

[data-mg-terminal] .trade-profit__label,
[data-mg-terminal] .trade-profit__row {
    color: var(--t-text-2) !important;
}

[data-mg-terminal] .trade-duration__selector,
[data-mg-terminal] .trade-profit {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-line);
}

/* Both of these were fixed translucent white and vanished on a light surface. */
[data-mg-terminal] .trade-terminal__toggle {
    background: var(--t-surface-3) !important;
    border: 1px solid var(--t-line) !important;
}

[data-mg-terminal] .trade-terminal__toggle-text,
[data-mg-terminal] .trade-terminal__toggle i {
    color: var(--t-text-2) !important;
}

[data-mg-terminal] .trade-terminal__tab-btn {
    color: var(--t-text-3) !important;
}

[data-mg-terminal] .trade-terminal__tab-btn.active {
    color: var(--t-accent) !important;
}

[data-mg-terminal] .trade-terminal__title {
    color: var(--t-text-3) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The running/closed switch and the open-pair tabs were the last of the
   framework blue, including the border and the selected-tab fill. */
[data-mg-terminal] .binary-history-tab.active,
[data-mg-terminal] .history-tab.active,
[data-mg-terminal] .trade-terminal__tab.active,
[data-mg-terminal] .trade-terminal__tab-btn.active {
    color: var(--t-accent) !important;
    border-color: var(--t-accent-line) !important;
    box-shadow: inset 0 -2px 0 var(--t-accent);
}

[data-mg-terminal] .coinBtn.active,
[data-mg-terminal] .coinBtn.selected {
    border-color: var(--t-accent-line) !important;
    background: var(--t-accent-soft) !important;
}

[data-mg-terminal] .badge--primary {
    border-color: var(--t-accent-line) !important;
}

/* ------------------------------------------------------ spot: dark surface */

/*
 * The spot terminal was the odd one out: a near-white page wrapped around a
 * dark chart, with grey-on-white labels that were barely legible. Its panels
 * use their own class names rather than the shared card, so each one is named
 * here and brought onto the same graphite surface as futures and binary.
 */
[data-mg-terminal] .trading-left,
[data-mg-terminal] .trading-left__top,
[data-mg-terminal] .trading-right,
[data-mg-terminal] .trading-header,
[data-mg-terminal] .trading-chart,
[data-mg-terminal] .trading-bottom,
[data-mg-terminal] .trading-bottom__header,
[data-mg-terminal] .trading-bottom__wrapper,
[data-mg-terminal] .trading-bottom__tab,
[data-mg-terminal] .trading-table,
[data-mg-terminal] .table-wrapper-two,
[data-mg-terminal] .order-list-body,
[data-mg-terminal] .buy-sell__wrapper,
[data-mg-terminal] .order-wrapper,
[data-mg-terminal] .selected-pair {
    background: var(--t-surface) !important;
    color: var(--t-text) !important;
}

[data-mg-terminal] .trading-left,
[data-mg-terminal] .trading-right,
[data-mg-terminal] .trading-header,
[data-mg-terminal] .trading-chart,
[data-mg-terminal] .trading-bottom {
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-r) !important;
    box-shadow: none !important;
}

[data-mg-terminal] .trading-left__top,
[data-mg-terminal] .trading-bottom__header {
    border-bottom: 1px solid var(--t-line) !important;
    border-radius: var(--t-r) var(--t-r) 0 0 !important;
}

[data-mg-terminal] .ob-spread {
    background: var(--t-surface-2) !important;
    border-top: 1px solid var(--t-line) !important;
    border-bottom: 1px solid var(--t-line) !important;
    color: var(--t-text-2) !important;
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

[data-mg-terminal] thead,
[data-mg-terminal] .trading-table thead th {
    background: var(--t-surface) !important;
}

[data-mg-terminal] .trading-left__top h4,
[data-mg-terminal] .trading-right h4,
[data-mg-terminal] .trading-bottom__header h4,
[data-mg-terminal] .trading-left__top h5,
[data-mg-terminal] .trading-right h5 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-text-3);
    margin: 0;
}

/*
 * The pair header packs price, last, 1h, 24h and cap into one strip. Those
 * captions carry `text--base`, so they were all coming out amber; five accent
 * labels in a row is no accent at all. The figures get the weight and the
 * captions step back.
 */
[data-mg-terminal] .trading-header .buy-sell__price-title,
[data-mg-terminal] .trading-header > div > span.text--base,
[data-mg-terminal] .selected-pair > div > span.text--base,
[data-mg-terminal] .selected-pair .buy-sell__price-title {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--t-text-3) !important;
    margin-bottom: 2px;
}

[data-mg-terminal] .trading-header .buy-sell__price,
[data-mg-terminal] .selected-pair .buy-sell__price {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--t-text) !important;
    font-variant-numeric: tabular-nums;
}

/*
 * These headings and figures carry the light theme's near-black, which turned
 * invisible the moment the panels went dark. They are named individually rather
 * than blanket-forced so the green and red direction colours survive.
 */
[data-mg-terminal] .trading-header__title,
[data-mg-terminal] .trading-header__number,
[data-mg-terminal] .trading-header-number,
[data-mg-terminal] .trading-left__top-title,
[data-mg-terminal] .trading-right__title,
[data-mg-terminal] .trading-table__title,
[data-mg-terminal] .buy-sell__title,
[data-mg-terminal] .ob-spread__price,
[data-mg-terminal] .ob-spread-value,
[data-mg-terminal] .modal-title,
[data-mg-terminal] .market-item span,
[data-mg-terminal] .trading-bottom__header h4,
[data-mg-terminal] .trading-bottom__header h5 {
    color: var(--t-text) !important;
}

[data-mg-terminal] .trading-header__title {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.01em;
}

[data-mg-terminal] .trading-left__top-title,
[data-mg-terminal] .trading-right__title,
[data-mg-terminal] .trading-table__title {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-text-3) !important;
}

[data-mg-terminal] .ob-spread__price,
[data-mg-terminal] .ob-spread-value {
    font-variant-numeric: tabular-nums;
}

[data-mg-terminal] .modal-content {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line-2) !important;
    border-radius: var(--t-r) !important;
    color: var(--t-text);
}

[data-mg-terminal] .modal-header,
[data-mg-terminal] .modal-footer {
    border-color: var(--t-line) !important;
}

/* The markets rail lists pair, price and change; fixed tracks stop the labels
   collapsing to one character per column while the list is still filling. */
[data-mg-terminal] .trading-right .market-item,
[data-mg-terminal] .market-list .market-item {
    display: grid !important;
    grid-template-columns: minmax(78px, 1.3fr) minmax(64px, 1fr) minmax(52px, .8fr);
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}

[data-mg-terminal] .market-item > *:nth-child(2),
[data-mg-terminal] .market-item > *:nth-child(3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

[data-mg-terminal] .market-item * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column captions were wrapping mid-word ("AMOUN / T") in the order forms. */
[data-mg-terminal] .buy-sell__price-title,
[data-mg-terminal] .input--group .input-group-text,
[data-mg-terminal] .mg-ticker__label,
[data-mg-terminal] th {
    white-space: nowrap;
}

[data-mg-terminal] .trading-list-empty,
[data-mg-terminal] .order-list-body:empty {
    min-height: 120px;
}

/*
 * The market-category tabs sit inside a swiper, which owns its own layout and
 * transforms. The shared pill-container treatment fought that and left the
 * buttons as bare white blocks, so the swiper track keeps its own box and only
 * the buttons inside it are restyled.
 */
[data-mg-terminal] .swiper-wrapper.custom--tab,
[data-mg-terminal] .custom--tab.tab-two {
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    overflow: visible;
}

[data-mg-terminal] .swiper-slide .nav-link,
[data-mg-terminal] .custom--tab.tab-two .nav-link {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: 6px !important;
    color: var(--t-text-2) !important;
    padding: 5px 11px !important;
    font-size: 11.5px !important;
    white-space: nowrap;
}

[data-mg-terminal] .swiper-slide .nav-link.active,
[data-mg-terminal] .custom--tab.tab-two .nav-link.active {
    background: var(--t-accent-soft) !important;
    border-color: var(--t-accent-line) !important;
    color: var(--t-accent) !important;
}

[data-mg-terminal] .search-btn {
    background: transparent;
    border: 0;
    color: var(--t-text-3);
    padding: 0 10px;
}

/*
 * An empty book is a normal state on a thin pair, but the panel was leaving a
 * tall blank rectangle that read as a loading failure. The template already
 * flags the condition, so say so plainly.
 */
[data-mg-terminal] .trading-list-empty .order-list-body::after,
[data-mg-terminal] .trading-list-empty .trading-left__body::after {
    content: "No open orders on this book yet";
    display: block;
    padding: 40px 18px;
    text-align: center;
    font-size: 12.5px;
    color: var(--t-text-3);
}

/* The markets and trade-history rail and the table headers kept the light
   theme's fills; the spot sheet sets these with enough weight to need matching. */
[data-mg-terminal] .trading-right__top,
[data-mg-terminal] .trading-right__bottom,
[data-mg-terminal] .trading-history,
[data-mg-terminal] .trading-market,
[data-mg-terminal] thead,
[data-mg-terminal] th {
    background: var(--t-surface) !important;
    color: var(--t-text) !important;
}

[data-mg-terminal] .trading-right__top {
    border-bottom: 1px solid var(--t-line) !important;
}

[data-mg-terminal] .input--group,
[data-mg-terminal] .input--group.group-two {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-line) !important;
}

/* Column captions in the history rail were rendering near-white on white. */
[data-mg-terminal] .trading-market__header-one,
[data-mg-terminal] .trading-market__header-two,
[data-mg-terminal] .trading-market__header-three {
    color: var(--t-text-3) !important;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* The order book's mid price is the single most-read number on the page and
   was rendering in the light theme's near-black. */
[data-mg-terminal] .market-price-24,
[data-mg-terminal] .market-last-price-24 {
    color: var(--t-text) !important;
    font-size: 17px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

[data-mg-terminal] .market-price-24.up,
[data-mg-terminal] .market-last-price-24.up { color: var(--t-up) !important; }

[data-mg-terminal] .market-price-24.down,
[data-mg-terminal] .market-last-price-24.down { color: var(--t-down) !important; }

/* ------------------------------------------- futures: side and order tabs */

/*
 * The side selector is the highest-stakes control on the page, and it was
 * rendering in the framework blue for both directions. Every major exchange
 * colours it by direction so the trader can tell long from short at a glance
 * without reading; this does the same and leaves blue out of the palette.
 */
[data-mg-terminal] .trade-tab {
    flex: 1;
    border-radius: var(--t-r-sm) !important;
    font-weight: 650;
    background: var(--t-surface-2) !important;
    color: var(--t-text-2) !important;
    border: 1px solid transparent !important;
    transition: background .14s ease, color .14s ease;
}

[data-mg-terminal] .trade-tab[data-tab="buy"].active {
    background: var(--t-up) !important;
    color: #fff !important;
}

[data-mg-terminal] .trade-tab[data-tab="sell"].active {
    background: var(--t-down) !important;
    color: #fff !important;
}

/* Un-selected still hints at its direction so the pair reads as a switch. */
[data-mg-terminal] .trade-tab[data-tab="buy"]:not(.active):hover {
    color: var(--t-up) !important;
    background: var(--t-up-soft) !important;
}

[data-mg-terminal] .trade-tab[data-tab="sell"]:not(.active):hover {
    color: var(--t-down) !important;
    background: var(--t-down-soft) !important;
}

[data-mg-terminal] .trade-tabs {
    display: flex;
    gap: 8px;
}

/*
 * Positions / Open Orders / History. These used --t-text-3, which is a caption
 * colour — fine for "24H High", not for a row of tabs a trader has to scan.
 * Inactive is body-secondary, active is body ink with the amber underline.
 * The count chips follow the same pair instead of going amber, which sat at
 * 3.4:1 on a light surface and disappeared.
 */
[data-mg-terminal] .table-tab,
[data-mg-terminal] .orderbook-tab {
    color: var(--t-text-2) !important;
}

[data-mg-terminal] .table-tab.active,
[data-mg-terminal] .orderbook-tab.active {
    color: var(--t-text) !important;
}

[data-mg-terminal] .table-tab .count,
[data-mg-terminal] .positioned-count,
[data-mg-terminal] .open-count {
    color: var(--t-text-2) !important;
    background: var(--t-surface-3) !important;
}

[data-mg-terminal] .table-tab.active .count {
    color: var(--t-text) !important;
}

/* Everything else that inherited the framework blue. */
[data-mg-terminal] .badge--primary,
[data-mg-terminal] .fa-wallet {
    color: var(--t-accent) !important;
}

[data-mg-terminal] .badge--primary {
    background: var(--t-accent-soft) !important;
    border: 1px solid var(--t-accent-line);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
}

[data-mg-terminal] .orderbook-tab.active,
[data-mg-terminal] .table-tab.active {
    box-shadow: inset 0 -2px 0 var(--t-accent);
}

/* "Stop Limit" was wrapping to a second line and overlapping the row above. */
[data-mg-terminal] .custom--tab,
[data-mg-terminal] .nav-tabs,
[data-mg-terminal] .order-type-wrapper {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
}

[data-mg-terminal] .custom--tab::-webkit-scrollbar,
[data-mg-terminal] .nav-tabs::-webkit-scrollbar {
    display: none;
}

[data-mg-terminal] .order-type,
[data-mg-terminal] .change-order-type {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Panel headings on the futures rail carried the light theme's near-black. */
[data-mg-terminal] h1,
[data-mg-terminal] h2,
[data-mg-terminal] h3,
[data-mg-terminal] h4,
[data-mg-terminal] h5,
[data-mg-terminal] h6,
[data-mg-terminal] .trading-left__bottom-title {
    color: var(--t-text) !important;
}

[data-mg-terminal] .trading-left__bottom-title {
    font-size: 16px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ futures: position table */

[data-mg-terminal] .pnlAndRoi,
[data-mg-terminal] .totalUnrealizedPnl,
[data-mg-terminal] .mg-pnl {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

[data-mg-terminal] .future-trade-data-item__single {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 12.5px;
    border-bottom: 1px solid var(--t-line);
}

[data-mg-terminal] .future-trade-data-item__single:last-child {
    border-bottom: 0;
}

[data-mg-terminal] .future-trade-data-item__single .text,
[data-mg-terminal] .future-trade-data-item__single > span:first-child {
    color: var(--t-text-2);
}

[data-mg-terminal] .future-trade-data-item__single .value,
[data-mg-terminal] .future-trade-data-item__single > span:last-child {
    color: var(--t-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* A leverage chip should read as a setting you can change, not body text. */
[data-mg-terminal] .mg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--t-surface-2);
    border: 1px solid var(--t-line);
    color: var(--t-text);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

[data-mg-terminal] .mg-chip:hover {
    border-color: var(--t-accent-line);
    background: var(--t-accent-soft);
}

[data-mg-terminal] .mg-chip--long {
    color: var(--t-up);
    background: var(--t-up-soft);
    border-color: transparent;
}

[data-mg-terminal] .mg-chip--short {
    color: var(--t-down);
    background: var(--t-down-soft);
    border-color: transparent;
}

/* ------------------------------------------------------------- responsive */

/*
 * On a phone the futures header was breaking the pair name across two lines and
 * splitting the price and the percentage mid-token ("81366.000 / 0", "3.99 / %"),
 * which is unreadable for the two figures a trader checks first. Keeping each
 * token whole and letting the row wrap between them fixes it at every width.
 */
[data-mg-terminal] .pair-symbol,
[data-mg-terminal] .price-value,
[data-mg-terminal] .price-change,
[data-mg-terminal] .current-price,
[data-mg-terminal] .badge--primary {
    white-space: nowrap;
}

/* The two groups live inside .header-left, so that is the box that has to be
   allowed to wrap; wrapping only the outer one left the row overflowing. */
[data-mg-terminal] .futures-header,
[data-mg-terminal] .header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

[data-mg-terminal] .pair-info,
[data-mg-terminal] .price-display {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: nowrap;
    min-width: 0;
}

[data-mg-terminal] .pair-symbol {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
}

[data-mg-terminal] .price-value {
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

[data-mg-terminal] .current-price.up .price-value,
[data-mg-terminal] .price-change.up { color: var(--t-up) !important; }

[data-mg-terminal] .current-price.down .price-value,
[data-mg-terminal] .price-change.down { color: var(--t-down) !important; }

@media (max-width: 767px) {
    [data-mg-terminal] .futures-header,
    [data-mg-terminal] .header-left {
        gap: 8px 12px;
    }

    /* Nothing here should be able to push the page sideways on a phone. */
    [data-mg-terminal],
    [data-mg-terminal] .futures-wrapper,
    [data-mg-terminal] .futures-left,
    [data-mg-terminal] .glass-card,
    [data-mg-terminal] .container-fluid {
        max-width: 100%;
        overflow-x: hidden;
    }

    [data-mg-terminal] .table-responsive {
        overflow-x: auto;
    }

    [data-mg-terminal] .pair-symbol { font-size: 14px; }
    [data-mg-terminal] .price-value { font-size: 18px; }

    [data-mg-terminal] .future-trade-data-item__single {
        font-size: 12px;
    }
}

@media (max-width: 991px) {
    [data-mg-terminal] .mg-ticker {
        gap: 14px;
        padding: 10px 12px;
    }

    [data-mg-terminal] .mg-ticker__last {
        font-size: 19px;
    }

    [data-mg-terminal] .mg-ticker__stat {
        min-width: 70px;
    }

    [data-mg-terminal] table td {
        padding: 9px 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 575px) {
    [data-mg-terminal] .mg-ticker__stat {
        min-width: 62px;
    }

    [data-mg-terminal] .mg-ticker__stat dd {
        font-size: 12px;
    }
}

/*
 * future-trade.css was written for a dark terminal. It paints table cells,
 * symbol titles, the TP/SL button and empty-state copy #e5e7eb — nearly
 * white — and several of those rules use !important. On a light surface that
 * is invisible: the Positions table looks empty even when it has rows, and
 * "No position found" vanishes into the card. These beat that file only
 * while the page is light; dark mode keeps the original.
 */
html[data-theme="light"] [data-mg-terminal] .table.table-two tbody tr td,
html[data-theme="light"] [data-mg-terminal] .table tbody tr td,
html[data-theme="light"] [data-mg-terminal] table tbody td,
html[data-theme="light"] [data-mg-terminal] .future-symbol .title,
html[data-theme="light"] [data-mg-terminal] .form--control.close-position-input,
html[data-theme="light"] [data-mg-terminal] .empty-state,
html[data-theme="light"] [data-mg-terminal] .empty-thumb,
html[data-theme="light"] [data-mg-terminal] .login-prompt,
html[data-theme="light"] [data-mg-terminal] .trading-list-empty {
    color: var(--t-text) !important;
}

html[data-theme="light"] [data-mg-terminal] .future-symbol .sub-title,
html[data-theme="light"] [data-mg-terminal] .table.table-two thead tr th,
html[data-theme="light"] [data-mg-terminal] .table thead th {
    color: var(--t-text-2) !important;
}

html[data-theme="light"] [data-mg-terminal] .tp-add-btn {
    color: var(--t-text) !important;
    background: var(--t-surface-3) !important;
}

/*
 * Binary header lives outside [data-mg-terminal]. The chart, plus and account
 * buttons were color: hsl(var(--white) / 0.5) — half-transparent, and invalid
 * whenever --white is a hex. On the black bar they disappear. Solid ink, a
 * visible border, and currentColor on the avatar so both themes can see them.
 */
.header-new .trade-right-toggle,
.header-new .assets--dropdown .dropdown-toggle {
    color: #f4f4f5 !important;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    background: rgba(255, 255, 255, .1) !important;
}

.header-new .trade-right-toggle:hover,
.header-new .assets--dropdown .dropdown-toggle:hover,
.header-new .assets--dropdown .dropdown-toggle:focus {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .7) !important;
    background: rgba(255, 255, 255, .16) !important;
}

.header-new .user--dropdown .dropdown-toggle {
    color: #f4f4f5 !important;
}

.header-new .user--dropdown .dropdown-toggle::after {
    border-top-color: #f4f4f5 !important;
}

.header-new .user--dropdown .dropdown-toggle__avatar {
    color: #f4f4f5 !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .42) !important;
}

html[data-theme="light"] .header-new .trade-right-toggle,
html[data-theme="light"] .header-new .assets--dropdown .dropdown-toggle {
    color: #16181d !important;
    border-color: rgba(16, 18, 24, .22) !important;
    background: rgba(16, 18, 24, .06) !important;
}

html[data-theme="light"] .header-new .trade-right-toggle:hover,
html[data-theme="light"] .header-new .assets--dropdown .dropdown-toggle:hover,
html[data-theme="light"] .header-new .assets--dropdown .dropdown-toggle:focus {
    color: #111 !important;
    border-color: rgba(16, 18, 24, .4) !important;
    background: rgba(16, 18, 24, .1) !important;
}

html[data-theme="light"] .header-new .user--dropdown .dropdown-toggle,
html[data-theme="light"] .header-new .user--dropdown .dropdown-toggle__avatar {
    color: #16181d !important;
}

html[data-theme="light"] .header-new .user--dropdown .dropdown-toggle::after {
    border-top-color: #16181d !important;
}

html[data-theme="light"] .header-new .user--dropdown .dropdown-toggle__avatar {
    background: rgba(16, 18, 24, .06) !important;
    border-color: rgba(16, 18, 24, .22) !important;
}