/* ── Tokens ───────────────────────────────────────────────────────── *
 * The colours are the palette the broker's trading pages share (theme.css in
 * Broker.Web.Core, imported by the bundle): dark by default, light under
 * data-bs-theme="light" on <html>, the same as the terminal. Only what the
 * Designer alone draws keeps colours of its own. */
:root {
    /* Makes native form controls (date picker icon/popup, spinners,
       scrollbars) render for the dark theme — the calendar glyph in
       <input type="date"> was black-on-dark without this. */
    color-scheme: dark;
    --bg: var(--bw-bg);
    --bg-surface: var(--bw-panel);
    --bg-elev: var(--bw-surface);
    --bg-hover: var(--bw-hover);
    --bg-active: var(--bw-border);
    --bg-input: var(--bw-surface);
    --text: var(--bw-text);
    --text-dim: var(--bw-text-dim);
    --text-bright: var(--bw-text-bright);
    --border: var(--bw-border);
    --accent: var(--bw-accent);
    --accent-2: var(--bw-accent-hover);
    --accent-text: var(--bw-accent-text);
    --danger: var(--bw-red);
    --success: var(--bw-green);
    --warning: var(--bw-warning);
    --shadow: rgba(0, 0, 0, 0.50);
    /* Outline for diagram socket squares: the text colour, so the ports stand
       out of the canvas in either theme. */
    --socket-stroke: var(--bw-text);

    /* The diagram canvas paints itself from these two. It reads them off the
       document element, so they belong with the other tokens rather than in
       the component: a canvas that keeps its own colours is the one panel
       that stays dark when everything around it turns light. */
    --diagram-bg: var(--bw-bg);
    --diagram-grid: var(--bw-surface);

    /* The trade marks of a report chart: apart from the candles' own green and red, so a mark is
       not lost against a bar. */
    --bt-buy: #3b9cff;
    --bt-sell: #ff9f43;
    --bt-equity: #c084fc;

    --topbar-h: 44px;
    --statusbar-h: 24px;
}

:root[data-bs-theme="light"] {
    color-scheme: light;
    --bg-active: var(--bw-hover);
    --shadow: rgba(20, 21, 26, 0.10);

    /* Grid a shade off the canvas rather than a line drawn on it: at this
       contrast it reads as texture, and the nodes stay the darkest thing. */
    --diagram-bg: var(--bw-panel);
    --diagram-grid: var(--bw-border);

    --bt-buy: #1a73e8;
    --bt-sell: #e8710a;
    --bt-equity: #9333ea;
}

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

html, body {
    height: 100%;
    font-family: "Segoe UI", "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
}

button { font-family: inherit; font-size: inherit; }

/* ── Top bar ─────────────────────────────────────────────────────── */
.designer-topbar {
    height: var(--topbar-h);
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 14px;
    user-select: none;
}
.topbar-left  { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.designer-brand {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-bright); text-decoration: none;
    font-weight: 600; font-size: 14px;
}
.brand-icon {
    width: 22px; height: 22px;
    fill: none; stroke: var(--accent); stroke-width: 1.6;
}
.brand-icon circle { fill: var(--accent); }
.designer-brand-name { white-space: nowrap; }

/* Strategy selector — current strategy name + dropdown */
.strategy-selector { position: relative; }
.btn-strategy-select {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-bright);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    min-width: 180px;
    justify-content: space-between;
}
.btn-strategy-select:hover { background: var(--bg-hover); }
.btn-strategy-select .chev {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--text-dim);
}
.strategy-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 260px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 4px 14px var(--shadow);
    z-index: 200;
    padding: 6px 0;
}
.strategy-dropdown-list { max-height: 360px; overflow-y: auto; padding: 4px 0; }
.strategy-row {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 6px 12px;
    background: transparent; color: var(--text);
    border: 0; cursor: pointer; text-align: left;
    font-size: 12px;
}
.strategy-row:hover { background: var(--bg-hover); color: var(--text-bright); }
.strategy-row .row-meta { color: var(--text-dim); font-size: 11px; }

/* Topbar action buttons (Save / Build / Run / Stop) */
.topbar-actions { display: flex; align-items: center; gap: 2px; }
.btn-action {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    color: var(--text);
    border: 0; border-radius: 4px;
    cursor: pointer;
}
.btn-action:hover { background: var(--bg-hover); color: var(--text-bright); }
.btn-action svg { width: 16px; height: 16px; fill: currentColor; }
.btn-action-go   { color: var(--success); }
.btn-action-stop { color: var(--danger); }
.btn-action:disabled, .btn-action.is-disabled {
    opacity: 0.32;
    cursor: default;
    pointer-events: none;
    color: var(--text-dim);
}
.se-ctx-item:disabled, .se-ctx-item.is-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Visual divider between document actions and run actions. */
.topbar-sep {
    width: 1px; height: 18px; margin: 0 4px;
    background: var(--border);
}

/* Export split-button: primary (web) + ▾ toggle that opens a tiny
   format menu. The toggle is a narrow sibling, no gap so they read as
   one control. */
.btn-split { position: relative; display: inline-flex; align-items: center; }
.btn-split .btn-split-toggle { width: 16px; }
.btn-split .btn-split-toggle svg { width: 10px; height: 10px; }
.export-menu {
    position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 160px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 4px 14px var(--shadow);
    z-index: 200; padding: 4px 0;
}
.export-menu[hidden] { display: none; }
.export-menu-item {
    display: block; width: 100%;
    padding: 6px 12px;
    background: transparent; color: var(--text);
    border: 0; cursor: pointer; text-align: left;
    font-size: 12px; white-space: nowrap;
}
.export-menu-item:hover { background: var(--bg-hover); color: var(--text-bright); }

/* The balance AI generations and cloud runs are paid from, as the site's chat shows it. */
.topbar-balance {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 8px;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
}
.topbar-balance[hidden] { display: none; }
.topbar-balance:disabled { cursor: default; }
.topbar-balance:not(:disabled) { cursor: pointer; }
.topbar-balance:not(:disabled):hover { background: var(--bg-hover); border-color: var(--border); }
.topbar-balance:not(:disabled):hover strong { color: var(--accent); }
.topbar-balance strong { color: var(--text-bright); font-weight: 600; }

.btn-topbar-signin {
    display: inline-flex; align-items: center;
    height: 30px; padding: 0 14px;
    background: var(--accent);
    color: var(--accent-text);
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px; font-weight: 500;
}
.btn-topbar-signin:hover { background: var(--accent-2); }

/* Between a phone and a desktop - a phone on its side, a narrow window - one line still holds the bar once the brand
   keeps only its mark and the strategy's name gives way; at full length they ran the actions into the controls. */
@media (max-width: 935px) {
    .designer-brand-name { display: none; }
    .strategy-selector { flex: 0 1 180px; min-width: 96px; }
    .btn-strategy-select { width: 100%; min-width: 0; }
    #currentStrategyName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* A phone's width does not hold the brand, the strategy, the actions and the controls on one line: the actions take
   a line of their own under the rest, the brand keeps its mark and the strategy's name gives way. */
@media (max-width: 760px) {
    :root { --topbar-h: 84px; }
    .designer-topbar { flex-wrap: wrap; align-content: center; row-gap: 4px; column-gap: 8px; padding: 0 8px; }
    .topbar-left { display: contents; }
    .designer-brand-name { display: none; }
    .strategy-selector { order: 1; flex: 1 1 0; min-width: 0; }
    .btn-strategy-select { width: 100%; min-width: 0; }
    #currentStrategyName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-right { order: 2; gap: 4px; }
    .topbar-actions { order: 3; flex: 1 0 100%; overflow-x: auto; }
    .topbar-balance > span:first-child { display: none; }
}

/* ── Dock host ───────────────────────────────────────────────────── */
.designer-dock-host {
    position: absolute;
    top: var(--topbar-h);
    bottom: var(--statusbar-h);
    left: 0; right: 0;
    overflow: hidden;
    background: var(--bg);
}

/* Our panel wrapper that Dockview mounts inside its (absolutely
   positioned) render container. Without this it stays display:block
   with intrinsic height, so the inner .d-panel-body / diagram host
   (flex:1 1 0) collapses to 0 and panels render blank. Fill the
   container and let the cloned .d-panel flex to full height. */
/* Dockview's content container is position:static, so our absolutely
   positioned panel below resolved its inset:0 against the group-level
   .dv-view instead — covering the 35px tab header (Properties/Palette/
   Solution Explorer lost their draggable title bars). Make the content
   container the containing block so the panel fills only the body. */
.dv-dockview .dv-content-container { position: relative; }
.designer-dock-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}
.designer-dock-panel > * {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* Blend Dockview (dockview-theme-dark) with our palette by overriding
   its CSS custom properties on the host, plus a couple structural
   tweaks. Panels are non-closeable: the default tab's close action is
   hidden and we never call removePanel. */
.dv-dockview {
    --dv-group-view-background-color: var(--bg-surface);
    --dv-tabs-and-actions-container-background-color: var(--bg-elev);
    --dv-activegroup-visiblepanel-tab-background-color: var(--bg-surface);
    --dv-activegroup-visiblepanel-tab-color: var(--text-bright);
    --dv-activegroup-hiddenpanel-tab-background-color: var(--bg-elev);
    --dv-activegroup-hiddenpanel-tab-color: var(--text-dim);
    --dv-inactivegroup-visiblepanel-tab-background-color: var(--bg-surface);
    --dv-inactivegroup-visiblepanel-tab-color: var(--text);
    --dv-inactivegroup-hiddenpanel-tab-background-color: var(--bg-elev);
    --dv-inactivegroup-hiddenpanel-tab-color: var(--text-dim);
    --dv-separator-border: var(--border);
    --dv-tab-divider-color: var(--border);
    --dv-icon-hover-background-color: var(--bg-hover);
    --dv-drag-over-background-color: rgba(120, 170, 255, 0.12);
    background: var(--bg);
}
.dv-default-tab {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    font-weight: 500;
    position: relative;
}
/* Accent underline on the visible tab — same cue as before. */
.dv-active-group .dv-tab.dv-active-tab .dv-default-tab::after,
.dv-tab.dv-active-tab .dv-default-tab::after {
    content: '';
    position: absolute;
    left: 8px; right: 8px; bottom: 0;
    height: 2px;
    background: var(--accent);
}
/* Non-closeable: hide the per-tab close affordance. Transient panels
   (optimizer/backtest/live/code) carry their own in-panel ✕ instead. */
.dv-default-tab-action { display: none !important; }
.dv-sash { background: var(--border) !important; }

/* In-panel close button for transient dock panels. It anchors to
   .designer-dock-panel, which is already `position:absolute; inset:0`
   (see the rule above) — do NOT add another `position` declaration for
   it here; an earlier `position:relative` override silently broke the
   whole dock layout. */
.dv-panel-close {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 20;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-elev);
    color: var(--text-muted, #9a9a9a);
    cursor: pointer;
}
.dv-panel-close:hover {
    background: var(--bg-hover);
    color: var(--text-bright);
}

/* MDI document tabs — one per open doc. Reparented into whichever
   centre panel (diagram/code/optimizer) is active so the strip spans
   only that column, not the side panels. flex:0 0 auto keeps it a
   fixed-height header inside the panel's flex column. */
.d-doc-tabs {
    flex: 0 0 auto;
    height: 31px;
    display: flex;
    align-items: stretch;
    gap: 1px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.d-doc-tabs[hidden] { display: none; }
.d-doc-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 0 12px;
    font-size: 12px;
    color: var(--text-dim);
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.d-doc-tab:hover { color: var(--text-bright); }
.d-doc-tab-ico { font-size: 11px; color: var(--accent); flex: 0 0 auto; }
.d-doc-tab-indicator .d-doc-tab-ico { color: var(--success); }
.d-doc-tab-optimization .d-doc-tab-ico { color: #c08af0; }
.d-doc-tab-composite .d-doc-tab-ico { color: #f0b35a; }
.d-doc-tab.is-active {
    color: var(--text-bright);
    background: var(--bg);
    box-shadow: inset 0 -2px 0 var(--accent);
}
.d-doc-tab-close {
    background: transparent;
    border: 0;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}
.d-doc-tab-close:hover { background: var(--bg-hover); color: var(--text-bright); }

/* ── Panels (template-cloned content) ────────────────────────────── */
.d-panel {
    display: flex; flex-direction: column;
    height: 100%; width: 100%;
    background: var(--bg-surface);
    color: var(--text);
    min-height: 0;
}
.d-panel-toolbar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    min-height: 32px;
}
.d-panel-toolbar-right { justify-content: flex-end; }
.d-panel-title {
    flex: 1;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
}
.d-panel-status {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-dim);
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
}
.d-panel-body { flex: 1 1 0; min-height: 0; overflow: auto; }

.d-icon-btn {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--text);
    border: 0; border-radius: 3px; cursor: pointer;
    font-size: 14px;
}
.d-icon-btn:hover { background: var(--bg-hover); color: var(--text-bright); }
/* A control that cannot be used has to look like it. These are switched off by the run-state
   logic, and one that still looks and hovers like a live button turns a refusal into "I
   pressed it and nothing happened": the browser swallows the click before any code runs. */
.d-icon-btn:disabled, .d-icon-btn.is-disabled {
    opacity: 0.32;
    cursor: default;
    pointer-events: none;
    color: var(--text-dim);
}
.d-icon-btn svg { width: 14px; height: 14px; }
.d-toggle-btn.is-active { color: var(--accent); }
.d-toggle-btn[aria-pressed="true"] { color: var(--accent); }

.d-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 2px;
    padding: 4px 8px;
    font-size: 12px;
}
.d-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.d-input-search { flex: 1; }

.d-empty { padding: 14px 12px; color: var(--text-dim); font-size: 12px; font-style: italic; }

/* Solution Explorer tree (reused by SolutionExplorer.ts) */
.se-tree { list-style: none; padding: 0; margin: 0; }
.se-tree li { user-select: none; }
.se-node {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 12px 3px 18px;
    cursor: pointer; font-size: 13px;
}
.se-node:hover { background: var(--bg-hover); }
.se-node.is-active { background: var(--bg-active); color: var(--text-bright); }
.se-group  { margin: 0 0 4px; }
.se-group-head {
    display: flex; align-items: center; gap: 4px;
    color: var(--text-dim); font-weight: 600;
    padding: 6px 8px 2px; text-transform: uppercase;
    font-size: 11px; letter-spacing: 0.4px;
    cursor: pointer; user-select: none;
}
.se-group-head:hover { color: var(--text); }
.se-group-head.is-active { color: var(--accent); }
.se-caret { width: 10px; display: inline-block; text-align: center; font-size: 9px; color: var(--text-dim); }
.se-node-static { cursor: default; }
.se-node-static:hover { background: transparent; }
.se-icon { width: 14px; color: var(--accent); }
.se-label { flex: 1; }

/* Per-row hover actions: rename / duplicate / delete. Hidden until the
   row is hovered or focused — keeps the tree visually quiet. */
/* Right-click context menu for a strategy row (replaces the inline
   hover action rail). Appended to <body> so panel overflow can't clip
   it; positioned/clamped in JS. */
.se-ctx-menu {
    position: fixed;
    z-index: 1100;
    min-width: 160px;
    padding: 4px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px var(--shadow);
    display: flex;
    flex-direction: column;
}
.se-ctx-ico { display: inline-block; width: 16px; margin-right: 8px; text-align: center; color: var(--accent); }
.se-ctx-ico-go { color: var(--success); }
.se-ctx-ico-stop { color: var(--danger); }
.se-ctx-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 12px;
    font-size: 13px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--text);
    cursor: pointer;
}
.se-ctx-item:hover { background: var(--bg-hover); color: var(--text-bright); }
.se-ctx-item-danger { color: var(--danger); }
.se-ctx-item-danger .se-ctx-ico { color: var(--danger); }
.se-ctx-item-danger:hover { background: var(--danger); color: #fff; }
.se-ctx-item-danger:hover .se-ctx-ico { color: #fff; }

.se-rename-input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--accent);
    color: var(--text-bright);
    border-radius: 2px;
    padding: 2px 4px;
    font-size: 13px;
}

/* ── Palette tree ─────────────────────────────────────────────────── */
.d-palette { padding: 4px 0; }
.d-palette-tree { list-style: none; margin: 0; padding: 0; }
.d-palette-group { margin: 2px 0; }
.d-palette-group.is-hidden { display: none; }

.d-palette-group-head {
    display: flex; align-items: center; gap: 6px;
    width: 100%;
    padding: 4px 10px;
    background: transparent;
    color: var(--text-dim);
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.d-palette-group-head:hover { background: var(--bg-hover); color: var(--text-bright); }

.d-palette-chev {
    width: 0; height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    transform: rotate(90deg);
    transition: transform 120ms ease;
    flex-shrink: 0;
}
.d-palette-group.is-collapsed .d-palette-chev { transform: rotate(0deg); }

.d-palette-group-items { list-style: none; margin: 0; padding: 0; }
.d-palette-group.is-collapsed .d-palette-group-items { display: none; }

.d-palette-item {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 26px;
    cursor: grab;
    color: var(--text);
    font-size: 12px;
    user-select: none;
}
.d-palette-item:hover { background: var(--bg-hover); color: var(--text-bright); }
.d-palette-item.is-dragging { opacity: 0.5; cursor: grabbing; }
.d-palette-item.is-hidden { display: none; }
.d-palette-item:active { cursor: grabbing; }

.d-palette-icon {
    width: 16px; height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}
.d-palette-icon-placeholder {
    background: var(--bg-elev);
    border-radius: 2px;
}
.d-palette-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Properties panel content ─────────────────────────────────────── */
.d-props { padding: 6px 0; }
.d-props-section {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
}
.d-props-section:last-child { border-bottom: 0; }
.d-props-toolbar { gap: 12px; }
/* ── Reusable property grid (d-pg-*) ─────────────────────────────── */
.d-pg-root {
    padding: 6px 12px;
    overflow-y: auto;
}
.d-pg-header {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0 2px;
    cursor: default;
    user-select: none;
}
.d-pg-chevron { color: var(--text-dim); font-size: 11px; }
.d-pg-title {
    flex: 1;
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
}
.d-pg-help {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: help;
}
.d-pg-help:hover { filter: brightness(1.1); }
.d-pg-desc {
    color: var(--text-dim);
    font-size: 11px;
    margin: 2px 0 6px;
    line-height: 1.4;
}
.d-pg-toggle-row { padding: 2px 0 8px; text-align: right; }
.d-pg-toggle {
    color: var(--accent);
    font-size: 11px;
    text-decoration: none;
}
.d-pg-toggle:hover { text-decoration: underline; }

.d-pg-section { padding: 0 0 6px; }
.d-pg-section-title {
    margin: 6px 0 4px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.d-pg-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
.d-pg-key { color: var(--text); }
.d-pg-input { width: 100%; }

/* Basic mode: bigger rows / more breathing room — matches the desktop
   "default" view in the WPF Designer screenshot. */
.d-pg-mode-basic .d-pg-row { padding: 10px 0; min-height: 36px; }
.d-pg-mode-basic .d-pg-row + .d-pg-row { border-top: 1px solid var(--border); }
.d-pg-mode-basic .d-pg-section-title { font-size: 11px; padding: 8px 10px 6px 12px; }

/* Advanced mode: pack tightly, every row is one line. */
.d-pg-mode-advanced .d-pg-row { padding: 3px 0; min-height: 24px; }

.d-pg-checkbox-wrap { display: inline-flex; align-items: center; }
.d-pg-checkbox { width: 14px; height: 14px; cursor: pointer; }

/* Picker-backed param (indicator chooser …) — looks like an input but
   acts as a button that opens a modal. Right-aligned chevron hints it
   is clickable; placeholder state dims the label. */
.d-pg-picker {
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.d-pg-picker::after {
    content: '▾';
    color: var(--text-dim);
    font-size: 10px;
}
.d-pg-picker.is-placeholder { color: var(--text-dim); }
.d-pg-picker:hover { border-color: var(--accent); }

/* Composite candle-data-type picker — type combo + arg input side-by-side. */
.d-pg-candle-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
}
.d-pg-candle-type-sel { min-width: 0; }
.d-pg-candle-type-arg { min-width: 0; }

/* ── Trader-style polish ──────────────────────────────────────────── */
/* Crisper field borders & focus ring, slightly rounded inputs, hover
   highlight on rows. Mirrors the Trader UI's overall feel. */
.d-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 3px;
    padding: 5px 8px;
    font-size: 12px;
    transition: border-color 120ms, background 120ms;
}
.d-input:hover  { border-color: var(--text-dim); }
.d-input:focus  { outline: none; border-color: var(--accent); background: var(--bg-surface); }

.d-pg-mode-basic .d-pg-row:hover { background: var(--bg-hover, rgba(255,255,255,0.03)); }
.d-pg-mode-basic .d-pg-row { padding: 10px 6px; }
.d-pg-mode-advanced .d-pg-row:hover { background: var(--bg-hover, rgba(255,255,255,0.03)); }

.d-pg-section-title {
    background: linear-gradient(to bottom, var(--bg-elev), var(--bg-surface));
    /* Indent the bar off the panel edge and give the label room to
       breathe to the right of the accent stripe. */
    margin-left: 6px;
    padding: 6px 10px 6px 12px;
    border-radius: 2px;
    border-left: 3px solid var(--accent);
}

/* Invalid field highlight — red ring that fades after the change handler
   reverts the value. Used by TimeSpan / number editors when the user
   typed something that wouldn't round-trip to the server. */
/* The packaged panel takes its height from whatever holds it, so the pane hands its own down
   instead of letting the container shrink to the rows it currently has. Every link carries
   min-height:0, without which a flex child refuses to shrink below its content and the table
   scrolls the whole pane rather than itself. */
.d-panel-output .d-panel-body {
    display: flex;
    overflow: hidden;
}

.d-panel-output .d-log {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    padding: 0;
}

.d-panel-output .log-monitor-panel,
.d-panel-output .log-monitor-body {
    flex: 1 1 auto;
    min-height: 0;
}

.d-emu-error {
    margin: 8px 0 0;
    color: var(--d-danger, #e5484d);
    font-size: 12px;
    line-height: 1.4;
}

.d-pg-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px var(--danger) inset;
    animation: d-pg-invalid-pulse 0.4s ease-out;
}
@keyframes d-pg-invalid-pulse {
    0%   { box-shadow: 0 0 0 4px rgba(246, 70, 93, 0.30) inset; }
    100% { box-shadow: 0 0 0 1px var(--danger) inset; }
}

/* ── Scrollbar styling (Binance-ish) ─────────────────────────────── */
/* Webkit (Chrome/Edge/Safari) — slim, themed. Firefox uses the
   `scrollbar-color` shorthand which we set on the html root. */
* { scrollbar-color: var(--bg-hover) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

.d-param-complex {
    display: flex; align-items: center; gap: 6px;
    flex: 1; min-width: 0;
}
.d-param-complex .d-param-input { flex: 1; }
.d-param-hint {
    font-size: 10px;
    color: var(--text-dim);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    padding: 1px 5px;
    border-radius: 2px;
    white-space: nowrap;
    font-family: "Cascadia Mono", Consolas, monospace;
}
.d-props-params-host { display: contents; }
.d-props-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}
.d-props-toggle:hover { color: var(--text); }
.d-props-toggle input { margin: 0; cursor: pointer; }
.d-props-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-dim);
    font-weight: 600;
    margin: 0 0 6px;
}
.d-props-row {
    display: flex; align-items: baseline; gap: 6px;
    padding: 2px 0;
    font-size: 12px;
}
.d-props-key {
    flex: 0 0 70px;
    color: var(--text-dim);
}
.d-props-val {
    flex: 1; min-width: 0;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 11px;
}
.d-props-message {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 2px;
    padding: 4px 6px;
    font-size: 12px;
    resize: vertical;
}
.d-props-message:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.d-props-desc {
    padding: 6px 12px;
    color: var(--text-dim);
    font-size: 11px;
    font-style: italic;
    border-top: 1px solid var(--border);
}
.d-props-ports {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.d-props-ports tr { border-bottom: 1px solid var(--border); }
.d-props-ports tr:last-child { border-bottom: 0; }
.d-props-ports td {
    padding: 3px 4px;
    color: var(--text);
}
.d-props-ports .port-type {
    color: var(--text-dim);
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 10px;
}
.d-props-ports .port-max {
    color: var(--text-dim);
    width: 30px; text-align: right;
}

/* Parameter editor rows — label on left, typed input on right */
.d-param-row { gap: 8px; }
.d-param-input {
    flex: 1; min-width: 0;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 2px;
    padding: 3px 6px;
    font-size: 12px;
}
.d-param-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.d-param-checkbox { margin-left: auto; }

/* Indicator picker list — highlights the currently selected indicator */
.d-indicator-list .is-active {
    background: var(--bg-active);
    color: var(--text-bright);
}
.d-indicator-list .is-active .item-meta { color: var(--text-bright); opacity: 0.85; }
.d-indicator-search { width: 100%; margin-bottom: 8px; }

/* ── Backtest panel ───────────────────────────────────────────────── */
.d-bt-toolbar { gap: 8px; }
.d-bt-status { color: var(--text-dim); font-size: 11px; }
/* The strategy's past runs, at the far end of a run panel's toolbar. */
.d-bt-runs { margin-left: auto; height: 24px; padding: 0 6px; font-size: 11px; }
.d-bt-run { color: var(--success); }
.d-bt-body {
    display: flex; flex-direction: column;
    height: 100%;
    min-height: 0;
}
.d-bt-chart {
    flex: 1 1 60%;
    min-height: 0;
    border-bottom: 1px solid var(--border);
}
.d-bt-bottom {
    flex: 1 1 40%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
    overflow: hidden;
}
.d-bt-section-title {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
}
.d-bt-stat-key { padding: 3px 10px; color: var(--text-dim); }
.d-bt-stat-val { padding: 3px 10px; color: var(--text); text-align: right; font-family: "Cascadia Mono", Consolas, monospace; }

/* Backtest sub-tab panes (rail reuses the .d-opt-* shell). */
.d-bt-view-setup { overflow-y: auto; }
.d-bt-view-chart, .d-bt-view-equity { display: flex; flex-direction: column; }
.d-bt-view-chart .d-bt-chart, .d-bt-view-equity .d-bt-chart { flex: 1 1 auto; min-height: 0; border-bottom: 0; }
.d-bt-stats-grid {
    flex: 1 1 auto;
    min-height: 0; min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    overflow: hidden;
}
.d-bt-stats-grid > * { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* The chart's own legend and trade list sit over the report chart. No tool rail runs down its side, so the legend
   keeps the same small inset from the left as from the top. */
.d-bt-view-chart .d-bt-chart {
    position: relative;
    --chart-ui-legend-top: 6px;
    --chart-ui-legend-left: 8px;
}

/* Statistics, Orders and Trades: one table each, filling its own section. */
.d-bt-view-stats, .d-bt-view-orders, .d-bt-view-trades { display: flex; flex-direction: column; }

/* Logs as a proper table (Time | Level | Message). */
/* The log is the packaged grid too, so the section holds it the way the blotters are held
   and the grid scrolls inside rather than the pane scrolling under it. */
.d-bt-view-logs { display: flex; flex-direction: column; overflow: hidden; }
.d-bt-logs-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
    font-family: "Cascadia Mono", Consolas, monospace;
}
.d-bt-logs-table thead th {
    position: sticky; top: 0; z-index: 1;
    text-align: left; padding: 5px 10px;
    background: var(--bg-elev); color: var(--text-dim);
    border-bottom: 1px solid var(--border); font-weight: 600;
}
.d-bt-logs-table td { padding: 3px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.d-bt-log-time  { white-space: nowrap; color: var(--text-dim); }
.d-bt-log-level { white-space: nowrap; }
.d-bt-log-text  { color: var(--text); word-break: break-word; }
.d-bt-log-lvl-warning .d-bt-log-level { color: #e6b450; }
.d-bt-log-lvl-error   .d-bt-log-level { color: var(--danger, #f48771); }
.d-bt-log-lvl-debug   .d-bt-log-level,
.d-bt-log-lvl-verbose .d-bt-log-level { color: var(--text-dim); }

/* ── Optimizer panel ──────────────────────────────────────────────── */
.d-opt-body {
    display: flex; flex-direction: row;
    height: 100%;
    min-height: 0;
}
/* Vertical tab rail on the left of the optimizer panel. */
.d-opt-rail {
    flex: 0 0 auto;
    display: flex; flex-direction: column;
    width: 132px;
    background: var(--bg-elev);
    border-right: 1px solid var(--border);
    overflow-y: auto;
}
.d-opt-vtab {
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--text-dim);
    padding: 10px 12px;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}
.d-opt-vtab:hover:not(:disabled) { color: var(--text); background: var(--bg-hover); }
.d-opt-vtab:disabled { color: var(--text-dim); opacity: 0.45; cursor: default; }
.d-opt-vtab.is-active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: var(--bg-surface);
    font-weight: 600;
}
.d-opt-content {
    flex: 1 1 auto;
    min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
}
.d-opt-pane {
    flex: 1 1 auto;
    min-height: 0; min-width: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.d-opt-pane[hidden] { display: none; }
.d-opt-view-setup { overflow-y: auto; }

.d-nc-row { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-size: 12px; color: var(--text-dim); }
.d-nc-row .d-input { width: 100%; }
/* Content-type tabs (Diagram / C# / F# / Python / VB). */
.d-nc-tabs {
    display: flex;
    gap: 2px;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--border);
}
.d-nc-tab {
    padding: 7px 14px;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.d-nc-tab:hover { color: var(--text); }
.d-nc-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}
.d-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.d-live-body,
.d-balance-body { overflow: auto; height: 100%; min-height: 0; }
.d-live-table,
.d-balance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.d-live-table th,
.d-balance-table th {
    text-align: left;
    padding: 4px 8px;
    color: var(--text-muted, #9a9a9a);
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-surface, #252526);
}
.d-live-table td,
.d-balance-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
}

/* Balance panel: what moved the balance, the latest first. Its menu entry stays hidden until the server shows a
   balance. */
[data-balance-entry][hidden] { display: none; }
.d-balance-table .d-balance-amount,
.d-balance-in,
.d-balance-out {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.d-balance-in { color: var(--success); }
.d-balance-out { color: var(--danger); }
.d-balance-top-up {
    padding: 2px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-surface);
    color: var(--text);
    cursor: pointer;
}
.d-balance-top-up:hover { border-color: var(--text-dim); }
.d-balance-top-up[hidden] { display: none; }
.d-live-act {
    padding: 2px 8px;
    margin-right: 4px;
    cursor: pointer;
}

/* AI panel, laid out as the site's own chat: the conversation, and one field below it holding the attached files,
   the request and its buttons. Its entry points stay hidden until the server says it offers generation. */
[data-ai-entry][hidden] { display: none; }
.d-ai-kinds { display: flex; gap: 2px; }
.d-ai-kind {
    padding: 3px 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
}
.d-ai-kind:hover { color: var(--text); }
.d-ai-kind.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}
.d-ai-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.d-ai-transcript {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}
.d-ai-question,
.d-ai-answer {
    max-width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
}
.d-ai-question {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    background: var(--bg-active);
    color: var(--text-bright);
}
.d-ai-question-text { white-space: pre-wrap; }
.d-ai-question-files {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.d-ai-answer {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
}
.d-ai-answer.is-pending { color: var(--text-dim); }
.d-ai-answer.is-failed .d-ai-message { color: var(--danger); }
.d-ai-message { color: var(--text-dim); }
.d-ai-notes { white-space: pre-wrap; }
.d-ai-preview {
    align-self: stretch;
    max-height: 320px;
    overflow: auto;
    margin: 0;
    padding: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: Consolas, "SF Mono", Menlo, monospace;
    font-size: 12px;
}
/* An answer being written: its line breathes, so a long generation is seen going on, and the text the AI has written
   so far runs below it, its newest lines in view. */
.d-ai-writing { animation: d-ai-writing 1.4s ease-in-out infinite; }
@keyframes d-ai-writing { 50% { opacity: 0.45; } }
.d-ai-written {
    align-self: stretch;
    max-height: 160px;
    overflow: auto;
    margin: 0;
    padding: 6px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    font-family: Consolas, "SF Mono", Menlo, monospace;
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-all;
}
/* A scheme the AI answered with, drawn read-only to be looked at before it is opened. */
.d-ai-scheme {
    align-self: stretch;
    height: 260px;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
/* At the drawing's own full-screen button it takes the page, the way the diagram panel does. */
.d-ai-scheme.is-expanded {
    position: fixed;
    inset: 12px;
    z-index: 900;
    height: auto;
    background: var(--bg-surface);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.d-ai-composer {
    flex: 0 0 auto;
    padding: 10px;
    border-top: 1px solid var(--border);
}
.d-ai-field {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    transition: border-color 0.12s ease;
}
.d-ai-field:focus-within { border-color: var(--accent); }
.d-ai-field.is-dropping { border-color: var(--accent); border-style: dashed; }
.d-ai-input {
    display: block;
    width: 100%;
    min-height: 76px;
    max-height: 220px;
    padding: 10px 12px 40px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    resize: none;
    outline: none;
    overflow-y: auto;
}
.d-ai-field-tools {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.d-ai-attach,
.d-ai-send {
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elev);
    color: var(--text-dim);
    cursor: pointer;
}
.d-ai-attach:hover { color: var(--text); background: var(--bg-hover); }
.d-ai-attach {
    width: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.d-ai-attach svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.d-ai-send {
    width: 26px;
    padding: 0;
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}
.d-ai-send:hover { filter: brightness(1.08); }
.d-ai-attach:disabled,
.d-ai-send:disabled { opacity: 0.5; cursor: default; filter: none; }
.d-ai-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px 0;
}
.d-ai-attachments[hidden] { display: none; }
.d-ai-uploading {
    align-self: center;
    color: var(--text-dim);
    font-size: 11px;
}
.d-ai-attachment {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elev);
    overflow: hidden;
}
.d-ai-attachment-name {
    max-width: 180px;
    padding: 6px 22px 6px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}
.d-ai-question .d-ai-attachment-name { padding-right: 10px; }
.d-ai-attachment--image {
    width: 56px;
    height: 56px;
}
.d-ai-attachment--image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.d-ai-attachment-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--text-bright);
    color: var(--bg);
    font-size: 12px;
    line-height: 14px;
    opacity: 0.75;
    cursor: pointer;
}
.d-ai-attachment-remove:hover { opacity: 1; }
.d-ai-notice {
    margin: 6px 2px 0;
    color: var(--danger);
    font-size: 11px;
}
.d-ai-notice[hidden] { display: none; }
.d-ai-hint {
    margin: 6px 2px 0;
    color: var(--text-dim);
    font-size: 11px;
}

.d-opt-emu {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--border);
}
.d-opt-emu-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 10px;
}
.d-opt-emu-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: var(--text-dim);
}
.d-opt-emu-field > span { text-transform: uppercase; letter-spacing: .4px; }
.d-opt-emu-field .d-input { min-width: 130px; }
.d-opt-emu-field input[type="date"] { min-width: 120px; }

.d-opt-params {
    flex: 0 0 auto;
    padding: 0 0 8px;
}
.d-opt-params .d-bt-section-title { position: sticky; top: 0; z-index: 1; }
.d-opt-params-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}
.d-opt-params-table th {
    text-align: left;
    padding: 6px 10px;
    color: var(--text-muted, #9a9a9a);
    font-weight: 500;
    border-bottom: 1px solid var(--border);
}
.d-opt-params-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.d-opt-params-table th:nth-child(1),
.d-opt-params-table td:nth-child(1) { width: 30px; text-align: center; padding: 5px 0; }
.d-opt-params-table th:nth-child(2),
.d-opt-params-table td:nth-child(2) {
    width: 38%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d-opt-param-num { width: 100%; box-sizing: border-box; padding: 3px 6px; }
.d-opt-param-note {
    color: var(--text-muted, #9a9a9a);
    font-style: italic;
    padding: 5px 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d-opt-params-empty {
    color: var(--text-muted, #9a9a9a);
    font-style: italic;
    text-align: center;
    padding: 10px;
}
.d-opt-grid-pane {
    flex: 1 1 55%;
    min-height: 0;
    overflow: auto;
    border-bottom: 1px solid var(--border);
}
.d-opt-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: "Cascadia Mono", Consolas, monospace;
}
.d-opt-grid thead {
    position: sticky; top: 0;
    background: var(--bg-elev);
    z-index: 1;
}
.d-opt-grid th {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
    font-weight: 600;
    user-select: none;
}
.d-opt-grid th:hover { color: var(--text); }
.d-opt-grid td {
    padding: 4px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    white-space: nowrap;
}
.d-opt-grid tbody tr { cursor: pointer; }
.d-opt-grid tbody tr:hover  { background: var(--bg-hover); }
.d-opt-grid tbody tr.is-active { background: var(--accent-bg, rgba(0, 122, 204, 0.15)); }

.d-opt-detail-pane {
    flex: 1 1 45%;
    display: flex; flex-direction: column;
    min-height: 0; min-width: 0;
    overflow: hidden;
}
.d-opt-detail {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    padding: 8px 10px;
    color: var(--text-dim);
    font-size: 12px;
}
.d-opt-detail-wrap {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2fr;
    gap: 10px;
    height: 100%;
}
.d-opt-detail-stats { overflow-y: auto; padding-right: 6px; }
.d-opt-detail-row {
    display: flex; justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
    border-bottom: 1px dashed var(--border);
    font-family: "Cascadia Mono", Consolas, monospace;
}
.d-opt-detail-row .k { color: var(--text-dim); }
.d-opt-detail-row .v { color: var(--text); text-align: right; }
.d-opt-detail-chart { min-height: 200px; }

/* X/Y/Metric selector bar — sits at the top of the heatmap / 3D
   panes inside the content area (hidden for setup and table). */
.d-opt-axis-bar {
    flex: 0 0 auto;
    display: flex; gap: 14px; align-items: center;
    padding: 7px 12px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-dim);
}
.d-opt-axis-bar[hidden] { display: none; }
.d-opt-axis-label { display: inline-flex; gap: 5px; align-items: center; }
.d-opt-axis { height: 24px; padding: 0 6px; font-size: 11px; min-width: 92px; }

.d-opt-view-grid,
.d-opt-view-heatmap,
.d-opt-view-3d {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    min-height: 0;
}
.d-opt-view-grid[hidden],
.d-opt-view-heatmap[hidden],
.d-opt-view-3d[hidden] { display: none; }

/* Both result views mount a packaged control, which sizes its own canvas to the box it is given.
   Unlike the blotters the header stays: it carries the metric's name, which is the caption the
   map's legend is read against, and the landscape's Reset View button. Only the close button goes
   — there is no window to close inside a tab. */
.d-opt-3d,
.d-opt-heatmap { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.d-opt-3d > .terminal-panel,
.d-opt-heatmap > .terminal-panel { flex: 1 1 auto; min-height: 0; }
.d-opt-3d .panel-close-btn,
.d-opt-heatmap .panel-close-btn { display: none; }

/* ── Code panel ────────────────────────────────────────────────────── */
.d-panel-code { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.d-code-toolbar { gap: 8px; align-items: center; }
.d-code-lang-label { display: inline-flex; gap: 4px; align-items: center; color: var(--text-dim); font-size: 11px; }
.d-code-lang { height: 22px; padding: 0 4px; font-size: 11px; }
.d-code-status { color: var(--text-dim); font-size: 11px; margin-left: auto; }
.d-code-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
}
.d-code-mount {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--bg-surface);
    overflow: hidden;
}
.d-code-mount .cm-editor { height: 100%; background: var(--bg-surface); color: var(--text); }
.d-code-mount .cm-editor.cm-focused { outline: 1px solid var(--accent); outline-offset: -1px; }
.d-code-mount .cm-gutters {
    background: var(--bg-elev);
    color: var(--text-dim);
    border-right: 1px solid var(--border);
}
.d-code-mount .cm-activeLine { background: rgba(255, 255, 255, 0.04); }
.d-code-mount .cm-activeLineGutter { background: rgba(255, 255, 255, 0.06); }

/* Diagram panel */
.d-panel-diagram { position: relative; }
body.d-diagram-modal-open { overflow: hidden; }
/* Above the docked panels it replaces, below anything that opens over the page: the
   diagram's own menu raises the indicator picker, and a dialog behind the maximised
   panel is a dialog nobody can see. */
.d-panel-diagram.is-expanded {
    position: fixed;
    inset: 12px;
    z-index: 900;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--border);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.d-diagram-toolbar { gap: 6px; flex-wrap: wrap; }
.d-toolbar-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
/* The canvas is the whole of the host and pans inside itself: a host that scrolled would take a scrollbar's
   width from the canvas, which the control then resizes to, which drops the scrollbar again. */
.d-diagram-host { position: relative; overflow: hidden; }

/* Shown while no document is open and the canvas is empty: without it the
   panel looks like an open document that happens to be blank.
   Not interactive - the host underneath is the palette's drop target, and the
   overview map is hit-tested through the canvas. Stays below z-index 4, which
   is where the diagram control puts its own corner buttons. */
.d-diagram-empty {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px;
    text-align: center;
    pointer-events: none;
}
.d-diagram-empty[hidden] { display: none; }
.d-diagram-empty-title { font-size: 15px; font-weight: 600; color: var(--text-dim); }
.d-diagram-empty-hint { max-width: 46ch; font-size: 13px; line-height: 1.5; color: var(--text-dim); opacity: 0.8; }
.d-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); }
.d-zoom { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.d-zoom input { width: 90px; }

/* Output / Errors panels */
.d-log {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    color: var(--text);
    white-space: pre-wrap;
    padding: 6px 10px;
}
.d-errors-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.d-errors-table th,
.d-errors-table td {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
}
.d-errors-table th { color: var(--text-dim); font-weight: 500; background: var(--bg-elev); }

/* Stub views */
.d-stub {
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim);
    font-style: italic; font-size: 13px;
    padding: 20px;
    text-align: center;
}

/* ── Status bar ──────────────────────────────────────────────────── */
.designer-statusbar {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: var(--statusbar-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 12px;
    /* Binance-style status bar — keep the panel chrome dark, only the
       accent shows up on hover / focus targets. The yellow bar was too
       loud at full width. */
    background: var(--bg-elev);
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    font-size: 11px;
}
.designer-statusbar .status-left,
.designer-statusbar .status-right { display: flex; align-items: center; gap: 10px; }
.designer-statusbar .status-sep { width: 1px; height: 12px; background: var(--border); }
.designer-statusbar .status-item { white-space: nowrap; }

/* ── Charts (Backtest view, sample data) ─────────────────────────── */
.chart-view {
    height: 100%;
    display: grid;
    grid-template-rows: 2.4fr 1fr;
    gap: 8px;
    padding: 8px 12px;
}
.chart-pane {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    display: flex; flex-direction: column;
    min-height: 0;
}
.chart-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 6px; }
.chart-canvas { flex: 1; width: 100%; min-height: 0; }
.pnl-positive { color: var(--success); }
.pnl-negative { color: var(--danger); }

/* ── Modals ──────────────────────────────────────────────────────── */
.d-modal-root {
    position: fixed; inset: 0;
    background: rgba(8, 8, 12, 0.55);
    display: none; align-items: center; justify-content: center;
    z-index: 1000;
}
.d-modal-root.is-open { display: flex; animation: d-modal-fade 0.12s ease-out; }
/* Quick scale-up reveal (terminal-style) — backdrop fades, card grows
   from ~92% to full size instead of snapping in at fixed dimensions. */
@keyframes d-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes d-modal-pop {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
.d-modal-root.is-open .d-modal-card {
    animation: d-modal-pop 0.16s cubic-bezier(0.2, 0.8, 0.25, 1);
    transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
    .d-modal-root.is-open,
    .d-modal-root.is-open .d-modal-card { animation: none; }
}
.d-modal-card {
    width: 520px;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 12px 30px var(--shadow);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.d-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.d-modal-head h2 { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-bright); }
.d-modal-body { padding: 12px 14px; overflow-y: auto; color: var(--text); font-size: 13px; }

/* Compact confirm dialog — same chrome as the other modals, narrower. */
.d-modal-card-sm { width: 420px; }

/* Instrument picker: a table wide enough for the history columns beside each instrument. */
.d-modal-card-wide { width: 980px; }
.d-sec-status {
    margin-bottom: 8px;
    color: var(--text-dim);
    font-size: 12px;
}
.d-sec-status[hidden] { display: none; }
.d-sec-frame {
    max-height: calc(70vh - 130px);
    overflow: auto;
}
.d-sec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.d-sec-table th {
    position: sticky;
    top: 0;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text-dim);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}
.d-sec-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
}
.d-sec-table tbody tr { cursor: pointer; }
.d-sec-table tbody tr:hover,
.d-sec-table tbody tr:focus { background: var(--bg-hover); outline: none; }
.d-sec-id { color: var(--text-bright); white-space: nowrap; }
.d-sec-days {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Branded popup head — centered designer mark above the title (mirrors
   the sign-in popup / terminal style), close × floated top-right. */
.d-brand-card { position: relative; }
.d-brand-head { text-align: center; padding: 22px 14px 4px; }
.d-modal-logo {
    width: 30px; height: 30px;
    fill: none; stroke: var(--accent); stroke-width: 1.6;
}
.d-modal-logo circle { fill: var(--accent); }
.d-brand-title {
    font-size: 15px; font-weight: 700;
    color: var(--text-bright); margin-top: 8px;
}
.d-confirm-msg { margin: 0 0 14px; line-height: 1.5; color: var(--text); }
.d-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.d-confirm-btn {
    padding: 6px 14px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-surface);
    color: var(--text);
    cursor: pointer;
}
.d-confirm-btn:hover { border-color: var(--text-dim); }
.d-confirm-btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.d-confirm-btn-danger:hover { filter: brightness(1.08); border-color: var(--danger); }
.d-confirm-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
    font-weight: 600;
}
.d-confirm-btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); }
#modalPrompt .d-input { width: 100%; margin: 0 0 14px; }
/* Sign-in popup — mirrors the trading terminal's login modal: a
   compact centered card (icon + title), uppercase field labels and a
   full-width accent submit. Uses the designer theme tokens (same
   palette as the terminal's --t-* set). */
.d-login-card {
    position: relative;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 30px var(--shadow);
    padding: 24px;
}
.d-login-x {
    position: absolute; top: 10px; right: 12px;
    width: 22px; height: 22px;
    background: transparent; border: 0;
    color: var(--text-dim); font-size: 18px; line-height: 1;
    cursor: pointer;
}
.d-login-x:hover { color: var(--text-bright); }
.d-login-head { text-align: center; margin-bottom: 18px; }
.d-login-icon { width: 28px; height: 28px; fill: var(--accent); }
.d-login-title {
    font-size: 15px; font-weight: 700;
    color: var(--text-bright); margin-top: 6px;
}
.d-login-error {
    background: rgba(246, 70, 93, 0.10);
    border: 1px solid rgba(246, 70, 93, 0.30);
    color: var(--danger);
    font-size: 12px; padding: 8px 10px;
    border-radius: 5px; margin-bottom: 12px;
}
.d-login-error[hidden] { display: none; }
.d-login-hint {
    margin: 0 0 12px; font-size: 12px;
    color: var(--text-dim); line-height: 1.4; text-align: center;
}
.d-login-hint[hidden] { display: none; }
.d-login-field { display: block; margin-bottom: 12px; }
.d-login-field > span {
    display: block; margin-bottom: 4px;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-dim);
}
.d-login-field .d-input { width: 100%; font-size: 13px; }
.d-login-submit {
    width: 100%; padding: 8px;
    margin-top: 4px;
    font-size: 13px; font-weight: 600;
    background: var(--accent); color: var(--accent-text);
    border: 0; border-radius: 5px; cursor: pointer;
}
.d-login-submit:hover { filter: brightness(1.06); }
.d-login-submit:disabled { opacity: 0.6; cursor: default; }
.d-login-submit[hidden] { display: none; }
/* The guest's sign-in prompt: the login card with a message and a quiet way to go on as a guest. */
.d-gate-message {
    margin: 0 0 18px; font-size: 13px;
    color: var(--text-dim); line-height: 1.45; text-align: center;
}
.d-gate-later {
    display: block; margin: 8px auto 0; padding: 4px 12px;
    background: none; border: 0;
    font-size: 12px; color: var(--text-dim);
    cursor: pointer;
}
.d-gate-later:hover { color: var(--text); }
/* A sign-in provider's button: the way in where the broker signs people in through one, in the sign-in popup and on
   the guest's prompt. */
.d-login-external {
    display: block; margin-top: 8px; padding: 8px;
    font-size: 13px; font-weight: 600; text-align: center;
    color: var(--text); text-decoration: none;
    border: 1px solid var(--border); border-radius: 5px;
}
.d-login-external:hover { color: var(--accent); border-color: var(--accent); }

.modal-empty { color: var(--text-dim); font-size: 12px; margin: 0; }
.modal-list { list-style: none; margin: 0; padding: 0; }
.modal-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.modal-list li:hover { background: var(--bg-hover); }
.modal-list .item-title { font-weight: 500; }
.modal-list .item-meta  { color: var(--text-dim); font-size: 11px; }

/* Gallery: the examples as a grid of cards, the filter by kind and the search above, the published strategies below. */
.d-modal-card-gallery { width: 1100px; max-height: 86vh; }
.d-gallery-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.d-gallery-toolbar[hidden] { display: none; }
.d-gallery-kinds { display: flex; gap: 2px; }
.d-gallery-kind {
    padding: 5px 12px;
    border: 1px solid transparent; border-radius: 4px;
    background: transparent;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
}
.d-gallery-kind:hover { color: var(--text); }
.d-gallery-kind.is-active {
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}
.d-gallery-search { flex: 1 1 200px; min-width: 0; }
.d-gallery-count { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.d-gallery-status {
    margin: 10px 14px 0;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
    font-size: 12px;
}
.d-gallery-status[hidden] { display: none; }
.d-gallery-section + .d-gallery-section { margin-top: 20px; }
.d-gallery-heading {
    margin: 0 0 10px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-dim);
}
.d-gallery-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.d-gallery-card {
    display: flex; flex-direction: column;
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.d-gallery-card:hover { border-color: var(--text-dim); }
.d-gallery-logo {
    display: flex; align-items: center; justify-content: center;
    height: 112px;
    background: var(--diagram-bg);
    border-bottom: 1px solid var(--border);
}
.d-gallery-logo img { display: block; width: 88px; height: 88px; object-fit: contain; }
.d-gallery-logo.is-missing img { visibility: hidden; }
.d-gallery-body {
    display: flex; flex-direction: column; gap: 6px;
    flex: 1 1 auto;
    padding: 10px 12px 12px;
}
.d-gallery-badge {
    align-self: flex-start;
    padding: 1px 7px;
    border: 1px solid var(--border); border-radius: 9px;
    font-size: 10px; font-weight: 600; line-height: 16px;
    color: var(--text-dim);
}
.d-gallery-badge.is-csharp { color: var(--accent); border-color: var(--accent); }
.d-gallery-badge.is-python { color: var(--warning); border-color: var(--warning); }
.d-gallery-title {
    margin: 0;
    font-size: 13px; font-weight: 600; line-height: 1.3;
    color: var(--text-bright);
    overflow-wrap: anywhere;
}
.d-gallery-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 12px; line-height: 1.45;
    color: var(--text-dim);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.d-gallery-open {
    align-self: flex-start;
    margin-top: 4px;
    padding: 5px 14px;
    font-size: 12px; font-weight: 600;
    background: var(--accent); color: var(--accent-text);
    border: 0; border-radius: 4px;
    cursor: pointer;
}
.d-gallery-open:hover { filter: brightness(1.08); }
.d-gallery-open:disabled { opacity: 0.6; cursor: default; }
.d-gallery-more {
    display: block;
    margin: 14px auto 0;
    padding: 6px 18px;
    font-size: 12px;
    background: transparent; color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    cursor: pointer;
}
.d-gallery-more:hover { border-color: var(--text-dim); }
.d-gallery-more:disabled { opacity: 0.6; cursor: default; }
.d-gallery-more[hidden] { display: none; }
.settings-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; color: var(--text);
}
.settings-row select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 2px;
    padding: 4px 8px;
    font-size: 12px;
}

/* ── Login / Error pages (auth shell) ────────────────────────────── */
.auth-shell {
    display: flex; align-items: center; justify-content: center;
    height: 100vh;
    background: var(--bg);
}
.auth-card {
    width: 360px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 28px;
    box-shadow: 0 12px 30px var(--shadow);
}
.auth-card h1 { font-size: 20px; font-weight: 500; color: var(--text-bright); margin: 0 0 4px; }
.auth-subtitle { font-size: 13px; color: var(--text-dim); margin: 0 0 18px; }
.auth-field { display: block; margin-bottom: 12px; }
.auth-field span { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.auth-field input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 2px;
    padding: 8px 10px;
    font-size: 13px;
}
.auth-field input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.auth-error { color: var(--danger); font-size: 12px; margin: 0 0 10px; }
.auth-submit {
    width: 100%;
    margin-top: 6px;
    padding: 10px;
    background: var(--accent);
    color: var(--accent-text);
    font-weight: 600;
    border: 0; border-radius: 2px;
    cursor: pointer;
    font-size: 13px;
}
.auth-submit:hover { background: var(--accent-2); }

/* ── Contextual help drawer ──────────────────────────────────────────
   Side panel anchored to the right edge. Slides in over the canvas,
   leaves the topbar fully clickable so users can keep navigating
   while reading. On phones (< 576px) the panel switches to a
   bottom-sheet so the body stays readable instead of being squashed
   into a thin column. */
.d-help-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 8, 12, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out;
    z-index: 1100;
}
.d-help-backdrop.is-open { opacity: 1; pointer-events: auto; }

.d-help-drawer {
    position: fixed;
    top: 0; right: 0;
    width: min(440px, 92vw);
    height: 100vh;
    background: var(--bg-elev);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px var(--shadow);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1);
    z-index: 1101;
    color: var(--text);
}
.d-help-drawer.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
    .d-help-drawer { transition: none; }
    .d-help-backdrop { transition: none; }
}

.d-help-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.d-help-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-bright); }
.d-help-close {
    background: transparent; border: 0;
    color: var(--text-dim);
    font-size: 22px; line-height: 1;
    cursor: pointer; padding: 2px 6px;
    border-radius: 3px;
}
.d-help-close:hover { color: var(--text-bright); background: var(--bg-surface); }
.d-help-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.d-help-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 18px;
    font-size: 13px;
    line-height: 1.55;
}

/* Spinner: a single rotating dot avoids pulling in another vendor
   icon set. Reused tokens so it follows the theme. */
.d-help-spinner {
    display: flex; align-items: center; gap: 8px;
    color: var(--text-dim);
}
.d-help-spinner[hidden] { display: none; }
.d-help-spinner-dot {
    width: 14px; height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: d-help-spin 0.9s linear infinite;
}
@keyframes d-help-spin { to { transform: rotate(360deg); } }

/* Markdown body — pleasant reading column inside the drawer. */
.d-help-body h1,
.d-help-body h2,
.d-help-body h3 {
    color: var(--text-bright);
    margin-top: 1.25rem; margin-bottom: 0.5rem;
    line-height: 1.25;
}
.d-help-body h1 { font-size: 17px; }
.d-help-body h2 { font-size: 15px; }
.d-help-body h3 { font-size: 14px; }
.d-help-body h1:first-child,
.d-help-body h2:first-child,
.d-help-body h3:first-child { margin-top: 0; }
.d-help-body p { margin: 0 0 0.75rem; }
.d-help-body ul,
.d-help-body ol { padding-left: 1.25rem; margin: 0 0 0.75rem; }
.d-help-body li { margin-bottom: 0.2rem; }
.d-help-body code {
    background: var(--bg-input);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    font-size: 12px;
}
.d-help-body pre {
    background: var(--bg-input);
    padding: 10px 12px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 12px;
}
.d-help-body a { color: var(--accent); text-decoration: underline; }
.d-help-body strong { color: var(--text-bright); }
.d-help-empty, .d-help-error { margin: 0; color: var(--text-dim); }
.d-help-error { color: var(--danger); }

.d-help-foot {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 12px;
}

/* Phone-width — flip the right-anchored panel into a bottom sheet so
   the body has full reading width (mirrors iOS / Android share sheets
   and the Backoffice drawer's mobile rules). */
@media (max-width: 575.98px) {
    .d-help-drawer {
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%; height: 80vh; max-height: 80vh;
        border-left: 0;
        border-top: 1px solid var(--border);
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        box-shadow: 0 -8px 24px var(--shadow);
        transform: translateY(100%);
    }
    .d-help-drawer.is-open { transform: translateY(0); }
}

/* RTL: panel slides from the left edge, mirroring the topbar layout. */
html[dir="rtl"] .d-help-drawer {
    right: auto; left: 0;
    border-left: 0; border-right: 1px solid var(--border);
    box-shadow: 8px 0 24px var(--shadow);
    transform: translateX(-100%);
}
html[dir="rtl"] .d-help-drawer.is-open { transform: translateX(0); }
@media (max-width: 575.98px) {
    html[dir="rtl"] .d-help-drawer {
        transform: translateY(100%);
        border-right: 0;
        border-top: 1px solid var(--border);
    }
    html[dir="rtl"] .d-help-drawer.is-open { transform: translateY(0); }
}

/* The execution blotters come from @stocksharp/trading-controls, which reads its palette from
   custom properties rather than shipping colours of its own. Its optional theme.css is a dark
   terminal palette; this page has a palette already and switches it with the theme, so the
   properties are declared here against ours instead and the blotters follow the page. The names
   are the package's public contract - see its README. */
:root {
    --t-bg: var(--bg);
    --t-panel: var(--bg-surface);
    --t-header: var(--bg-elev);
    --t-hover: var(--bg-hover);
    --t-border: var(--border);
    --t-text: var(--text);
    --t-text-dim: var(--text-dim);
    --t-text-bright: var(--text-bright);
    --t-accent: var(--accent);
    --t-accent-hover: var(--accent-2, var(--accent));
    --t-accent-text: var(--accent-text);
    --t-accent-glow-soft: color-mix(in srgb, var(--accent) 12%, transparent);
    --t-green: var(--success);
    --t-red: var(--danger);
    --t-green-flash: color-mix(in srgb, var(--success) 25%, transparent);
    --t-red-flash: color-mix(in srgb, var(--danger) 25%, transparent);
    --t-green-hover: color-mix(in srgb, var(--success) 82%, black);
    --t-red-hover: color-mix(in srgb, var(--danger) 82%, black);
    --t-on-direction: #ffffff;
    --t-orange: var(--warning);
    --t-warning: var(--warning);
    --t-ob-bar: 0%;
    --t-ob-heat: 0%;
    --t-ob-sent: 50%;
    --t-font: inherit;
    --t-mono: "Cascadia Mono", Consolas, monospace;
    --t-radius: 3px;
    --t-transition: 180ms ease;
}

/* A blotter fills its section. Its own panel header repeats the section title the rail already
   shows, and there is no window to close here, so the header goes. */
.d-bt-blotter { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.d-bt-blotter > * { flex: 1 1 auto; min-height: 0; }
.d-bt-blotter .panel-header { display: none; }

/* The controls say which glyph a button wears (`<i class="bi bi-x">`) and leave the icon font
   to the host, exactly as they name a colour token without defining it. This page loads no icon
   font, so its buttons were empty boxes; these are plain Unicode stand-ins for the five glyphs
   the mounted controls and the grid's own menu ask for. */
.bi { font-style: normal; line-height: 1; }
.bi::before { display: inline-block; }
.bi-x::before { content: '\2715'; }
.bi-x-circle::before { content: '\2297'; font-size: 13px; }
.bi-arrow-clockwise::before { content: '\21BB'; font-size: 13px; }
.bi-file-earmark-spreadsheet::before { content: '\2913'; font-size: 13px; }
.bi-question-circle::before { content: '?'; font-weight: 700; }

/* The Logs section builds only the tail of a long run; this row says how much it left. */
.d-bt-log-capped td { color: var(--text-dim); font-style: italic; text-align: center; padding: 4px 10px; }