/* ===========================================================================
   pages-trade-terminal.css
   ---------------------------------------------------------------------------
   The trading terminal's own styles: the chart workspace, the order ticket,
   the watchlist and the mobile trade sheet. Built from app/theme.css and
   app/trade.inline.css, which this page was the last consumer of.

   It loads AFTER the design system, so its rules win where they overlap. Two
   things were dropped on the way in, because base.css and tokens.css already
   own them and the two definitions disagreed:

     - The custom properties the design system also defines (the type scale,
       the text colour, the breakpoints). Keeping them would have re-scaled
       every piece of text in the shared header on this one page.
     - The global resets: the universal box-sizing rule, the html font stack,
       the focus ring and the body rules.

   This sheet is still far larger than it needs to be, and much of what it
   contains now duplicates a shared component. Reducing it is a separate
   piece of work from getting the page onto the shared layer.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   258 rules were removed from this sheet.

   They styled the other twenty-eight pages, back when theme.css served all of
   them: .account-page, .auth-card, .dashboard-assets-card and the like. Those
   pages are on the design system now, and the terminal is this sheet's only
   consumer, so none of those class names appears anywhere the terminal could
   name one — its markup, its seven scripts, the mobile layer, or the shared
   View templates that emit the header.

   Checked against a computed-style fingerprint of every visible element on
   the page, at desktop and phone width, taken before and after. A stylesheet
   change is invisible to a DOM comparison; that is the only honest check.
   --------------------------------------------------------------------------- */


/* ---------- from app/theme.css ---------- */

:where([hidden]) {
    display: none !important;
}

:root {
    --bg: #07101d;
    --bg-soft: #0d1423;
    --surface: rgba(12, 18, 33, 0.94);
    --surface-elevated: rgba(15, 23, 40, 0.97);
    --surface-muted: rgba(8, 13, 24, 0.9);
    --line: rgba(117, 146, 255, 0.16);
    --line-strong: rgba(117, 146, 255, 0.36);
    --muted: #8e99b3;
    --gold: #7293ff;
    --gold-bright: #dce6ff;
    --gold-deep: #4f6bcc;

    /* S3: canonical brand color tokens — match the duplicated :root blocks
       previously inlined in dashboard.php / account.php / etc. New code
       should rely on these and not re-declare. The duplicates remain
       in-place during migration to avoid visual regressions; over time
       drop the inline blocks and let theme.css be the single source. */
    --cyan: #7293ff;
    --cyan-dim: rgba(114, 147, 255, 0.12);
    --cyan-glow: rgba(114, 147, 255, 0.25);
    --green: #3cd283;
    --green-dim: rgba(60, 210, 131, 0.12);
    --red: #ff6b7b;
    --red-dim: rgba(255, 107, 123, 0.12);
    --amber: #f4bf42;
    --amber-dim: rgba(244, 191, 66, 0.12);
    --purple: #a78bfa;
    --purple-dim: rgba(167, 139, 250, 0.12);
    --teal: #00d4aa;
    --teal-dim: rgba(0, 212, 170, 0.12);
    --orange: #f97316;
    --orange-dim: rgba(249, 115, 22, 0.12);
    --line: rgba(114, 147, 255, 0.14);
    --line-strong: rgba(114, 147, 255, 0.30);

    /* L1: shared breakpoint sentinels. CSS doesn't accept var() inside
       @media queries, so these are documentation more than enforcement —
       new media queries should match these values exactly. */
}

/* X1: Light theme override. Activated by `data-theme="light"` on <html>.
   Tokens keep their names so existing CSS keeps working — only values
   change. The boot snippet in session.js applies the saved choice on
   each page load before paint to prevent a "flash of dark theme". */
:root[data-theme="light"] {
    --bg: #f4f6fb;
    --bg-soft: #e8ecf5;
    --surface: rgba(255, 255, 255, 0.96);
    --surface-elevated: rgba(255, 255, 255, 1);
    --surface-muted: rgba(245, 247, 252, 0.94);
    --line: rgba(40, 60, 110, 0.10);
    --line-strong: rgba(40, 60, 110, 0.22);
    --muted: #5b6781;
    --gold: #4f6bcc;
    --gold-bright: #2c4399;
    --gold-deep: #1f2e6b;
    --cyan: #4f6bcc;
    --cyan-dim: rgba(79, 107, 204, 0.10);
    --cyan-glow: rgba(79, 107, 204, 0.24);
    --green: #1f9457;
    --green-dim: rgba(31, 148, 87, 0.10);
    --red: #d33a4d;
    --red-dim: rgba(211, 58, 77, 0.10);
    --amber: #b88318;
    --purple: #6c4cc7;
    --teal: #007e6a;
    --orange: #c75a17;
    --shadow: 0 18px 50px rgba(40, 60, 110, 0.18);
}
:root[data-theme="light"] body {
    background:
        radial-gradient(circle at top right, rgba(79, 107, 204, 0.10), transparent 24%),
        radial-gradient(circle at top left, rgba(31, 148, 87, 0.06), transparent 22%),
        linear-gradient(180deg, #f4f6fb 0%, #e8ecf5 100%);
    color: var(--text);
}

/* Continuation of the root token set (split here so the light-theme
   block above can override only the color values; these stay constant). */
:root {
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold);

    /* A3/A4: typography scale. Pages used to inline 10/11/12/13px ad-hoc;
       that mix produced cramped labels and eyebrow text indistinguishable
       from body. The scale below gives a coherent 6-step ramp; keep using
       `--text-*` tokens in new code. */

    /* Spacing on the 4pt grid. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
}

/* ----------------------------------------------------------------------
   A1 (a11y): keyboard focus visibility.
   Existing pages call `outline: none` defensively (to suppress the
   browser default ring on mouse-click). Without a focus-visible rule
   that meant keyboard users had no idea where they were.

   :focus-visible only fires for keyboard navigation (and screen readers)
   on modern browsers, so adding a strong ring here doesn't re-introduce
   the click-flash that the original outline:none was suppressing.
   ---------------------------------------------------------------------- */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none; /* keep border-driven focus on form fields */
    border-color: rgba(117, 146, 255, 0.85);
    box-shadow: 0 0 0 3px rgba(117, 146, 255, 0.30);
}

/* Respect users who request reduced motion: drop transitions / animations. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* A4: prevent iOS Safari from auto-zooming when a form field is focused.
   The 16px floor below applies only on phone-sized viewports — desktop
   keeps its denser sizing. */
@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* X2: i18n foundation.
   - Add Arabic-friendly fallbacks so any Arabic content (KYC names,
     reject reasons, future translated UI) renders with proper shaping.
   - dir="auto" on common text containers lets the browser detect RTL
     per-block automatically; mixed-direction content (e.g. an English
     UI with an Arabic user name) flows correctly without explicit
     direction tags.
   - Setting `data-lang="ar"` on <html> via TPSession.setLang('ar')
     flips the document direction. (Localization of strings is a
     separate effort; this is just the rendering foundation.) */
:root[data-lang="ar"]      { direction: rtl; }
/* The same Arabic face as every other page. "Cairo" and "Tajawal" are never
   loaded, so this fell to Tahoma and the terminal read in a different font
   from the dashboard one tap away. */
:root[data-lang="ar"] body { font-family: var(--font-ar); }
[lang], [dir]:not([dir="ltr"]) { unicode-bidi: isolate; }

/* ----------------------------------------------------------------------
   S1: canonical button classes.

   The codebase grew 8 distinct button classes (.btn-login, .btn-submit,
   .btn-action, .button-soft, .btn-neutral, .btn-act, .topbar-create-btn,
   etc.) that mostly do the same thing. New code should use ONE of:

     .btn         — base reset (no visual)
     .btn-primary — filled action (cyan), one per screen
     .btn-secondary — outlined, neutral
     .btn-ghost   — minimal, for tertiary actions
     .btn-danger  — destructive (red)

   Apply with `.btn .btn-primary` etc. Existing button classes still work
   while pages are migrated.
   ---------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 700;
    font-size: var(--text-sm);
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.05s;
    text-decoration: none;
    white-space: nowrap;
}
.btn:disabled,
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}
.btn:active:not(:disabled) { transform: scale(0.98); }

/* Touch target floor on phone: 44px tall regardless of class. */
@media (max-width: 768px) {
    .btn { min-height: 44px; }
}

/* L2: safe-area insets for notched / home-indicator devices.
   iPhone X+ devices need padding inside the safe area or fixed-position
   elements (top bars, bottom-nav) sit under the notch / home bar. The
   shell padding below applies anywhere body has the .safe-area class. */
.safe-area-top    { padding-top: env(safe-area-inset-top); }

@supports (padding: env(safe-area-inset-top)) {
    .app-shell .main { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
}

/* ----------------------------------------------------------------------
   N1: mobile bottom navigation.

   Hidden on desktop (sidebar is the primary nav). Shown on phone-sized
   viewports where the sidebar is hidden anyway. 5 items max with an
   icon-and-label layout, sized to the touch-target floor (≥48px tall).
   The active page is highlighted via .is-current set by the page itself.

   Markup pattern each page should include just before </body>:
       <nav class="mobile-bottom-nav" aria-label="Primary">
         <a class="mbn-item" href="./dashboard.php" data-page="home">…</a>
         …
       </nav>
   ---------------------------------------------------------------------- */
.mobile-bottom-nav { display: none; }

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 80;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: rgba(8, 12, 22, 0.96);
        backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        gap: 2px;
    }
    /* push main content up on mobile so the bottom nav doesn't overlap. */
    .app-shell .main { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
    /* hide the desktop sidebar on phones — bottom nav replaces it. */
    .app-shell .sidebar { display: none !important; }
}


body,
input,
select,
button,
textarea,
table,
.response,
.pill,
.ghost-link,
.page-title,
.page-subtitle,
.card strong,
.card .value,
.metric-value {
    direction: ltr;
    unicode-bidi: plaintext;
    font-variant-numeric: tabular-nums;
}

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

button,
input,
select {
    font: inherit;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 18px;
    background: linear-gradient(180deg, rgba(9, 14, 24, 0.99), rgba(11, 18, 32, 0.99));
    border-right: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--radius-md);
    color: #ccd7f7;
    border: 1px solid transparent;
    transition: 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
    background: linear-gradient(180deg, rgba(117, 146, 255, 0.18), rgba(117, 146, 255, 0.06));
    border-color: var(--line);
    color: var(--gold-bright);
    box-shadow: inset 0 0 0 1px rgba(117, 146, 255, 0.08);
}

.main {
    padding: 22px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.eyebrow {
    margin: 0 0 6px;
    color: #7d8cb0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.pill,
.ghost-link,
.action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: rgba(13, 20, 36, 0.92);
    color: var(--gold-bright);
}

.panel,
.section,
.card,
.toolbar {
    background: linear-gradient(180deg, rgba(14, 21, 36, 0.98), rgba(8, 12, 21, 0.98));
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.panel,
.toolbar,
.card {
    padding: 16px;
}

.section {
    overflow: hidden;
}

.section-head,
.section h2 {
    margin: 0;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 15px;
    letter-spacing: 0.04em;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.section-head-inline {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.mini-market .symbol {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mini-market .meta,
.table-meta,
.muted {
    color: var(--muted);
}

.mini-market .price {
    margin-top: 22px;
    font-size: 24px;
    font-weight: 700;
}

.mini-market .delta.positive,
.positive {
    color: var(--green);
}

.mini-market .delta.negative,
.negative {
    color: var(--red);
}

.card .k {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card .v {
    margin-top: 8px;
    font-size: 26px;
    font-weight: 700;
}

.card .sub {
    margin-top: 8px;
    color: #b8c4e6;
    font-size: 12px;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
}

.toolbar label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.toolbar-field {
    min-width: 130px;
    flex: 1 1 130px;
}

input,
select {
    width: 100%;
    min-height: 38px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(117, 146, 255, 0.16);
    padding: 9px 12px;
    background: rgba(7, 11, 20, 0.98);
    color: var(--text);
    outline: none;
}

input:focus,
select:focus {
    border-color: rgba(117, 146, 255, 0.56);
    box-shadow: 0 0 0 3px rgba(117, 146, 255, 0.12);
}

button,
.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(117, 146, 255, 0.28);
    padding: 0 14px;
    background: linear-gradient(180deg, rgba(117, 146, 255, 0.98), rgba(71, 97, 194, 0.9));
    color: #f8fbff;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

button:hover,
.button-link:hover {
    transform: translateY(-1px);
}

.button-soft,
.mini,
#logoutBtn {
    background: rgba(13, 20, 36, 0.96);
    color: var(--gold-bright);
    border-color: var(--line);
    box-shadow: none;
}

.table-wrap {
    overflow: auto;
    padding: 0 18px 18px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

th, td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 8px;
    text-align: left;
    white-space: nowrap;
}

th {
    color: #dce6ff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

tbody tr:hover td {
    background: rgba(117, 146, 255, 0.04);
}

.response {
    margin: 0 18px 18px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: #07101c;
    color: #f0f0f0;
    border: 1px solid rgba(117, 146, 255, 0.12);
    max-height: 260px;
    overflow: auto;
    white-space: pre-wrap;
}

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

.stack {
    display: grid;
    gap: 14px;
}

.page-grid.two {
    grid-template-columns: 1fr 1fr;
}

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

.status-chip.ok {
    color: #ccffe3;
    border-color: rgba(60, 210, 131, 0.28);
    background: rgba(8, 48, 24, 0.92);
}

.status-chip.warn {
    color: #fff3cc;
    border-color: rgba(250, 204, 21, 0.24);
    background: rgba(54, 40, 8, 0.9);
}

.status-chip.danger {
    color: #ffd3d8;
    border-color: rgba(255, 107, 123, 0.24);
    background: rgba(53, 12, 18, 0.92);
}

.status-chip.neutral {
    color: #dce6ff;
    border-color: var(--line);
    background: rgba(13, 20, 36, 0.96);
}

.trade-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px 270px;
    grid-template-areas: "center side watch";
    gap: 14px;
}

.trade-center,
.trade-side {
    display: grid;
    gap: 14px;
}

.trade-center { grid-area: center; }
.trade-side { grid-area: side; }
.watchlist-panel { grid-area: watch; }

.trade-center-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.8fr);
    gap: 14px;
}

.watchlist-panel,
.chart-panel {
    min-height: 100%;
}

.watchlist-body {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.watch-empty {
    padding: 16px;
    border-radius: var(--radius-lg);
    background: rgba(10, 16, 29, 0.82);
    color: var(--muted);
    border: 1px dashed var(--line);
}

.watch-item {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(117, 146, 255, 0.12);
    background: linear-gradient(180deg, rgba(13, 20, 35, 0.95), rgba(8, 12, 21, 0.95));
    text-align: left;
    display: grid;
    gap: 8px;
    box-shadow: none;
}

.watch-item.active {
    border-color: rgba(117, 146, 255, 0.42);
    background: linear-gradient(180deg, rgba(19, 31, 55, 0.98), rgba(10, 15, 28, 0.98));
}

.watch-top,
.section-head h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.chart-symbol {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.chart-meta {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.chart-mark {
    font-size: 28px;
    font-weight: 800;
}

.chart-change {
    margin-top: 6px;
    font-size: 12px;
}

.chart-subtoolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 0;
}

.chart-shell {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0;
    padding: 16px 18px 18px;
}

.chart-side-tools {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 8px 0 0;
    border: 1px solid rgba(117, 146, 255, 0.12);
    border-right: 0;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    background: linear-gradient(180deg, rgba(8, 12, 21, 0.98), rgba(4, 8, 14, 0.99));
}

.chart-tool,
.icon-btn,
.chip-btn {
    min-height: 34px;
    border-radius: var(--radius-md);
    box-shadow: none;
}

.chart-tool,
.icon-btn {
    min-width: 34px;
    padding: 0;
    background: rgba(9, 14, 25, 0.96);
    color: #dce6ff;
    border-color: rgba(117, 146, 255, 0.14);
}

.chart-tool.active,
.icon-btn:hover {
    background: rgba(23, 42, 82, 0.96);
    border-color: rgba(117, 146, 255, 0.28);
}

.chart-board {
    position: relative;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    overflow: hidden;
    border: 1px solid rgba(117, 146, 255, 0.12);
    background: linear-gradient(180deg, rgba(7, 10, 18, 0.99), rgba(4, 8, 14, 0.99));
}

.chart-platform-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 12px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(6, 10, 18, 0.94);
    min-height: 44px;
}

.chart-platform-left,
.chart-platform-right,
.chart-mini-stats,
.chart-action-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chart-platform-left {
    min-width: 0;
    gap: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

.chart-platform-right {
    flex-shrink: 0;
    padding-left: 12px;
}

.chip-btn {
    padding: 0 12px;
    background: rgba(10, 15, 28, 0.96);
    color: #dce6ff;
    border-color: rgba(117, 146, 255, 0.14);
}

.chip-btn.active {
    background: rgba(21, 39, 74, 0.98);
    border-color: rgba(117, 146, 255, 0.3);
}

.chart-toolbar-shortcuts {
    display: flex;
    align-items: stretch;
    margin-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.toolbar-chip-icon {
    min-width: 42px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    background: transparent;
    color: #c8d3ec;
    box-shadow: none;
}

.toolbar-chip-icon:last-child {
    border-right: 0;
}

.toolbar-chip-icon.active,
.toolbar-chip-icon:hover {
    background: rgba(28, 52, 104, 0.28);
    color: #f1f5ff;
}

.indicator-drawer {
    position: absolute;
    top: 44px;
    left: 12px;
    bottom: 12px;
    width: 336px;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-xl);
    background: rgba(16, 20, 29, 0.98);
    border: 1px solid rgba(117, 146, 255, 0.16);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.38);
    z-index: 5;
}

.indicator-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.indicator-drawer-head strong {
    display: block;
    font-size: 18px;
}

.indicator-drawer-head span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.indicator-search-wrap input {
    min-height: 40px;
}

.feature-tabbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.feature-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: rgba(10, 15, 28, 0.96);
    color: #dce6ff;
    border-color: rgba(117, 146, 255, 0.14);
    box-shadow: none;
}

.feature-tab.active {
    background: rgba(21, 39, 74, 0.98);
    border-color: rgba(117, 146, 255, 0.3);
}

.feature-tabbar-toolbar {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

/* The bar scrolls with its scrollbar hidden, so a tab running off its edge
   read as clipped text - a broken label rather than "there is more this way".
   terminal.js sets data-more to the physical side(s) - left, right or both -
   that hold hidden tabs, measured from where the tabs actually sit, so it is
   right in either text direction; that edge fades. Nothing fades when every tab fits. */
.feature-tabbar-toolbar[data-more="right"] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.feature-tabbar-toolbar[data-more="left"] {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
}
.feature-tabbar-toolbar[data-more="both"] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.feature-tabbar-toolbar::-webkit-scrollbar {
    display: none;
}

.feature-tabbar-toolbar .feature-tab {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 0;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: #c0cadf;
    white-space: nowrap;
}

.feature-tabbar-toolbar .feature-tab.active {
    background: rgba(61, 41, 111, 0.42);
    color: #f5f7ff;
    box-shadow: inset 0 -2px 0 rgba(143, 109, 245, 0.88);
}

.feature-tabbar-toolbar .feature-tab[data-feature-mode="signals"].active {
    background: rgba(131, 77, 0, 0.34);
    box-shadow: inset 0 -2px 0 rgba(255, 183, 51, 0.92);
}

.feature-tabbar-toolbar .feature-tab[data-feature-mode="patterns"].active {
    background: rgba(79, 35, 116, 0.34);
    box-shadow: inset 0 -2px 0 rgba(198, 108, 255, 0.9);
}

.feature-tabbar-toolbar .feature-tab[data-feature-mode="divergence"].active {
    background: rgba(34, 55, 92, 0.34);
    box-shadow: inset 0 -2px 0 rgba(141, 179, 255, 0.86);
}

.feature-tabbar-toolbar .feature-tab[data-feature-mode="mtf"].active {
    background: rgba(42, 50, 72, 0.34);
    box-shadow: inset 0 -2px 0 rgba(169, 182, 214, 0.84);
}

.indicator-tabbar {
    display: flex;
    gap: 8px;
    /* One row. Three filter chips wrapped onto two in the 288px the drawer
       leaves them, spending 76px of a drawer that had none to spare; the row
       scrolls sideways instead, like the toolbar's feature tabs. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* overflow-x makes this a scroll container, and a scroll container's
       automatic minimum height is zero - so in a short drawer the grid
       squeezed the chips row to 0px and the filters vanished. Its own
       height is its floor. */
    min-block-size: max-content;
}

.indicator-tabbar > * {
    flex: 0 0 auto;
}

.indicator-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: rgba(10, 15, 28, 0.96);
    color: #dce6ff;
    border-color: rgba(117, 146, 255, 0.14);
    box-shadow: none;
}

.indicator-tab.active {
    background: rgba(21, 39, 74, 0.98);
    border-color: rgba(117, 146, 255, 0.3);
}

.indicator-browser {
    overflow: auto;
    padding-right: 4px;
}

.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: rgba(117, 146, 255, 0.16);
    color: #eff4ff;
    font-size: 11px;
    line-height: 1;
}

.indicator-category-card,
.indicator-item-main {
    width: 100%;
    text-align: left;
    box-shadow: none;
}

.indicator-category-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
    padding: 14px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(117, 146, 255, 0.12);
    background: rgba(10, 15, 28, 0.94);
    color: #e8efff;
}

.indicator-card-copy {
    display: grid;
    gap: 4px;
}

.indicator-category-card span {
    color: var(--muted);
    font-size: 12px;
}

.indicator-card-metrics {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.indicator-card-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: rgba(117, 146, 255, 0.1);
    border: 1px solid rgba(117, 146, 255, 0.14);
    color: #dce6ff;
    font-size: 11px;
}

.indicator-list {
    display: grid;
    gap: 8px;
}

.indicator-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px 40px;
    gap: 8px;
    align-items: center;
}

.indicator-item.active .indicator-item-main {
    border-color: rgba(117, 146, 255, 0.34);
    background: rgba(21, 39, 74, 0.98);
}

.indicator-item-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(117, 146, 255, 0.1);
    background: rgba(10, 15, 28, 0.94);
}

.indicator-item-main strong {
    display: block;
    font-size: 14px;
}

.indicator-item-main span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.indicator-item-main em {
    min-width: 42px;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: rgba(117, 146, 255, 0.12);
    color: #dce6ff;
    font-style: normal;
    font-size: 11px;
    text-align: center;
}

.indicator-star,
.indicator-config,
.indicator-back-btn {
    box-shadow: none;
}

.indicator-config {
    min-width: 48px;
    min-height: 40px;
    padding: 0;
    background: rgba(10, 15, 28, 0.94);
    color: #dce6ff;
    border-color: rgba(117, 146, 255, 0.12);
    font-size: 11px;
}

.indicator-config.active {
    background: rgba(21, 39, 74, 0.98);
    border-color: rgba(117, 146, 255, 0.3);
}

.indicator-star {
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    background: rgba(10, 15, 28, 0.94);
    color: #9fb3eb;
    border-color: rgba(117, 146, 255, 0.12);
}

.indicator-star.active {
    background: rgba(68, 54, 13, 0.96);
    color: #ffd64a;
    border-color: rgba(255, 214, 74, 0.24);
}

.indicator-back-btn {
    margin-bottom: 10px;
    min-height: 34px;
    padding: 0 12px;
    background: rgba(10, 15, 28, 0.94);
    color: #dce6ff;
    border-color: rgba(117, 146, 255, 0.12);
}

.indicator-empty {
    padding: 18px;
    border-radius: var(--radius-lg);
    border: 1px dashed rgba(117, 146, 255, 0.16);
    color: var(--muted);
}

.indicator-settings {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.indicator-settings-empty {
    padding: 14px;
    border-radius: var(--radius-lg);
    background: rgba(10, 15, 28, 0.72);
    border: 1px dashed rgba(117, 146, 255, 0.12);
    color: var(--muted);
    font-size: 12px;
}

.indicator-settings-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.indicator-settings-head strong {
    display: block;
    font-size: 13px;
}

.indicator-settings-head span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.indicator-settings-close {
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    background: rgba(10, 15, 28, 0.94);
    color: #dce6ff;
    border-color: rgba(117, 146, 255, 0.14);
    box-shadow: none;
}

.indicator-settings-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.indicator-settings-field {
    display: grid;
    gap: 6px;
}

.indicator-settings-field span {
    color: #b7c3e4;
    font-size: 11px;
    letter-spacing: 0.04em;
}

.indicator-settings-field input {
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(117, 146, 255, 0.14);
    background: rgba(10, 15, 28, 0.94);
    color: #eff4ff;
}

.interval-switch {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.interval-btn {
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: rgba(11, 17, 31, 0.96);
    color: var(--gold-bright);
    border-color: var(--line);
    box-shadow: none;
}

.interval-btn.active {
    background: linear-gradient(180deg, rgba(117, 146, 255, 0.98), rgba(71, 97, 194, 0.9));
    color: #f8fbff;
}

.ohlc-strip {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-align: right;
    white-space: nowrap;
}

.chart-readout {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.indicator-legend,
.drawing-status {
    color: #b9c6e7;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.market-metric {
    padding: 9px 11px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(117, 146, 255, 0.12);
    background: rgba(10, 16, 29, 0.8);
}

.market-metric span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.market-metric strong {
    display: block;
    margin-top: 6px;
    font-size: 14px;
}

.chart-stage {
    position: relative;
    min-height: 620px;
    margin: 0;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    overflow: hidden;
    background:
        radial-gradient(circle at top center, rgba(117, 146, 255, 0.04), transparent 28%),
        linear-gradient(180deg, rgba(4, 8, 14, 0.99), rgba(3, 6, 12, 0.99));
}

.indicator-panels {
    display: grid;
    gap: 12px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(4, 8, 14, 0.94);
}

.indicator-panel {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(117, 146, 255, 0.12);
    background: rgba(8, 12, 21, 0.94);
    overflow: hidden;
}

.indicator-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.indicator-panel-head strong {
    font-size: 13px;
}

.indicator-panel-head span {
    color: var(--muted);
    font-size: 11px;
}

.indicator-panel-svg {
    width: 100%;
    height: 150px;
    display: block;
}

.panel-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.panel-line.rsi,
.panel-line.atr {
    stroke: rgba(117, 146, 255, 0.96);
}

.panel-line.macd {
    stroke: rgba(103, 215, 150, 0.96);
}

.panel-line.signal,
.panel-line.stoch-d {
    stroke: rgba(255, 214, 74, 0.96);
}

.panel-line.stoch-k {
    stroke: rgba(117, 146, 255, 0.96);
}

.panel-bar.positive {
    fill: rgba(67, 207, 124, 0.55);
}

.panel-bar.negative {
    fill: rgba(255, 107, 123, 0.55);
}

.panel-zero-line,
.panel-guide-line {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.chart-grid {
    position: absolute;
    inset: 0 56px 28px 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 100% 88px,
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 120px 100%;
    opacity: 0.26;
}

.candles {
    position: absolute;
    inset: 18px 56px 28px 0;
    z-index: 1;
}

.chart-empty {
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 13px;
}

.chart-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.chart-svg-grid-line {
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.chart-svg-grid-line.vertical {
    stroke: rgba(255, 255, 255, 0.035);
}

.chart-svg-wick {
    stroke-width: 2;
    stroke-linecap: round;
    shape-rendering: geometricPrecision;
}

.chart-svg-wick.up {
    stroke: rgba(67, 207, 124, 0.95);
}

.chart-svg-wick.down {
    stroke: rgba(255, 107, 123, 0.95);
}

.chart-svg-body {
    stroke-width: 1;
    shape-rendering: geometricPrecision;
}

.chart-svg-body.up {
    fill: rgba(67, 207, 124, 0.92);
    stroke: rgba(67, 207, 124, 1);
}

.chart-svg-body.down {
    fill: rgba(255, 107, 123, 0.9);
    stroke: rgba(255, 107, 123, 1);
}

.chart-overlay-line {
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-overlay-line.ma20 {
    stroke: rgba(255, 214, 74, 0.96);
}

.chart-overlay-line.ema50 {
    stroke: rgba(117, 146, 255, 0.96);
}

.chart-overlay-line.sma20 {
    stroke: rgba(255, 214, 74, 0.96);
}

.chart-overlay-line.wma20 {
    stroke: rgba(196, 132, 255, 0.96);
}

.chart-overlay-line.bb-upper,
.chart-overlay-line.bb-lower {
    stroke: rgba(255, 107, 123, 0.86);
    stroke-dasharray: 8 6;
}

.chart-overlay-line.bb-middle {
    stroke: rgba(255, 214, 74, 0.88);
}

.chart-overlay-line.vwap {
    stroke: rgba(72, 216, 216, 0.96);
}

.chart-overlay-line.supertrend {
    stroke: rgba(120, 255, 188, 0.92);
}

.chart-volume-bar.up {
    fill: rgba(67, 207, 124, 0.78);
}

.chart-volume-bar.down {
    fill: rgba(255, 107, 123, 0.78);
}

.chart-volume-separator {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}

.chart-volume-label {
    fill: rgba(220, 230, 255, 0.62);
    font-size: 14px;
    letter-spacing: 0.08em;
}

.chart-last-price-line {
    stroke: rgba(117, 146, 255, 0.52);
    stroke-width: 1.5;
    stroke-dasharray: 8 8;
}

.chart-last-price-tag {
    fill: rgba(18, 28, 49, 0.96);
    stroke: rgba(117, 146, 255, 0.38);
    stroke-width: 1;
}

.chart-last-price-text {
    fill: #dce6ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.chart-signal-line {
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
}

.chart-signal-dot {
    stroke-width: 1.4;
}

.chart-signal-tag {
    stroke-width: 1;
}

.chart-signal-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.chart-signal.buy .chart-signal-line,
.chart-signal.buy .chart-signal-dot,
.chart-signal.buy .chart-signal-tag {
    stroke: rgba(67, 207, 124, 0.95);
}

.chart-signal.buy .chart-signal-dot {
    fill: rgba(67, 207, 124, 0.98);
}

.chart-signal.buy .chart-signal-tag {
    fill: rgba(10, 42, 26, 0.95);
}

.chart-signal.buy .chart-signal-text {
    fill: #aef3ca;
}

.chart-signal.sell .chart-signal-line,
.chart-signal.sell .chart-signal-dot,
.chart-signal.sell .chart-signal-tag {
    stroke: rgba(255, 107, 123, 0.95);
}

.chart-signal.sell .chart-signal-dot {
    fill: rgba(255, 107, 123, 0.98);
}

.chart-signal.sell .chart-signal-tag {
    fill: rgba(59, 17, 24, 0.95);
}

.chart-signal.sell .chart-signal-text {
    fill: #ffd5db;
}

.chart-pattern-line,
.chart-pattern-polyline {
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-pattern-line.triangle {
    stroke: rgba(180, 198, 255, 0.8);
    stroke-dasharray: 7 6;
}

.chart-pattern-line.channel.upper,
.chart-pattern-line.channel.lower {
    stroke: rgba(126, 210, 255, 0.78);
    stroke-dasharray: 8 6;
}

.chart-pattern-line.channel.center {
    stroke: rgba(126, 210, 255, 0.36);
    stroke-dasharray: 4 8;
}

.chart-pattern-range-box {
    fill: rgba(126, 210, 255, 0.08);
    stroke: rgba(126, 210, 255, 0.72);
    stroke-width: 1.5;
    stroke-dasharray: 8 6;
}

.chart-pattern-polyline.harmonic {
    stroke: rgba(196, 132, 255, 0.88);
    stroke-dasharray: 0;
}

.chart-pattern-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.chart-pattern-label.triangle,
.chart-pattern-label.channel,
.chart-pattern-label.range {
    fill: #dce6ff;
}

.chart-pattern-label.harmonic {
    fill: #e8d5ff;
}

.chart-pattern-tag {
    stroke-width: 1;
}

.chart-pattern-tag.bull {
    fill: rgba(10, 42, 26, 0.95);
    stroke: rgba(67, 207, 124, 0.95);
}

.chart-pattern-tag.bear {
    fill: rgba(59, 17, 24, 0.95);
    stroke: rgba(255, 107, 123, 0.95);
}

.chart-pattern-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.chart-pattern-text.bull {
    fill: #aef3ca;
}

.chart-pattern-text.bear {
    fill: #ffd5db;
}

.chart-divergence-line {
    fill: none;
    stroke-width: 2;
    stroke-dasharray: 6 5;
    stroke-linecap: round;
}

.chart-divergence-point {
    stroke-width: 1.6;
}

.chart-divergence-line.bull,
.chart-divergence-point.bull {
    stroke: rgba(72, 216, 216, 0.96);
}

.chart-divergence-point.bull {
    fill: rgba(72, 216, 216, 0.98);
}

.chart-divergence-line.bear,
.chart-divergence-point.bear {
    stroke: rgba(255, 159, 92, 0.96);
}

.chart-divergence-point.bear {
    fill: rgba(255, 159, 92, 0.98);
}

.chart-divergence-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.chart-divergence-label.bull {
    fill: #9ff2ec;
}

.chart-divergence-label.bear {
    fill: #ffd6b5;
}

.chart-mtf-badge {
    stroke-width: 1;
}

.chart-mtf-badge.bull {
    fill: rgba(9, 44, 36, 0.94);
    stroke: rgba(72, 216, 216, 0.86);
}

.chart-mtf-badge.bear {
    fill: rgba(54, 26, 18, 0.94);
    stroke: rgba(255, 159, 92, 0.86);
}

.chart-mtf-badge.neutral {
    fill: rgba(22, 28, 40, 0.94);
    stroke: rgba(180, 198, 255, 0.56);
}

.chart-mtf-badge-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.chart-mtf-badge-text.bull {
    fill: #9ff2ec;
}

.chart-mtf-badge-text.bear {
    fill: #ffd6b5;
}

.chart-mtf-badge-text.neutral {
    fill: #dce6ff;
}

.chart-mtf-level {
    stroke-width: 1.4;
    stroke-dasharray: 7 6;
}

.chart-mtf-level.structure-high,
.chart-mtf-level.level-high {
    stroke: rgba(255, 159, 92, 0.78);
}

.chart-mtf-level.structure-low,
.chart-mtf-level.level-low {
    stroke: rgba(72, 216, 216, 0.78);
}

.chart-mtf-level.level-mid {
    stroke: rgba(180, 198, 255, 0.52);
    stroke-dasharray: 4 6;
}

.chart-mtf-level-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.chart-mtf-level-label.structure-high,
.chart-mtf-level-label.level-high {
    fill: #ffd6b5;
}

.chart-mtf-level-label.structure-low,
.chart-mtf-level-label.level-low {
    fill: #9ff2ec;
}

.chart-mtf-level-label.level-mid {
    fill: #dce6ff;
}

.chart-mtf-alignment-line {
    stroke-width: 1.6;
    stroke-dasharray: 5 5;
}

.chart-mtf-alignment.bull .chart-mtf-alignment-line {
    stroke: rgba(67, 207, 124, 0.88);
}

.chart-mtf-alignment.bear .chart-mtf-alignment-line {
    stroke: rgba(255, 107, 123, 0.88);
}

.chart-mtf-alignment.neutral .chart-mtf-alignment-line {
    stroke: rgba(180, 198, 255, 0.68);
}

.chart-mtf-alignment-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.chart-mtf-alignment.bull .chart-mtf-alignment-text {
    fill: #aef3ca;
}

.chart-mtf-alignment.bear .chart-mtf-alignment-text {
    fill: #ffd5db;
}

.chart-mtf-alignment.neutral .chart-mtf-alignment-text {
    fill: #dce6ff;
}

.chart-watermark {
    fill: rgba(220, 230, 255, 0.12);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.chart-drawing-line {
    fill: none;
    stroke: rgba(230, 239, 255, 0.88);
    stroke-width: 1.8;
    stroke-dasharray: 0;
}

.chart-drawing-line.horizontal {
    stroke: rgba(255, 214, 74, 0.9);
    stroke-dasharray: 8 6;
}

.chart-drawing-line.trend {
    stroke: rgba(208, 224, 255, 0.9);
}

.chart-drawing-line.ray {
    stroke: rgba(126, 210, 255, 0.92);
}

.chart-drawing-line.vertical {
    stroke: rgba(180, 198, 255, 0.74);
    stroke-dasharray: 5 6;
}

.chart-drawing-box {
    fill: rgba(117, 146, 255, 0.12);
    stroke: rgba(117, 146, 255, 0.88);
    stroke-width: 1.7;
    stroke-dasharray: 8 6;
}

.chart-drawing-handle {
    fill: rgba(255, 255, 255, 0.92);
    stroke: rgba(117, 146, 255, 0.8);
    stroke-width: 1.5;
}

.chart-drawing-label {
    fill: rgba(255, 214, 74, 0.92);
    font-size: 12px;
    font-weight: 700;
}

.chart-drawing-label.vertical {
    fill: rgba(220, 230, 255, 0.82);
    font-size: 10px;
    letter-spacing: 0.08em;
}

.chart-marker-dot {
    fill: rgba(66, 127, 255, 0.96);
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.5;
}

.chart-marker-box {
    fill: rgba(21, 28, 41, 0.96);
    stroke: rgba(66, 127, 255, 0.42);
    stroke-width: 1;
}

.chart-marker-text {
    fill: #f2f6ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.chart-drawing.marker.note .chart-marker-box,
.chart-drawing.marker.badge .chart-marker-box,
.chart-drawing.marker.anchored_note .chart-marker-box {
    fill: rgba(42, 32, 18, 0.96);
    stroke: rgba(255, 196, 82, 0.44);
}

.chart-drawing.marker.emoji .chart-marker-box {
    fill: rgba(39, 27, 52, 0.96);
    stroke: rgba(198, 108, 255, 0.44);
}

.chart-measure-box {
    stroke-width: 1.6;
    stroke-dasharray: 8 6;
}

.chart-measure-box.range,
.chart-measure-box.price_range,
.chart-measure-box.date_price_range,
.chart-measure-box.bars_pattern,
.chart-measure-box.percent_change {
    fill: rgba(66, 127, 255, 0.12);
    stroke: rgba(116, 165, 255, 0.9);
}

.chart-measure-box.risk_reward {
    fill: rgba(255, 196, 82, 0.12);
    stroke: rgba(255, 196, 82, 0.92);
}

.chart-measure-box.long_position {
    fill: rgba(38, 181, 114, 0.14);
    stroke: rgba(49, 207, 131, 0.96);
}

.chart-measure-box.short_position {
    fill: rgba(255, 107, 123, 0.14);
    stroke: rgba(255, 107, 123, 0.96);
}

.chart-measure-box.highlighter {
    fill: rgba(255, 232, 102, 0.18);
    stroke: rgba(255, 220, 82, 0.86);
}

.chart-measure-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.chart-measure-label.range,
.chart-measure-label.price_range,
.chart-measure-label.date_price_range,
.chart-measure-label.bars_pattern,
.chart-measure-label.percent_change {
    fill: #bad3ff;
}

.chart-measure-label.risk_reward {
    fill: #ffe09b;
}

.chart-measure-label.long_position {
    fill: #9cf0bf;
}

.chart-measure-label.short_position {
    fill: #ffc1cf;
}

.chart-measure-label.highlighter {
    fill: #fff2b0;
}

.chart-fib-zone {
    fill: rgba(255, 196, 82, 0.08);
    stroke: rgba(255, 196, 82, 0.18);
    stroke-width: 1;
}

.chart-fib-line {
    fill: none;
    stroke: rgba(255, 196, 82, 0.86);
    stroke-width: 1.3;
    stroke-dasharray: 6 5;
}

.chart-fib-label {
    fill: rgba(255, 228, 168, 0.96);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.chart-fib-time-line {
    fill: none;
    stroke: rgba(255, 196, 82, 0.54);
    stroke-width: 1.1;
    stroke-dasharray: 4 6;
}

.chart-fib-time-label {
    fill: rgba(255, 228, 168, 0.94);
    font-size: 10px;
    font-weight: 700;
}

.chart-fib-arc-line {
    fill: none;
    stroke: rgba(255, 196, 82, 0.82);
    stroke-width: 1.2;
    stroke-dasharray: 6 5;
}

.chart-fan-line {
    fill: none;
    stroke: rgba(126, 210, 255, 0.74);
    stroke-width: 1.2;
    stroke-dasharray: 6 6;
}

.chart-drawing.fan.gann .chart-fan-line {
    stroke: rgba(162, 198, 255, 0.74);
}

.chart-gann-box {
    fill: rgba(119, 147, 255, 0.08);
    stroke: rgba(163, 190, 255, 0.88);
    stroke-width: 1.6;
    stroke-dasharray: 8 6;
}

.chart-gann-grid,
.chart-gann-diagonal {
    fill: none;
    stroke: rgba(163, 190, 255, 0.44);
    stroke-width: 1.05;
    stroke-dasharray: 4 5;
}

.chart-pitchfork-line {
    fill: none;
    stroke: rgba(196, 118, 255, 0.92);
    stroke-width: 1.45;
}

.chart-pitchfork-line.rail {
    stroke: rgba(151, 172, 255, 0.82);
    stroke-dasharray: 6 5;
}

.chart-pitchfork-connector {
    fill: none;
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.chart-ellipse-shape,
.chart-fib-circle,
.chart-triangle-shape,
.chart-arc-shape {
    fill: rgba(100, 128, 255, 0.08);
    stroke-width: 1.5;
}

.chart-ellipse-shape {
    stroke: rgba(103, 153, 255, 0.9);
    stroke-dasharray: 8 6;
}

.chart-fib-circle {
    fill: none;
    stroke: rgba(255, 196, 82, 0.84);
    stroke-dasharray: 6 5;
}

.chart-triangle-shape {
    stroke: rgba(153, 119, 255, 0.92);
    stroke-dasharray: 7 5;
}

.chart-arc-shape {
    fill: none;
    stroke: rgba(120, 214, 255, 0.88);
    stroke-dasharray: 7 5;
}

.chart-brush-stroke {
    fill: none;
    stroke: rgba(96, 179, 255, 0.52);
    stroke-width: 11;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-projection-line {
    fill: none;
    stroke-width: 1.5;
}

.chart-projection-line.base {
    stroke: rgba(138, 178, 255, 0.88);
}

.chart-projection-line.future {
    stroke: rgba(38, 224, 144, 0.92);
    stroke-dasharray: 7 5;
}

.chart-projection.time_projection .chart-projection-line.future {
    stroke: rgba(255, 196, 82, 0.92);
}

.chart-projection.forecast .chart-projection-line.future {
    stroke: rgba(201, 129, 255, 0.92);
}

.chart-projection-arrow {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.chart-projection.price_projection {
    color: rgba(38, 224, 144, 0.92);
}

.chart-projection.time_projection {
    color: rgba(255, 196, 82, 0.92);
}

.chart-projection.forecast {
    color: rgba(201, 129, 255, 0.92);
}

.chart-projection-tag {
    fill: rgba(15, 18, 25, 0.96);
    stroke: currentColor;
    stroke-width: 1;
}

.chart-projection-text {
    fill: #f7fbff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.chart-drawing.selected .chart-drawing-line,
.chart-drawing.selected .chart-drawing-box,
.chart-drawing.selected .chart-marker-box,
.chart-drawing.selected .chart-measure-box,
.chart-drawing.selected .chart-fib-line,
.chart-drawing.selected .chart-fib-time-line,
.chart-drawing.selected .chart-fib-arc-line,
.chart-drawing.selected .chart-fan-line,
.chart-drawing.selected .chart-gann-box,
.chart-drawing.selected .chart-pitchfork-line,
.chart-drawing.selected .chart-ellipse-shape,
.chart-drawing.selected .chart-fib-circle,
.chart-drawing.selected .chart-triangle-shape,
.chart-drawing.selected .chart-arc-shape,
.chart-drawing.selected .chart-polyline-shape,
.chart-drawing.selected .chart-polygon-shape,
.chart-drawing.selected .chart-brush-stroke,
.chart-drawing.selected .chart-projection-line,
.chart-drawing.selected .chart-projection-arrow,
.chart-drawing.selected .chart-projection-tag {
    stroke-width: 2.4;
    filter: drop-shadow(0 0 8px rgba(117, 146, 255, 0.32));
}

.chart-drawing.selected .chart-drawing-box {
    fill: rgba(117, 146, 255, 0.18);
}

.chart-drawing.selected .chart-fib-zone {
    fill: rgba(255, 196, 82, 0.14);
}

.chart-price-scale {
    position: absolute;
    top: 18px;
    right: 12px;
    bottom: 136px;
    width: 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.04em;
}

.chart-axis {
    position: absolute;
    left: 0;
    right: 56px;
    bottom: 14px;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0 10px 0 12px;
}

/* Each label lays itself out by its own first strong character. The axis now
   formats dates in the interface language, and an Arabic date ("18 مايو،
   00:59") set inside the terminal's left-to-right frame was reordered by the
   bidi algorithm into "18 00:59 ,مايو". English labels are unaffected. */
.chart-axis span {
    unicode-bidi: plaintext;
}

.chart-crosshair {
    position: absolute;
    inset: 0 56px 28px 0;
    z-index: 2;
    pointer-events: none;
}

.chart-crosshair-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.18);
}

.chart-crosshair-line.vertical {
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-0.5px);
}

.chart-crosshair-line.horizontal {
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-0.5px);
}

.chart-crosshair-time,
.chart-crosshair-price {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    background: rgba(18, 28, 49, 0.96);
    border: 1px solid rgba(117, 146, 255, 0.28);
    color: #dce6ff;
    font-size: 11px;
    font-weight: 700;
}

.chart-crosshair-time {
    bottom: 6px;
}

.chart-crosshair-price {
    right: -50px;
}

.order-entry {
    position: sticky;
    top: 22px;
}

.trade-center > .order-entry {
    position: static;
    top: auto;
}

.trade-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.trade-tab {
    min-height: 42px;
    background: rgba(11, 17, 31, 0.96);
    color: var(--gold-bright);
    border-color: var(--line);
}

.trade-tab.active {
    background: linear-gradient(180deg, rgba(117, 146, 255, 0.98), rgba(71, 97, 194, 0.9));
    color: #f8fbff;
}

.trade-submit.buy {
    background: linear-gradient(180deg, rgba(46, 204, 113, 0.95), rgba(25, 124, 69, 0.94));
    border-color: rgba(60, 210, 131, 0.34);
}

.trade-submit.sell {
    background: linear-gradient(180deg, rgba(255, 107, 123, 0.95), rgba(168, 40, 60, 0.94));
    border-color: rgba(255, 107, 123, 0.34);
}

.quick-stats,
.snapshot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.quick-stats > div,
.snapshot-card {
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: rgba(10, 16, 29, 0.82);
    border: 1px solid rgba(117, 146, 255, 0.12);
}

.quick-stats span,
.snapshot-card span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.quick-stats strong,
.snapshot-card strong {
    display: block;
    margin-top: 8px;
    font-size: 17px;
}

.ladder-book {
    display: grid;
    gap: 8px;
    padding: 16px 18px 18px;
}

.ladder-row {
    display: grid;
    grid-template-columns: 60px 1fr 70px;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border-radius: var(--radius-lg);
    background: rgba(10, 16, 29, 0.8);
    border: 1px solid rgba(117, 146, 255, 0.08);
    font-size: 12px;
}

.ladder-row.ask strong {
    color: var(--red);
}

.ladder-row.bid strong {
    color: var(--green);
}

.ladder-row.mark {
    border-color: rgba(117, 146, 255, 0.2);
    background: rgba(20, 31, 54, 0.84);
}

.ladder-row span:last-child {
    text-align: right;
    color: var(--muted);
}

.trade-tape {
    display: grid;
    gap: 8px;
    padding: 16px 18px 18px;
}

.tape-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) 1fr 90px minmax(130px, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: rgba(10, 16, 29, 0.8);
    border: 1px solid rgba(117, 146, 255, 0.08);
    font-size: 12px;
}

.tape-row strong {
    display: block;
}

.tape-row span {
    color: var(--muted);
    font-size: 11px;
}

.empty {
    color: var(--muted);
    padding: 18px;
}

@media (max-width: 1200px) {
    .trade-layout,
    .trade-center-grid,
    .hero-layout,
    .funds-actions,
    .page-grid.two,
    .split-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {

    .sidebar {
        position: relative;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .stats-grid,
    .cards,
    .mini-market-grid,
    .funds-form-grid.two,
    .funds-quick-grid,
    .market-ribbon,
    .quick-stats,
    .snapshot-grid,
    .tape-row {
        grid-template-columns: 1fr 1fr;
    }

    .chart-shell {
        grid-template-columns: 1fr;
    }

    .chart-side-tools {
        grid-auto-flow: column;
        grid-auto-columns: minmax(34px, 1fr);
        overflow-x: auto;
        padding: 8px;
        border-right: 1px solid rgba(117, 146, 255, 0.12);
        border-bottom: 0;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .chart-board {
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    }

    .indicator-drawer {
        width: min(100%, 420px);
    }
}

@media (max-width: 720px) {
    .main {
        padding: 16px;
    }

    .topbar {
        flex-direction: column;
    }

    .stats-grid,
    .cards,
    .mini-market-grid,
    .funds-form-grid.two,
    .funds-quick-grid,
    .market-ribbon,
    .quick-stats,
    .snapshot-grid,
    .tape-row {
        grid-template-columns: 1fr;
    }

    .chart-platform-toolbar,
    .chart-subtoolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-platform-right,
    .chart-platform-left,
    .chart-mini-stats {
        width: 100%;
    }

    .indicator-drawer {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
    }

    .ohlc-strip {
        text-align: left;
        white-space: normal;
    }

    .chart-readout {
        justify-items: start;
    }

    .chart-axis {
        right: 60px;
    }

    .chart-price-scale {
        width: 44px;
    }

.chart-crosshair-price {
        right: -42px;
    }
}

.trade-terminal-page.terminal-subpage .section-headline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.trade-terminal-page.terminal-subpage .section-headline h2 {
    margin: 4px 0 0;
    border: 0;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: normal;
    text-transform: none;
}

.trade-terminal-page.terminal-subpage .app-desk-grid {
    align-items: start;
}

.trade-terminal-page.terminal-subpage .enterprise-notes {
    margin: 0;
    padding-left: 18px;
    color: #c8d2e1;
    display: grid;
    gap: 10px;
}

.trade-terminal-page.terminal-subpage .summary-stack {
    display: grid;
    gap: 12px;
    margin: 18px 0;
}

.trade-terminal-page.terminal-subpage .summary-card {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(12, 15, 21, 0.88);
}

.trade-terminal-page.terminal-subpage .summary-card span {
    color: #7f90a9;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.trade-terminal-page.terminal-subpage .summary-card strong {
    color: #f8fafc;
    font-size: 16px;
}

.trade-terminal-page.terminal-subpage .positions-filter-panel {
    padding-top: 18px;
}

.trade-terminal-page.terminal-subpage .positions-page .table-wrap td,
.trade-terminal-page.terminal-subpage .dashboard-page .table-wrap td {
    white-space: nowrap;
}

@media (max-width: 720px) {
    .trade-terminal-page.terminal-subpage .section-headline {
        flex-direction: column;
    }
}

body.trade-terminal-page.terminal-subpage {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 24%),
        radial-gradient(circle at bottom left, rgba(37, 99, 235, 0.14), transparent 20%),
        linear-gradient(180deg, #07101a 0%, #0a1220 100%);
    color: #eaf1fb;
}

.trade-terminal-page.terminal-subpage .app-shell {
    max-width: 1680px;
    min-height: 100vh;
    margin: 0 auto;
    grid-template-columns: 280px minmax(0, 1fr);
    background: transparent;
}

.trade-terminal-page.terminal-subpage .sidebar {
    margin: 18px 0 18px 18px;
    min-height: calc(100vh - 36px);
    border: 1px solid rgba(157, 178, 214, 0.12);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(10, 18, 31, 0.98), rgba(9, 16, 27, 0.98));
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.34);
}

.trade-terminal-page.terminal-subpage .brand {
    margin: 8px 8px 4px;
    padding: 20px 18px 18px;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(14, 24, 39, 0.92), rgba(10, 16, 26, 0.92));
    border: 1px solid rgba(139, 163, 199, 0.1);
}

.trade-terminal-page.terminal-subpage .brand-mark {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.36);
}

.trade-terminal-page.terminal-subpage .brand-copy strong {
    font-size: 16px;
    color: #f8fbff;
}

.trade-terminal-page.terminal-subpage .brand-copy span,
.trade-terminal-page.terminal-subpage .sidebar-label {
    color: #8da0bb;
}

.trade-terminal-page.terminal-subpage .sidebar-nav {
    gap: 8px;
}

.trade-terminal-page.terminal-subpage .nav-link {
    min-height: 48px;
    padding: 0 14px;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    background: transparent;
    color: #c9d4e6;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.trade-terminal-page.terminal-subpage .nav-link:hover {
    transform: translateX(2px);
}

.trade-terminal-page.terminal-subpage .nav-link:hover,
.trade-terminal-page.terminal-subpage .nav-link.active {
    background: linear-gradient(180deg, rgba(27, 46, 77, 0.96), rgba(18, 30, 49, 0.96));
    border-color: rgba(96, 165, 250, 0.22);
    color: #ffffff;
    box-shadow: inset 3px 0 0 #60a5fa, 0 10px 24px rgba(7, 12, 21, 0.3);
}

.trade-terminal-page.terminal-subpage .nav-emoji {
    min-width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    color: #cfe0ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.trade-terminal-page.terminal-subpage .sidebar-foot {
    display: grid;
    gap: 10px;
}

.trade-terminal-page.terminal-subpage .terminal-page-main {
    padding: 18px 18px 24px 0;
    background: transparent;
}

.trade-terminal-page.terminal-subpage .topbar {
    position: sticky;
    top: 18px;
    margin: 0 0 16px;
    min-height: 88px;
    padding: 18px 22px;
    border: 1px solid rgba(157, 178, 214, 0.12);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(14, 22, 34, 0.95), rgba(11, 18, 29, 0.95));
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.trade-terminal-page.terminal-subpage .page-title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.trade-terminal-page.terminal-subpage .page-subtitle {
    max-width: 760px;
    color: #92a4bf;
    font-size: 14px;
    line-height: 1.55;
}

.trade-terminal-page.terminal-subpage .topbar-actions {
    gap: 10px;
}

.trade-terminal-page.terminal-subpage .ghost-link,
.trade-terminal-page.terminal-subpage .pill,
.trade-terminal-page.terminal-subpage .action-link {
    min-height: 42px;
    padding: 0 16px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(157, 178, 214, 0.12);
    background: rgba(15, 23, 36, 0.85);
    color: #d7e4f7;
}

.trade-terminal-page.terminal-subpage .ghost-link:hover,
.trade-terminal-page.terminal-subpage .action-link:hover {
    background: rgba(31, 44, 66, 0.92);
    border-color: rgba(96, 165, 250, 0.22);
}

.trade-terminal-page.terminal-subpage .content-grid,
.trade-terminal-page.terminal-subpage .stats-grid,
.trade-terminal-page.terminal-subpage .page-grid,
.trade-terminal-page.terminal-subpage .terminal-page-main > .section,
.trade-terminal-page.terminal-subpage .terminal-page-main > .panel {
    margin-left: 0;
    margin-right: 0;
}

.trade-terminal-page.terminal-subpage .panel,
.trade-terminal-page.terminal-subpage .section,
.trade-terminal-page.terminal-subpage .card,
.trade-terminal-page.terminal-subpage .toolbar {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(157, 178, 214, 0.12);
    background: linear-gradient(180deg, rgba(13, 20, 32, 0.96), rgba(10, 17, 28, 0.96));
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
}

.trade-terminal-page.terminal-subpage .section h2,
.trade-terminal-page.terminal-subpage .section-head {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(157, 178, 214, 0.12);
    color: #f8fbff;
    font-size: 18px;
    letter-spacing: normal;
    text-transform: none;
}

.trade-terminal-page.terminal-subpage .card {
    padding: 20px;
}

.trade-terminal-page.terminal-subpage .card .k,
.trade-terminal-page.terminal-subpage label,
.trade-terminal-page.terminal-subpage .eyebrow {
    color: #8ca1bf;
}

.trade-terminal-page.terminal-subpage .card .v {
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
}

.trade-terminal-page.terminal-subpage .card .sub,
.trade-terminal-page.terminal-subpage .muted {
    color: #95a8c3;
}

.trade-terminal-page.terminal-subpage input,
.trade-terminal-page.terminal-subpage select {
    min-height: 48px;
    border-radius: var(--radius-lg);
    padding: 0 16px;
    border: 1px solid rgba(157, 178, 214, 0.14);
    background: rgba(9, 15, 25, 0.94);
    color: #f4f8ff;
}

.trade-terminal-page.terminal-subpage button,
.trade-terminal-page.terminal-subpage .button-link {
    min-height: 48px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(96, 165, 250, 0.18);
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.trade-terminal-page.terminal-subpage .button-soft,
.trade-terminal-page.terminal-subpage .mini,
.trade-terminal-page.terminal-subpage #logoutBtn {
    background: rgba(15, 23, 36, 0.96);
    border-color: rgba(157, 178, 214, 0.14);
    color: #d7e4f7;
    box-shadow: none;
}

.trade-terminal-page.terminal-subpage .table-wrap {
    padding: 0;
    overflow: auto;
    border-radius: var(--radius-xl);
}

.trade-terminal-page.terminal-subpage table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 100%;
}

.trade-terminal-page.terminal-subpage th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #101927;
    color: #dce8fa;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.trade-terminal-page.terminal-subpage th,
.trade-terminal-page.terminal-subpage td {
    padding: 15px 16px;
    border-bottom: 1px solid rgba(157, 178, 214, 0.08);
}

.trade-terminal-page.terminal-subpage tbody tr:hover td {
    background: rgba(33, 52, 82, 0.18);
}

.trade-terminal-page.terminal-subpage .response {
    margin: 0;
    min-height: 120px;
    border-radius: var(--radius-xl);
    background: rgba(9, 15, 25, 0.95);
    color: #e9f1fb;
    border: 1px solid rgba(157, 178, 214, 0.12);
}

.auth-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .trade-terminal-page.terminal-subpage .app-shell {
        grid-template-columns: 1fr;
    }

    .trade-terminal-page.terminal-subpage .sidebar {
        margin: 18px;
        min-height: auto;
    }

    .trade-terminal-page.terminal-subpage .terminal-page-main {
        padding: 0 18px 24px;
    }
}

@media (max-width: 720px) {
    .auth-grid.two {
        grid-template-columns: 1fr;
    }
}

.dashboard-page .dashboard-kpi.primary {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.2), transparent 28%),
        linear-gradient(180deg, rgba(18, 29, 47, 0.98), rgba(10, 17, 28, 0.98));
}

.dashboard-page .dashboard-kpi.primary::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -40px;
    width: 210px;
    height: 210px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.32), transparent 65%);
}

.dashboard-page .dashboard-minimal .dashboard-focus-table .table-wrap {
    min-height: 260px;
}

.dashboard-page .dashboard-board-card .table-wrap {
    max-height: 440px;
}

body.trade-terminal-page {
    background: #0c0d10;
    color: #f3f4f8;
    height: 100vh;
    overflow: hidden;
}

.trade-terminal-page .sidebar,
.trade-terminal-page .topbar,
.trade-terminal-page .trade-side,
.trade-terminal-page .trade-center-grid,
.trade-terminal-page .terminal-hidden-section {
    display: none !important;
}

.trade-terminal-page .app-shell {
    display: block;
    height: 100vh;
    overflow: hidden;
}

.trade-terminal-page .trade-terminal-main {
    height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.trade-terminal-page .terminal-top-strip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #1f1f22;
    flex-shrink: 0;
}

.trade-terminal-page .terminal-top-left,
.trade-terminal-page .terminal-top-right,
.trade-terminal-page .terminal-stats-inline {
    display: flex;
    align-items: center;
    gap: 16px;
}

.trade-terminal-page .terminal-top-left {
    gap: 14px;
}

.trade-terminal-page .terminal-top-right {
    gap: 0;
}

/* Grid items stretch to their column by default. The one-click badge is a
   pill and the refresh button a control; stretched, they ran 695px and 312px.
   Each keeps its own width and sits at the edge of its column. */
.trade-terminal-page .terminal-top-strip > .one-click-badge {
    justify-self: start;
}

.trade-terminal-page .terminal-top-strip > #refreshPositionsBtn {
    justify-self: end;
    inline-size: auto;
}

.trade-terminal-page .terminal-top-strip {
    min-height: 44px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(31, 33, 39, 0.98), rgba(18, 19, 24, 0.98));
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

.trade-terminal-page,
.trade-terminal-page input,
.trade-terminal-page select,
.trade-terminal-page button {
    direction: ltr;
    font-variant-numeric: lining-nums tabular-nums;
    font-family: Bahnschrift, "Segoe UI Variable Display", "Segoe UI", sans-serif;
}

.trade-terminal-page {
    color: #eef2fb;
    background:
        radial-gradient(circle at top center, rgba(50, 88, 168, 0.08), transparent 28%),
        linear-gradient(180deg, #0a0b0f 0%, #090a0d 100%);
}

.trade-terminal-page .terminal-back-link,
.trade-terminal-page .terminal-mini-link {
    color: #cfd3df;
    text-decoration: none;
    font-size: 12px;
}

.trade-terminal-page .terminal-window-btn,
.trade-terminal-page .terminal-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: #a8b0c1;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: none;
}

.trade-terminal-page .terminal-window-btn:hover,
.trade-terminal-page .terminal-avatar-btn:hover {
    background: #171a20;
    color: #ffffff;
}

.trade-terminal-page .terminal-avatar-btn {
    background: linear-gradient(180deg, #ebedf2, #cfd3dc);
    color: #747b8b;
    font-weight: 800;
}

.trade-terminal-page .terminal-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: #131417;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.trade-terminal-page .terminal-market-inline {
    display: flex;
    align-items: center;
    gap: 14px;
    font-variant-numeric: lining-nums tabular-nums;
}

.trade-terminal-page .terminal-market-inline strong {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.trade-terminal-page .terminal-market-inline span {
    font-size: 13px;
    color: #f5f7fd;
}

.trade-terminal-page .terminal-delta {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
}

.trade-terminal-page .terminal-delta.positive {
    color: #19c37d;
    background: rgba(25, 195, 125, 0.14);
}

.trade-terminal-page .terminal-delta.negative {
    color: #ff6b7b;
    background: rgba(255, 107, 123, 0.14);
}

.trade-terminal-page .terminal-stat {
    display: grid;
    gap: 3px;
    font-variant-numeric: lining-nums tabular-nums;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.trade-terminal-page .terminal-stat:first-child {
    padding-left: 0;
    border-left: 0;
}

.trade-terminal-page .terminal-stat span {
    color: #777d8b;
    font-size: 10px;
    letter-spacing: 0.12em;
}

.trade-terminal-page .terminal-stat strong {
    font-size: 14px;
    color: #f8f9fd;
}

.trade-terminal-page .trade-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 340px;
    grid-template-areas: "watch chart trade";
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.trade-terminal-page.watchlist-collapsed .trade-layout,
.trade-terminal-page.chart-focus-mode .trade-layout {
    grid-template-columns: 0 minmax(0, 1fr) 340px;
}

.trade-terminal-page.watchlist-collapsed .watchlist-panel,
.trade-terminal-page.chart-focus-mode .watchlist-panel {
    display: none;
}

.trade-terminal-page.trade-panel-collapsed .trade-layout,
.trade-terminal-page.chart-focus-mode .trade-layout {
    grid-template-columns: 250px minmax(0, 1fr) 0;
}

.trade-terminal-page.trade-panel-collapsed .order-entry,
.trade-terminal-page.chart-focus-mode .order-entry {
    display: none;
}

.trade-terminal-page.orders-collapsed .terminal-orders-panel {
    display: none;
}

.trade-terminal-page.chart-focus-mode .trade-layout {
    grid-template-columns: 0 minmax(0, 1fr) 0;
}

.trade-terminal-page.terminal-soft-theme .chart-panel,
.trade-terminal-page.terminal-soft-theme .order-entry,
.trade-terminal-page.terminal-soft-theme .watchlist-panel,
.trade-terminal-page.terminal-soft-theme .terminal-orders-panel {
    filter: saturate(0.92) brightness(1.06);
}

.trade-terminal-page.chart-style-minimal .chart-svg-guides line,
.trade-terminal-page.chart-style-minimal .chart-volume-separator {
    opacity: 0.35;
}

.trade-terminal-page.chart-style-minimal .chart-watermark {
    opacity: 0.4;
}

.trade-terminal-page .trade-center {
    display: contents;
}

.trade-terminal-page .watchlist-panel,
.trade-terminal-page .chart-panel,
.trade-terminal-page .order-entry {
    margin: 0;
    min-height: 100%;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.trade-terminal-page .watchlist-panel {
    grid-area: watch;
    padding: 12px 0 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(19, 21, 26, 0.98), rgba(15, 16, 20, 0.98));
}

.trade-terminal-page .chart-panel {
    grid-area: chart;
    padding: 0;
    background: linear-gradient(180deg, rgba(11, 12, 16, 0.98), rgba(8, 9, 13, 0.98));
}

.trade-terminal-page .order-entry {
    grid-area: trade;
    position: relative;
    overflow: visible;
    padding: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(18, 19, 23, 0.98), rgba(15, 16, 20, 0.98));
}

/* ---------------------------------------------------------------------------
   The desktop frame fits the window
   ---------------------------------
   The terminal is a fixed-frame workspace: the chart, the market list, the
   order ticket and the positions table share the window, and each region
   scrolls inside itself. It did not. .app-main--flush only had a minimum
   height, so the frame grew to fit its tallest child - the order ticket,
   whose 873px of content had overflow:visible - and the whole PAGE scrolled
   instead: 476px of it at 1366x768, 315px even at 2560x1440. At 1366x768 the
   Buy button itself sat below the bottom of the screen and the positions
   table started at 1084px.

   Above 980px, where the three-column grid applies, the frame now takes
   exactly the height under the header. The market list and the orders table
   already scrolled internally; the order ticket now does too, and its submit
   button stays pinned to the ticket's bottom edge so the primary action is
   on screen whatever the form's length. At 980px and below the layout stacks
   into one column, where the page scrolling is the right behaviour, so none
   of this applies there.
   --------------------------------------------------------------------------- */
@media (min-width: 981px) {
    .trade-terminal-page .app-main--flush {
        block-size: calc(100dvh - var(--header-height, 56px));
        min-block-size: 0;
    }

    .trade-terminal-page .trade-layout {
        grid-template-rows: minmax(0, 1fr);
    }

    .trade-terminal-page .order-entry {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        min-height: 0;
    }

    /* The chart filled the window by arithmetic: .chart-shell and .chart-stage
       both carried min-height: calc(100vh - 156px), a guess at what sat above
       them that left out the top strip and the positions table. Inside the
       fitted frame that came to 612px in a 438px panel, so the bottom of the
       chart - the time axis and the last tools in the rail - was cut off.
       The chain now hands the panel's height down instead. The candles are an
       SVG with a fixed 1000x620 viewBox and preserveAspectRatio="none", so
       they follow whatever height the stage is given; no script change. */
    .trade-terminal-page .chart-shell {
        flex: 1 1 auto;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
    }

    .trade-terminal-page .chart-board {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .trade-terminal-page .chart-stage {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Fifteen 40px tools do not fit a 342px rail at 1280x720; the rail
       scrolls rather than dropping the last ones off its end. */
    .trade-terminal-page .chart-side-tools {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .trade-terminal-page .order-entry .trade-submit {
        position: sticky;
        bottom: 0;
        z-index: 2;
        /* It now floats over the fields scrolling beneath it, so it needs the
           panel's surface behind its rounded corners rather than see-through. */
        box-shadow: 0 -12px 16px -4px rgba(15, 16, 20, 0.96);
    }
}

.trade-terminal-page .terminal-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 12px;
}

.trade-terminal-page .terminal-panel-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trade-terminal-page .terminal-panel-icon {
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    color: var(--text-muted);   /* was #6d7585, 4.19:1 - a control, not a caption */
    font-size: 10px;
    box-shadow: none;
    transition: color 140ms ease, transform 140ms ease;
}

.trade-terminal-page .terminal-panel-icon:hover,
.trade-terminal-page .terminal-panel-icon.active {
    color: #f2f6fd;
    transform: translateY(-1px);
}

.trade-terminal-page .terminal-panel-head h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #f3f6fc;
}

.trade-terminal-page .watchlist-tabs {
    display: flex;
    gap: 8px;
    padding: 0 12px 10px;
}

.trade-terminal-page .watchlist-tab {
    min-height: 28px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #17191f;
    color: #b8bfce;
    font-size: 11px;
    box-shadow: none;
}

.trade-terminal-page .watchlist-tab.active {
    background: rgba(60, 125, 255, 0.2);
    color: #7cb0ff;
    border-color: rgba(76, 143, 255, 0.24);
}

.trade-terminal-page .watchlist-search-wrap {
    padding: 0 12px 10px;
}

.trade-terminal-page .watchlist-search-shell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #15181e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.trade-terminal-page .watch-search-icon {
    /* Sits on the lighter search field, where even the faint tier is short. */
    color: var(--text-muted);   /* was #71798a, 4.07:1 */
    font-size: 11px;
}

.trade-terminal-page .watchlist-search-wrap input {
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f1f4fb;
}

.trade-terminal-page .watchlist-table-head {
    display: flex;
    justify-content: space-between;
    padding: 0 12px 8px;
    color: var(--text-faint);   /* was #727988, 4.45:1 */
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.trade-terminal-page .watchlist-body {
    gap: 0;
    padding: 0;
    max-height: calc(100vh - 140px);
    overflow: auto;
}

.trade-terminal-page .watch-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 13px 12px;
    border-radius: 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: transparent;
    transition: background 140ms ease, transform 140ms ease;
}

.trade-terminal-page .watch-item:hover {
    background: rgba(255, 255, 255, 0.025);
}

.trade-terminal-page .watch-item.active {
    background: linear-gradient(90deg, rgba(40, 77, 146, 0.24), rgba(23, 33, 49, 0.18));
    box-shadow: inset 2px 0 0 #4f89ff;
}

.trade-terminal-page .watch-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trade-terminal-page .watch-logo .crypto-logo {
    border-radius: 50%;
    display: block;
}

.trade-terminal-page .watch-star {
    display: none;
    color: #555d6b;
    font-size: 12px;
    text-align: center;
}

.trade-terminal-page .watch-left,
.trade-terminal-page .watch-right {
    display: grid;
    gap: 4px;
}

.trade-terminal-page .watch-left strong,
.trade-terminal-page .watch-right strong {
    font-size: 13px;
    color: #ffffff;
}

.trade-terminal-page .watch-left strong span {
    margin-left: 4px;
    color: #737b89;
    font-size: 11px;
    font-weight: 500;
}

.trade-terminal-page .watch-left span,
.trade-terminal-page .watch-right span {
    font-size: 11px;
    color: #808897;
}

.trade-terminal-page .watch-right {
    text-align: right;
    font-variant-numeric: lining-nums tabular-nums;
}

.trade-terminal-page .watch-right .positive {
    color: #1fd18d;
}

.trade-terminal-page .watch-right .negative {
    color: #ff6b7b;
}

.trade-terminal-page .chart-inline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    min-height: 48px;
    padding: 10px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(180deg, rgba(14, 16, 21, 0.98), rgba(11, 12, 17, 0.98));
}

.trade-terminal-page .chart-inline-main {
    display: grid;
    gap: 6px;
}

.trade-terminal-page .chart-symbol-row,
.trade-terminal-page .chart-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-variant-numeric: lining-nums tabular-nums;
}

.trade-terminal-page .chart-symbol-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trade-terminal-page .chart-symbol-logo .crypto-logo {
    border-radius: 50%;
}

.trade-terminal-page .chart-symbol {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.trade-terminal-page .chart-interval-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    background: rgba(60, 125, 255, 0.22);
    color: #8ab6ff;
    font-size: 10px;
}

.trade-terminal-page .chart-mark-inline {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.trade-terminal-page .chart-change {
    margin-top: 0;
    font-size: 11px;
}

.trade-terminal-page .chart-spread-inline,
.trade-terminal-page .chart-meta {
    color: #a7b0c2;
    font-size: 12px;
    font-weight: 500;
    /* A line of mixed Arabic and Latin segments: its direction comes from its
       first strong character, so Arabic reads right to left and English left
       to right, instead of both being forced into the terminal's LTR frame. */
    unicode-bidi: plaintext;
    text-align: start;
}

.trade-terminal-page .chart-meta {
    padding: 7px 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.04);
    line-height: 1.4;
    max-width: 560px;
    text-align: right;
}

.trade-terminal-page .chart-shell {
    position: relative;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0;
    padding: 0;
    /* Its height comes from the fitted frame above 980px, and from the
       stacked-layout block (max-width: 980px) below it. */
}

.trade-terminal-page .chart-side-tools {
    gap: 0;
    padding: 6px 0;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(16, 17, 22, 0.98), rgba(12, 13, 17, 0.98));
}

.trade-terminal-page .chart-tool {
    position: relative;
    min-width: 34px;
    min-height: 40px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: transparent;
    color: #a7afc0;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.trade-terminal-page .chart-tool span,
.trade-terminal-page .icon-btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.trade-terminal-page .chart-tool.active,
.trade-terminal-page .chart-tool:hover {
    background: #173258;
    color: #9ec4ff;
}

.trade-terminal-page .chart-tool.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #3f85ff;
}

.trade-terminal-page .chart-board {
    border-radius: 0;
    border: 0;
    background: #090a0d;
}

.trade-terminal-page .chart-tool-drawer {
    position: absolute;
    top: 0;
    left: 34px;
    bottom: 0;
    width: 260px;
    display: grid;
    grid-template-rows: auto 1fr;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: #1a1c21;
    z-index: 6;
}

.trade-terminal-page .chart-tool-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trade-terminal-page .chart-tool-drawer-copy {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trade-terminal-page .chart-tool-drawer-copy strong {
    font-size: 13px;
    color: #f5f7fd;
}

.trade-terminal-page .chart-tool-drawer-copy span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: #8f97a7;
    font-size: 11px;
}

.trade-terminal-page .chart-tool-drawer-body {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 10px 10px 12px;
    overflow: auto;
}

.trade-terminal-page .chart-tool-drawer-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: #212329;
    color: #e8ecf5;
    text-align: left;
    box-shadow: none;
}

.trade-terminal-page .chart-tool-drawer-item.active {
    border-color: rgba(66, 127, 255, 0.32);
    background: #2a2e37;
}

.trade-terminal-page .chart-tool-drawer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: #32353d;
    color: #eef2fb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.trade-terminal-page .chart-tool-drawer-item.active .chart-tool-drawer-icon {
    background: rgba(66, 127, 255, 0.22);
    color: #8eb8ff;
}

.trade-terminal-page .chart-tool-drawer-copy-block {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.trade-terminal-page .chart-tool-drawer-label {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trade-terminal-page .chart-tool-drawer-hotkey {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: #9ba4b6;
    font-size: 10px;
}

.trade-terminal-page .chart-platform-toolbar {
    min-height: 42px;
    padding: 0 10px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(180deg, rgba(14, 16, 21, 0.98), rgba(11, 12, 17, 0.98));
}

.trade-terminal-page .chart-platform-left {
    gap: 0;
}

.trade-terminal-page .interval-switch {
    gap: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    /* The timeframes are the toolbar's primary control and must stay one row.
       They were the item that gave way when the toolbar was short of room:
       squeezed to 183px at 1366 they wrapped 3+3, doubling the toolbar to
       85px and taking that height from the chart (on a wider screen they
       broke 5+1, leaving 1D on a row of its own). The feature tab bar beside
       them is the one built to give way - min-width:0 and overflow-x:auto. */
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.trade-terminal-page .interval-btn,
.trade-terminal-page .feature-tabbar-toolbar .feature-tab,
.trade-terminal-page .toolbar-chip-icon,
.trade-terminal-page .icon-btn,
.trade-terminal-page .chip-btn {
    min-height: 42px;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: #c2c8d7;
}

.trade-terminal-page .interval-btn {
    min-width: 40px;
    padding: 0 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 700;
}

.trade-terminal-page .interval-btn.active {
    background: rgba(36, 83, 170, 0.38);
    color: #8fb7ff;
}

.trade-terminal-page .interval-btn:hover,
.trade-terminal-page .feature-tabbar-toolbar .feature-tab:hover,
.trade-terminal-page .toolbar-chip-icon:hover,
.trade-terminal-page .icon-btn:hover {
    background: #151920;
    color: #ffffff;
}

.trade-terminal-page .chart-toolbar-shortcuts {
    margin-left: 0;
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.trade-terminal-page .toolbar-chip-icon {
    min-width: 36px;
}

.trade-terminal-page .toolbar-chip-icon.active {
    background: rgba(36, 83, 170, 0.38);
    color: #8fb7ff;
}

.trade-terminal-page .feature-tabbar-toolbar .feature-tab {
    min-height: 42px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
}

.trade-terminal-page .chart-platform-right {
    gap: 0;
}

.trade-terminal-page .chip-btn {
    min-height: 34px;
    margin-right: 8px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    background: #16191f;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    font-weight: 700;
}

.trade-terminal-page .icon-btn {
    min-width: 32px;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.trade-terminal-page .chart-subtoolbar {
    display: none;
}

.trade-terminal-page .chart-stage {
    /* 0, not removed: the unscoped .chart-stage further up sets 620px, and
       this rule is what keeps that from reasserting itself. */
    min-height: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at top center, rgba(80, 112, 195, 0.05), transparent 24%),
        linear-gradient(180deg, #090a0d, #07080b);
}

.trade-terminal-page .indicator-panels {
    padding: 0 10px 10px;
    background: #090a0d;
}

.trade-terminal-page .indicator-drawer {
    top: 38px;
    left: 0;
    bottom: 0;
    width: 320px;
    /* The list is the point of this drawer, yet its row was a bare 1fr with
       no floor: in the 240px the drawer has at 1280x720, the head, search,
       filter chips and settings took everything and the list got 10px - no
       indicator visible at all - while the settings block spilled out of the
       bottom. The list now keeps a usable 160px, and when the drawer is
       shorter than its rows need, the drawer itself scrolls. */
    grid-template-rows: auto auto auto minmax(160px, 1fr) auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: #16181d;
}

.trade-terminal-page .indicator-browser {
    padding: 10px 2px 0 0;
}

.trade-terminal-page .feature-overview {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.trade-terminal-page .feature-overview.patterns,
.trade-terminal-page .feature-overview.signals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trade-terminal-page .feature-overview.divergence {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trade-terminal-page .feature-stat-card {
    display: grid;
    gap: 4px;
    padding: 10px 10px 9px;
    border-radius: var(--radius-md);
    background: #202228;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.trade-terminal-page .feature-stat-card span {
    color: #8d95a5;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.trade-terminal-page .feature-stat-card strong {
    color: #f6f8fd;
    font-size: 20px;
    line-height: 1;
}

.trade-terminal-page .feature-stat-card.bullish strong,
.trade-terminal-page .mtf-summary-pills .positive {
    color: #3cd283;
}

.trade-terminal-page .feature-stat-card.bearish strong,
.trade-terminal-page .mtf-summary-pills .negative {
    color: #ff6b7b;
}

.trade-terminal-page .feature-stat-card.neutral strong,
.trade-terminal-page .feature-stat-card.regular strong,
.trade-terminal-page .feature-stat-card.hidden strong,
.trade-terminal-page .mtf-summary-pills .neutral {
    color: #8eb6ff;
}

.trade-terminal-page .feature-filter-row,
.trade-terminal-page .feature-filter-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.trade-terminal-page .feature-filter-chip {
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #202228;
    color: #dce2ef;
    font-size: 11px;
    box-shadow: none;
}

.trade-terminal-page .feature-filter-chip.wide {
    min-width: 120px;
}

.trade-terminal-page .feature-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 24px 16px;
    border-radius: var(--radius-md);
    background: #1a1c21;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.trade-terminal-page .feature-empty-state strong {
    color: #eef2fb;
    font-size: 18px;
}

.trade-terminal-page .feature-empty-state span {
    color: #8a92a1;
    font-size: 12px;
}

.trade-terminal-page .feature-empty-links {
    display: grid;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.trade-terminal-page .feature-empty-link {
    min-height: 30px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: #252830;
    color: #d9deea;
    font-size: 11px;
    text-align: left;
    padding: 0 12px;
    box-shadow: none;
}

.trade-terminal-page .mtf-overview-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: #1d2026;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 10px;
}

.trade-terminal-page .mtf-overview-card strong {
    color: #f7f9fd;
    font-size: 15px;
}

.trade-terminal-page .mtf-overview-card span,
.trade-terminal-page .mtf-overview-score span {
    color: #8a92a1;
    font-size: 11px;
}

.trade-terminal-page .mtf-overview-score {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.trade-terminal-page .mtf-overview-score strong {
    color: #ffc53d;
    font-size: 24px;
}

.trade-terminal-page .terminal-top-right {
    position: relative;
}

.trade-terminal-page .terminal-window-glyph-btn,
.trade-terminal-page .terminal-avatar-btn {
    width: 52px;
    height: 46px;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.trade-terminal-page .terminal-window-glyph-btn .terminal-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.trade-terminal-page .terminal-svg-icon svg,
.trade-terminal-page .chart-svg-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trade-terminal-page .avatar-svg-icon svg {
    width: 20px;
    height: 20px;
}

.trade-terminal-page .terminal-window-btn.active,
.trade-terminal-page .terminal-window-btn:hover {
    background: #171920;
    color: #f5f7fd;
}

.trade-terminal-page.scalping-layout .trade-layout {
    grid-template-columns: 0 minmax(0, 1fr) 340px;
}

.trade-terminal-page.scalping-layout .watchlist-panel {
    display: none;
}

.trade-terminal-page.lite-layout .trade-layout {
    grid-template-columns: 250px minmax(0, 1fr) 340px;
}

.trade-terminal-page .terminal-popover[hidden],
.trade-terminal-page .terminal-modal-shell[hidden] {
    display: none !important;
}

.trade-terminal-page .terminal-popover {
    position: fixed;
    z-index: 40;
    width: 230px;
    padding: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    background: #111214;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}

.trade-terminal-page .terminal-popover-title {
    padding: 0 16px 10px;
    color: #7b8290;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trade-terminal-page .terminal-popover-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: transparent;
    color: #d6dbe7;
    font-size: 15px;
    text-align: left;
    box-shadow: none;
}

.trade-terminal-page .terminal-popover-item:first-of-type {
    border-top: 0;
}

.trade-terminal-page .terminal-popover-item:hover,
.trade-terminal-page .terminal-popover-item.active {
    background: #171a20;
    color: #ffffff;
}

.trade-terminal-page .terminal-popover-save {
    color: #e9edf8;
}

.trade-terminal-page .terminal-modal-shell {
    position: fixed;
    inset: 0;
    /* Was 45, under the app header's --z-nav (300): the top 60px of both the
       settings dialog and the pattern library slid beneath the header, the
       library's own title was cut off, and the header's links stayed live
       above the open dialog's scrim. The design system's modal layer. */
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
}

.trade-terminal-page .terminal-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(2px);
}

.trade-terminal-page .terminal-settings-modal {
    position: relative;
    z-index: 1;
    width: min(100%, 640px);
    max-height: 88vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #131417, #111215);
    box-shadow: 0 36px 100px rgba(0, 0, 0, 0.55);
}

.trade-terminal-page .terminal-settings-head,
.trade-terminal-page .terminal-settings-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trade-terminal-page .terminal-settings-foot {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 0;
}

.trade-terminal-page .terminal-settings-head strong {
    color: #ffffff;
    font-size: 24px;
}

.trade-terminal-page .terminal-modal-close {
    min-width: 36px;
    min-height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #1d1f25;
}

.trade-terminal-page .terminal-settings-body {
    overflow: auto;
    padding: 14px 22px 20px;
    display: grid;
    gap: 14px;
}

.trade-terminal-page .terminal-settings-group {
    display: grid;
    gap: 12px;
    padding: 16px 16px 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.trade-terminal-page .terminal-settings-group:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.trade-terminal-page .terminal-settings-group-title {
    color: #7b8291;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.trade-terminal-page .terminal-setting-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.trade-terminal-page .terminal-setting-row > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 8px;
}

.trade-terminal-page .terminal-setting-row:first-of-type {
    border-top: 0;
    padding-top: 4px;
}

.trade-terminal-page .terminal-setting-row strong {
    display: block;
    color: #f2f5fb;
    font-size: 15px;
    font-weight: 600;
}

.trade-terminal-page .terminal-setting-row span {
    display: block;
    margin-top: 3px;
    color: var(--text-faint);   /* was #727988, under 4.5:1 on the dialog */
    font-size: 12px;
    line-height: 1.45;
}

.trade-terminal-page .terminal-setting-row input[type="checkbox"] {
    appearance: none;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: #1c1e24;
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    cursor: pointer;
}

.trade-terminal-page .terminal-setting-row input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f1f4fb;
    transition: transform 0.2s ease;
}

.trade-terminal-page .terminal-setting-row input[type="checkbox"]:checked {
    background: #3c7dff;
}

.trade-terminal-page .terminal-setting-row input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}

.trade-terminal-page .terminal-setting-select select {
    flex: 0 0 auto;
    /* flex:0 0 auto takes its basis from width, and width came from the bare
       `input, select { width: 100% }` rule - so the select asked for the whole
       row, squeezed "Default Order Type" to one word per line and still ran
       9px past the card's edge. */
    width: auto;
    min-width: 156px;
    min-height: 38px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #1a1c21;
    color: #f4f7ff;
    padding: 0 12px;
}

.trade-terminal-page .terminal-setting-action .button-soft,
.trade-terminal-page .terminal-settings-foot .button-soft,
.trade-terminal-page .terminal-settings-foot .button-primary {
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    box-shadow: none;
}

.trade-terminal-page .terminal-settings-foot {
    gap: 12px;
}

.trade-terminal-page .terminal-settings-foot .terminal-muted-btn {
    margin-right: auto;
}

.trade-terminal-page .feature-filter-chip.active,
.trade-terminal-page .mtf-card.active {
    border-color: rgba(66, 127, 255, 0.34);
    background: rgba(66, 127, 255, 0.16);
    color: #9ec4ff;
}


.trade-terminal-page .terminal-muted-btn {
    background: #15171b;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

.trade-terminal-page .button-primary {
    border: 0;
    /* White on #3c7dff measured 3.77:1 on the settings dialog's Done button.
       The design system's primary pair instead: accent fill, on-accent ink. */
    background: var(--accent);
    color: var(--text-on-accent);
}

.trade-terminal-page .terminal-pattern-shell {
    place-items: stretch;
}

.trade-terminal-page .pattern-library-modal {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    width: calc(100vw - 36px);
    height: calc(100vh - 36px);
    margin: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    background: #16171a;
    box-shadow: 0 36px 100px rgba(0, 0, 0, 0.55);
}

.trade-terminal-page .pattern-library-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trade-terminal-page .pattern-library-head-copy {
    display: flex;
    align-items: center;
    gap: 14px;
}

.trade-terminal-page .pattern-library-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: rgba(255, 152, 32, 0.14);
    color: #ff9d25;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.trade-terminal-page .pattern-library-head-copy strong {
    display: block;
    color: #f7f9fd;
    font-size: 18px;
}

.trade-terminal-page .pattern-library-head-copy span {
    display: block;
    margin-top: 3px;
    color: #8b92a1;
    font-size: 13px;
}

.trade-terminal-page .pattern-library-stats {
    display: flex;
    gap: 20px;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: #1d1f24;
    color: #b1b8c7;
    font-size: 13px;
}

.trade-terminal-page .pattern-library-stats strong {
    color: #f9fbff;
}

.trade-terminal-page .pattern-library-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.trade-terminal-page .pattern-library-search input {
    min-height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #212329;
    color: #f4f6fb;
}

.trade-terminal-page .pattern-library-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trade-terminal-page .pattern-filter-chip {
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    border: 0;
    background: #2a2c31;
    color: #dadfea;
    box-shadow: none;
}

.trade-terminal-page .pattern-filter-chip.active {
    background: #ff9d25;
    /* White on this orange measured 2.08:1. The library's orange stays; the
       label takes the dark on-accent ink (9.2:1). */
    color: var(--text-on-accent);
}

.trade-terminal-page .pattern-library-body {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 0;
}

.trade-terminal-page .pattern-library-list {
    overflow: auto;
    padding: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    background: #15171b;
}

.trade-terminal-page .pattern-library-card {
    display: grid;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
    padding: 14px 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #24262c;
    color: #f5f7fd;
    text-align: left;
    box-shadow: none;
}

.trade-terminal-page .pattern-library-card.active {
    border-color: #ff9d25;
    box-shadow: inset 0 0 0 1px rgba(255, 157, 37, 0.24);
}

.trade-terminal-page .pattern-library-card-head,
.trade-terminal-page .pattern-library-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.trade-terminal-page .pattern-library-card-head strong {
    font-size: 14px;
}

.trade-terminal-page .pattern-library-card-meta {
    color: #8b92a1;
    font-size: 12px;
    text-transform: lowercase;
}

.trade-terminal-page .pattern-library-card-preview,
.trade-terminal-page .pattern-library-preview-card {
    border-radius: var(--radius-md);
    background: #2a2c31;
}

.trade-terminal-page .pattern-library-card-preview {
    padding: 10px;
}

.trade-terminal-page .pattern-preview-canvas {
    position: relative;
    height: 70px;
}

.trade-terminal-page .pattern-preview-canvas.large {
    height: 140px;
}

.trade-terminal-page .pattern-preview-bar {
    position: absolute;
    bottom: 10px;
    width: 10px;
    border-radius: var(--radius-xs) var(--radius-xs) 2px 2px;
}

.trade-terminal-page .pattern-preview-bar.bull {
    background: #2cd17f;
}

.trade-terminal-page .pattern-preview-bar.bear {
    background: #ff5b67;
}

.trade-terminal-page .pattern-library-detail {
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
    gap: 16px;
    overflow: auto;
    padding: 24px 28px;
}

.trade-terminal-page .pattern-library-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trade-terminal-page .pattern-library-detail-head h2 {
    margin: 0;
    font-size: 22px;
    color: #f9fbff;
}

.trade-terminal-page .pattern-library-bias {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 700;
}

.trade-terminal-page .pattern-library-bias.bullish {
    background: rgba(44, 209, 127, 0.12);
    color: #2cd17f;
}

.trade-terminal-page .pattern-library-bias.bearish {
    background: rgba(255, 91, 103, 0.12);
    color: #ff5b67;
}

.trade-terminal-page .pattern-library-description {
    margin: 0;
    color: #a0a8b7;
    font-size: 14px;
    line-height: 1.6;
}

.trade-terminal-page .pattern-library-preview-card {
    padding: 16px 20px;
}

.trade-terminal-page .pattern-library-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.trade-terminal-page .pattern-library-metric-card,
.trade-terminal-page .pattern-library-copy-card {
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: #24262c;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.trade-terminal-page .pattern-library-metric-card span {
    display: block;
    color: #8c94a3;
    font-size: 12px;
    text-transform: lowercase;
}

.trade-terminal-page .pattern-library-metric-card strong {
    display: block;
    margin-top: 8px;
    color: #ffffff;
    font-size: 18px;
}

.trade-terminal-page .pattern-library-copy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.trade-terminal-page .pattern-library-copy-card strong {
    display: block;
    margin-bottom: 12px;
    color: #f6f8fd;
    font-size: 18px;
}

.trade-terminal-page .pattern-library-copy-card ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0 0 0 18px;
    color: #c2c8d6;
}

.trade-terminal-page .pattern-library-empty {
    padding: 18px 12px;
    color: #828998;
    font-size: 14px;
}

.trade-terminal-page .mtf-summary-pills {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.trade-terminal-page .mtf-summary-pills span {
    min-width: 34px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: #20242b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.trade-terminal-page .mtf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.trade-terminal-page .mtf-card {
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-md);
    background: #1e2128;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: left;
    box-shadow: none;
}

.trade-terminal-page .mtf-card-head,
.trade-terminal-page .mtf-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.trade-terminal-page .mtf-card-head strong {
    color: #ffffff;
    font-size: 14px;
}

.trade-terminal-page .mtf-card-head span,
.trade-terminal-page .mtf-card-foot em {
    font-size: 11px;
    font-style: normal;
}

.trade-terminal-page .mtf-card.positive .mtf-card-head span {
    color: #3cd283;
}

.trade-terminal-page .mtf-card.negative .mtf-card-head span {
    color: #ff6b7b;
}

.trade-terminal-page .mtf-card-chart {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: end;
    gap: 3px;
    height: 44px;
}

.trade-terminal-page .mtf-card-chart span {
    display: block;
    border-radius: var(--radius-pill) var(--radius-pill) 0 0;
    background: linear-gradient(180deg, rgba(255, 110, 130, 0.95), rgba(39, 211, 121, 0.95));
}

.trade-terminal-page .mtf-card-chart span:nth-child(1) { height: 14px; }
.trade-terminal-page .mtf-card-chart span:nth-child(2) { height: 28px; }
.trade-terminal-page .mtf-card-chart span:nth-child(3) { height: 20px; }
.trade-terminal-page .mtf-card-chart span:nth-child(4) { height: 32px; }
.trade-terminal-page .mtf-card-chart span:nth-child(5) { height: 18px; }
.trade-terminal-page .mtf-card-chart span:nth-child(6) { height: 26px; }

.trade-terminal-page .mtf-strength {
    width: 100%;
    height: 4px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-right: 8px;
}

.trade-terminal-page .mtf-strength i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff6b7b, #3cd283);
}

.trade-terminal-page .trade-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: #f4f7ff;
    background: rgba(255, 255, 255, 0.015);
}

.trade-terminal-page .trade-box-head-actions {
    display: flex;
    align-items: center;
    gap: 0;
}

.trade-terminal-page .trade-head-btn {
    min-width: 28px;
    min-height: 26px;
    border-left: 0;
    color: #8890a1;
}


.trade-terminal-page .trade-balance-row,
.trade-terminal-page .trade-order-type-tabs,
.trade-terminal-page .trade-percent-row,
.trade-terminal-page .trade-summary-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 0;
}





.trade-terminal-page .trade-mode-panel {
    display: grid;
    gap: 0;
}

.trade-terminal-page .trade-mode-panel[hidden] {
    display: none;
}

.trade-terminal-page .trade-tabs-terminal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
}

.trade-terminal-page .trade-tabs-terminal .trade-tab {
    min-height: 40px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: #121418;
    color: #d8deea;
    font-size: 13px;
    font-weight: 700;
}

/* White on these fills measured 2.42:1 on buy and 3.82:1 on sell, at 13px -
   below the 4.5:1 that size needs. The fills are the brand's and stay; the
   label takes the dark on-accent ink instead (7.9:1 and 5.0:1), the same
   answer the shared .btn--danger already uses. */
.trade-terminal-page .trade-tabs-terminal .trade-tab.active[data-side="buy"] {
    background: #1bbf67;
    color: var(--text-on-accent);
}

.trade-terminal-page .trade-tabs-terminal .trade-tab.active[data-side="sell"] {
    background: #e04f6a;
    color: var(--text-on-accent);
}

.trade-terminal-page .trade-hidden-control {
    display: none;
}

.trade-terminal-page .trade-balance-row {
    justify-content: space-between;
    color: #7d8594;
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 12px;
}

.trade-terminal-page .trade-balance-row strong {
    color: #f7f9fd;
    font-size: 14px;
    font-variant-numeric: lining-nums tabular-nums;
}

.trade-terminal-page .trade-balance-row small {
    color: #7d8594;
    font-size: 10px;
}

.trade-terminal-page .section-head-inline .muted {
    padding: 4px 8px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    font-size: 11px;
}

.trade-terminal-page .trade-order-type-tabs {
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 2px;
}

.trade-terminal-page.simple-forex-panel .trade-order-type-tabs {
    display: none;
}

.trade-terminal-page .order-type-chip,
.trade-terminal-page .trade-percent-btn {
    flex: 1 1 0;
    min-height: 30px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #16181c;
    color: #c8cede;
    font-size: 11px;
    font-weight: 700;
    box-shadow: none;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.trade-terminal-page .order-type-chip.active {
    background: rgba(66, 127, 255, 0.22);
    color: #8ab6ff;
}

.trade-terminal-page .order-type-chip:hover,
.trade-terminal-page .trade-percent-btn:hover {
    background: #1c1f25;
    color: #ffffff;
}

.trade-terminal-page .trade-field {
    margin: 12px 14px 0;
    position: relative;
}

.trade-terminal-page .trade-field label {
    color: #7c8391;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.trade-terminal-page .trade-field input,
.trade-terminal-page .trade-field select {
    min-height: 40px;
    width: 100%;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #15181d;
    color: #ffffff;
    font-variant-numeric: lining-nums tabular-nums;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.trade-terminal-page .trade-field input:focus,
.trade-terminal-page .trade-field select:focus {
    outline: none;
    border-color: rgba(66, 127, 255, 0.34);
    box-shadow: 0 0 0 1px rgba(66, 127, 255, 0.16);
}

.trade-terminal-page .trade-field input[readonly] {
    color: #f0f4ff;
}

.trade-terminal-page .trade-field-hint {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
    color: #3d84ff;
    font-size: 11px;
}

.trade-terminal-page #trade_size_preview {
    width: 100%;
    text-align: left;
    color: #8a96ae;
    letter-spacing: 0.01em;
}

.trade-terminal-page .trade-amount-suffix {
    position: absolute;
    right: 12px;
    bottom: 11px;
    color: #747c8d;
    font-size: 11px;
    pointer-events: none;
}

/* ── Input Group (value + unit) ── */
.trade-terminal-page .trade-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.trade-terminal-page .trade-input-group input {
    min-height: 40px;
    width: 100%;
    padding: 0 52px 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #15181d;
    color: #ffffff;
    font-variant-numeric: lining-nums tabular-nums;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.trade-terminal-page .trade-input-group input:focus {
    outline: none;
    border-color: rgba(66, 127, 255, 0.34);
    box-shadow: 0 0 0 1px rgba(66, 127, 255, 0.16);
}

.trade-terminal-page .trade-input-unit {
    position: absolute;
    right: 12px;
    color: var(--text-faint);   /* was #5a6275, 3.18:1 */
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    pointer-events: none;
}

/* ── Amount Header with Toggle ── */
.trade-terminal-page .trade-amount-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.trade-terminal-page .trade-amount-toggle {
    display: flex;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.trade-terminal-page .amount-unit-btn {
    padding: 3px 10px;
    background: transparent;
    color: var(--text-faint);   /* was #6b7280, 4.02:1 */
    font-size: 10px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 140ms ease;
    letter-spacing: 0.04em;
}

.trade-terminal-page .amount-unit-btn.active {
    background: rgba(66, 127, 255, 0.2);
    color: #8ab6ff;
}

.trade-terminal-page .amount-unit-btn:hover:not(.active) {
    color: #c8cede;
}

/* ── Percentage Slider ── */
.trade-terminal-page .trade-slider-row {
    padding: 6px 14px 0;
}

.trade-terminal-page .trade-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: var(--radius-xs);
    background: linear-gradient(to right, rgba(66, 127, 255, 0.5) 0%, rgba(66, 127, 255, 0.5) 0%, #1e2128 0%, #1e2128 100%);
    outline: none;
    cursor: pointer;
}

.trade-terminal-page .trade-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3f85ff;
    border: 2px solid #0d1117;
    box-shadow: 0 0 6px rgba(66, 127, 255, 0.5);
    cursor: pointer;
    transition: transform 100ms ease;
}

.trade-terminal-page .trade-range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.trade-terminal-page .trade-range-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3f85ff;
    border: 2px solid #0d1117;
    box-shadow: 0 0 6px rgba(66, 127, 255, 0.5);
    cursor: pointer;
}

.trade-terminal-page .trade-slider-marks {
    display: flex;
    justify-content: space-between;
    padding-top: 4px;
}

.trade-terminal-page .trade-slider-marks span {
    color: var(--text-faint);   /* was #4b5263, 2.49:1 */
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    transition: color 120ms ease;
}

.trade-terminal-page .trade-slider-marks span:hover {
    color: #8ab6ff;
}

/* ── Risk Management Section ── */
.trade-terminal-page .trade-risk-section {
    margin: 8px 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 8px;
}

.trade-terminal-page .trade-risk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.trade-terminal-page .trade-risk-header label {
    color: #7c8391;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.trade-terminal-page .trade-risk-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    /* The shared button rule sets padding:0 14px and min-height:38px. Against
       a declared 24px width under border-box that padding is wider than the
       button itself, so the content box collapsed to zero - and the global
       `svg { max-width: 100% }` then resolved to zero too, which is why this
       control rendered as an empty square with no chevron in it. */
    padding: 0;
    min-height: 0;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 140ms ease;
}

.trade-terminal-page .trade-risk-toggle svg {
    flex: 0 0 auto;
    inline-size: 12px;
    block-size: 12px;
}

.trade-terminal-page .trade-risk-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #c8cede;
}

.trade-terminal-page .trade-risk-toggle.open svg {
    transform: rotate(180deg);
}

.trade-terminal-page .trade-risk-fields {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 250ms ease, opacity 200ms ease;
}

.trade-terminal-page .trade-risk-fields.open {
    max-height: 200px;
    opacity: 1;
}

.trade-terminal-page .trade-risk-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 8px;
}

.trade-terminal-page .trade-risk-field {
    margin: 0 !important;
}

.trade-terminal-page .trade-risk-field label {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Order Summary ── */
.trade-terminal-page .trade-order-summary {
    margin: 10px 14px 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.trade-terminal-page .trade-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    color: #8a92a6;
    font-size: 11px;
}

.trade-terminal-page .trade-summary-line + .trade-summary-line {
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.trade-terminal-page .trade-summary-line strong {
    color: #f0f4ff;
    font-size: 12px;
}

/* ── Submit button icon ── */
.trade-terminal-page .trade-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ── Save template ── */
.trade-terminal-page .save-tpl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.trade-terminal-page .trade-risk-grid {
    gap: 0;
    margin-top: 0;
}

.trade-terminal-page .trade-summary-row {
    justify-content: space-between;
    padding-top: 12px;
    padding-bottom: 4px;
    color: #cbd0db;
    font-size: 12px;
    font-variant-numeric: lining-nums tabular-nums;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.trade-terminal-page .trade-submit {
    width: calc(100% - 28px);
    min-height: 42px;
    margin: 16px 14px 18px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    transition: transform 140ms ease, filter 140ms ease;
}

.trade-terminal-page .trade-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.trade-terminal-page .trade-submit.buy {
    background: linear-gradient(180deg, #22b868, #188a4d);
}

.trade-terminal-page .trade-submit.sell {
    background: linear-gradient(180deg, #d34d67, #a83c52);
}

.trade-terminal-page .danger-soft {
    border-color: rgba(214, 84, 114, 0.45);
    color: #f1b8c5;
}

.trade-terminal-page .danger-soft:hover {
    background: rgba(214, 84, 114, 0.16);
    color: #ffd7e1;
}


































.trade-terminal-page .terminal-orders-panel {
    border-top: 1px solid rgba(117, 146, 255, 0.16);
    background: linear-gradient(180deg, rgba(13, 20, 36, 0.96), rgba(10, 16, 28, 0.96));
    /* Was a fixed 160px at every size, so even a 1080px or 1440px screen showed
       no position row without scrolling inside it. A share of the height now,
       never below what it had and capped before it starves the chart.
       .orders-collapsed above still overrides this when the panel is folded. */
    height: clamp(160px, 26vh, 320px);
    flex-shrink: 0;
    border-radius: 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.trade-terminal-page .terminal-orders-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(117, 146, 255, 0.14);
    background: linear-gradient(90deg, rgba(114, 147, 255, 0.04), transparent 40%);
    flex-shrink: 0;
}

.trade-terminal-page .terminal-orders-title strong {
    font-size: 11px;
    /* The heading now comes from the catalogue ("Orders" / "الأوامر"); the
       capitals it had as a literal are kept as styling, which Arabic ignores. */
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold-bright);
}

.trade-terminal-page .terminal-orders-controls,
.trade-terminal-page .terminal-orders-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.trade-terminal-page .terminal-orders-actions {
    display: flex;
    align-items: center;
    margin-left: 4px;
}

.trade-terminal-page .terminal-orders-btn {
    min-width: 24px;
    min-height: 24px;
    border-left: 0;
    color: var(--muted);
}

.trade-terminal-page #close_chart_tool_drawer,
.trade-terminal-page #close_indicator_panel {
    min-width: 28px;
    min-height: 28px;
    border-left: 0;
    border-radius: var(--radius-md);
    background: #212329;
    color: #a8b0c1;
}

.trade-terminal-page .terminal-orders-select {
    /* A compact filter, not a form field. Without this it inherited
       width:100% from the bare `input, select` rule near the top of this
       sheet, so the two filters stacked full-width and the panel head grew
       to 95px of its 160 - leaving 64px for the positions table, which at
       1366x768 showed no position rows at all. */
    width: auto;
    max-width: 200px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(117, 146, 255, 0.18);
    background: rgba(117, 146, 255, 0.05);
    color: rgba(244, 247, 255, 0.78);
    font-size: 11px;
    outline: none;
    cursor: pointer;
    transition: all 0.15s;
}

.trade-terminal-page .terminal-orders-select option {
    background: var(--bg-soft);
    color: var(--text);
}

.trade-terminal-page .terminal-orders-tab {
    min-height: 26px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: rgba(244, 247, 255, 0.42);
    font-size: 11px;
    font-weight: 700;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.trade-terminal-page .terminal-orders-tab:hover,
.trade-terminal-page .terminal-orders-select:focus {
    border-color: rgba(117, 146, 255, 0.28);
    background: rgba(117, 146, 255, 0.08);
    color: rgba(244, 247, 255, 0.88);
}

.trade-terminal-page .terminal-orders-tab.active {
    background: rgba(117, 146, 255, 0.14);
    border-color: rgba(117, 146, 255, 0.36);
    color: var(--gold);
    box-shadow: 0 0 8px rgba(117, 146, 255, 0.14);
}

.trade-terminal-page .terminal-orders-body {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: rgba(10, 16, 28, 0.65);
}

.trade-terminal-page .terminal-open-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 10px;
}

.trade-terminal-page .terminal-open-summary-card {
    display: grid;
    gap: 2px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(13, 20, 36, 0.92), rgba(10, 16, 28, 0.92));
    border: 1px solid rgba(117, 146, 255, 0.14);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.trade-terminal-page .terminal-open-summary-card span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.trade-terminal-page .terminal-open-summary-card strong {
    color: var(--text);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.trade-terminal-page .terminal-position-table {
    padding: 0 0 12px;
}

.trade-terminal-page .terminal-position-row {
    grid-template-columns: 60px 120px 80px 100px 120px 120px 120px 120px;
}

.trade-terminal-page .terminal-close-position-btn {
    min-height: 22px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 107, 123, 0.3);
    background: rgba(255, 107, 123, 0.1);
    color: var(--red);
    box-shadow: none;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
}

.trade-terminal-page .terminal-close-position-btn:hover {
    background: rgba(255, 107, 123, 0.2);
    border-color: rgba(255, 107, 123, 0.4);
    color: #fff;
    box-shadow: 0 0 8px rgba(255, 107, 123, 0.15);
}

.trade-terminal-page .tick-up,
.trade-terminal-page .tick-down {
    transition: color 160ms ease, transform 160ms ease, text-shadow 160ms ease;
}

.trade-terminal-page .tick-up {
    color: #3cd283 !important;
    text-shadow: 0 0 10px rgba(60, 210, 131, 0.18);
    animation: terminal-tick-up 480ms ease;
}

.trade-terminal-page .tick-down {
    color: #ff6b7b !important;
    text-shadow: 0 0 10px rgba(255, 107, 123, 0.18);
    animation: terminal-tick-down 480ms ease;
}

@keyframes terminal-tick-up {
    0% { transform: translateY(2px); opacity: 0.72; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes terminal-tick-down {
    0% { transform: translateY(-2px); opacity: 0.72; }
    100% { transform: translateY(0); opacity: 1; }
}

.trade-terminal-page .terminal-orders-table {
    display: grid;
}

.trade-terminal-page .terminal-orders-row {
    display: grid;
    grid-template-columns: 56px 110px 72px 90px minmax(120px, 1fr) 110px 150px 110px;
    gap: 8px;
    align-items: center;
    min-height: 30px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(117, 146, 255, 0.06);
    font-size: 11px;
    color: rgba(244, 247, 255, 0.78);
    font-variant-numeric: lining-nums tabular-nums;
    transition: background 120ms ease;
}

.trade-terminal-page .terminal-orders-row:not(.terminal-orders-head-row):hover {
    background: rgba(117, 146, 255, 0.05);
}

.trade-terminal-page .terminal-orders-row span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trade-terminal-page .terminal-orders-head-row {
    color: rgba(244, 247, 255, 0.42);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: rgba(117, 146, 255, 0.06);
    font-weight: 700;
    min-height: 26px;
    border-bottom: 1px solid rgba(117, 146, 255, 0.14);
    position: sticky;
    top: 0;
    z-index: 2;
}

.trade-terminal-page .terminal-trades-row {
    grid-template-columns: 120px 140px 140px 180px;
}

.trade-terminal-page .terminal-orders-empty {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    height: 100%;
    color: rgba(244, 247, 255, 0.28);
    font-size: 11px;
    padding: 14px;
}

.trade-terminal-page .terminal-orders-empty strong {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-weight: 700;
}

.trade-terminal-page .response {
    font-variant-numeric: lining-nums tabular-nums;
}

.trade-terminal-page .chart-price-scale,
.trade-terminal-page .chart-axis,
.trade-terminal-page .ohlc-strip,
.trade-terminal-page .chart-crosshair-time,
.trade-terminal-page .chart-crosshair-price {
    font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 1200px) {
    .trade-terminal-page .trade-layout {
        grid-template-columns: 220px minmax(0, 1fr) 300px;
    }
}

@media (max-width: 980px) {
    .trade-terminal-page .terminal-top-strip {
        grid-template-columns: 1fr;
        align-items: flex-start;
        padding: 10px 12px;
    }

    .trade-terminal-page .trade-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "watch"
            "chart"
            "trade";
    }

    .trade-terminal-page .watchlist-panel,
    .trade-terminal-page .order-entry {
        border: 0;
    }

    .trade-terminal-page .watchlist-body {
        max-height: 280px;
    }

    .trade-terminal-page .chart-shell {
        grid-template-columns: 1fr;
    }

    /* Stacked, the page scrolls and the chart has no fitted height to take,
       so it keeps the height it always had here. Moved from the base rules,
       where it also applied above 980px and outgrew the fitted frame. */
    .trade-terminal-page .chart-shell,
    .trade-terminal-page .chart-stage {
        min-height: calc(100vh - 156px);
    }

    .trade-terminal-page .chart-side-tools {
        grid-auto-flow: column;
        grid-auto-columns: 38px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        overflow-x: auto;
    }
}

.trade-terminal-page.terminal-subpage .sidebar,
.trade-terminal-page.terminal-subpage .topbar {
    display: block !important;
}

.trade-terminal-page.terminal-subpage .app-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 100vh;
}

.trade-terminal-page.terminal-subpage .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 18px 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    background:
        linear-gradient(180deg, rgba(19, 20, 26, 0.98), rgba(10, 11, 15, 0.99)),
        radial-gradient(circle at top left, rgba(65, 118, 228, 0.12), transparent 32%);
}

.trade-terminal-page.terminal-subpage .brand {
    margin-bottom: 20px;
}

.trade-terminal-page.terminal-subpage .brand-mark {
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(35, 65, 122, 0.95), rgba(18, 36, 74, 0.95));
    border-color: rgba(97, 145, 255, 0.25);
    color: #dfe7fb;
}

.trade-terminal-page.terminal-subpage .brand-copy strong {
    color: #f4f7ff;
    font-size: 15px;
}

.trade-terminal-page.terminal-subpage .brand-copy span,
.trade-terminal-page.terminal-subpage .sidebar-label {
    color: #7f8796;
}

.trade-terminal-page.terminal-subpage .sidebar-nav {
    gap: 4px;
}

.trade-terminal-page.terminal-subpage .nav-link {
    min-height: 42px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: #c3cad9;
}

.trade-terminal-page.terminal-subpage .nav-link:hover,
.trade-terminal-page.terminal-subpage .nav-link.active {
    background: linear-gradient(180deg, rgba(28, 45, 76, 0.72), rgba(18, 26, 39, 0.72));
    border-color: rgba(96, 140, 255, 0.18);
    color: #f8fbff;
    box-shadow: inset 2px 0 0 #3f85ff;
}

.trade-terminal-page.terminal-subpage .sidebar-foot {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 16px;
}

.trade-terminal-page.terminal-subpage .terminal-page-main {
    min-height: 100vh;
    padding: 0 0 20px;
    background:
        radial-gradient(circle at top center, rgba(50, 88, 168, 0.08), transparent 28%),
        linear-gradient(180deg, #0a0b0f 0%, #090a0d 100%);
}

.trade-terminal-page.terminal-subpage .topbar {
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    min-height: 54px;
    margin: 0;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(31, 33, 39, 0.98), rgba(18, 19, 24, 0.98));
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

.trade-terminal-page.terminal-subpage .topbar > div:first-child {
    display: grid;
    gap: 4px;
}

.trade-terminal-page.terminal-subpage .page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.trade-terminal-page.terminal-subpage .page-subtitle {
    margin: 0;
    max-width: 760px;
    color: #97a0b0;
    font-size: 12px;
}

.trade-terminal-page.terminal-subpage .topbar-actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.trade-terminal-page.terminal-subpage .ghost-link,
.trade-terminal-page.terminal-subpage .pill,
.trade-terminal-page.terminal-subpage .action-link {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 0;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: #b9c2d3;
    box-shadow: none;
}

.trade-terminal-page.terminal-subpage .ghost-link:hover,
.trade-terminal-page.terminal-subpage .action-link:hover {
    background: #171a20;
    color: #ffffff;
}

.trade-terminal-page.terminal-subpage .content-grid,
.trade-terminal-page.terminal-subpage .stats-grid,
.trade-terminal-page.terminal-subpage .page-grid,
.trade-terminal-page.terminal-subpage .terminal-page-main > .section,
.trade-terminal-page.terminal-subpage .terminal-page-main > .panel {
    margin-left: 18px;
    margin-right: 18px;
}

.trade-terminal-page.terminal-subpage .content-grid,
.trade-terminal-page.terminal-subpage .stats-grid,
.trade-terminal-page.terminal-subpage .page-grid {
    margin-top: 16px;
}

.trade-terminal-page.terminal-subpage .panel,
.trade-terminal-page.terminal-subpage .section,
.trade-terminal-page.terminal-subpage .card,
.trade-terminal-page.terminal-subpage .toolbar {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(16, 17, 22, 0.98), rgba(10, 11, 15, 0.98));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

.trade-terminal-page.terminal-subpage .section h2,
.trade-terminal-page.terminal-subpage .section-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #eef2fb;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trade-terminal-page.terminal-subpage .card .k,
.trade-terminal-page.terminal-subpage label,
.trade-terminal-page.terminal-subpage .eyebrow {
    color: #768092;
}

.trade-terminal-page.terminal-subpage .card .v {
    color: #ffffff;
    font-size: 24px;
}

.trade-terminal-page.terminal-subpage .card .sub,
.trade-terminal-page.terminal-subpage .muted {
    color: #96a0b2;
}

.trade-terminal-page.terminal-subpage input,
.trade-terminal-page.terminal-subpage select {
    min-height: 42px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 20, 26, 0.98);
    color: #eef2fb;
}

.trade-terminal-page.terminal-subpage input:focus,
.trade-terminal-page.terminal-subpage select:focus {
    border-color: rgba(77, 132, 255, 0.42);
    box-shadow: 0 0 0 3px rgba(77, 132, 255, 0.12);
}

.trade-terminal-page.terminal-subpage button,
.trade-terminal-page.terminal-subpage .button-link {
    min-height: 42px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(79, 137, 255, 0.18);
    background: linear-gradient(180deg, rgba(53, 113, 228, 0.95), rgba(30, 64, 140, 0.95));
    color: #f8fbff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.trade-terminal-page.terminal-subpage .button-soft,
.trade-terminal-page.terminal-subpage .mini,
.trade-terminal-page.terminal-subpage #logoutBtn {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(19, 22, 29, 0.98);
    color: #d6def0;
    box-shadow: none;
}

.trade-terminal-page.terminal-subpage .button-soft:hover,
.trade-terminal-page.terminal-subpage .mini:hover {
    background: #171a20;
}

.trade-terminal-page.terminal-subpage .table-wrap {
    padding: 0 14px 14px;
}

.trade-terminal-page.terminal-subpage th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #101216;
    color: #dce3f3;
}

.trade-terminal-page.terminal-subpage th,
.trade-terminal-page.terminal-subpage td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trade-terminal-page.terminal-subpage tbody tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.trade-terminal-page.terminal-subpage .response {
    margin: 0 14px 14px;
    border-radius: var(--radius-lg);
    background: #0d1016;
    color: #f0f3fa;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.trade-terminal-page.terminal-subpage .hero-card,
.trade-terminal-page.terminal-subpage .mini-market,
.trade-terminal-page.terminal-subpage .hero-trend,
.trade-terminal-page.terminal-subpage .quick-stats > div,
.trade-terminal-page.terminal-subpage .snapshot-card,
.trade-terminal-page.terminal-subpage .ladder-row,
.trade-terminal-page.terminal-subpage .tape-row {
    border-radius: var(--radius-lg);
}

@media (max-width: 1100px) {
    .trade-terminal-page.terminal-subpage .app-shell {
        grid-template-columns: 1fr;
    }

    .trade-terminal-page.terminal-subpage .sidebar {
        position: relative;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .trade-terminal-page.terminal-subpage .sidebar-foot {
        position: static;
        margin-top: 16px;
    }
}

@media (max-width: 720px) {
    .trade-terminal-page.terminal-subpage .topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 14px;
    }

    .trade-terminal-page.terminal-subpage .topbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .trade-terminal-page.terminal-subpage .content-grid,
    .trade-terminal-page.terminal-subpage .stats-grid,
    .trade-terminal-page.terminal-subpage .page-grid,
    .trade-terminal-page.terminal-subpage .terminal-page-main > .section,
    .trade-terminal-page.terminal-subpage .terminal-page-main > .panel {
        margin-left: 14px;
        margin-right: 14px;
    }
}

.trade-terminal-page.terminal-subpage .dashboard-sidebar .sidebar-group + .sidebar-group {
    margin-top: 8px;
}

.trade-terminal-page.terminal-subpage .dashboard-sidebar-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.trade-terminal-page.terminal-subpage .dashboard-sidebar-meta a {
    color: #73819b;
    font-size: 12px;
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.trade-terminal-page.terminal-subpage .dashboard-sidebar-meta a:hover {
    color: #eef2fb;
}

.trade-terminal-page.terminal-subpage .dashboard-topbar {
    min-height: 68px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.trade-terminal-page.terminal-subpage .dashboard-topbar .page-title {
    font-size: 28px;
    letter-spacing: 0.01em;
}

.trade-terminal-page.terminal-subpage .dashboard-topbar .page-subtitle {
    max-width: 520px;
    font-size: 13px;
}

.dashboard-page .dashboard-timeframes span,
.dashboard-page .dashboard-chip-row .pill {
    min-height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
    color: #9ea9ba;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.dashboard-page .dashboard-timeframes span.is-active,
.dashboard-page .dashboard-chip-row .pill.is-active {
    color: #ffffff;
    background: rgba(55, 111, 224, 0.32);
    border-color: rgba(86, 137, 240, 0.42);
}

.dashboard-page .dashboard-assets-card .hero-badge.positive {
    color: #3ce08e;
    background: rgba(60, 224, 142, 0.12);
    border-color: rgba(60, 224, 142, 0.18);
}

.dashboard-page .dashboard-assets-card .hero-badge.negative {
    color: #ff6f91;
    background: rgba(255, 111, 145, 0.12);
    border-color: rgba(255, 111, 145, 0.18);
}

@media (max-width: 720px) {
    .trade-terminal-page.terminal-subpage .dashboard-topbar .page-title {
        font-size: 24px;
    }
}

.deposit-page .funds-panel-head.compact,
.withdraw-page .funds-panel-head.compact,
.positions-page .funds-panel-head.compact {
    margin-bottom: 14px;
}

.deposit-page .funds-history-section .table-wrap,
.withdraw-page .funds-history-section .table-wrap,
.positions-page .table-wrap {
    max-height: 460px;
}

.positions-page .positions-filter-card .toolbar {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.pages-page .page-links-list .nav-link {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    background: rgba(10, 14, 22, 0.72);
}

.pages-page .page-links-list .nav-link:hover {
    background: rgba(18, 24, 35, 0.9);
}

/* ---------- from app/trade.inline.css ---------- */

/* =========================================================
   trade.inline.css
   Desktop (769px+) = untouched.
   Mobile transformation lives inside @media(max-width:768px)
   at the bottom of this file.
   ========================================================= */

/* --- Price Alerts Panel ----------------------------------- */
.alerts-panel{border-top:1px solid rgba(117,146,255,.16);padding:10px 12px;max-height:180px;overflow-y:auto}
.alerts-panel .eyebrow{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:rgba(114,147,255,.7);margin-bottom:8px}
/* T2 fix: tap targets bumped from ~24px to a min 36px footprint and the
   font scaled up from 11px so the text stays legible. The remove button
   is wrapped in a 28px square so it's reliably tappable on mobile. */
.alert-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-md);background:rgba(255,255,255,.03);margin-bottom:4px;font-size:12px;min-height:36px}
.alert-row .alert-symbol{font-weight:700;color:rgba(244,247,255,.8);min-width:70px}
.alert-row .alert-condition{color:rgba(244,247,255,.4);flex:1}
.alert-row .alert-price{font-weight:700;color:#7293ff;font-variant-numeric:tabular-nums}
.alert-row .alert-remove{background:none;border:none;color:rgba(244,247,255,.45);cursor:pointer;font-size:16px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.alert-row .alert-remove:hover{color:#ff6b7b;background:rgba(255,107,123,.08)}
.alert-row.triggered{background:rgba(60,210,131,.08);border:1px solid rgba(60,210,131,.2)}
.alert-add-row{display:flex;gap:6px;margin-top:8px}
.alert-add-row select,.alert-add-row input{padding:8px 10px;border-radius:var(--radius-sm);border:1px solid rgba(117,146,255,.16);background:rgba(255,255,255,.04);color:#f4f7ff;font-size:13px;flex:1;min-height:36px}
.alert-add-row select option{background:#0d1423}
.alert-add-row button{padding:8px 14px;border-radius:var(--radius-sm);border:1px solid rgba(114,147,255,.35);background:rgba(114,147,255,.1);color:#7293ff;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;min-height:36px}
.alert-add-row button:hover{background:rgba(114,147,255,.2)}

/* --- Daily P&L Strip -------------------------------------- */
.daily-pnl-strip{display:flex;gap:6px;align-items:center;padding:6px 10px;border-radius:var(--radius-md);background:rgba(255,255,255,.03);border:1px solid rgba(117,146,255,.16);font-size:11px;margin-left:auto}
.daily-pnl-strip .pnl-label{color:rgba(244,247,255,.35);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.daily-pnl-strip .pnl-value{font-weight:800;font-variant-numeric:tabular-nums}
.daily-pnl-strip .pnl-value.positive{color:#3cd283}
.daily-pnl-strip .pnl-value.negative{color:#ff6b7b}
.daily-pnl-strip .pnl-count{color:rgba(244,247,255,.3);font-size:10px}

/* --- Order Template Chips --------------------------------- */
.order-template-row{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
/* T2: order-template chips bumped from 24px to 32px tall + 12px font. */
.order-tpl-chip{padding:7px 12px;border-radius:var(--radius-sm);border:1px solid rgba(117,146,255,.16);background:rgba(255,255,255,.03);color:rgba(244,247,255,.7);font-size:12px;font-weight:600;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:4px;min-height:32px}
.order-tpl-chip:hover{border-color:rgba(114,147,255,.35);color:#7293ff;background:rgba(114,147,255,.06)}
.order-tpl-chip .tpl-remove{font-size:13px;color:rgba(244,247,255,.4);cursor:pointer;padding:2px 4px}
.order-tpl-chip .tpl-remove:hover{color:#ff6b7b}
.save-tpl-btn{padding:7px 12px;border-radius:var(--radius-sm);border:1px dashed rgba(114,147,255,.35);background:none;color:rgba(114,147,255,.7);font-size:12px;font-weight:600;cursor:pointer;min-height:32px}
.save-tpl-btn:hover{color:#7293ff;border-color:rgba(114,147,255,.55)}

/* --- Hotkeys Toast ---------------------------------------- */
.hotkey-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(10px);padding:8px 18px;border-radius:var(--radius-md);background:rgba(114,147,255,.14);border:1px solid rgba(114,147,255,.35);color:#dce6ff;font-size:12px;font-weight:700;z-index:9999;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}
.hotkey-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* --- One-Click badge -------------------------------------- */
.one-click-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-pill);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;background:rgba(255,107,123,.12);border:1px solid rgba(255,107,123,.3);color:#ff6b7b;cursor:pointer}
.one-click-badge.active{background:rgba(60,210,131,.12);border-color:rgba(60,210,131,.3);color:#3cd283}
.one-click-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}

/* --- Tablet responsive (unchanged) ------------------------ */
@media(max-width:1200px){
    .app-shell{grid-template-columns:200px minmax(0,1fr)}
}

@media(max-width:960px) {
    .sidebar{position:fixed;left:-260px;z-index:100;width:260px;transition:left .25s}
    .sidebar.open{left:0}
    .terminal-top-strip{flex-wrap:wrap}
    .terminal-stats-inline{display:none}
    .trade-layout{grid-template-columns:1fr!important}
    .watchlist-panel{display:none}
    .trade-panel{width:100%!important}
}

@media(max-width:640px) {
    .terminal-top-strip{padding:8px 12px}
    .terminal-orders-panel{font-size:11px}
    .terminal-orders-head{flex-wrap:wrap;gap:6px}
    .terminal-orders-tabs{flex-wrap:wrap}
}

/* =========================================================
   MOBILE NATIVE-APP TRANSFORMATION  (max-width: 768px)

   Layout (top → bottom):
     [TOP STRIP]       48px   sticky top:0              z:60
     [TF BAR]          40px   sticky top:48             z:40
     [CHART]           flex (100dvh - top - tf - footer)
     [FOOTER WRAPPER] fixed bottom:0                    z:55
       ├─ ORDER BAR   68px   (flex child, static)
       └─ BOTTOM NAV  58px   (flex child, static)
       + safe-area inset handled by wrapper

   The footer is a single fixed flex-column container. Its children
   (order bar + bottom nav) stack naturally — they CANNOT overlap.
   ========================================================= */

/* Mobile-only elements hidden on desktop */
.mobile-tools-btn,
.mobile-nav-btn,
.mobile-tools-drawer,
.mobile-sidebar-overlay,
.mobile-sheet,
.mobile-tf-bar,
.mobile-chart-tools,
.mobile-footer,
.mobile-order-bar,
.mobile-trade-sheet,
.mobile-trade-sheet-open-btn,
.mobile-chart-price-pill,
.mobile-bottom-nav,
.mobile-pnl-badge,
.mobile-sltp,
.mobile-symbol-logo,
.mobile-symbol-name,
.mobile-topbar,
.mobile-tabs-row,
.mobile-metrics,
.mobile-secondary-nav,
.mobile-qty-stepper,
.mobile-popup,
.mobile-info-panel,
.mobile-pending-panel,
.mobile-positions-popup {display:none}

/* ---------------------------------------------------------------------------
   Financial figures keep their own direction
   ------------------------------------------
   base.css states the rule for the whole app on .num / [data-num]: a price or
   a percentage must read left-to-right in any locale, and unicode-bidi:isolate
   makes each figure one atomic run so a minus sign cannot be carried to the
   wrong end of it. The terminal's own figures never opted in - measured at
   unicode-bidi:normal, all nineteen of them.

   Nothing changes today, because the terminal is forced LTR by
   .trade-terminal-page. These are exactly the figures that would break the day
   that changes, which is why the direction is declared here rather than left
   to inherit.

   Direction only. .num also switches the font to the mono family and turns on
   tabular figures; applying it here would restyle the terminal, so just the
   three declarations that concern direction are taken.

   Covers the figures the page ships in its shell. Rows that JavaScript renders
   later - position, order and trade tables - carry no numeric class and were
   not reachable to enumerate without a session; they need the same treatment.
   --------------------------------------------------------------------------- */
.trade-terminal-page #terminal_mark,
.trade-terminal-page #trade_available_amount,
.trade-terminal-page #entry_spread,
.trade-terminal-page .terminal-delta,
.trade-terminal-page .pnl-value,
.trade-terminal-page .chart-mark-inline,
.trade-terminal-page .chart-change,
.trade-terminal-page .trade-slider-marks span,
.trade-terminal-page .mtb-value,
.trade-terminal-page .mo-price,
.trade-terminal-page .mm-value,
.trade-terminal-page .mm-sub,
/* Written by script, so out of reach of the first pass: the watchlist's price
   and change (100 figures at load) and the positions summary cards. */
.trade-terminal-page .watch-right > strong,
.trade-terminal-page .watch-right > span,
.trade-terminal-page .terminal-open-summary-card strong {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Table cells hold either a figure or a word ("شراء", "إيقاف محدَّد", a
   button). plaintext isolates each cell and lets it take its direction from
   its own content: a figure, having no strong character, stays left-to-right
   in this LTR frame; an Arabic word resolves right-to-left. */
.trade-terminal-page .terminal-orders-row > span {
    unicode-bidi: plaintext;
    /* Alignment follows the table, not each cell's own direction - otherwise
       an Arabic header and the figures under it align to opposite edges.
       Physical left, because start/end on a plaintext box resolve against the
       cell's own content (match-parent measured no different). The table is
       left-to-right like the rest of the terminal; if that changes, this does. */
    text-align: left;
}

@media(max-width:768px) {

/* ===== LAYOUT TOKENS (single source of truth) =========== */
:root{
    /* The app header and the bottom nav are the shared ones every page has.
       The terminal used to draw its own title row, bottom nav and secondary nav
       as well: the shared bar sat on top of both navs (three in the same spot,
       all announced to a screen reader), and the arithmetic below left the
       60px header out, so the chart ran 255px under the footer and the page
       scrolled. */
    --m-header-h: var(--header-height, 60px);
    --m-top-h: 44px;          /* account row: balance, P/L, terminal actions */
    --m-ct-h: 40px;           /* chart tools row (candles, draw, fib, zoom, etc.) */
    --m-tf-h: 0px;            /* strip hidden: the 1D button in the tools row picks the timeframe */
    --m-tabs-h: 40px;         /* symbol + TP/SL|Info|Pending */
    --m-sltp-h: 0px;          /* toggle hidden on mobile; tabs drive expansion */
    --m-order-h: 72px;
    --m-metrics-h: 50px;      /* Margin | Spread | Pip value */
    --m-nav-h: 0px;           /* terminal bottom nav removed; its actions are in the account row */
    --m-nav2-h: var(--bottom-nav-height, 62px);  /* the shared .bottom-nav, which overlays the footer's last slot */
    --m-safe-bot: env(safe-area-inset-bottom, 0px);
    --m-footer-h: calc(var(--m-tabs-h) + var(--m-sltp-h) + var(--m-order-h) + var(--m-metrics-h) + var(--m-nav-h) + var(--m-nav2-h) + var(--m-safe-bot));
    --m-viewport: 100dvh;
}
@supports not (height: 100dvh){
    :root{ --m-viewport: 100vh; }
}
.trade-terminal-page .trade-terminal-main{
    display:block!important;
    height:auto!important; min-height:0!important;
    overflow:visible!important; overflow-x:hidden!important;
    padding:0!important; margin:0!important;
}
.trade-layout,
.trade-terminal-page .trade-layout{
    display:flex!important; flex-direction:column!important;
    grid-template-columns:none!important; grid-template-areas:none!important;
    gap:0!important; padding:0!important; margin:0!important;
}
.trade-center,
.trade-terminal-page .trade-center{
    display:flex!important; flex-direction:column!important;
    grid-area:auto!important;
    padding:0!important; margin:0!important; gap:0!important;
    width:100%; min-width:0;
}
.trade-terminal-page .chart-panel{
    grid-area:auto!important;
    width:100%; min-width:0;
}
body.trade-terminal-page{
    margin:0!important;
    padding-bottom: var(--m-footer-h)!important;
}

/* ===== SIDEBAR (NAV DRAWER) ============================ */
.sidebar{
    position:fixed!important; top:0; left:-280px!important;
    width:260px!important; height:var(--m-viewport)!important; max-height:var(--m-viewport);
    margin:0; padding:22px 18px;
    padding-bottom:calc(22px + var(--m-safe-bot));
    z-index:105;
    border:0; border-right:1px solid var(--line-strong); border-radius:0;
    background:var(--surface-elevated);
    overflow-y:auto; overscroll-behavior:contain;
    transition:left .28s cubic-bezier(.22,1,.36,1);
    box-shadow: 4px 0 20px rgba(0,0,0,.5);
}
.sidebar.open{left:0!important}

.mobile-sidebar-overlay{
    display:block; position:fixed; inset:0; z-index:99;
    background:rgba(5,9,18,.74);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
}
.mobile-sidebar-overlay.open{opacity:1; pointer-events:auto}

/* ===== TOP-LEFT ICON BUTTONS =========================== */
.mobile-tools-btn,
.mobile-nav-btn{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:4px;
    width:40px; height:40px; z-index:110;
    background: rgba(114,147,255,.14);
    border:1px solid var(--line-strong);
    border-radius:10px;
    color: var(--gold); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition: transform .15s ease, background .15s ease;
}
.mobile-tools-btn{left:8px}
.mobile-tools-btn:active,
.mobile-nav-btn:active{transform:scale(.94); background:rgba(114,147,255,.28)}
.mobile-tools-btn svg,
.mobile-nav-btn svg{width:22px; height:22px; display:block}

/* ===== TOOLS DRAWER ==================================== */
.mobile-tools-drawer{
    display:flex; flex-direction:column;
    position:fixed; top:0; left:-300px;
    width:280px; height:var(--m-viewport); max-height:var(--m-viewport); z-index:106;
    background:var(--surface-elevated);
    border-right:1px solid var(--line-strong);
    box-shadow: 4px 0 20px rgba(0,0,0,.5);
    transition:left .28s cubic-bezier(.22,1,.36,1);
    overflow:hidden;
}
.mobile-tools-drawer.open{left:0}
.mobile-tools-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid var(--line);
    flex-shrink:0;
}
.mobile-tools-drawer-head strong{font-size:15px; color:var(--text); letter-spacing:.05em}
.mobile-tools-drawer-close{
    width:34px; height:34px; border:0; border-radius:8px;
    background:transparent; color:var(--muted);
    font-size:24px; line-height:1; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mobile-tools-drawer-close:active{background:rgba(114,147,255,.12)}
.mobile-tools-drawer-body{
    flex:1; overflow-y:auto; overscroll-behavior:contain;
    padding: 8px 0 calc(16px + var(--m-safe-bot));
    -webkit-overflow-scrolling:touch;
}
.mtd-section{padding:8px 0; border-bottom:1px solid var(--line)}
.mtd-section:last-child{border-bottom:0}
.mtd-tool{
    display:flex; align-items:center; gap:12px;
    width:100%; height:48px; padding:0 16px;
    background:transparent; border:0; border-radius:0; cursor:pointer;
    color:var(--text); font-size:14px; font-weight:600;
    text-align:left;
    -webkit-tap-highlight-color:transparent;
    transition: background .12s ease;
}
.mtd-tool:active{background:rgba(114,147,255,.1)}
.mtd-tool.active{color:var(--gold); background:rgba(114,147,255,.08)}
.mtd-tool-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; font-size:16px; color:var(--gold);
}
.mtd-tool-icon svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8}
.mtd-chip.active{background:rgba(114,147,255,.14); border-color:var(--gold); color:var(--gold)}

/* ===== TOP STRIP (hide original — replaced by .mobile-topbar) == */
.trade-terminal-page .terminal-top-strip{display:none!important}

/* ===== MOBILE TOPBAR (title row + account/balance/pnl row) ==== */
.mobile-topbar{
    display:flex!important; flex-direction:column;
    position:sticky; top:var(--m-header-h); z-index:60;
    height:var(--m-top-h); min-height:var(--m-top-h);
    background:var(--surface);
    border-bottom:1px solid var(--line-strong);
    box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.mtb-row{display:flex; align-items:center; width:100%; min-width:0}
.mtb-title-row{
    height:44px; padding:0 12px;
    justify-content:center; position:relative;
}
.mtb-title{
    font-size:15px; font-weight:700; color:var(--text);
    letter-spacing:.02em;
}
.mtb-account-row{
    height:44px; padding:0 12px; gap:10px;
    border-top:1px solid var(--line);
}
.mtb-account{
    display:inline-flex; align-items:center; gap:6px;
    height:32px; padding:0 10px;
    background:transparent; color:var(--text);
    border:1px solid var(--line-strong); border-radius:8px;
    font-family:var(--font-mono);
    font-size:12.5px; font-weight:700;
    letter-spacing:.02em; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    flex-shrink:0; max-width:140px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mtb-account svg{width:14px; height:14px; flex-shrink:0; opacity:.7}
.mtb-balance,
.mtb-pnl{
    display:flex; flex-direction:column; min-width:0;
    line-height:1.1; flex:1 1 auto;
}
.mtb-balance{align-items:flex-start; text-align:left}
.mtb-pnl{align-items:flex-end; text-align:right}
.mtb-label{
    font-size:var(--text-xs, 12px); font-weight:600; letter-spacing:.06em;
    color:var(--muted); font-family:inherit;
}
.mtb-value{
    font-size:14px; font-weight:800; color:var(--text);
    font-variant-numeric:tabular-nums;
    font-family:var(--font-mono);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%;
}
.mtb-pnl .mtb-value.positive{color:#3cd283}
.mtb-pnl .mtb-value.negative{color:#ff6b7b}

/* legacy symbol-logo / symbol-name still used by watch sheet — keep base styles */
.mobile-symbol-logo{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%;
    font-size:10px; font-weight:900; letter-spacing:.02em;
    color:#0a0c10; flex-shrink:0;
    background:#c7cad1;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.mobile-symbol-name{
    display:inline-flex; align-items:center;
    font-weight:800; color:var(--text);
    font-size:12.5px; letter-spacing:.01em;
    max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ===== MOBILE P&L BADGE (legacy — now hidden; replaced by .mtb-pnl) === */
.mobile-pnl-badge{
    display:none!important; align-items:center; gap:6px;
    margin-left:auto;
    padding:6px 10px; border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line-strong);
    font-family:var(--font-mono);
    font-size:12px; font-weight:800;
    transition:background .18s, border-color .18s, color .18s;
    min-height:30px;
}
.mobile-pnl-badge .mpnl-label{
    font-size:10px; font-weight:700; letter-spacing:.08em;
    color:var(--muted); text-transform:uppercase;
}
.mobile-pnl-badge .mpnl-value{
    font-variant-numeric:tabular-nums;
    color:var(--text);
}
.mobile-pnl-badge.positive{
    background:rgba(60,210,131,.12);
    border-color:rgba(60,210,131,.35);
}
.mobile-pnl-badge.positive .mpnl-value{color:#3cd283}
.mobile-pnl-badge.negative{
    background:rgba(255,107,123,.12);
    border-color:rgba(255,107,123,.35);
}
.mobile-pnl-badge.negative .mpnl-value{color:#ff6b7b}
.terminal-top-left{
    display:flex!important; align-items:center; gap:10px;
    flex:1 1 auto; min-width:0;
}

/* ===== WATCHLIST / SYMBOL SHEET ======================== */
.mobile-sheet{
    display:block; position:fixed; inset:0; z-index:200; pointer-events:none;
}
.mobile-sheet-backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,.6);
    opacity:0; transition:opacity .28s ease;
}
.mobile-sheet-panel{
    position:absolute; left:0; right:0; bottom:0;
    height:70vh; max-height:70vh;
    background:var(--surface-elevated);
    border-top:1px solid var(--line-strong);
    border-radius:18px 18px 0 0;
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.22,1,.36,1);
    display:flex; flex-direction:column;
    padding-bottom:var(--m-safe-bot);
    overscroll-behavior:contain;
    box-shadow: 0 -4px 24px rgba(0,0,0,.55);
}
.mobile-sheet.open{pointer-events:auto}
.mobile-sheet.open .mobile-sheet-backdrop{opacity:1}
.mobile-sheet.open .mobile-sheet-panel{transform:translateY(0)}
.mobile-sheet-handle{
    width:44px; height:4px; border-radius:3px;
    background:rgba(255,255,255,.22);
    margin:10px auto 6px;
}
.mobile-sheet-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 16px 10px;
}
.mobile-sheet-head strong{font-size:15px; color:var(--text)}
.mobile-sheet-close{
    background:none; border:0; color:var(--muted);
    font-size:24px; line-height:1; padding:4px 8px; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mobile-sheet-search{
    margin:0 16px 10px; padding:10px 12px; border-radius:10px;
    background:rgba(255,255,255,.04); border:1px solid var(--line);
    color:var(--text); font-size:14px;
}
.mobile-sheet-body{
    flex:1; overflow-y:auto; padding:4px 8px 16px;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.mobile-watch-row{
    display:grid; align-items:center;
    grid-template-columns:36px 1fr auto; gap:10px;
    min-height:56px; padding:8px 12px; border-radius:10px;
    border-bottom:1px solid rgba(117,146,255,.08);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.mobile-watch-row:active{background:rgba(114,147,255,.08)}
.mobile-watch-row.active{background:rgba(114,147,255,.12)}
.mw-logo{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    font-size:13px; font-weight:800; color:#fff;
    letter-spacing:.02em; text-transform:uppercase;
}
.mw-main{display:flex; flex-direction:column; min-width:0; gap:2px}
.mw-line1{display:flex; align-items:baseline; gap:8px; min-width:0}
.mw-line2{display:block; min-width:0; max-width:100%}
.mw-logo svg,.mw-logo img{width:28px; height:28px; border-radius:50%}
.mw-symbol{font-weight:800; color:var(--text); font-size:13px; letter-spacing:.02em}
.mw-name{
    font-size:12px; color:var(--muted); font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mw-meta{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.mw-price{
    font-family:var(--font-mono);
    font-size:13px; font-weight:700; color:var(--text);
    font-variant-numeric:tabular-nums;
}
.mw-change{
    display:inline-flex; align-items:center; gap:3px;
    padding:1px 7px; border-radius:999px;
    font-size:11px; font-weight:700; line-height:1.4;
}
.mw-change.up{background:rgba(60,210,131,.14); color:#3cd283}
.mw-change.down{background:rgba(255,107,123,.14); color:#ff6b7b}

/* ===== CHART TOOLS ROW (directly below topbar, above chart) === */
.mobile-chart-tools{
    display:flex!important; align-items:center;
    position:relative;
    height:var(--m-ct-h); min-height:var(--m-ct-h);
    gap:2px; padding:0 8px;
    overflow-x:auto; overflow-y:hidden; white-space:nowrap;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    flex-shrink:0;
}
.mobile-chart-tools::-webkit-scrollbar{display:none}
.mct-btn{
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0;
    width:32px; height:28px; padding:0;
    border-radius:6px; border:1px solid transparent;
    background:transparent; color:var(--muted);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:background .12s, border-color .12s, color .12s;
}
.mct-btn svg{width:17px; height:17px; stroke-width:1.8}
.mct-btn:active{background:rgba(114,147,255,.16)}
.mct-btn.active{
    background:rgba(114,147,255,.16);
    border-color:var(--line-strong); color:var(--gold);
}
.mct-btn.mct-btn-text{
    width:auto; min-width:32px; padding:0 8px;
    font-size:12px; font-weight:800; letter-spacing:.02em;
    font-variant-numeric:tabular-nums;
    color:var(--text);
}

/* ===== TIMEFRAME BAR (below chart — clean text strip) ==== */
.mobile-tf-bar{
    display:flex!important; align-items:center;
    position:relative;
    height:var(--m-tf-h); min-height:var(--m-tf-h);
    gap:0; padding:0 14px;
    overflow-x:auto; overflow-y:hidden; white-space:nowrap;
    background:var(--surface);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    flex-shrink:0;
}
.mobile-tf-bar::-webkit-scrollbar{display:none}
.mobile-tf-btn{
    flex-shrink:0;
    padding:0 10px; height:100%;
    border:0; border-radius:0;
    background:transparent; color:var(--muted);
    font-size:13px; font-weight:600; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition: color .15s;
    font-variant-numeric:tabular-nums;
    font-family:inherit;
}
.mobile-tf-btn:active{color:var(--text)}
.mobile-tf-btn.active{
    background:transparent;
    color:var(--gold);
    font-weight:700;
}

/* ===== CHART AREA ====================================== */
.chart-panel,
.trade-terminal-page .chart-panel{
    padding:0!important; margin:0!important; border:0!important;
    border-radius:0!important; background:transparent!important;
    min-height:0!important;
    display:block!important;
}
.chart-inline-header{display:none!important}
.chart-shell,
.trade-terminal-page .chart-shell{
    display:block!important; position:relative!important;
    grid-template-columns:none!important;
    padding:0!important; margin:0!important;
    min-height:0!important;
}
.chart-board{display:flex; flex-direction:column; padding:0; margin:0}
.chart-stage{
    display:block; width:100%;
    height: calc(var(--m-viewport) - var(--m-header-h) - var(--m-top-h) - var(--m-ct-h) - var(--m-tf-h) - var(--m-footer-h));
    min-height:0; max-height:none;
    margin:0; padding:0;
    touch-action:pan-y pinch-zoom;
}
#chart_candles{touch-action:none}

/* Hide desktop chart toolbars / expand buttons / rails */
.chart-side-tools,
.chart-tool-drawer,
.chart-platform-toolbar,
.chart-platform-left,
.chart-platform-right,
.chart-subtoolbar,
.indicator-panels,
.indicator-drawer,
.trade-head-btn,
.trade-box-head-actions,
.terminal-panel-tools,
#watchlist_expand_btn, #watchlist_collapse_btn,
#trade_expand_btn, #trade_collapse_btn,
#orders_expand_btn, #orders_collapse_btn{display:none!important}
.trade-side{display:none!important}
.terminal-hidden-section{display:none!important}
.trade-center-grid{display:none!important}
.terminal-orders-panel{display:none!important}
.panel.order-entry{display:none!important}


/* ===== PRICE PILL (right-edge, tracks price line) ======= */
.mobile-chart-price-pill{
    display:block; position:absolute;
    right:0; top:50%;
    transform:translateY(-50%);
    z-index:35;
    min-width:86px; padding:4px 10px;
    border-radius:4px 0 0 4px;
    background:var(--gold); color:#fff;
    font-family:var(--font-mono);
    font-size:13px; font-weight:800;
    line-height:20px; text-align:center;
    letter-spacing:.02em;
    font-variant-numeric:tabular-nums;
    box-shadow:-2px 0 8px rgba(0,0,0,.35);
    pointer-events:none;
    transition:background .2s ease;
}
.mobile-chart-price-pill::before{
    content:""; position:absolute;
    left:-7px; top:50%; transform:translateY(-50%);
    width:0; height:0;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-right:7px solid var(--gold);
    transition:border-right-color .2s ease;
}
.mobile-chart-price-pill.up{background:var(--green)}
.mobile-chart-price-pill.up::before{border-right-color:var(--green)}
.mobile-chart-price-pill.down{background:var(--red)}
.mobile-chart-price-pill.down::before{border-right-color:var(--red)}

/* Hide desktop duplicate price tag + crosshair bubble */
.chart-last-price-tag,
.chart-last-price-text,
.chart-last-price-tag-group,
.chart-crosshair-price,
.chart-crosshair-time,
.chart-crosshair-label,
.chart-crosshair-bubble,
.chart-price-bubble,
.terminal-price-tag,
.crosshair-price,
.price-tag,
[class*="price-bubble"],
[class*="price-tag-group"]{display:none!important}
.chart-last-price-line{display:initial}

/* ===== FIXED BOTTOM FOOTER (can't overlap — flex-column) = */
.mobile-footer{
    display:flex; flex-direction:column;
    position:fixed; left:0; right:0; bottom:0;
    z-index:55;
    background:var(--surface-elevated);
    border-top:1px solid var(--line-strong);
    padding-bottom:var(--m-safe-bot);
    box-shadow:0 -6px 22px rgba(0,0,0,.55);
    /* The shared .bottom-nav (fixed, above this) covers the last slot. */
    padding-bottom:calc(var(--m-nav2-h) + var(--m-safe-bot));
}
.mobile-footer > *{width:100%}

/* ===== COLLAPSIBLE SL/TP BAR (flex child of footer) ==== */
.mobile-sltp{
    display:flex!important; flex-direction:column;
    height:0; min-height:0;
    background:var(--surface);
    border-bottom:0;
    overflow:hidden;
    transition:height .22s cubic-bezier(.22,1,.36,1), border-color .22s ease;
}
.mobile-sltp[data-open="true"]{
    height:68px;
    border-bottom:1px solid var(--line);
}
.mobile-sltp-toggle{
    display:none;
    align-items:center; gap:10px;
    height:0; min-height:0;
    width:100%; padding:0 12px;
    background:transparent; border:0; color:var(--text);
    font-family:inherit; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.mobile-sltp-toggle .msl-mini{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:700;
    font-variant-numeric:tabular-nums;
    color:var(--text);
}
.mobile-sltp-toggle .msl-mini .msl-tag{
    font-size:9.5px; letter-spacing:.12em;
    color:var(--muted); text-transform:uppercase; font-weight:800;
    padding:2px 6px; border-radius:5px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
}
.mobile-sltp-toggle .mobile-sltp-arrow{
    margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; color:var(--gold);
    transition:transform .22s ease;
}
.mobile-sltp-toggle .mobile-sltp-arrow svg{width:16px; height:16px}
.mobile-sltp[data-open="true"] .mobile-sltp-arrow{transform:rotate(180deg)}
.mobile-sltp-body{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    padding:6px 12px 10px;
}
.mobile-sltp-field{
    display:flex; flex-direction:column; gap:3px;
    min-width:0;
}
.mobile-sltp-field .msl-label{
    font-size:var(--text-xs, 12px); font-weight:800; letter-spacing:.12em;
    color:var(--muted); text-transform:uppercase;
}
.mobile-sltp-field input{
    background:rgba(255,255,255,.04);
    border:1px solid var(--line-strong);
    border-radius:8px; padding:7px 10px;
    color:var(--text); font-size:14px; font-weight:700;
    font-variant-numeric:tabular-nums; outline:none;
    -webkit-appearance:none; -moz-appearance:textfield; appearance:textfield;
}
.mobile-sltp-field input:focus{border-color:var(--gold)}
.mobile-sltp-field input::-webkit-outer-spin-button,
.mobile-sltp-field input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* ===== TABS ROW (symbol chip | TP/SL | Info | Pending) ==== */
.mobile-tabs-row{
    display:flex; align-items:center; gap:10px;
    height:var(--m-tabs-h); min-height:var(--m-tabs-h);
    padding:0 12px; box-sizing:border-box;
    background:var(--surface);
    border-bottom:1px solid var(--line);
}
.mtr-symbol{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px; border-radius:8px;
    background:rgba(114,147,255,.08);
    border:1px solid var(--line-strong); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    flex-shrink:0; min-height:28px;
}
.mtr-symbol-logo{
    display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:50%; overflow:hidden;
    font-size:9px; font-weight:900; color:#0a0c10;
    background:#c7cad1; flex-shrink:0;
}
.mtr-symbol-name{
    font-size:12px; font-weight:800; color:var(--text);
    letter-spacing:.02em;
    max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mtr-tabs{
    display:flex; align-items:center; gap:0;
    margin-left:auto;
    /* Was flex-shrink:0: at 360px the three tabs needed 250px of 241, and the
       last one ran off the screen. They now scroll if a language needs more. */
    flex:0 1 auto; min-width:0;
    overflow-x:auto; scrollbar-width:none;
}
.mtr-tabs::-webkit-scrollbar{display:none}
.mtr-tab{
    flex-shrink:0; white-space:nowrap;
    height:36px; padding:0 6px;
    background:transparent; border:0;
    color:var(--muted); font-size:12px; font-weight:700;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:color .15s;
    border-bottom:2px solid transparent;
    border-radius:0;
}
.mtr-tab.active{color:var(--gold); border-bottom-color:var(--gold)}
.mtr-tab:active{background:rgba(114,147,255,.08)}

/* ===== ORDER BAR (3 equal cols: SELL | qty stepper | BUY) === */
.mobile-order-bar{
    display:grid;
    /* The middle column holds the quantity stepper, whose two 32px buttons
       leave the input a sliver of an equal third - narrow enough that even
       "0.00" was clipped. It gets a wider share than the two side buttons,
       which only ever hold a word and a figure. */
    grid-template-columns:1fr 1.6fr 1fr;
    grid-template-rows:1fr;
    align-items:stretch; gap:8px;
    height:var(--m-order-h); min-height:var(--m-order-h);
    padding:8px 10px; box-sizing:border-box;
    border-bottom:1px solid var(--line);
    background:var(--surface);
}
.mobile-order-btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; width:100%; height:100%;
    border-radius:10px; border:0; cursor:pointer;
    font-weight:800; letter-spacing:.06em;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:transform .12s ease, filter .15s ease;
    min-height:52px;
}
.mobile-order-btn:active{transform:scale(.97); filter:brightness(1.12)}
.mobile-order-btn .mo-label{font-size:14px; line-height:1.1; text-transform:uppercase}
.mobile-order-btn .mo-price{
    font-size:11px; font-weight:700; opacity:.9;
    font-variant-numeric:tabular-nums;
    font-family:var(--font-mono);
}
.mobile-order-btn .mobile-arrow{font-size:11px; opacity:.85}
.mobile-order-buy{background:linear-gradient(135deg,#3cd283,#2ba96a); color:#07101d}
/* Dark ink, as on .btn--sell: white on this rose measured 2.9:1. */
.mobile-order-sell{background:linear-gradient(135deg,#ff6b7b,#e05262); color:#1c0407}

/* Quantity stepper: − [amount] + horizontal single-row layout */
.mobile-qty-stepper{
    display:grid;
    grid-template-columns:28px minmax(0,1fr) 28px;
    align-items:stretch; gap:4px;
    min-width:0; height:100%;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line-strong);
    border-radius:10px;
    padding:4px;
    box-sizing:border-box;
    overflow:hidden;
}
.mqty-amount{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-width:0; padding:0 2px; line-height:1.05;
    /* min-width:0 lets this grid track shrink under its content, which is what
       clipped the value. Enough room for a five-figure amount with decimals is
       reserved here instead. */
    min-inline-size:0;
}
/* The label comes from the catalogue (data-label, set through data-i18n-attr);
   it was the literal "Qty" in every language. */
.mqty-amount::before{
    content:attr(data-label);
    font-size:9px; font-weight:700; letter-spacing:.06em;
    color:var(--muted); text-transform:uppercase;
    margin-bottom:1px;
}
.mqty-amount input{
    background:transparent; border:0; outline:none;
    color:var(--text); font-size:15px; font-weight:800;
    width:100%; min-width:0; text-align:center; padding:0;
    font-variant-numeric:tabular-nums;
    font-family:var(--font-mono);
    -webkit-appearance:none; -moz-appearance:textfield; appearance:textfield;
}
.mqty-amount input::-webkit-outer-spin-button,
.mqty-amount input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.mqty-amount input::placeholder{color:rgba(244,247,255,.35); font-weight:700}
.mqty-btn{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
    background:rgba(114,147,255,.10);
    border:1px solid var(--line);
    border-radius:7px;
    color:var(--text); font-size:18px; font-weight:800;
    line-height:1; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:background .12s, transform .12s;
}
.mqty-btn:active{background:rgba(114,147,255,.26); transform:scale(.94)}

/* Legacy full-sheet open button — preserved for trade sheet trigger */
.mobile-trade-sheet-open-btn{
    display:none!important;
}

/* ===== METRICS ROW (Margin | Spread | Pip value) ========== */
.mobile-metrics{
    display:grid; grid-template-columns:1fr 1fr 1fr;
    align-items:stretch; gap:0;
    height:var(--m-metrics-h); min-height:var(--m-metrics-h);
    padding:6px 10px; box-sizing:border-box;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    font-family:var(--font-mono);
}
.mm-item{
    display:flex; flex-direction:column; justify-content:center; gap:1px;
    min-width:0; line-height:1.15;
    padding:0 8px;
}
.mm-item + .mm-item{
    border-left:1px solid var(--line);
}
.mm-item:nth-child(2){align-items:center; text-align:center}
.mm-item:nth-child(3){align-items:flex-end; text-align:right}
.mm-label{
    font-size:11px; font-weight:600; letter-spacing:.04em;
    color:var(--muted); font-family:inherit; text-transform:uppercase;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%;
}
.mm-value{
    display:inline-flex; align-items:baseline; gap:4px;
    font-size:13px; font-weight:800; color:var(--text);
    font-variant-numeric:tabular-nums; font-family:inherit;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%;
}
.mm-value em{
    font-style:normal; font-size:11px; font-weight:700;
    color:var(--muted); letter-spacing:.06em;
}
.mm-sub{
    font-size:11px; font-weight:700; color:var(--muted);
    font-variant-numeric:tabular-nums; font-family:inherit;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%;
}

/* ===== BOTTOM NAV (4 cols: Market|Positions|History|Menu) === */
.mobile-bottom-nav{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    height:var(--m-nav-h); min-height:var(--m-nav-h);
    box-sizing:border-box;
    background:var(--surface-elevated);
    border-top:1px solid var(--line);
}
.mobile-nav-item{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; height:var(--m-nav-h); min-width:0;
    color:var(--muted); text-decoration:none;
    font-size:10px; font-weight:600; text-align:center;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    position:relative;
    transition:color .15s ease;
    background:transparent; border:0; cursor:pointer;
    font-family:inherit;
}
.mobile-nav-item svg{width:20px; height:20px; display:block; flex-shrink:0; stroke-width:1.8}
.mobile-nav-item span{
    display:block; line-height:1.1;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%;
}
.mobile-nav-item.active{color:var(--gold)}
.mobile-nav-item.active::before{
    content:""; position:absolute; top:0; left:28%; right:28%;
    height:2px; border-radius:0 0 2px 2px; background:var(--gold);
}
.mobile-nav-item:active{background:rgba(114,147,255,.08)}
.mobile-nav-badge{
    position:absolute; top:3px; right:calc(50% - 18px);
    min-width:16px; height:16px; padding:0 5px; border-radius:999px;
    background:var(--red); color:#fff;
    font-size:10px; font-weight:800; line-height:16px; text-align:center;
}

/* ===== SECONDARY NAV — unified with .m-bottom-nav used on Deposit/Withdraw/Dashboard/Account/Index pages ===== */
.mobile-secondary-nav{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    height:var(--m-nav2-h); min-height:var(--m-nav2-h);
    box-sizing:border-box;
    background:linear-gradient(180deg,rgba(10,16,28,.98),rgba(8,12,22,.98));
    border-top:1px solid var(--line);
    backdrop-filter:saturate(140%) blur(12px);
    -webkit-backdrop-filter:saturate(140%) blur(12px);
}
.msn-item{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-width:0;
    color:var(--muted); text-decoration:none;
    font-size:10px; font-weight:600; text-align:center;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:color .15s ease;
    background:transparent; border:0; cursor:pointer;
    font-family:inherit;
    padding:6px 4px;
}
.msn-item svg{width:20px; height:20px; display:block; flex-shrink:0; stroke-width:1.8}
.msn-item span{line-height:1.1; white-space:nowrap}
.msn-item.active{color:var(--cyan)}
.msn-item:active{opacity:.6}

/* ===== TRADE SHEET ===================================== */
.mobile-trade-sheet{
    display:block; position:fixed; inset:0; z-index:210;
    pointer-events:none;
}
.mobile-trade-sheet-backdrop{
    position:absolute; inset:0;
    background:rgba(7,16,29,.85);
    -webkit-backdrop-filter:blur(4px);
            backdrop-filter:blur(4px);
    opacity:0; transition:opacity .25s ease;
}
.mobile-trade-sheet-panel{
    position:absolute; left:0; right:0; bottom:0;
    height:90vh; max-height:90vh;
    background:#0d1423; color:var(--text);
    border-top:1px solid var(--line-strong);
    border-radius:18px 18px 0 0;
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.22,1,.36,1);
    display:flex; flex-direction:column;
    padding-bottom:var(--m-safe-bot);
    overscroll-behavior:contain;
    touch-action:none;
    will-change:transform;
    box-shadow:0 -8px 32px rgba(0,0,0,.6);
}
.mobile-trade-sheet.open{pointer-events:auto}
.mobile-trade-sheet.open .mobile-trade-sheet-backdrop{opacity:1}
.mobile-trade-sheet.open .mobile-trade-sheet-panel{transform:translateY(0)}
.mobile-trade-sheet.dragging .mobile-trade-sheet-panel{transition:none}

.mts-head{
    position:relative; flex-shrink:0;
    padding:10px 14px 4px;
}
.mts-handle-wrap{
    display:flex; justify-content:center; padding:4px 0;
    cursor:grab; touch-action:none;
}
.mts-handle-wrap:active{cursor:grabbing}
.mts-handle{
    width:40px; height:4px; border-radius:3px;
    background:var(--line-strong);
}
.mts-close-btn{
    position:absolute; top:6px; right:6px;
    width:44px; height:44px; border:0; border-radius:10px;
    background:transparent; color:var(--muted);
    font-size:24px; line-height:1; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mts-close-btn:active{background:rgba(114,147,255,.12)}

.mts-body{
    flex:1; overflow-y:auto; overscroll-behavior:contain;
    padding:6px 14px 14px;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
}
.mts-section{margin-top:14px}
.mts-section:first-child{margin-top:6px}
.mts-section-title{
    font-size:11px; font-weight:800; letter-spacing:.14em;
    color:var(--muted); text-transform:uppercase;
    margin-bottom:8px;
}

.mts-pnl-cards{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.mts-pnl-card{
    padding:10px 12px; border-radius:12px;
    border:1px solid var(--line-strong);
}
.mts-pnl-card.profit{
    background:rgba(60,210,131,.08);
    border-color:rgba(60,210,131,.3);
}
.mts-pnl-card.loss{
    background:rgba(255,107,123,.08);
    border-color:rgba(255,107,123,.3);
}
.mts-pnl-label{
    font-size:10px; font-weight:800; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted);
}
.mts-pnl-value{
    margin-top:4px;
    font-size:18px; font-weight:800;
    font-variant-numeric:tabular-nums;
    font-family:var(--font-mono);
}
.mts-pnl-card.profit .mts-pnl-value{color:var(--green)}
.mts-pnl-card.loss .mts-pnl-value{color:var(--red)}

.mts-pills{
    display:flex; gap:6px; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
}
.mts-pills::-webkit-scrollbar{display:none}
.mts-pill{
    flex-shrink:0; min-width:54px; height:36px; padding:0 14px;
    border-radius:999px;
    border:1px solid var(--line-strong);
    background:rgba(255,255,255,.03); color:var(--text);
    font-size:12px; font-weight:700; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:border-color .15s, background .15s, color .15s;
}
.mts-pill:active{background:rgba(114,147,255,.14)}
.mts-pill.active{
    background:rgba(114,147,255,.16);
    border-color:var(--gold); color:var(--gold);
}

.mts-field{
    display:flex; align-items:center; gap:8px;
    min-height:48px; padding:0 14px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line-strong); border-radius:12px;
}
.mts-field input{
    flex:1; min-width:0;
    background:transparent; border:0; outline:none;
    color:var(--text); font-size:18px; font-weight:800;
    font-variant-numeric:tabular-nums;
    -webkit-appearance:none; -moz-appearance:textfield; appearance:textfield;
    padding:0;
}
.mts-field input::-webkit-outer-spin-button,
.mts-field input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.mts-field input::placeholder{color:rgba(244,247,255,.35)}
.mts-field-suffix{
    font-size:12px; font-weight:800; color:var(--muted);
    letter-spacing:.1em; text-transform:uppercase;
}
.mts-field.has-tp .mts-field-calc{color:var(--green)}
.mts-field.has-sl .mts-field-calc{color:var(--red)}

.mts-rr{
    display:grid; grid-template-columns:auto 1fr auto; gap:10px;
    align-items:center;
    padding:12px 14px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line-strong); border-radius:12px;
}
.mts-rr-label{
    font-size:14px; font-weight:800; color:var(--text);
    font-variant-numeric:tabular-nums;
    font-family:var(--font-mono);
    white-space:nowrap;
}
.mts-rr-bar{
    height:8px; border-radius:4px;
    background:rgba(255,255,255,.06); overflow:hidden;
}
.mts-rr-bar-fill{
    height:100%; width:0;
    background:linear-gradient(90deg, var(--red), var(--gold), var(--green));
    transition:width .25s ease;
}
.mts-rr-status{
    font-size:11px; font-weight:800; letter-spacing:.08em;
    text-transform:uppercase;
}
.mts-rr.good .mts-rr-status{color:var(--green)}
.mts-rr.ok .mts-rr-status{color:var(--gold)}
.mts-rr.bad .mts-rr-status{color:var(--red)}

.mts-submit{
    flex-shrink:0;
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    padding:10px 14px 14px;
    border-top:1px solid var(--line-strong);
    background:#0d1423;
}
.mts-submit-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    height:56px;
    border:0; border-radius:14px; cursor:pointer;
    font-size:15px; font-weight:800; letter-spacing:.08em;
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s ease, filter .15s ease;
}
.mts-submit-btn:active{transform:scale(.97); filter:brightness(1.08)}
.mts-submit-sell{background:linear-gradient(135deg,#ff6b7b,#e05262); color:#fff}
.mts-submit-buy{background:linear-gradient(135deg,#3cd283,#2ba96a); color:#07101d}
.mts-arrow{font-size:13px; line-height:1}

/* ===== SAFE AREA + TOUCH POLISH ======================== */
html, body{overscroll-behavior-y:contain}
button, a, input, select{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
@media (hover:none){
    .mobile-tools-btn:hover,
    .mobile-nav-btn:hover,
    .mobile-order-btn:hover,
    .mobile-nav-item:hover,
    .mobile-tf-btn:hover,
    .mobile-watch-row:hover,
    .mtd-tool:hover,
    .mtd-chip:hover,
    .mts-pill:hover,
    .mts-submit-btn:hover {background:inherit; color:inherit}
}
.chart-stage,
.mobile-sheet-body,
.mobile-tools-drawer-body,
.mts-body{overscroll-behavior:contain}
.mobile-footer,
.mobile-tools-btn,
.mobile-nav-btn,
.mobile-tf-bar,
.mobile-chart-price-pill,
.mobile-trade-sheet-open-btn,
.mts-submit{
    user-select:none; -webkit-user-select:none;
}

/* ===== CENTER POPUPS (timeframe picker, menu, confirm) ==== */
.mobile-popup{
    display:block; position:fixed; inset:0; z-index:220;
    pointer-events:none;
}
.mobile-popup-backdrop{
    position:absolute; inset:0; background:rgba(5,9,18,.74);
    opacity:0; transition:opacity .22s ease;
}
.mobile-popup-panel{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-46%) scale(.96);
    width:min(320px, 92vw);
    background:var(--surface-elevated);
    border:1px solid var(--line-strong); border-radius:16px;
    box-shadow:0 12px 40px rgba(0,0,0,.6);
    opacity:0; transition:transform .22s cubic-bezier(.22,1,.36,1), opacity .22s ease;
    overflow:hidden;
}
.mobile-popup.open{pointer-events:auto}
.mobile-popup.open .mobile-popup-backdrop{opacity:1}
.mobile-popup.open .mobile-popup-panel{
    opacity:1; transform:translate(-50%,-50%) scale(1);
}
.mobile-popup-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px 8px;
}
.mobile-popup-head strong{
    font-size:14px; font-weight:800; color:var(--text);
    letter-spacing:.04em;
}
.mobile-popup-close{
    width:32px; height:32px; border:0; border-radius:8px;
    background:transparent; color:var(--muted);
    font-size:22px; line-height:1; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mobile-popup-close:active{background:rgba(114,147,255,.14)}
.mobile-popup-body{padding:8px 14px 16px}

.mtfp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.mtfp-btn{
    height:44px; border-radius:10px;
    border:1px solid var(--line-strong);
    background:rgba(255,255,255,.03); color:var(--text);
    font-size:14px; font-weight:800;
    font-variant-numeric:tabular-nums; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .12s, border-color .12s, color .12s;
}
.mtfp-btn:active{background:rgba(114,147,255,.14)}
.mtfp-btn.active{
    background:rgba(114,147,255,.18);
    border-color:var(--gold); color:var(--gold);
}


/* ===== INFO PANEL (tab content — full Standard trade form) = */
.mobile-info-panel{
    display:none; flex-direction:column;
    position:fixed; left:0; right:0;
    top:calc(var(--m-header-h) + var(--m-top-h) + var(--m-ct-h));
    bottom:var(--m-footer-h);
    z-index:50;
    background:var(--surface);
    border-top:1px solid var(--line);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:14px 14px calc(20px + var(--m-safe-bot));
}
.mobile-info-panel.open{display:flex}
.mip-section{margin-bottom:14px}
.mip-section-title{
    font-size:10.5px; font-weight:800; letter-spacing:.14em;
    color:var(--muted); text-transform:uppercase;
    margin-bottom:8px;
}
.mip-sides{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mip-side-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    height:44px; border-radius:10px; border:1px solid var(--line-strong);
    background:rgba(255,255,255,.03); color:var(--text);
    font-size:14px; font-weight:800; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mip-side-btn.buy.active{background:rgba(60,210,131,.14); border-color:#3cd283; color:#3cd283}
.mip-side-btn.sell.active{background:rgba(255,107,123,.14); border-color:#ff6b7b; color:#ff6b7b}
.mip-balance-row{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:4px 0;
}
.mip-balance-label{font-size:12px; color:var(--muted); font-weight:600}
.mip-balance-value{font-size:13px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums}
.mip-amount-wrap{
    display:flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line-strong); border-radius:10px;
    padding:8px 10px;
}
.mip-amount-wrap input{
    flex:1; min-width:0; background:transparent; border:0; outline:none;
    color:var(--text); font-size:16px; font-weight:800;
    font-variant-numeric:tabular-nums; padding:0;
    -webkit-appearance:none; -moz-appearance:textfield; appearance:textfield;
}
.mip-amount-wrap input::-webkit-outer-spin-button,
.mip-amount-wrap input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.mip-amount-unit{
    font-size:12px; font-weight:800; color:var(--muted);
    letter-spacing:.04em; flex-shrink:0;
}
.mip-toggle{display:flex; gap:0; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden}
.mip-toggle-btn{
    padding:0 12px; height:28px; border:0; background:transparent;
    color:var(--muted); font-size:11px; font-weight:700; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mip-toggle-btn.active{background:rgba(114,147,255,.18); color:var(--gold)}
.mip-slider{
    -webkit-appearance:none; appearance:none;
    width:100%; height:4px; margin:16px 0 6px;
    background:var(--line-strong); border-radius:2px; outline:none;
}
.mip-slider::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px; border-radius:50%;
    background:var(--gold); cursor:pointer; border:0;
}
.mip-slider::-moz-range-thumb{
    width:18px; height:18px; border-radius:50%;
    background:var(--gold); cursor:pointer; border:0;
}
.mip-slider-marks{
    display:flex; justify-content:space-between;
    font-size:10.5px; color:var(--muted); font-weight:600;
    margin-bottom:8px;
}
.mip-pct-row{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.mip-pct-btn{
    height:36px; border-radius:8px;
    border:1px solid var(--line-strong);
    background:rgba(255,255,255,.03); color:var(--text);
    font-size:12px; font-weight:700; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mip-pct-btn:active{background:rgba(114,147,255,.14)}
.mip-risk-head{display:flex; align-items:center; justify-content:space-between}
.mip-risk-toggle{
    width:38px; height:20px; border-radius:999px;
    background:rgba(255,255,255,.08); border:1px solid var(--line-strong);
    position:relative; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mip-risk-toggle::after{
    content:""; position:absolute; top:1px; left:1px;
    width:16px; height:16px; border-radius:50%;
    background:var(--muted); transition:left .18s, background .18s;
}
.mip-risk-toggle.on{background:rgba(114,147,255,.22); border-color:var(--gold)}
.mip-risk-toggle.on::after{left:19px; background:var(--gold)}
.mip-sltp-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.mip-sltp-field{display:flex; flex-direction:column; gap:5px}
.mip-sltp-field-label{
    display:flex; align-items:center; gap:6px;
    font-size:11px; font-weight:800; letter-spacing:.04em;
}
.mip-sltp-field-label.sl{color:#ff6b7b}
.mip-sltp-field-label.tp{color:#3cd283}
.mip-sltp-input-wrap{
    display:flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line-strong); border-radius:8px;
    padding:7px 10px;
}
.mip-sltp-input-wrap input{
    flex:1; background:transparent; border:0; outline:none;
    color:var(--text); font-size:14px; font-weight:700;
    font-variant-numeric:tabular-nums; min-width:0;
}
.mip-summary{
    border:1px solid var(--line-strong); border-radius:10px;
    overflow:hidden;
}
.mip-summary-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 12px;
    border-bottom:1px solid var(--line);
    font-size:12.5px;
}
.mip-summary-row:last-child{border-bottom:0}
.mip-summary-label{color:var(--muted); font-weight:600}
.mip-summary-value{color:var(--text); font-weight:800; font-variant-numeric:tabular-nums}
.mip-submit{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; height:50px; border:0; border-radius:12px;
    background:linear-gradient(135deg,#3cd283,#2ba96a); color:#07101d;
    font-size:16px; font-weight:800; letter-spacing:.06em; cursor:pointer;
    margin-top:12px;
    -webkit-tap-highlight-color:transparent;
    transition:filter .15s, transform .12s;
}
.mip-submit:active{transform:scale(.98); filter:brightness(1.1)}
.mip-submit.sell{background:linear-gradient(135deg,#ff6b7b,#e05262); color:#fff}

/* ===== PENDING PANEL (tab content) ======================== */
.mobile-pending-panel{
    display:none; flex-direction:column;
    position:fixed; left:0; right:0;
    top:calc(var(--m-header-h) + var(--m-top-h) + var(--m-ct-h));
    bottom:var(--m-footer-h);
    z-index:50;
    background:var(--surface);
    border-top:1px solid var(--line);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:10px 12px calc(14px + var(--m-safe-bot));
}
.mobile-pending-panel.open{display:flex}
.mpp-empty{
    text-align:center; color:var(--muted);
    font-size:13px; padding:30px 12px;
}
.mpp-row{
    display:grid; grid-template-columns:auto 1fr auto;
    align-items:center; gap:10px;
    padding:10px 12px; border-radius:10px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    margin-bottom:8px;
}
.mpp-side{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:48px; height:24px; padding:0 8px; border-radius:6px;
    font-size:10px; font-weight:800; letter-spacing:.06em;
}
.mpp-side.buy{background:rgba(60,210,131,.14); color:#3cd283}
.mpp-side.sell{background:rgba(255,107,123,.14); color:#ff6b7b}
.mpp-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.mpp-sym{font-size:13px; font-weight:800; color:var(--text)}
.mpp-meta{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.mpp-cancel{
    width:30px; height:30px; border:0; border-radius:8px;
    background:rgba(255,107,123,.1);
    color:#ff6b7b; font-size:16px; line-height:1; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mpp-cancel:active{background:rgba(255,107,123,.2)}

/* ===== SECONDARY NAV — now 5 columns (Deposit/Withdraw/Trade/Dashboard/Settings) */
.mobile-secondary-nav{
    grid-template-columns:repeat(5, minmax(0, 1fr))!important;
}

/* ===== POSITIONS / HISTORY POPUP (overlay with tabs) ====== */
.mobile-positions-popup{
    display:none; position:fixed; inset:0; z-index:300;
}
.mobile-positions-popup[aria-hidden="false"]{display:block}
.mpop-backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.mpop-panel{
    position:absolute; left:0; right:0; bottom:0; top:12%;
    background:var(--surface);
    border-radius:18px 18px 0 0;
    display:flex; flex-direction:column;
    overflow:hidden;
    border-top:1px solid var(--line-strong);
    box-shadow:0 -10px 40px rgba(0,0,0,.5);
}
.mpop-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px 10px;
    border-bottom:1px solid var(--line);
}
.mpop-title{
    font-size:16px; font-weight:800; color:var(--text);
}
.mpop-close{
    width:32px; height:32px; border:0; border-radius:8px;
    background:rgba(255,255,255,.05); color:var(--muted);
    font-size:22px; line-height:1; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mpop-close:active{background:rgba(255,255,255,.12); color:var(--text)}
.mpop-tabs{
    display:flex; gap:0; padding:0 12px;
    border-bottom:1px solid var(--line);
}
.mpop-tab{
    flex:1; height:44px; border:0; background:transparent;
    color:var(--muted); font-size:13px; font-weight:700;
    border-bottom:2px solid transparent; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mpop-tab.active{color:var(--gold); border-bottom-color:var(--gold)}
.mpop-body{
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:10px 12px calc(14px + var(--m-safe-bot));
}
.mpop-list{display:flex; flex-direction:column; gap:8px}
.mpop-row{
    display:grid; grid-template-columns:auto 1fr auto;
    align-items:center; gap:10px;
    padding:10px 12px; border-radius:10px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
}
.mpop-side{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:48px; height:24px; padding:0 8px; border-radius:6px;
    font-size:10px; font-weight:800; letter-spacing:.06em;
}
.mpop-side.buy{background:rgba(60,210,131,.14); color:#3cd283}
.mpop-side.sell{background:rgba(255,107,123,.14); color:#ff6b7b}
.mpop-info{min-width:0}
.mpop-sym{
    font-size:13px; font-weight:800; color:var(--text);
    margin-bottom:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mpop-meta{
    font-size:11px; color:var(--muted);
    font-variant-numeric:tabular-nums;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mpop-pnl{
    font-size:13px; font-weight:800;
    font-variant-numeric:tabular-nums; text-align:right;
    min-width:72px;
}
.mpop-pnl.pos{color:#3cd283}
.mpop-pnl.neg{color:#ff6b7b}
.mpop-empty{
    text-align:center; color:var(--muted);
    font-size:13px; padding:30px 12px;
}
/* ===== ONE NAVIGATION ======================================
   The shared header and .bottom-nav are the app's navigation on every page.
   The terminal's own title row, four-tab bottom nav and five-tab secondary
   nav duplicated them (and were drawn underneath the shared bar). What only
   the terminal does - its positions and history lists, its chart tools -
   moved into the account row as icon buttons. The market picker was already
   the symbol chip. */
.trade-terminal-page .app-main--flush{
    min-block-size:0;
    padding-block-end:0;
}
.trade-terminal-page .chart-shell,
.trade-terminal-page .chart-stage{
    /* The <=980 rule's calc(100vh - 156px) applies here too and outranked the
       height above: 624px of chart in a 374px slot. */
    min-height:0;
}
.mobile-tf-bar{display:none!important}

.mtb-account-row{gap:16px}
.mtb-balance,
.mtb-pnl{flex:0 1 auto}
.mtb-pnl{align-items:flex-start; text-align:left}
.mtb-actions{
    display:flex; align-items:center; gap:6px;
    margin-left:auto; flex-shrink:0;
}
.mtb-actions .mtb-action{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:36px; min-width:40px; padding:0;
    background:transparent; color:var(--text);
    border:1px solid var(--line-strong); border-radius:var(--radius-sm, 6px);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.mtb-actions .mtb-action svg{width:20px; height:20px; display:block}
.mtb-actions .mtb-action.active{color:var(--gold); border-color:var(--gold)}
.mtb-actions .mtb-action::before{display:none}
.mtb-actions .mobile-nav-badge{top:-6px; right:-6px}
/* .mobile-nav-item span{display:block} outranks the [hidden] attribute, so
   the count badge showed "0" with nothing open. */
.mobile-nav-badge[hidden]{display:none!important}
.mtr-symbol-logo img{width:100%; height:100%; display:block}

/* ===== OVERLAYS ON THE SHARED Z SCALE =========================
   The drawers, sheets and popups had hand-picked layers (99 to 300) and the
   shared header and bottom nav sit at --z-nav (300), so each of them opened
   underneath part of the chrome: the tools drawer's close button was under
   the header (no visible way out), the bottom of the order sheet and of the
   positions list under the bottom nav. They are modal, so they take the
   modal layer, and their scrim the overlay layer. */
.mobile-sidebar-overlay{z-index:var(--z-overlay)}
.sidebar,
.mobile-tools-drawer,
.mobile-sheet,
.mobile-popup,
.mobile-trade-sheet,
.mobile-positions-popup{z-index:var(--z-modal)}
.mtd-tool{justify-content:flex-start}

/* The search field took width:100% plus its 16px margins and ran off the
   sheet's right edge. */
.mobile-sheet-search{box-sizing:border-box; width:auto; display:block}
/* --surface is 94% opaque, which lets the candles show through a panel that
   covers the chart with a form. The panels that sit over the chart are solid. */
.mobile-info-panel,
.mobile-pending-panel{background:var(--surface-solid, #0c1221)}

/* Tap targets and the last labels under the 12px floor. */
.mtr-symbol{min-height:36px}
.mobile-sheet-close{min-width:40px; min-height:40px}
.msl-label,
.mts-pnl-label{font-size:var(--text-xs, 12px)}

} /* end @media (max-width:768px) */

/* ===== APP CHROME AND ARABIC TEXT IN THE TERMINAL ================
   Not limited to phones. The terminal is laid out left-to-right in every
   language (that is a product decision still open), and its rules set
   direction: ltr on the page and on every button - which also mirrored the
   shared header and bottom nav on this one page: the logo and the tabs sat on
   the opposite side from every other page. The chrome takes the document's
   direction back. */
:root[dir="rtl"] .trade-terminal-page .app-header,
:root[dir="rtl"] .trade-terminal-page .bottom-nav{
    direction:rtl;
}

/* The terminal's face is Bahnschrift, which has no Arabic: Arabic text fell
   through to whatever the system had, a different face from the rest of the
   app. In Arabic the UI face is the app's Arabic one. */
/* :where() keeps this at the weight of the rule it replaces, so the figures
   that set the mono face on their own class (prices, the quantity field)
   keep it. Text inputs are left alone: in the terminal they hold numbers. */
:where(:root[lang="ar"]) .trade-terminal-page,
:where(:root[lang="ar"]) .trade-terminal-page select,
:where(:root[lang="ar"]) .trade-terminal-page button{
    font-family:var(--font-ar);
}

/* Letter-spacing pulls Arabic letters apart at the joins ("الـهـامـش"). The
   terminal sets it on dozens of micro-labels for Latin caps; in Arabic it is
   zero, as --tracking-caps already is for the rest of the app. */
:root[lang="ar"] .trade-terminal-page *,
:root[lang="ar"] .trade-terminal-page *::before,
:root[lang="ar"] .trade-terminal-page *::after{
    letter-spacing:0;
}

/* ---------------------------------------------------------------------------
   The terminal's own shell.

   The page used to draw .app-shell as a 230px sidebar grid with its own
   hand-written navigation. That navigation now comes from the shared header,
   so what is left is a single full-width column — but .trade-terminal-main
   still expects to be a flex child that fills the available height.
   --------------------------------------------------------------------------- */
.trade-terminal-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-block-size: 0;
}

/* The height used to come from `height: 100vh` on a main that owned the whole
   page. Inside the shared shell the terminal fills what the header leaves,
   so the header cannot push the chart off the bottom of the viewport. */
.trade-terminal-page .trade-terminal-main {
    height: auto;
    flex: 1;
    min-block-size: 0;
}

/* Short phones (under 760px tall, e.g. 360x740): the footer took 224px and
   left the chart about 370px. The metrics row (margin required, spread, pip
   value) goes; the same figures are in the Info tab's order form. */
@media (max-width: 768px) and (max-height: 760px) {
    :root { --m-metrics-h: 0px; }
    .mobile-metrics { display: none !important; }
}

/* An order that cannot go through yet (no amount, balance too low, price not
   loaded): muted, but still tappable so the reason is shown (order.js). */
.trade-submit.is-blocked {
    opacity: 0.55;
}