/* =====================================================================
   QuoteX OTC — Design system & user application styles
   Dark professional trading theme (navy / blue-gray / green / red)
   ---------------------------------------------------------------------
   Z-INDEX SCALE (one consistent layering system — do not invent new):
     60  header (sticky topnav)
     70  mobile bottom navigation
     80  header dropdowns
     90  sheet backdrop (market / notifications)
     95  sheets (mobile bottom sheets)
    105  drawer backdrop
    110  navigation drawer
    150  modal
    200  toasts
   ===================================================================== */

:root {
    --bg: #0b1220;
    --bg2: #0d1524;
    --panel: #121c30;
    --panel2: #172239;
    --panel3: #1c2942;
    --inset: #0e1728;
    --border: #22304f;
    --border2: #2c3d62;
    --text: #e8eef9;
    --muted: #8ba0c0;
    --dim: #5c6f92;
    --blue: #2f9bff;
    --blue2: #38a3ff;
    --blue-soft: rgba(47, 155, 255, .12);
    --green: #21c17a;
    --green-soft: rgba(33, 193, 122, .12);
    --red: #f5435c;
    --red-soft: rgba(245, 67, 92, .12);
    --amber: #ffb224;
    --amber-soft: rgba(255, 178, 36, .12);
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 8px 28px rgba(3, 8, 20, .45);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    /* z-index scale */
    --z-header: 60;
    --z-bnav: 70;
    --z-dropdown: 80;
    --z-sheet-back: 90;
    --z-sheet: 95;
    --z-drawer-back: 105;
    --z-drawer: 110;
    --z-modal: 150;
    --z-toast: 200;
}

/* ---------------- reset / base ---------------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.qx-body {
    font-family: var(--font);
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(47, 155, 255, .07), transparent 60%),
        radial-gradient(900px 420px at -10% 110%, rgba(33, 193, 122, .05), transparent 60%),
        var(--bg);
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* scroll lock while a sheet / drawer is open */
body.qx-locked {
    overflow: hidden;
}

img,
svg {
    display: block;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    color: var(--blue2);
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

input,
select,
textarea {
    font: inherit;
}

.ic {
    width: 20px;
    height: 20px;
    flex: none;
}

.ic-sm {
    width: 16px;
    height: 16px;
}

.ic-xs {
    width: 13px;
    height: 13px;
}

.ic-lg {
    width: 26px;
    height: 26px;
}

.mono,
.num {
    font-variant-numeric: tabular-nums;
}

.text-muted {
    color: var(--muted);
}

.text-dim {
    color: var(--dim);
}

.text-green {
    color: var(--green);
}

.text-red {
    color: var(--red);
}

.text-blue {
    color: var(--blue);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.is-hidden {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #26334f;
    border-radius: 8px;
    border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
    background: #33436a;
}

/* subtle professional scrollbars for in-panel lists */
.market-list::-webkit-scrollbar,
.notif-list::-webkit-scrollbar,
.sheet-body::-webkit-scrollbar {
    width: 6px;
}

.market-list::-webkit-scrollbar-thumb,
.notif-list::-webkit-scrollbar-thumb,
.sheet-body::-webkit-scrollbar-thumb {
    background: #26334f;
    border: none;
    border-radius: 4px;
}

/* ---------------- top navigation ---------------- */

.topnav {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(13, 21, 36, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.topnav-inner {
    max-width: 1560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    width: 100%;
}

.topnav-menu {
    display: grid;
    color: var(--muted);
}

.topnav-menu:hover {
    color: var(--text);
    background: var(--panel2);
}

.topnav-menu.is-active {
    color: var(--blue);
    background: var(--blue-soft);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    min-width: 0;
}

.brand:hover {
    color: var(--text);
}

.brand-mark {
    display: grid;
    place-items: center;
    flex: none;
}

.brand-img {
    height: 30px;
    width: auto;
}

.brand-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.brand-name {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .2px;
    white-space: nowrap;
    line-height: 1.1;
}

.brand-name::after {
    content: "OTC";
    margin-left: 6px;
    font-size: 9.5px;
    font-weight: 800;
    color: #00c26f;
    background: rgba(0, 194, 111, 0.15);
    border: 1px solid rgba(0, 194, 111, .35);
    padding: 1px 5px;
    border-radius: 5px;
    vertical-align: 1px;
}

.brand-sub {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #5c6f92;
    text-transform: uppercase;
}



.btn-deposit-head {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #00c26f;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 194, 111, 0.35);
    transition: all .15s ease;
    flex: none;
}

.btn-deposit-head:hover {
    background: #00d97c;
    box-shadow: 0 4px 14px rgba(0, 194, 111, 0.5);
}

.btn-withdraw-head {
    display: none;
    align-items: center;
    background: #18253a;
    color: #a6b7d4 !important;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all .15s ease;
}

.btn-withdraw-head:hover {
    background: #20314d;
    color: #ffffff !important;
}

@media (min-width: 850px) {
    .btn-withdraw-head {
        display: inline-flex;
    }
}

.topnav-links {
    display: flex;
    gap: 4px;
    margin-left: 10px;
}

.tnl {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 10px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.tnl:hover {
    color: var(--text);
    background: var(--panel2);
}

.tnl.is-active {
    color: #fff;
    background: var(--panel3);
    box-shadow: inset 0 0 0 1px var(--border2);
}

.topnav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.icon-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--muted);
    position: relative;
    transition: background .15s, color .15s;
    flex: none;
}

.icon-btn:hover {
    background: var(--panel2);
    color: var(--text);
}

.has-badge .badge-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    line-height: 1;
    border: 2px solid var(--bg2);
}

.balance-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--panel2);
    border: 1px solid var(--border2);
    padding: 7px 12px;
    border-radius: 12px;
    transition: border-color .15s;
    min-width: 0;
}

.balance-pill:hover {
    border-color: var(--blue);
}

.balance-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pill-caret {
    color: var(--dim);
}

.mode-chip {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    padding: 3px 7px;
    border-radius: 6px;
    flex: none;
}

.mode-chip--demo {
    color: var(--amber);
    background: var(--amber-soft);
    border: 1px solid rgba(255, 178, 36, .3);
}

.mode-chip--live {
    color: var(--red);
    background: var(--red-soft);
    border: 1px solid rgba(245, 67, 92, .3);
}

.avatar-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 10px;
    padding: 3px 6px 3px 3px;
    flex: none;
}

.avatar-btn:hover {
    background: var(--panel2);
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #1d3a5f, #2b4d7d);
    color: #cfe3ff;
    font-weight: 700;
    font-size: 14px;
}

/* ---------------- navigation drawer (hamburger) ---------------- */

.drawer-back {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 18, .58);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: var(--z-drawer-back);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s;
}

.drawer-back.is-open {
    opacity: 1;
    pointer-events: auto;
}

.drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 86vw);
    background: var(--panel);
    border-right: 1px solid var(--border2);
    box-shadow: var(--shadow);
    z-index: var(--z-drawer);
    transform: translateX(-102%);
    transition: transform .22s ease-out;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
}

.drawer.is-open {
    transform: translateX(0);
}

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.drawer-close {
    margin-left: auto;
}

.drawer-nav {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dn-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--muted);
    font-weight: 600;
    font-size: 14.5px;
    transition: background .12s, color .12s;
}

.dn-item .ic {
    color: var(--dim);
    transition: color .12s;
}

.dn-item:hover {
    background: var(--panel2);
    color: var(--text);
}

.dn-item:hover .ic {
    color: var(--muted);
}

.dn-item.is-active {
    background: var(--blue-soft);
    color: var(--blue);
}

.dn-item.is-active .ic {
    color: var(--blue);
}

.dn-item--danger {
    color: var(--red);
}

.dn-item--danger .ic {
    color: var(--red);
}

.dn-item--danger:hover {
    background: var(--red-soft);
    color: var(--red);
}

.dn-badge {
    margin-left: auto;
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.drawer-foot {
    margin-top: auto;
    padding: 12px 10px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drawer-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px 14px;
}

.drawer-user-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.drawer-user-name {
    font-weight: 700;
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-user-mode {
    font-size: 11.5px;
    color: var(--dim);
}

/* ---------------- dropdowns ---------------- */

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 230px;
    background: var(--panel);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .14s, transform .14s, visibility .14s;
    z-index: var(--z-dropdown);
}

.dropdown-menu--right {
    left: auto;
    right: 0;
}

.dropdown-menu--wide {
    width: min(400px, calc(100vw - 32px));
}

.dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-label,
.dropdown-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--dim);
    padding: 8px 10px 6px;
    font-weight: 700;
}

.dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    color: var(--muted);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.link-btn {
    color: var(--blue);
    font-size: 12px;
    font-weight: 600;
    flex: none;
}

.link-btn:hover {
    text-decoration: underline;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    text-align: left;
    transition: background .12s;
}

.dropdown-item:hover {
    background: var(--panel3);
}

.dropdown-item.is-active {
    background: var(--blue-soft);
}

.dropdown-item.is-danger {
    color: var(--red);
}

.dropdown-item:disabled {
    opacity: .55;
    cursor: default;
}

.mode-bal {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.dropdown-user {
    padding: 10px 10px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}

.dropdown-user-name {
    font-weight: 700;
}

.dropdown-user-mail {
    font-size: 12px;
    color: var(--dim);
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-foot {
    display: block;
    text-align: center;
    padding: 9px;
    font-size: 13px;
    font-weight: 600;
    border-top: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
}

/* ---------------- notifications ---------------- */

.notif-list {
    max-height: min(340px, 56vh);
    max-height: min(340px, 56dvh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.notif-empty {
    padding: 26px 10px;
    text-align: center;
    color: var(--dim);
    font-size: 13px;
}

.notif-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
}

.notif-item:hover {
    background: var(--panel2);
}

.notif-item.is-unread {
    background: rgba(47, 155, 255, .06);
}

.notif-item.is-unread .notif-title::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    margin-left: 7px;
    vertical-align: 1px;
}

.notif-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.notif-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex: none;
}

.notif-ic .ic {
    width: 17px;
    height: 17px;
}

.notif-ic--trade {
    background: var(--green-soft);
    color: var(--green);
}

.notif-ic--trade.negative {
    background: var(--red-soft);
    color: var(--red);
}

.notif-ic--deposit,
.notif-ic--bonus {
    background: var(--green-soft);
    color: var(--green);
}

.notif-ic--withdrawal {
    background: var(--amber-soft);
    color: var(--amber);
}

.notif-ic--system {
    background: var(--blue-soft);
    color: var(--blue);
}

.notif-title {
    font-size: 13.5px;
    font-weight: 600;
}

.notif-body {
    font-size: 12.5px;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-time {
    font-size: 11px;
    color: var(--dim);
    margin-left: auto;
    flex: none;
    align-self: flex-start;
}

/* mobile notification sheet */
.notif-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    max-height: 82dvh;
    background: var(--panel);
    border-top: 1px solid var(--border2);
    border-radius: 20px 20px 0 0;
    z-index: var(--z-sheet);
    transform: translateY(103%);
    transition: transform .24s ease-out;
    display: none;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}

.notif-sheet.is-open {
    transform: translateY(0);
}

.notif-list--sheet {
    max-height: min(56vh, 56dvh);
}

/* ---------------- app shell ---------------- */

.qx-app {
    flex: 1;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 18px;
    display: block;
}

.qx-footer {
    border-top: 1px solid var(--border);
    padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    justify-content: space-between;
    color: var(--dim);
    font-size: 12.5px;
}

.qx-footer-dim {
    opacity: .8;
}

.bottom-nav {
    display: none;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter .12s, transform .05s, background .12s, border-color .12s;
    user-select: none;
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: var(--blue);
    color: #fff;
}

.btn-primary:hover {
    filter: brightness(1.1);
    color: #fff;
}

.btn-up {
    background: linear-gradient(180deg, #27d187, #17a765);
    color: #fff;
    box-shadow: 0 6px 18px rgba(33, 193, 122, .25);
}

.btn-up:hover {
    filter: brightness(1.08);
    color: #fff;
}

.btn-down {
    background: linear-gradient(180deg, #ff5a70, #e03450);
    color: #fff;
    box-shadow: 0 6px 18px rgba(245, 67, 92, .25);
}

.btn-down:hover {
    filter: brightness(1.08);
    color: #fff;
}

.btn-danger {
    background: var(--red-soft);
    color: var(--red);
    border-color: rgba(245, 67, 92, .35);
}

.btn-danger:hover {
    background: rgba(245, 67, 92, .2);
    color: var(--red);
}

.btn-warn {
    background: var(--amber-soft);
    color: var(--amber);
    border-color: rgba(255, 178, 36, .35);
}

.btn-warn:hover {
    background: rgba(255, 178, 36, .2);
}

.btn-success {
    background: var(--green-soft);
    color: var(--green);
    border-color: rgba(33, 193, 122, .35);
}

.btn-success:hover {
    background: rgba(33, 193, 122, .2);
}

.btn-ghost {
    background: var(--panel2);
    color: var(--text);
    border-color: var(--border2);
}

.btn-ghost:hover {
    background: var(--panel3);
    color: var(--text);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12.5px;
    border-radius: 8px;
}

.btn-lg {
    padding: 14px 24px;
    font-size: 16px;
    border-radius: 12px;
}

.btn-block {
    width: 100%;
}

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

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.card-header {
    padding: 16px 18px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
}

.card-body {
    padding: 18px;
}

.card-section {
    padding: 0 18px 18px;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0 18px;
    flex-wrap: wrap;
}

.page-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-sub {
    color: var(--muted);
    font-size: 13.5px;
    margin-top: 3px;
}

/* ---------------- badges / pills ---------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.badge-success {
    background: var(--green-soft);
    color: var(--green);
    border-color: rgba(33, 193, 122, .3);
}

.badge-danger {
    background: var(--red-soft);
    color: var(--red);
    border-color: rgba(245, 67, 92, .3);
}

.badge-warn {
    background: var(--amber-soft);
    color: var(--amber);
    border-color: rgba(255, 178, 36, .3);
}

.badge-info {
    background: var(--blue-soft);
    color: var(--blue);
    border-color: rgba(47, 155, 255, .3);
}

.badge-muted {
    background: var(--panel2);
    color: var(--muted);
    border-color: var(--border2);
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.dot--open {
    background: var(--green);
    box-shadow: 0 0 8px rgba(33, 193, 122, .7);
}

.dot--closed {
    background: var(--red);
}

.otc-tag {
    font-style: normal;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--green);
    background: var(--green-soft);
    border: 1px solid rgba(33, 193, 122, .3);
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: 1.5px;
}

.live-tag {
    font-style: normal;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--blue2);
    background: var(--blue-soft);
    border: 1px solid rgba(56, 163, 255, .35);
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: 1.5px;
    box-shadow: 0 0 6px rgba(47, 155, 255, .2);
}

/* ---------------- forms ---------------- */

.label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 7px;
    letter-spacing: .2px;
}

.input,
.select,
textarea.input {
    width: 100%;
    padding: 11px 13px;
    background: var(--inset);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.input:focus,
.select:focus,
textarea.input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(47, 155, 255, .18);
}

.input::placeholder {
    color: var(--dim);
}

.select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238ba0c0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.field {
    margin-bottom: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.hint {
    font-size: 12px;
    color: var(--dim);
    margin-top: 6px;
}

.error-text {
    color: var(--red);
    font-size: 13px;
    margin-top: 6px;
}

.check-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    color: var(--muted);
}

.check-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--blue);
    margin-top: 2px;
}

.alert {
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 13.5px;
    margin-bottom: 14px;
    border: 1px solid transparent;
}

.alert-success {
    background: var(--green-soft);
    border-color: rgba(33, 193, 122, .3);
    color: #7fe0b4;
}

.alert-error {
    background: var(--red-soft);
    border-color: rgba(245, 67, 92, .3);
    color: #ff9aab;
}

.alert-info {
    background: var(--blue-soft);
    border-color: rgba(47, 155, 255, .3);
    color: #9ecbff;
}

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

.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 560px;
}

.table th {
    text-align: left;
    padding: 11px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--dim);
    background: var(--panel2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-weight: 700;
}

.table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr {
    background: var(--panel);
}

.table tbody tr:hover {
    background: var(--panel2);
}

.table .num {
    font-variant-numeric: tabular-nums;
}

.table-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--dim);
}

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

.tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    padding: 10px 16px;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tab:hover {
    color: var(--text);
}

.tab.is-active {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.chip {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--panel2);
    color: var(--muted);
    border: 1px solid var(--border2);
    transition: all .12s;
}

.chip:hover {
    color: var(--text);
    border-color: var(--blue);
}

.chip.is-active {
    background: var(--blue-soft);
    color: var(--blue);
    border-color: rgba(47, 155, 255, .5);
}

/* ---------------- pagination ---------------- */

.pagination {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.page-link {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--panel2);
    border: 1px solid var(--border2);
    color: var(--muted);
    font-weight: 600;
    font-size: 13px;
}

.page-link:hover {
    color: var(--text);
    border-color: var(--blue);
}

.page-link.is-active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.page-link.is-disabled {
    opacity: .4;
    pointer-events: none;
}

.page-link.is-gap {
    background: none;
    border: none;
    pointer-events: none;
}

/* ---------------- auth pages ---------------- */

.auth-wrap {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    gap: 22px;
    position: relative;
    overflow: hidden;
}

.auth-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: rgba(18, 28, 48, .85);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border2);
    border-radius: 18px;
    padding: 30px 28px;
    box-shadow: var(--shadow);
    position: relative;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-bottom: 6px;
}

.auth-title {
    text-align: center;
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 4px;
}

.auth-sub {
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
    margin-bottom: 22px;
}

.auth-links {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    font-size: 13px;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-foot {
    color: var(--dim);
    font-size: 12px;
    text-align: center;
    position: relative;
}

.auth-terms {
    font-size: 12px;
    color: var(--dim);
    text-align: center;
    margin-top: 14px;
}

/* =====================================================================
   TRADING TERMINAL
   ===================================================================== */

/* ---- 3-column grid: markets | chart+open | trade panel ---- */

/* Quotex Desktop Trading Terminal: Full Screen Edge-to-Edge */
@media (min-width: 901px) {
    html:has(body.is-trading-terminal),
    body.is-trading-terminal {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.is-trading-terminal .topnav {
        flex: 0 0 52px !important;
        height: 52px !important;
        max-height: 52px !important;
        background: #0b1220 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 100 !important;
    }

    body.is-trading-terminal .topnav-inner {
        max-width: 100% !important;
        padding: 0 16px !important;
        height: 52px !important;
    }

    body.is-trading-terminal .topnav-links {
        display: none !important;
    }

    body.is-trading-terminal .qx-app {
        flex: 1 1 0 !important;
        height: calc(100vh - 52px) !important;
        height: calc(100dvh - 52px) !important;
        max-height: calc(100vh - 52px) !important;
        width: 100vw !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        display: block !important;
    }

    body.is-trading-terminal .qx-footer {
        display: none !important;
    }

    body.is-trading-terminal .terminal {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) 304px !important;
        height: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        gap: 0 !important;
        background: #0a101d !important;
        overflow: hidden !important;
    }

    body.is-trading-terminal .terminal.has-market-open {
        grid-template-columns: 58px 250px minmax(0, 1fr) 304px !important;
    }

    body.is-trading-terminal .terminal > .qx-desktop-sidebar {
        grid-column: 1 !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    body.is-trading-terminal .terminal > .tmain {
        grid-column: 2 !important;
        height: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        background: #0c1424 !important;
        overflow: hidden !important;
    }

    body.is-trading-terminal .terminal.has-market-open > .tmain {
        grid-column: 3 !important;
    }

    body.is-trading-terminal .terminal > .tmain > .chart-card {
        height: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: #0c1424 !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }

    body.is-trading-terminal .terminal > .tmain > .chart-card > .chart-head {
        flex: 0 0 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        padding: 0 16px !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-radius: 0 !important;
        background: #0c1424 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }

    body.is-trading-terminal .terminal > .tmain > .chart-card > .chart-wrap {
        flex: 1 1 0 !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        width: 100% !important;
        position: relative !important;
        background: #0c1424 !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    body.is-trading-terminal .terminal > .tmain > .chart-card > .chart-wrap canvas.qx-chart {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    body.is-trading-terminal .terminal > .tpanel {
        grid-column: 3 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
        border: none !important;
        border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
    }

    body.is-trading-terminal .terminal.has-market-open > .tpanel {
        grid-column: 4 !important;
    }
}

.chart-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.chart-fs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #8fa0b5;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}

.chart-fs-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
}

.chart-fs-btn.is-active {
    background: #0073e6;
    color: #ffffff;
    border-color: #0073e6;
}

/* Fullscreen mode support */
.chart-card:fullscreen,
.chart-card:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background: #0c1424 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

.chart-card:fullscreen .chart-wrap,
.chart-card:-webkit-full-screen .chart-wrap {
    flex: 1 1 0 !important;
    height: 100% !important;
    width: 100% !important;
}

.terminal {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 304px;
    gap: 0;
    align-items: stretch;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    overflow: hidden;
    background: #0a101d;
    transition: grid-template-columns 0.2s ease;
}

.terminal.has-market-open {
    grid-template-columns: 58px 250px minmax(0, 1fr) 304px !important;
}

.terminal > .qx-desktop-sidebar {
    grid-column: 1;
    z-index: 5;
    background: #0b1220;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 16px;
    gap: 6px;
    height: 100%;
}

.qds-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #7d8b9e;
    cursor: pointer;
    text-decoration: none;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    gap: 3px;
    transition: all 0.15s ease;
}

.qds-item .ic, .qds-item svg {
    width: 19px;
    height: 19px;
}

.qds-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.qds-item.is-active {
    color: #ffffff;
    background: #0073e6;
    box-shadow: 0 4px 14px rgba(0, 115, 230, 0.4);
}

.terminal > .tside {
    display: none;
}

.terminal.has-market-open > .tside {
    display: flex;
    grid-column: 2;
    z-index: 4;
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    height: 100%;
    max-height: 100%;
    position: static;
}

.terminal > .tmain {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #0c1424;
}

.terminal.has-market-open > .tmain {
    grid-column: 3;
}

.terminal > .tpanel {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 12px;
    padding: 12px;
    background: #0e1728;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.terminal.has-market-open > .tpanel {
    grid-column: 4;
}

.terminal > .tpanel > .tmain-trades {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* ---- market sidebar ---- */

.tside {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    position: sticky;
    top: 74px;
    align-self: start;
}

.tside-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 0;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--dim);
}

.market-search {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.market-search .ic {
    position: absolute;
    left: 22px;
    top: 21px;
    color: var(--dim);
    width: 16px;
    height: 16px;
}

.market-search input {
    padding: 9px 12px 9px 38px;
    background: var(--inset);
    border: 1px solid var(--border2);
    border-radius: 9px;
    color: var(--text);
    width: 100%;
    outline: none;
}

.market-search input:focus {
    border-color: var(--blue);
}

.cat-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    min-height: 48px;
    box-sizing: border-box;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
}

.cat-tabs::-webkit-scrollbar {
    display: none;
}

.cat-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    line-height: 1.2;
    transition: all .15s ease;
    outline: none;
}

.cat-tab:hover {
    background: var(--panel2);
    color: var(--text);
}

.cat-tab.is-active {
    background: var(--blue-soft);
    color: var(--blue);
    border-color: rgba(47, 155, 255, 0.28);
    box-shadow: 0 2px 8px rgba(47, 155, 255, 0.12);
}

.market-list {
    overflow-y: auto;
    padding: 6px;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.market-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 10px;
    border-radius: 9px;
    text-align: left;
    transition: background .12s;
}

.market-item:hover {
    background: var(--panel2);
}

.market-item.is-active {
    background: var(--blue-soft);
    box-shadow: inset 0 0 0 1px rgba(47, 155, 255, .35);
}

.market-item.is-closed {
    opacity: .55;
}

.market-names {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.market-sym {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-name {
    font-size: 11px;
    color: var(--dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-meta {
    margin-left: auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex: none;
}

.payout-chip {
    font-size: 11px;
    font-weight: 800;
    color: var(--green);
    background: var(--green-soft);
    padding: 2px 7px;
    border-radius: 6px;
}

.market-quote {
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ---- chart column ---- */

.tmain {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.chart-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.chart-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.market-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.market-title .mt-name {
    font-weight: 800;
    font-size: 15.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-title .mt-sym {
    font-size: 11px;
    color: var(--dim);
    font-weight: 600;
    white-space: nowrap;
}

.price-big {
    font-size: 21px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
    white-space: nowrap;
    transition: color .15s;
}

.price-big.up {
    color: var(--green);
}

.price-big.down {
    color: var(--red);
}

.chg {
    font-size: 12.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 7px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chg.pos {
    color: var(--green);
    background: var(--green-soft);
}

.chg.neg {
    color: var(--red);
    background: var(--red-soft);
}

.tf-pills {
    display: flex;
    gap: 4px;
    margin-left: auto;
    background: var(--inset);
    padding: 4px;
    border-radius: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
}

.tf-pills::-webkit-scrollbar {
    display: none;
}

.tf-pill {
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.tf-pill:hover {
    color: var(--text);
}

.tf-pill.is-active {
    background: var(--panel3);
    color: var(--blue);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* chart heights — driven by container, never a fixed canvas size */
.chart-wrap {
    position: relative;
    height: clamp(340px, calc(100vh - 470px), 640px);
    height: clamp(340px, calc(100dvh - 470px), 640px);
    background: var(--bg2);
}

canvas.qx-chart {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: crosshair;
}

.chart-live-btn {
    position: absolute;
    right: 104px;
    bottom: 40px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--panel3);
    border: 1px solid var(--border2);
    color: var(--muted);
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--shadow);
}

.chart-live-btn:hover {
    color: var(--text);
    border-color: var(--blue);
}

.chart-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    animation: pulse 1.6s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

.chart-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--dim);
    font-size: 13px;
}

/* ---- trade panel ---- */

.tpanel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 74px;
    align-self: start;
}

.trade-card {
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    padding: 16px;
}

.trade-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.trade-head-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--dim);
}

/* Quotex Duration Box & Menu Button */
.dur-field-wrap {
    position: relative;
    overflow: visible;
}

.dur-control-group {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.dur-box {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    background: var(--inset);
    border: 1px solid var(--border2);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.dur-box:hover {
    border-color: rgba(47, 155, 255, 0.4);
}

.dur-step-btn {
    width: 36px;
    height: 100%;
    flex: 0 0 36px;
    background: transparent;
    border: none;
    display: grid;
    place-items: center;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.dur-step-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.dur-val-wrap {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    padding: 0 4px;
}

.dur-val {
    font-weight: 800;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.6px;
    color: var(--text);
}

.dur-menu-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 10px;
    background: rgba(0, 115, 230, 0.12);
    border: 1px solid rgba(0, 115, 230, 0.35);
    color: #2f9bff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dur-menu-btn:hover {
    background: #0073e6;
    border-color: #0073e6;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 115, 230, 0.35);
    transform: translateY(-1px);
}

/* Floating Duration Popover (Opens Above / "uper hi") */
.dur-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 280px;
    background: #141d2b;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    z-index: 1200;
    animation: qxDurFadeUp 0.15s ease-out;
}

@keyframes qxDurFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.dur-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dur-popover-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #8fa0b8;
}

.dur-popover-close {
    background: transparent;
    border: none;
    color: #7d8b9e;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s ease;
}

.dur-popover-close:hover {
    color: #ffffff;
}

.dur-popover-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
}

.dur-popover-grid::-webkit-scrollbar {
    width: 4px;
}
.dur-popover-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.dur-popover-grid .dur-opt {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 2px !important;
    min-height: 42px !important;
    height: auto !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
}

.dur-popover-grid .dur-opt:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.dur-popover-grid .dur-opt.is-active {
    background: #0073e6 !important;
    border-color: #0073e6 !important;
    box-shadow: 0 0 12px rgba(0, 115, 230, 0.45) !important;
}

.dur-popover-grid .dur-opt-name {
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

.dur-popover-grid .dur-opt-clock {
    font-size: 9.5px;
    font-weight: 600;
    color: #8fa0b8;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.dur-popover-grid .dur-opt.is-active .dur-opt-name,
.dur-popover-grid .dur-opt.is-active .dur-opt-clock {
    color: #ffffff !important;
}

.amount-box {
    display: flex;
    gap: 7px;
}

.amount-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--inset);
    border: 1px solid var(--border2);
    display: grid;
    place-items: center;
    color: var(--muted);
    flex: none;
}

.amount-btn:hover {
    color: var(--text);
    border-color: var(--blue);
}

.amount-input-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}

.amount-input {
    width: 100%;
    height: 44px;
    background: var(--inset);
    border: 1px solid var(--border2);
    border-radius: 10px;
    color: var(--text);
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    outline: none;
    font-variant-numeric: tabular-nums;
}

.amount-input:focus {
    border-color: var(--blue);
}

.amount-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dim);
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

.trade-chips {
    margin-top: 9px;
}

.trade-chips .chip {
    padding: 5px 10px;
    font-size: 11.5px;
}

.dur-row {
    margin-top: 16px;
}

.dur-select {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.dur-opt {
    padding: 9px 4px;
    border-radius: 9px;
    background: var(--inset);
    border: 1px solid var(--border2);
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    transition: all .12s;
}

.dur-opt:hover {
    color: var(--text);
    border-color: var(--blue);
}

.dur-opt.is-active {
    background: var(--blue-soft);
    color: var(--blue);
    border-color: rgba(47, 155, 255, .5);
}

.payout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--inset);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 13px;
    margin: 16px 0;
    gap: 8px;
}

.payout-label {
    font-size: 11.5px;
    color: var(--dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.payout-val {
    font-size: 17px;
    font-weight: 800;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.payout-sub {
    font-size: 11px;
    color: var(--dim);
    text-align: right;
}

.payout-row>div:first-child .payout-sub {
    text-align: left;
}

.trade-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.trade-btn {
    padding: 15px 10px;
    border-radius: 13px;
    font-size: 15.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 76px;
}

.trade-btn .tb-label {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .5px;
}

.trade-btn .tb-sub {
    font-size: 10.5px;
    font-weight: 700;
    opacity: .85;
}

.trade-note {
    font-size: 11.5px;
    color: var(--dim);
    margin-top: 12px;
    text-align: center;
    line-height: 1.6;
}

/* ---- open trades ---- */

.trades-strip {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 0;
    overflow: hidden;
}

.trades-strip-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--muted);
}

.trades-strip-body {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.trades-strip-body > .empty {
    grid-column: 1 / -1;
    width: 100%;
}

.trades-strip-body::-webkit-scrollbar {
    width: 6px;
}
.trades-strip-body::-webkit-scrollbar-track {
    background: transparent;
}
.trades-strip-body::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 3px;
}
.trades-strip-body::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

.ot-card {
    min-width: 0;
    max-width: none;
    width: 100%;
    background: var(--inset);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 12px 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ot-card:hover {
    border-color: rgba(47, 155, 255, 0.35);
    background: rgba(18, 28, 48, 0.85);
}

.ot-top {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--muted);
}

.ot-sym {
    font-weight: 800;
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ot-badge {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .6px;
    color: var(--blue);
    background: var(--blue-soft);
    border: 1px solid rgba(47, 155, 255, .3);
    padding: 1px 6px;
    border-radius: 5px;
}

.ot-amount {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    white-space: nowrap;
}

.ot-dir {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 11px;
    flex: none;
}

.ot-dir--up {
    background: var(--green-soft);
    color: var(--green);
}

.ot-dir--down {
    background: var(--red-soft);
    color: var(--red);
}

.ot-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    font-size: 11.5px;
    margin: 8px 0;
}

.ot-k {
    color: var(--dim);
}

.ot-v {
    color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ot-progress {
    height: 5px;
    border-radius: 3px;
    background: var(--panel3);
    overflow: hidden;
}

.ot-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--blue), var(--green));
    border-radius: 3px;
    transition: width 1s linear;
}

.ot-bottom {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--dim);
    margin-top: 7px;
    font-variant-numeric: tabular-nums;
}

.ot-countdown {
    color: var(--muted);
    font-weight: 700;
}

.ot-payout {
    color: var(--green);
    white-space: nowrap;
}

/* ---- recent trades ---- */

.recent-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.recent-list {
    display: flex;
    flex-direction: column;
}

.rt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    transition: background .15s ease;
}

.rt-row:last-child {
    border-bottom: 0;
}

.rt-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.rt-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rt-sym-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rt-sym {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    white-space: nowrap;
}

.rt-chip {
    font-size: 11px;
    color: var(--dim);
    background: var(--inset);
    border: 1px solid var(--border2);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.rt-meta {
    font-size: 11px;
    color: var(--dim);
}

.rt-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex: none;
    text-align: right;
    min-width: 72px;
}

.rt-profit {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
    white-space: nowrap;
    line-height: 1.2;
}

.rt-profit.won {
    color: var(--green);
}

.rt-profit.lost {
    color: var(--red);
}

.rt-profit.draw,
.rt-profit.cancelled {
    color: var(--amber);
}

.rt-badge {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    line-height: 1.2;
}

.rt-badge--won {
    background: rgba(34, 193, 126, 0.14);
    color: var(--green);
    border: 1px solid rgba(34, 193, 126, 0.3);
}

.rt-badge--lost {
    background: rgba(245, 67, 92, 0.14);
    color: var(--red);
    border: 1px solid rgba(245, 67, 92, 0.3);
}

.rt-badge--draw,
.rt-badge--cancelled {
    background: rgba(245, 158, 11, 0.14);
    color: var(--amber);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ---- mobile market selector bar ---- */

.market-bar {
    display: none;
}

/* ---- mobile market sheet ---- */

.sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 18, .6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: var(--z-sheet-back);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s;
}

.sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.market-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 84vh;
    max-height: 84dvh;
    background: var(--panel);
    border-top: 1px solid var(--border2);
    border-radius: 20px 20px 0 0;
    z-index: var(--z-sheet);
    transform: translateY(103%);
    transition: transform .24s ease-out;
    display: none;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}

.market-sheet.is-open {
    transform: translateY(0);
}

.sheet-grab {
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: var(--border2);
    margin: 10px auto;
    flex: none;
}

.sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 18px 10px;
    font-weight: 800;
    font-size: 16px;
    flex: none;
}

.sheet-close {
    flex: none;
}

.sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
}

.market-search--sheet {
    border-top: 0;
}

.market-list--sheet {
    max-height: none;
}

/* ---------------- generic lists / stat cards ---------------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: none;
}

.stat-icon--blue {
    background: var(--blue-soft);
    color: var(--blue);
}

.stat-icon--green {
    background: var(--green-soft);
    color: var(--green);
}

.stat-icon--red {
    background: var(--red-soft);
    color: var(--red);
}

.stat-icon--amber {
    background: var(--amber-soft);
    color: var(--amber);
}

.stat-label {
    font-size: 11.5px;
    color: var(--dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: block;
}

.stat-value {
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    display: block;
    line-height: 1.3;
}

.stat-sub {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
    display: block;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    align-items: flex-end;
}

.filter-bar .field {
    margin-bottom: 0;
}

.filter-bar .input,
.filter-bar .select {
    min-width: 150px;
}

.empty {
    text-align: center;
    padding: 46px 20px;
    color: var(--dim);
}

.empty .ic {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    opacity: .5;
}

.empty-title {
    font-weight: 700;
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 4px;
}

.empty--slim {
    padding: 22px 16px;
}

.empty--slim .empty-title {
    font-size: 13.5px;
}

.empty-sub {
    font-size: 12px;
}

/* ---------------- toasts ---------------- */

.toast-stack {
    position: fixed;
    top: 68px;
    right: 16px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    background: var(--panel2);
    border: 1px solid var(--border2);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    box-shadow: var(--shadow);
    animation: toastIn .22s ease-out;
    font-size: 13.5px;
}

.toast.leaving {
    animation: toastOut .2s ease-in forwards;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(18px);
    }
}

.toast-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex: none;
}

.toast--success .toast-ic {
    background: var(--green-soft);
    color: var(--green);
}

.toast--error .toast-ic {
    background: var(--red-soft);
    color: var(--red);
}

.toast--info .toast-ic {
    background: var(--blue-soft);
    color: var(--blue);
}

.toast-title {
    font-weight: 700;
    margin-bottom: 2px;
}

.toast-body {
    color: var(--muted);
    font-size: 12.5px;
}

.toast-close {
    margin-left: auto;
    color: var(--dim);
    flex: none;
    padding: 2px;
}

.toast-close:hover {
    color: var(--text);
}

/* ---------------- modal ---------------- */

.modal-root {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
}

.modal-root.is-open {
    display: block;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 18, .66);
    backdrop-filter: blur(4px);
}

.modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--panel);
    border: 1px solid var(--border2);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 800;
    font-size: 16px;
}

.modal-body {
    padding: 18px;
}

.modal-foot {
    padding: 0 18px 18px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ---------------- spinner ---------------- */

.spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--border2);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.spinner--lg {
    width: 34px;
    height: 34px;
    border-width: 3px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =====================================================================
   RESPONSIVE BREAKPOINTS
   ===================================================================== */

/* ---- large tablet / small desktop: drop the 3rd column ---- */
@media (max-width: 1240px) {
    .terminal {
        grid-template-columns: 236px minmax(0, 1fr);
    }

    .terminal > .tside {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .terminal > .tmain {
        grid-column: 2;
        grid-row: 1;
    }

    .terminal > .tmain-trades {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
        min-width: 0;
        width: 100%;
    }

    .terminal > .tpanel {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .chart-wrap {
        height: clamp(320px, calc(100vh - 460px), 560px);
        height: clamp(320px, calc(100dvh - 460px), 560px);
    }
}

/* ---- tablet portrait / large phones landscape: single column (other pages) ---- */
@media (max-width: 900px) {
    .topnav-links {
        display: none;
    }

    .terminal {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .terminal > .tmain {
        order: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .terminal > .tpanel {
        order: 2;
        width: 100%;
        position: static !important;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .terminal > .tmain-trades {
        order: 3;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .tside {
        display: none;
    }

    .tmain-trades {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .qx-body, .qx-app, .terminal, .tmain, .tpanel, .tmain-trades {
        touch-action: pan-y;
    }

    .qx-app {
        padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
    }

    .trade-card,
    .trades-strip,
    .recent-card {
        width: 100%;
        box-sizing: border-box;
    }

    .market-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 11px 14px;
        width: 100%;
        text-align: left;
    }

    .market-bar .mb-names {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .market-bar .mb-sym {
        font-weight: 800;
        font-size: 14.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .market-bar .mb-name {
        font-size: 11.5px;
        color: var(--dim);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .market-bar .mb-quote {
        margin-left: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        flex: none;
    }

    .market-bar .mb-quote .num {
        font-weight: 800;
        font-size: 14.5px;
        font-variant-numeric: tabular-nums;
    }

    .market-bar .chg {
        font-size: 10.5px;
        padding: 1px 6px;
    }

    .market-bar .ic {
        color: var(--muted);
        flex: none;
    }

    .market-sheet,
    .notif-sheet {
        display: flex;
    }

    .chart-wrap {
        height: clamp(280px, 46vh, 430px);
        height: clamp(280px, 46dvh, 430px);
    }

    .trades-strip-body {
        grid-template-columns: 1fr;
    }

    .ot-card {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}

/* phone landscape: keep the chart usable when height is scarce */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
    .chart-wrap {
        height: clamp(170px, calc(100vh - 330px), 300px);
        height: clamp(170px, calc(100dvh - 330px), 300px);
    }
}

/* ---- phones ---- */
@media (max-width: 768px) {
    .qx-body {
        font-size: 14px;
    }

    .qx-app {
        padding: 12px 12px calc(78px + env(safe-area-inset-bottom));
    }

    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-bnav);
        background: rgba(13, 21, 36, .96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        justify-content: space-around;
    }

    .bn-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        color: var(--dim);
        font-size: 10.5px;
        font-weight: 700;
        padding: 5px 12px;
        border-radius: 10px;
        min-width: 64px;
    }

    .bn-item .ic {
        width: 21px;
        height: 21px;
    }

    .bn-item.is-active {
        color: var(--blue);
        background: var(--blue-soft);
    }

    /* compact header */
    .topnav-inner {
        padding: 8px 10px;
        gap: 8px;
    }

    .brand-name,
    .brand-sub {
        display: none !important;
    }

    .btn-withdraw-head {
        display: none !important;
    }

    .balance-pill {
        padding: 6px 10px;
        gap: 7px;
    }

    .balance-amount {
        font-size: 13.5px;
        max-width: 120px;
    }

    .pill-caret {
        display: none;
    }

    .dropdown-menu--wide {
        width: min(360px, calc(100vw - 24px));
    }

    .toast-stack {
        top: auto;
        bottom: calc(84px + env(safe-area-inset-bottom));
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .trade-btn {
        padding: 13px 6px;
        min-height: 64px;
    }

    .trade-btn .tb-label {
        font-size: 15.5px;
    }

    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .page-title {
        font-size: 18px;
    }

    .qx-footer {
        padding-bottom: calc(78px + env(safe-area-inset-bottom));
    }
}

/* ---- small phones ---- */
@media (max-width: 480px) {
    .chart-head {
        gap: 8px;
        padding: 11px 12px;
    }

    .tf-pills {
        margin-left: 0;
        width: 100%;
    }

    .price-big {
        font-size: 18px;
    }

    .chg {
        display: none;
    }

    .market-title .mt-name {
        font-size: 14px;
    }

    .trade-card {
        padding: 13px;
    }

    .amount-btn {
        width: 40px;
        height: 40px;
    }

    .amount-input {
        height: 40px;
        font-size: 15px;
    }

    .payout-row {
        padding: 9px 11px;
        margin: 12px 0;
    }

    .payout-val {
        font-size: 15px;
    }

    .dur-select {
        gap: 6px;
    }

    .dur-opt {
        padding: 8px 2px;
        font-size: 12.5px;
    }

    .trades-strip-head {
        padding: 11px 12px;
    }

    .trades-strip-body {
        padding: 8px;
    }

    .rt-row {
        padding: 10px 12px;
    }

    .balance-amount {
        max-width: 92px;
    }
}

/* ---- very small phones (320-360px) ---- */
@media (max-width: 380px) {
    .qx-app {
        padding-left: 8px;
        padding-right: 8px;
    }

    .topnav-inner {
        padding: 7px 8px;
    }

    .icon-btn {
        width: 34px;
        height: 34px;
    }

    .avatar {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .mode-chip {
        font-size: 9px;
        padding: 2px 5px;
    }

    .balance-amount {
        font-size: 12.5px;
        max-width: 84px;
    }

    .tf-pill {
        padding: 5px 8px;
        font-size: 11px;
    }

    .market-bar .mb-quote .num {
        font-size: 13px;
    }

    .ot-grid {
        font-size: 11px;
    }

    .bn-item {
        min-width: 56px;
        padding: 5px 8px;
    }

    .chart-wrap {
        height: clamp(240px, 44vh, 380px);
        height: clamp(240px, 44dvh, 380px);
    }

    .stat-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 13px;
        gap: 11px;
    }
}

/* ---- large desktops ---- */
@media (min-width: 1600px) {
    .terminal {
        grid-template-columns: 290px minmax(0, 1fr) 340px;
    }

    .chart-wrap {
        height: clamp(420px, calc(100vh - 470px), 760px);
        height: clamp(420px, calc(100dvh - 470px), 760px);
    }
}

/* ---- motion preferences ---- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ---- Top Traders Leaderboard Modal ---- */
#qxTopTradersBack {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 20, 0.80);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99998 !important;
}

#qxTopTradersModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999 !important;
    background: #0f192a;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    width: min(560px, calc(100vw - 20px));
    max-height: min(650px, calc(100vh - 24px));
    max-height: min(650px, calc(100dvh - 24px));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#qxTopTradersModal.is-hidden,
#qxTopTradersBack.is-hidden {
    display: none !important;
}

@media (max-width: 600px) {
    #qxTopTradersModal {
        width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 12px;
    }
}

/* =====================================================================
   QUOTEX MOBILE SINGLE-PAGE TRADING LAYOUT (ZERO SCROLL, 100DVH)
   ===================================================================== */
@media (max-width: 900px) {
    html:has(body.is-trading-terminal),
    body.is-trading-terminal {
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        touch-action: none !important;
    }

    body.is-trading-terminal .qx-app {
        position: fixed !important;
        top: 44px !important;
        bottom: 46px !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        max-width: none !important;
    }

    body.is-trading-terminal .qx-footer {
        display: none !important;
    }

    /* Compact Top Header (44px) */
    body.is-trading-terminal .topnav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 !important;
        background: #0c1424 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        z-index: 50 !important;
    }

    body.is-trading-terminal .topnav-inner {
        height: 44px !important;
        padding: 0 8px !important;
        gap: 6px !important;
    }

    body.is-trading-terminal .topnav-links,
    body.is-trading-terminal .brand-sub,
    body.is-trading-terminal .btn-withdraw-head {
        display: none !important;
    }

    body.is-trading-terminal .brand-name {
        display: none !important;
    }

    body.is-trading-terminal .brand-img {
        height: 22px !important;
    }

    /* Fixed Bottom Nav Bar (46px) */
    body.is-trading-terminal .bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        z-index: 50 !important;
        background: #090e18 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 0 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
    }

    body.is-trading-terminal .bn-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        padding: 2px 6px !important;
        color: #64748b !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        min-width: 48px !important;
    }

    body.is-trading-terminal .bn-item .ic {
        width: 17px !important;
        height: 17px !important;
    }

    body.is-trading-terminal .bn-item.is-active {
        color: #0073e6 !important;
        background: rgba(0, 115, 230, 0.12) !important;
    }

    /* Compact Header elements */
    body.is-trading-terminal .btn-deposit-head {
        padding: 4px 8px !important;
        font-size: 11.5px !important;
        font-weight: 800 !important;
    }
    body.is-trading-terminal .balance-pill {
        padding: 4px 8px !important;
        gap: 4px !important;
    }
    body.is-trading-terminal .balance-amount {
        font-size: 12px !important;
    }
    body.is-trading-terminal .mode-chip {
        font-size: 8.5px !important;
        padding: 1px 4px !important;
    }

    /* Terminal Container (fills 100% of qx-app) */
    body.is-trading-terminal .terminal {
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        background: #090e18 !important;
        position: relative !important;
    }

    body.is-trading-terminal .terminal > .qx-desktop-sidebar,
    body.is-trading-terminal .terminal > .tside {
        display: none !important;
    }

    /* Middle: Chart Column (Flex 1 to take all room above controls) */
    body.is-trading-terminal .terminal > .tmain {
        order: 1 !important;
        flex: 1 1 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
        background: #080d16 !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        width: 100% !important;
    }

    body.is-trading-terminal .chart-card {
        flex: 1 1 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }

    body.is-trading-terminal .chart-head {
        display: none !important;
    }

    body.is-trading-terminal .chart-wrap {
        flex: 1 1 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.is-trading-terminal .chart-wrap canvas {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    /* Floating Asset Selector on Chart (Quotex Mobile Style) */
    body.is-trading-terminal .market-bar {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 30 !important;
        width: auto !important;
        max-width: calc(100% - 16px) !important;
        background: rgba(14, 22, 36, 0.92) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 8px !important;
        padding: 5px 9px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
        cursor: pointer !important;
    }

    body.is-trading-terminal .market-bar .mb-add-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        background: #0073e6;
        color: #fff;
        font-weight: 800;
        font-size: 13px;
        line-height: 1;
        margin-right: 2px;
    }

    body.is-trading-terminal .market-bar .mb-names {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 5px !important;
    }

    body.is-trading-terminal .market-bar .mb-sym {
        font-size: 12px !important;
        font-weight: 800 !important;
        color: #fff !important;
    }

    body.is-trading-terminal .market-bar .mb-name {
        display: none !important;
    }

    body.is-trading-terminal .market-bar .mb-quote {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        margin-left: 0 !important;
    }

    body.is-trading-terminal .market-bar .mb-quote .num {
        display: none !important;
    }

    body.is-trading-terminal .market-bar .chg {
        font-size: 10.5px !important;
        font-weight: 800 !important;
        padding: 1px 5px !important;
        border-radius: 4px !important;
        background: rgba(0, 194, 111, 0.2) !important;
        color: #00c26f !important;
    }

    body.is-trading-terminal .market-bar .ic {
        width: 12px !important;
        height: 12px !important;
        color: #94a3b8 !important;
    }

    /* Bottom Docked Controls Panel */
    body.is-trading-terminal .terminal > .tpanel {
        order: 2 !important;
        flex: 0 0 auto !important;
        height: auto !important;
        width: 100% !important;
        background: #0c1424 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 6px 10px 4px !important;
        gap: 0 !important;
        overflow: visible !important;
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        align-self: auto !important;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.5) !important;
    }

    body.is-trading-terminal .trade-card {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.is-trading-terminal .trade-head {
        display: none !important;
    }

    /* Side-by-side Time & Investment */
    body.is-trading-terminal .trade-grid-inputs {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 4px !important;
        width: 100% !important;
    }

    body.is-trading-terminal .trade-field-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    body.is-trading-terminal .trade-field-wrap.dur-field-wrap {
        position: relative !important;
        overflow: visible !important;
    }

    body.is-trading-terminal .trade-field-wrap .field-lbl {
        font-size: 9.5px !important;
        font-weight: 700 !important;
        color: #7d8b9e !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
    }

    /* Duration stepper box & menu button */
    body.is-trading-terminal .dur-control-group {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
    }

    body.is-trading-terminal .dur-box {
        display: flex !important;
        align-items: center !important;
        height: 30px !important;
        flex: 1 !important;
        min-width: 0 !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    body.is-trading-terminal .dur-step-btn {
        width: 24px !important;
        height: 100% !important;
        flex: 0 0 24px !important;
        background: transparent !important;
        border: none !important;
        display: grid !important;
        place-items: center !important;
        color: #8fa0b8 !important;
        padding: 0 !important;
        cursor: pointer !important;
    }

    body.is-trading-terminal .dur-step-btn svg,
    body.is-trading-terminal .dur-step-btn .ic {
        width: 12px !important;
        height: 12px !important;
    }

    body.is-trading-terminal .dur-val-wrap {
        flex: 1 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 2px !important;
        cursor: pointer !important;
    }

    body.is-trading-terminal .dur-val {
        font-size: 11.5px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        font-variant-numeric: tabular-nums !important;
        letter-spacing: 0.3px !important;
    }

    body.is-trading-terminal .dur-menu-btn {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
        border-radius: 6px !important;
        background: rgba(0, 115, 230, 0.16) !important;
        border: 1px solid rgba(0, 115, 230, 0.4) !important;
        color: #2f9bff !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        cursor: pointer !important;
    }

    body.is-trading-terminal .dur-menu-btn svg,
    body.is-trading-terminal .dur-menu-btn .ic {
        width: 15px !important;
        height: 15px !important;
    }

    /* Floating Duration Popover (Opens Above / "uper hi") */
    body.is-trading-terminal .dur-popover {
        position: absolute !important;
        bottom: calc(100% + 6px) !important;
        left: 0 !important;
        width: 270px !important;
        max-width: 88vw !important;
        background: #141d2b !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 10px !important;
        padding: 8px 10px !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.75) !important;
        z-index: 1200 !important;
    }

    body.is-trading-terminal .dur-popover-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 6px !important;
        padding-bottom: 4px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    body.is-trading-terminal .dur-popover-title {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #8fa0b8 !important;
    }

    body.is-trading-terminal .dur-popover-close {
        background: transparent !important;
        border: none !important;
        color: #7d8b9e !important;
        font-size: 18px !important;
        cursor: pointer !important;
        padding: 0 2px !important;
        line-height: 1 !important;
    }

    body.is-trading-terminal .dur-popover-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        max-height: 160px !important;
        overflow-y: auto !important;
        padding: 0 !important;
    }

    body.is-trading-terminal .dur-popover-grid .dur-opt {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 2px !important;
        min-height: 36px !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        cursor: pointer !important;
    }

    body.is-trading-terminal .dur-popover-grid .dur-opt.is-active {
        background: #0073e6 !important;
        border-color: #0073e6 !important;
        color: #fff !important;
        box-shadow: 0 0 10px rgba(0, 115, 230, 0.45) !important;
    }

    body.is-trading-terminal .dur-popover-grid .dur-opt-name {
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        line-height: 1.2 !important;
    }

    body.is-trading-terminal .dur-popover-grid .dur-opt-clock {
        font-size: 8.5px !important;
        font-weight: 600 !important;
        color: #8fa0b8 !important;
        font-variant-numeric: tabular-nums !important;
        line-height: 1.2 !important;
    }

    body.is-trading-terminal .dur-popover-grid .dur-opt.is-active .dur-opt-name,
    body.is-trading-terminal .dur-popover-grid .dur-opt.is-active .dur-opt-clock {
        color: #ffffff !important;
    }

    /* Investment amount box */
    body.is-trading-terminal .amount-box {
        display: flex !important;
        align-items: center !important;
        height: 30px !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    body.is-trading-terminal .amount-btn {
        width: 24px !important;
        height: 100% !important;
        flex: 0 0 24px !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        color: #94a3b8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    body.is-trading-terminal .amount-btn svg,
    body.is-trading-terminal .amount-btn .ic {
        width: 12px !important;
        height: 12px !important;
    }

    body.is-trading-terminal .amount-input-wrap {
        flex: 1 1 0 !important;
        position: relative !important;
        height: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.is-trading-terminal .amount-input {
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        padding: 0 12px 0 2px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        border: none !important;
        background: transparent !important;
        text-align: center !important;
        color: #fff !important;
        -webkit-appearance: none !important;
        -moz-appearance: textfield !important;
    }

    body.is-trading-terminal .amount-input::-webkit-outer-spin-button,
    body.is-trading-terminal .amount-input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    body.is-trading-terminal .amount-suffix {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 10px !important;
        pointer-events: none !important;
    }

    body.is-trading-terminal .trade-chips {
        display: none !important;
    }

    /* Payout single line */
    body.is-trading-terminal .payout-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1px 2px !important;
        margin: 1px 0 4px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        font-size: 10.5px !important;
    }

    body.is-trading-terminal .payout-label {
        font-size: 10px !important;
        color: #7d8b9e !important;
        font-weight: 700 !important;
    }

    body.is-trading-terminal .payout-val {
        font-size: 12.5px !important;
        font-weight: 800 !important;
        color: #00c26f !important;
    }

    body.is-trading-terminal .payout-sub {
        display: none !important;
    }

    /* Action buttons: Buy & Sell */
    body.is-trading-terminal .trade-btns {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.is-trading-terminal .trade-btn {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 4px !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        font-weight: 800 !important;
        font-size: 13.5px !important;
        border: none !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    }

    body.is-trading-terminal .trade-btn .tb-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    body.is-trading-terminal .trade-btn .tb-label {
        font-size: 14.5px !important;
        font-weight: 800 !important;
    }

    body.is-trading-terminal .trade-btn .tb-sub,
    body.is-trading-terminal .trade-note,
    body.is-trading-terminal .terminal > .tpanel > .tmain-trades,
    body.is-trading-terminal .tmain-trades {
        display: none !important;
    }

    body.is-trading-terminal .btn-up {
        background: linear-gradient(135deg, #00b060 0%, #009650 100%) !important;
        color: #fff !important;
    }

    body.is-trading-terminal .btn-down {
        background: linear-gradient(135deg, #f23645 0%, #d82434 100%) !important;
        color: #fff !important;
    }
}