/* panel1 is a flex-row item — make it a flex column so height
   propagates reliably to the tab tree without relying on height:100% */
#panel1 {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

/* dcc.Tabs outer div and tab-parent fill the column */
#panel1 > div,
#panel1 .tab-parent {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Tab content fills remaining space and scrolls */
#panel1 .tab-content {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

/* Tab child wrapper — height + flex-direction toggled by JS based on active tab */
#panel1 .tab-content > div {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Code tab: outer wrapper must fill the dcc.Tab render wrapper so the
   textarea (flex:1 inside) can actually grow. Without an explicit height
   fill, dcc.Tab's render wrapper sizes to its content, leaving the tab
   content box short and the bottom of panel1 empty. */
#code-tab-content {
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
}
#code-tab-content > * {
    flex-shrink: 0;
}
#code-tab-content > textarea,
#code-tab-content > #sb-code-preview {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* Diagnostics grid: natural height (taller than container = scroll kicks in) */
#diag-grid {
    max-height: none !important;
}

/* Diagnostics graphs container: break out of tab 100% height constraint */
#diag-graphs-container {
    height: auto !important;
    flex-shrink: 0 !important;
}

/* Hide all Dash default loading spinners (app uses dcc.Loading where needed) */
._dash-loading-callback,
._dash-loading {
    display: none !important;
}

/* Lightweight-charts container */
#lw-chart-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #131722;
}
/* Queue spinner animation — hourglass flip with pause */
.queue-spinner {
    animation: queue-spin 3s ease-in-out infinite;
}
@keyframes queue-spin {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(180deg); }
    50%  { transform: rotate(180deg); }
    65%  { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}

/* Panel 2 — horizontal tabs + scrollable, hidden scrollbars */
#stats-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
}
#stats-tabs > .tab {
    flex-shrink: 0 !important;
}
/* Hide scrollbars in panel2 — except signal log CLI */
#panel2,
#panel2 *:not(#signal-log-content):not(#signal-log-content *) {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
#panel2::-webkit-scrollbar,
#panel2 *:not(#signal-log-content):not(#signal-log-content *)::-webkit-scrollbar {
    display: none !important;
}

/* Maximized chart fills the upper section */
.lw-maximized {
    z-index: 50;
}
#main-chart-wrap {
    overflow: hidden;
}

/* Drag handle */
#drag-corner:hover {
    background: #2a2f3d !important;
}
#drag-corner:hover div {
    color: #8b949e !important;
}

/* Bottom panel collapse strip */
#bottom-collapse-strip:hover {
    background: #2a2f3d !important;
}
#bottom-collapse-strip:hover #bottom-collapse-btn {
    color: #8b949e !important;
}

/* ── Indicator panel rows ───────────────────────────────────────────────── */
.ind-row {
    padding: 7px 8px;
    border-radius: 5px;
    margin-bottom: 2px;
    cursor: pointer;
    transition: opacity 0.15s, background 0.1s;
}
.ind-row:hover {
    background: rgba(255,255,255,0.04);
}
.ind-off {
    opacity: 0.4;
}

/* Instant CSS tooltip */
.ind-tooltip .ind-tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e2235;
    color: #c8ccd4;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    padding: 6px 9px;
    border-radius: 5px;
    border: 1px solid #2a2f3d;
    white-space: normal;
    width: 200px;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.ind-tooltip:hover .ind-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Toggle switch — replaces checkbox appearance */
.ind-toggle {
    display: inline-flex;
    align-items: center;
}
.ind-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0;
    padding: 0;
    line-height: 1;
    color: #d1d4dc;
    font-size: 11px;
}
.ind-toggle input[type="checkbox"],
.ind-toggle input[type="checkbox"].dash-checkbox {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 30px !important;
    height: 16px !important;
    background: #3a4060 !important;
    border-radius: 9px !important;
    position: relative !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background 0.15s, border-color 0.15s !important;
    border: 1px solid #515878 !important;
    outline: none !important;
    margin: 0 !important;
    vertical-align: middle !important;
    box-shadow: none !important;
}
.ind-toggle input[type="checkbox"]::after,
.ind-toggle input[type="checkbox"].dash-checkbox::after {
    content: '' !important;
    position: absolute !important;
    width: 11px !important;
    height: 11px !important;
    background: #8892aa !important;
    border-radius: 50% !important;
    top: 2px !important;
    left: 2px !important;
    transition: left 0.15s, background 0.15s !important;
}
.ind-toggle input[type="checkbox"]:checked,
.ind-toggle input[type="checkbox"].dash-checkbox:checked {
    background: rgba(76, 201, 240, 0.2) !important;
    border-color: rgba(76, 201, 240, 0.5) !important;
}
.ind-toggle input[type="checkbox"]:checked::after,
.ind-toggle input[type="checkbox"].dash-checkbox:checked::after {
    left: 15px !important;
    background: #4cc9f0 !important;
}

/* Grey out generate button while disabled */
#sb-generate-btn:disabled,
#ind-custom-submit:disabled {
    background: #3a3f50 !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* While history is still loading (qm-loading-data toggled by lw_chart.js
   _showGenerateOverlay/_hideGenerateOverlay), block clicks on the Generate
   button at the CSS layer. UI stays unchanged — pointer-events:none doesn't
   alter look. The transparent overlay still owns the visible tooltip; this
   guards against scroll-lag frames where the overlay rect drifts off-button. */
body.qm-loading-data #sb-generate-btn { pointer-events: none; }


/* Grey out code action buttons while disabled */
#sb-open-colab-btn:disabled,
#sb-check-code-btn:disabled,
#sb-run-btn:disabled,
#sb-copy-preview:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Timeframe dropdown — yellow badge style */
#cfg-timeframe .Select-control {
    background: #2a2f3d !important;
    border: 1px solid #f6c40e55 !important;
    border-radius: 4px !important;
    min-height: 26px !important;
    height: 26px !important;
}
#cfg-timeframe .Select-value,
#cfg-timeframe .Select-value-label,
#cfg-timeframe .Select-placeholder,
#cfg-timeframe .Select-input input {
    color: #f6c40e !important;
    font-size: 11px !important;
    line-height: 24px !important;
}
#cfg-timeframe .Select-arrow-zone .Select-arrow {
    border-top-color: #f6c40e !important;
}
#cfg-timeframe .Select-menu-outer {
    background: #1a1d24 !important;
    border: 1px solid #f6c40e55 !important;
    z-index: 9999 !important;
}
#cfg-timeframe .Select-option {
    background: #1a1d24 !important;
    color: #f6c40e !important;
    font-size: 11px !important;
}
#cfg-timeframe .Select-option:hover,
#cfg-timeframe .Select-option.is-focused {
    background: #2a2f3d !important;
}

/* Dark theme for DatePickerRange */
.dark-datepicker-range .DateRangePickerInput {
    background: #0f1219 !important;
    border: 1px solid #2a2f3d !important;
    border-radius: 4px !important;
}
.dark-datepicker-range .DateInput {
    background: #0f1219 !important;
    width: 84px !important;
}
.dark-datepicker-range .DateInput_input {
    background: #0f1219 !important;
    color: #d1d4dc !important;
    font-size: 11px !important;
    padding: 4px 6px !important;
    border-bottom: none !important;
    caret-color: #d1d4dc;
}
.dark-datepicker-range .DateInput_input__focused {
    border-bottom: 2px solid #2962ff !important;
}
.dark-datepicker-range .DateRangePickerInput_arrow {
    color: #555 !important;
    padding: 0 2px;
}
.dark-datepicker-range .DateRangePicker_picker {
    background: #1a1d24 !important;
    border: 1px solid #2a2f3d !important;
    z-index: 9999 !important;
}
.dark-datepicker-range .CalendarMonth {
    background: #1a1d24 !important;
}
.dark-datepicker-range .CalendarMonth_caption {
    color: #d1d4dc !important;
}
.dark-datepicker-range .DayPicker_weekHeader_li,
.dark-datepicker-range .CalendarDay__default {
    background: #1a1d24 !important;
    color: #8a8a9a !important;
    border-color: #2a2f3d !important;
}
.dark-datepicker-range .CalendarDay__default:hover {
    background: #2a2f3d !important;
    color: #d1d4dc !important;
}
.dark-datepicker-range .CalendarDay__selected,
.dark-datepicker-range .CalendarDay__selected:hover {
    background: #2962ff !important;
    color: #fff !important;
    border-color: #2962ff !important;
}
.dark-datepicker-range .CalendarDay__selected_span {
    background: #1e3a6e !important;
    color: #d1d4dc !important;
    border-color: #2a2f3d !important;
}
.dark-datepicker-range .DayPickerNavigation_button {
    background: #2a2f3d !important;
    border-color: #3a3f50 !important;
    color: #d1d4dc !important;
}
.dark-datepicker-range .CalendarDay__blocked_out_of_range {
    color: #3a3f50 !important;
}

/* ── Code viewer modal pop-in animation ─────────────────────────────────── */
@keyframes modal-pop-in {
    from { transform: scale(0.90); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
#ind-code-modal-inner {
    animation: modal-pop-in 0.22s cubic-bezier(0.34, 1.15, 0.64, 1);
}

/* ── Live button glow pulse ──────────────────────────────────────────────── */
@keyframes live-glow {
    0%   { box-shadow: 0 0 4px rgba(255,140,0,0.4);  opacity: 0.8; }
    50%  { box-shadow: 0 0 14px rgba(255,140,0,0.9), 0 0 6px rgba(255,140,0,0.5); opacity: 1;   }
    100% { box-shadow: 0 0 4px rgba(255,140,0,0.4);  opacity: 0.8; }
}

/* ── Backtesting topbar model dropdown ──────────────────────────────────── */
.bt-model-dd .Select-control,
.bt-model-dd .Select-menu-outer {
    background: #0f1219 !important;
    border-color: #2a2f3d !important;
    color: #d1d4dc !important;
    font-size: 11px !important;
    min-height: 26px !important;
}
.bt-model-dd .Select-value-label,
.bt-model-dd .Select-placeholder { color: #d1d4dc !important; font-size: 11px !important; }
.bt-model-dd .Select-option { background: #0f1219 !important; color: #d1d4dc !important; font-size: 11px !important; }
.bt-model-dd .Select-option.is-focused { background: #1e222d !important; }
.bt-model-dd .Select-arrow { border-top-color: #4c525e !important; }

/* Training state: hide all drag handles via CSS (survives any JS re-render) */
.training-active .vl-drag-handle { display: none !important; }

/* ── Signal deploy glow pulse ──────────────────────────────────────────── */
.signal-glow {
    animation: signal-pulse 2s ease-in-out 3;
}
@keyframes signal-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(41, 98, 255, 0); }
    50% { box-shadow: 0 0 12px 4px rgba(41, 98, 255, 0.4); }
}

/* ── Ask to tweak: disabled state (matches Train button's muted look) ───── */
#sb-tweak-btn:disabled {
    opacity: 0.45;
    background: rgba(79,195,247,0.05) !important;
    color: rgba(79,195,247,0.5) !important;
    border-color: rgba(79,195,247,0.15) !important;
}

/* ── Custom CSS tooltip (reliable on disabled buttons, captures in screenshots) ── */
.qm-tip {
    position: relative;
}
/* JS-positioned custom tooltip (escapes overflow:hidden ancestors) */
#qm-tooltip {
    position: fixed;
    background: #1e222d;
    color: #d1d4dc;
    border: 1px solid #2a2e39;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: pre-line;   /* preserve \n → line breaks in tooltip text */
    word-wrap: break-word;
    max-width: 260px;
    line-height: 1.4;
    text-align: left;
    z-index: 100000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    display: none;
}
/* Arrow — direction set by JS via data-qm-arrow="up" | "down" */
#qm-tooltip::after {
    content: "";
    position: absolute;
    border: 5px solid transparent;
    /* arrow-x set via --qm-arrow-x (px from left edge of tooltip) */
    left: var(--qm-arrow-x, 50%);
    transform: translateX(-50%);
}
#qm-tooltip[data-qm-arrow="down"]::after {
    /* tooltip is ABOVE the target → arrow points down from tooltip's bottom */
    top: 100%;
    border-top-color: #2a2e39;
}
#qm-tooltip[data-qm-arrow="up"]::after {
    /* tooltip is BELOW the target → arrow points up from tooltip's top */
    bottom: 100%;
    border-bottom-color: #2a2e39;
}

/* ── SB chip dropdown: section headers (disabled options as real headers) ────
   Headers get prominent styling + no hover/focus state so they read as
   section titles, not options. Selectable rows indented under them. */
.sb-dropdown .Select-option.is-disabled,
.sb-dropdown .VirtualizedSelectOption[aria-disabled="true"],
.sb-dropdown div[role="option"][aria-disabled="true"] {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: #d1d4dc !important;
    background: #131722 !important;
    padding: 10px 12px 6px 12px !important;
    border-top: 1px solid #2a2e39 !important;
    cursor: default !important;
    opacity: 1 !important;
    pointer-events: none !important;
}
/* Kill hover/focus highlight on disabled headers */
.sb-dropdown .Select-option.is-disabled:hover,
.sb-dropdown .Select-option.is-disabled.is-focused,
.sb-dropdown div[role="option"][aria-disabled="true"]:hover,
.sb-dropdown div[role="option"][aria-disabled="true"].is-focused {
    background: #131722 !important;
    color: #d1d4dc !important;
}
/* Hide the checkbox on disabled header rows (this dropdown variant renders
   a checkbox per option — headers shouldn't show one) */
.sb-dropdown div[role="option"][aria-disabled="true"] input[type="checkbox"],
.sb-dropdown .Select-option.is-disabled input[type="checkbox"],
.sb-dropdown div[role="option"][aria-disabled="true"] > *:first-child:not(:only-child),
.sb-dropdown .Select-option.is-disabled > *:first-child:not(:only-child) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sb-dropdown .Select-option.is-disabled:first-child,
.sb-dropdown div[role="option"][aria-disabled="true"]:first-child {
    border-top: none !important;
}
/* Selectable items: slight indent + normal weight so they read as children */
.sb-dropdown .Select-option:not(.is-disabled),
.sb-dropdown div[role="option"]:not([aria-disabled="true"]) {
    padding-left: 22px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}


/* ── Step 2 deploy panel: card-style channel selector ─────────────── */
#deploy-step2-channels {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Each option's <label> is the card; we hide the native checkbox and
   indicate selection via a custom check pill on the right + accent ring. */
#deploy-step2-channels > label,
#deploy-step2-channels label {
    display: flex !important;
    align-items: stretch;
    padding: 0 !important;
    background: #0d1117;
    border: 1px solid #1e222d;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: background .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .08s ease;
    margin: 0 !important;
    color: #d1d4dc !important;
    position: relative;
    --ch-accent: #2962ff;          /* per-row accent set below */
}
/* Hide the default checkbox — the whole card is the hit target */
#deploy-step2-channels label input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
/* Per-channel accent (drives ring + check chip color when selected) */
#deploy-step2-channels label:has(.qm-ch-row-telegram) { --ch-accent: #29b6f6; }
#deploy-step2-channels label:has(.qm-ch-row-webhook)  { --ch-accent: #ff7043; }
#deploy-step2-channels label:has(.qm-ch-row-api)      { --ch-accent: #f9ca24; }
#deploy-step2-channels label:has(.qm-ch-row-email)    { --ch-accent: #26a69a; }

/* The flex content row */
.qm-ch-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
}
/* Test-signal button (right side of each channel card) */
.qm-ch-test-btn {
    flex-shrink: 0;
    padding: 5px 12px;
    font-size: 10px; font-weight: 600;
    background: transparent;
    color: var(--ch-accent);
    border: 1px solid color-mix(in srgb, var(--ch-accent) 35%, transparent);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .08s;
    white-space: nowrap;
}
.qm-ch-test-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ch-accent) 12%, transparent);
    border-color: var(--ch-accent);
}
.qm-ch-test-btn:active:not(:disabled) {
    transform: scale(0.96);
}
.qm-ch-test-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-style: dashed;
}
.qm-ch-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.qm-ch-name {
    font-size: 13px;
    font-weight: 600;
    color: #d1d4dc;
    line-height: 1.2;
}
.qm-ch-status {
    font-size: 10px;
    color: #787b86;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qm-ch-status-ok   { color: #5b8b86; }
.qm-ch-status-warn { color: #b07b58; }

/* Custom check chip on the right (only visible when selected) */
.qm-ch-check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.12);
    color: transparent;
    font-size: 12px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}

/* Hover (only on enabled cards) */
#deploy-step2-channels label:hover:not(:has(input:disabled)) {
    background: #11161e;
    border-color: rgba(255,255,255,0.14);
}
#deploy-step2-channels label:hover:not(:has(input:disabled)) .qm-ch-check {
    border-color: var(--ch-accent);
    background: color-mix(in srgb, var(--ch-accent) 8%, transparent);
}

/* Selected — accent ring on the left + filled check chip + tinted bg */
#deploy-step2-channels label:has(input:checked) {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ch-accent) 14%, transparent) 0%,
        rgba(255,255,255,0.02) 70%);
    border-color: var(--ch-accent);
    box-shadow: inset 3px 0 0 var(--ch-accent);
}
#deploy-step2-channels label:has(input:checked) .qm-ch-name {
    color: #ffffff;
}
#deploy-step2-channels label:has(input:checked) .qm-ch-check {
    background: var(--ch-accent);
    border-color: var(--ch-accent);
    color: #0a0c10;
    transform: scale(1.05);
}

/* Disabled — dashed border, dim, not-allowed */
#deploy-step2-channels label:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
    background: transparent;
    border-style: dashed;
    border-color: rgba(255,255,255,0.08);
    box-shadow: none;
}
#deploy-step2-channels label:has(input:disabled) .qm-ch-check {
    border-style: dashed;
    border-color: rgba(255,255,255,0.08);
}
/* Pressed feel — only on enabled rows */
#deploy-step2-channels label:active:not(:has(input:disabled)) {
    transform: scale(0.995);
}

#deploy-step2-activate-btn {
    transition: transform .12s, box-shadow .15s, opacity .15s;
    box-shadow: 0 2px 8px rgba(41,182,246,0.25);
}
#deploy-step2-activate-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(41,182,246,0.45);
}
#deploy-step2-activate-btn:not(:disabled):active {
    transform: translateY(0);
}
#deploy-step2-activate-btn:disabled {
    background: rgba(255,255,255,0.06) !important;
    color: #4c525e !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* ── Live signal cards: setup → try → verify uniform structure ─────────── */
.signal-section-label {
    color: #787b86; font-size: 9px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-top: 12px; margin-bottom: 6px;
}
.sig-tabs {
    display: flex; gap: 0; margin-bottom: 0;
}
.sig-tab {
    padding: 4px 12px; font-size: 10px; font-weight: 600;
    background: rgba(255,255,255,0.03); color: #787b86;
    border: 1px solid rgba(255,255,255,0.06);
    border-bottom: none;
    border-radius: 4px 4px 0 0; cursor: pointer;
    margin-right: 2px;
    transition: background .12s, color .12s;
}
.sig-tab:hover { background: rgba(255,255,255,0.06); color: #b5bbc4; }
.sig-tab.active {
    background: #0d1117; color: #29b6f6;
    border-color: rgba(41,182,246,0.4);
    border-bottom-color: #0d1117;
    z-index: 1; position: relative; top: 1px;
}
.sig-snippet {
    background: #0d1117; padding: 10px 12px; font-size: 10px;
    line-height: 1.5; border-radius: 0 4px 4px 4px;
    border: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto; white-space: pre; color: #c9d1d9;
    font-family: 'JetBrains Mono', 'Fira Code', 'Menlo', monospace;
    margin: 0;
    max-height: 220px; overflow-y: auto;
}
.sig-log {
    background: #0d1117; border-radius: 4px; padding: 6px 8px;
    max-height: 90px; overflow-y: auto; font-size: 10px;
    font-family: 'JetBrains Mono', monospace; color: #787b86;
    border: 1px solid rgba(255,255,255,0.06); margin-top: 6px;
}
/* Empty-state hint inside the log box */
.sig-log-empty {
    color: #4c525e;
    font-style: italic;
    font-size: 10px;
    text-align: left;
    padding: 2px 0;
}
.sig-log {
    min-height: 32px;
}
.sig-log .row-ok { color: #26a69a; }
.sig-log .row-err { color: #ef5350; }

/* ── Step 2 deploy preview pill ───────────────────────────────────────── */
.step2-preview {
    background: rgba(41,182,246,0.08);
    border: 1px solid rgba(41,182,246,0.3);
    border-radius: 6px; padding: 8px 12px; margin-bottom: 10px;
    font-size: 11px; color: #d1d4dc;
    line-height: 1.5;
}
.step2-preview.empty {
    background: transparent;
    border-color: rgba(255,255,255,0.06);
    color: #787b86;
    font-style: italic;
}

/* ── Live signal cards: tactile press feedback for every button ─────── */
#live-signal-card button {
    transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
#live-signal-card button:not(:disabled):hover {
    filter: brightness(1.12);
}
#live-signal-card button:not(:disabled):active {
    transform: scale(0.96);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.35) !important;
    filter: brightness(0.92);
}

/* ── Snippet line highlight (same green as /docs Try it out) ──────────── */
.qm-hl-green {
    display: inline-block;
    width: calc(100% - 8px);
    background: rgba(38,166,154,0.12);
    border-left: 2px solid #26a69a;
    padding-left: 6px;
    margin-left: -8px;
    box-sizing: border-box;
}
.qm-hl-green.pulse {
    animation: qm-hl-pulse 0.9s ease-out;
}
@keyframes qm-hl-pulse {
    0%   { background: rgba(38,166,154,0.85); color: #ffffff;
           box-shadow: 0 0 0 2px rgba(38,166,154,0.7); }
    40%  { background: rgba(38,166,154,0.45);
           box-shadow: 0 0 0 1px rgba(38,166,154,0.4); }
    100% { background: rgba(38,166,154,0.12); color: inherit;
           box-shadow: 0 0 0 0 transparent; }
}

/* Collapsible "show advanced" toggle inside signal cards */
.qm-collapse-toggle {
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.12);
    color: #787b86;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    transition: background .12s, color .12s, border-color .12s;
}
.qm-collapse-toggle:hover {
    background: rgba(255,255,255,0.04);
    color: #b5bbc4;
    border-color: rgba(255,255,255,0.2);
}

/* Setup-step lists (Markdown ol/ul) — flush left, tighter indent */
.qm-setup-steps ol,
.qm-setup-steps ul {
    margin: 0;
    padding-left: 18px;
}
.qm-setup-steps li {
    margin-bottom: 4px;
    text-align: left;
}
.qm-setup-steps p {
    margin: 0 0 4px 0;
}
.qm-setup-steps a {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: rgba(255,255,255,0.35);
}
.qm-setup-steps a:hover {
    text-decoration-style: solid;
}

/* Trade log row hover + click-from-chart highlight */
#trade-log-table tr.tl-row:hover {
    background: #232838 !important;
}
#trade-log-table tr.tl-row.tl-row-active {
    background: #3a4458 !important;
    box-shadow: inset 3px 0 0 #f9c40e;
    transition: background 0.2s ease;
}

/* Modal close button — visible feedback on hover + click */
.qm-close-btn:hover {
    background: rgba(255, 87, 34, 0.18) !important;
    color: #ff5722 !important;
    border-color: rgba(255, 87, 34, 0.5) !important;
}
.qm-close-btn:active {
    transform: scale(0.92);
    background: rgba(255, 87, 34, 0.32) !important;
}

/* ── Setup banner — slim info-bar (icon · text · CTAs · × dismiss) ─── */
.qm-setup-banner {
    background: linear-gradient(90deg, rgba(41,182,246,0.10), rgba(92,142,245,0.10));
    border: 1px solid rgba(41,182,246,0.30);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    align-items: center;
    gap: 10px;
}
.qm-setup-banner.qm-banner-hidden {
    display: none !important;
}
.qm-setup-banner .qm-banner-cta {
    transition: background .12s, border-color .12s;
}
.qm-setup-banner .qm-banner-cta:hover {
    background: rgba(92,142,245,0.32) !important;
    border-color: rgba(92,142,245,0.85) !important;
}
.qm-setup-banner .qm-banner-dismiss:hover {
    color: rgba(255,255,255,0.95) !important;
}