/* ═══════════════════════════════════════════════════════════════════════════
   OMRO — Neon Trend Strategy Overlay Styles
   Uses accent-orange as primary. Follows Ayla pattern.
   All tokens from variables.css — works across all 6 themes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── OMRO Palette ────────────────────────────────────────────────────── */
:root {
    --om-primary:       var(--accent-orange, #f59e0b);
    --om-primary-hover: var(--accent-orange-hover, #fbbf24);
    --om-primary-dim:   var(--accent-orange-dim, rgba(245, 158, 11, 0.12));
    --om-accent:        var(--accent-cyan, #06b6d4);
    --om-accent-dim:    var(--accent-cyan-dim, rgba(6, 182, 212, 0.12));
    --om-surface:       var(--bg-surface, #111827);
    --om-surface-alt:   var(--bg-elevated, #1a2235);
    --om-elevated:      var(--bg-elevated, #1a2235);
    --om-base:          var(--bg-base, #0a0e17);
    --om-border:        var(--border-default, rgba(255, 255, 255, 0.10));
    --om-border-glow:   var(--accent-orange-dim, rgba(245, 158, 11, 0.30));
    --om-font-mono:     var(--font-mono, 'JetBrains Mono', monospace);
    --om-success:       var(--color-success, #10b981);
    --om-success-dim:   var(--color-profit-dim, rgba(16, 185, 129, 0.12));
    --om-danger:        var(--color-danger, #ef4444);
    --om-danger-dim:    var(--color-loss-dim, rgba(239, 68, 68, 0.12));
    --om-profit:        var(--color-profit, #10b981);
    --om-loss:          var(--color-loss, #ef4444);
    --om-text-primary:  var(--text-primary, #f0f4f8);
    --om-text-secondary: var(--text-secondary, #94a3b8);
    --om-text-muted:    var(--text-muted, #64748b);
    --om-text-inverse:  var(--text-inverse, #0a0e17);
}

/* ── Overlay ─────────────────────────────────────────────────────────── */
.om-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--bg-overlay, rgba(6, 10, 19, 0.88));
    display: flex;
    align-items: center;
    justify-content: center;
    animation: omFadeIn 0.2s ease-out;
}

@keyframes omFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Panel ───────────────────────────────────────────────────────────── */
.om-panel {
    width: calc(100% - 48px);
    max-width: 960px;
    height: calc(100vh - 60px);
    max-height: 780px;
    min-width: 380px;
    min-height: 340px;
    background: var(--om-base);
    border: 1px solid var(--om-border);
    border-radius: var(--radius-lg, 14px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: omSlideUp 0.25s ease-out;
    position: relative;
    resize: both;
}

@keyframes omSlideUp {
    from { transform: translateY(16px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.om-panel.om-closing {
    animation: omSlideDown 0.18s ease-in forwards;
}

@keyframes omSlideDown {
    to { transform: translateY(16px) scale(0.98); opacity: 0; }
}

/* ── Header ──────────────────────────────────────────────────────────── */
.om-header {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--om-border);
    background: var(--om-elevated);
    flex-shrink: 0;
    gap: 8px;
    cursor: grab;
}

.om-header:active { cursor: grabbing; }

.om-header-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--om-primary-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--om-primary);
    font-size: 14px;
}

.om-header-text { flex: 1; min-width: 0; }

.om-header-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.om-header-sub {
    font-size: var(--text-xs, 0.7rem);
    color: var(--text-muted);
    font-family: var(--om-font-mono);
}

.om-header-controls {
    display: flex;
    gap: 4px;
}

.om-header-btn {
    width: 32px; height: 32px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
}

.om-header-btn:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
    color: var(--text-primary);
}

.om-header-btn.om-close:hover {
    background: var(--om-danger-dim);
    color: var(--om-danger);
}

.om-header-btn.om-pinned {
    color: var(--om-primary);
    transform: rotate(45deg);
}
.om-header-btn.om-pinned:hover {
    background: var(--om-primary-dim);
    color: var(--om-primary);
}

/* ── Status Bar ──────────────────────────────────────────────────────── */
.om-status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--om-border);
    background: var(--om-surface);
    font-family: var(--om-font-mono);
    font-size: var(--text-xs, 0.7rem);
    flex-shrink: 0;
    overflow-x: auto;
}

.om-status-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    white-space: nowrap;
}

.om-status-value {
    color: var(--text-primary);
    font-weight: 600;
}

.om-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.om-status-dot.running { background: var(--om-success); box-shadow: 0 0 6px var(--om-success-dim); }
.om-status-dot.stopped { background: var(--text-muted); }

.om-status-sep {
    width: 1px;
    height: 12px;
    background: var(--om-border);
    flex-shrink: 0;
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.om-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-default, var(--om-border));
    background: var(--bg-base, var(--om-base));
    padding: 0 var(--space-md, 12px);
    flex-shrink: 0;
    overflow-x: auto;
}

.om-tab {
    padding: var(--space-sm, 8px) var(--space-md, 12px);
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

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

.om-tab.active {
    color: var(--om-primary);
    border-bottom-color: var(--om-primary);
}

/* ── Body ────────────────────────────────────────────────────────────── */
.om-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
}

.om-body::-webkit-scrollbar { width: 6px; }
.om-body::-webkit-scrollbar-thumb { background: var(--om-border); border-radius: 3px; }
.om-body::-webkit-scrollbar-thumb:hover { background: var(--om-text-muted); }

/* ── Action Bar ──────────────────────────────────────────────────────── */
.om-action-bar {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--om-border);
    background: var(--om-elevated);
    flex-shrink: 0;
    gap: 8px;
}

.om-action-bar-spacer { flex: 1; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.om-btn {
    padding: 6px 14px;
    border: 1px solid var(--om-border);
    border-radius: 8px;
    font-size: var(--text-sm, 0.8rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--text-primary);
}

.om-btn-primary {
    background: var(--om-primary);
    border-color: var(--om-primary);
    color: var(--om-text-inverse);
}

.om-btn-primary:hover {
    background: var(--om-primary-hover);
    border-color: var(--om-primary-hover);
}

.om-btn-danger {
    background: var(--om-danger-dim);
    border-color: var(--om-danger);
    color: var(--om-danger);
}

.om-btn-danger:hover {
    background: var(--om-danger);
    color: var(--om-text-inverse);
}

.om-btn-ghost {
    background: transparent;
    border-color: var(--om-border);
    color: var(--text-secondary);
}

.om-btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.om-btn-sm {
    padding: 4px 10px;
    font-size: var(--text-xs, 0.7rem);
}

/* ── Metrics Strip ───────────────────────────────────────────────────── */
.om-metrics-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--om-surface);
    border: 1px solid var(--om-border);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow-x: auto;
    font-family: var(--om-font-mono);
}

.om-mstrip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.om-mstrip-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.om-mstrip-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.om-mstrip-value.profit { color: var(--om-profit); }
.om-mstrip-value.loss { color: var(--om-loss); }
.om-mstrip-value .dim { color: var(--text-muted); font-weight: 400; }

.om-mstrip-sep {
    width: 1px;
    height: 28px;
    background: var(--om-border);
    flex-shrink: 0;
}

/* ── Sections ────────────────────────────────────────────────────────── */
.om-section {
    margin-bottom: 14px;
}

.om-section-header {
    font-size: var(--text-sm, 0.8rem);
    font-weight: 700;
    color: var(--text-secondary);
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.om-section-header i {
    color: var(--om-primary);
    font-size: 0.75rem;
}

/* ── Position Card ───────────────────────────────────────────────────── */
.om-pos-card {
    background: var(--om-surface);
    border: 1px solid var(--om-border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
}

.om-pos-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.om-pos-side {
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.om-pos-side.long {
    background: var(--om-success-dim);
    color: var(--om-profit);
}

.om-pos-side.short {
    background: var(--om-danger-dim);
    color: var(--om-loss);
}

.om-pos-symbol {
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--om-font-mono);
}

.om-pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.om-pos-stat {
    display: flex;
    flex-direction: column;
}

.om-pos-stat-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    font-family: var(--om-font-mono);
}

.om-pos-stat-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--om-font-mono);
}

/* ── Engine Pipeline ──────────────────────────────────────────────────── */
.om-pipeline {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 10px;
    background: var(--om-surface);
    border: 1px solid var(--om-border);
    border-radius: 8px;
    overflow-x: auto;
}

.om-pipe-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.2s;
}

.om-pipe-stage.om-pipe-ok {
    background: var(--om-success-dim);
}
.om-pipe-stage.om-pipe-ok .om-pipe-icon {
    color: var(--om-success);
}

.om-pipe-stage.om-pipe-wait .om-pipe-icon {
    color: var(--text-muted);
    opacity: 0.5;
}

.om-pipe-icon {
    font-size: 14px;
    color: var(--om-primary);
}

.om-pipe-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-family: var(--om-font-mono);
    white-space: nowrap;
}

.om-pipe-value {
    font-size: 9px;
    color: var(--text-secondary);
    font-family: var(--om-font-mono);
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.om-pipe-arrow {
    color: var(--om-border);
    font-size: 10px;
    padding: 0 4px;
    flex-shrink: 0;
}

/* ── Trend Indicator ─────────────────────────────────────────────────── */
.om-trend-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--om-surface);
    border: 1px solid var(--om-border);
    border-radius: 8px;
    margin-bottom: 10px;
    font-family: var(--om-font-mono);
    font-size: var(--text-sm);
}

.om-trend-dir {
    font-weight: 700;
    font-size: 1rem;
}

.om-trend-dir.bull { color: var(--color-profit); }
.om-trend-dir.bear { color: var(--color-loss); }

/* ── Config Section ──────────────────────────────────────────────────── */

/* Sticky toolbar with Save/Reset at top right */
.om-config-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 0 8px;
    background: var(--om-base);
    border-bottom: 1px solid var(--om-border);
    margin-bottom: 8px;
}
.om-btn-sm {
    padding: 4px 12px !important;
    font-size: 11px !important;
}

.om-config-group {
    margin-bottom: 4px;
    border: 1px solid var(--om-border);
    border-radius: 6px;
    overflow: hidden;
}

.om-config-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--om-primary);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    transition: background 0.15s;
}
.om-config-title:hover {
    background: var(--bg-hover);
}
.om-collapse-chevron {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s;
    opacity: 0.5;
}
.om-config-group.collapsed .om-collapse-chevron {
    transform: rotate(-90deg);
}
.om-config-body {
    padding: 4px 10px 6px;
    transition: max-height 0.25s ease, opacity 0.2s;
    max-height: 600px;
    opacity: 1;
    overflow: hidden;
}
.om-config-group.collapsed .om-config-body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.om-config-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.om-config-label {
    flex: 0 0 140px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--om-font-mono);
}

.om-config-input {
    flex: 1;
    padding: 3px 8px;
    background: var(--om-surface);
    border: 1px solid var(--om-border);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 11px;
    font-family: var(--om-font-mono);
    outline: none;
    transition: border-color 0.15s;
    max-width: 180px;
}

.om-config-input:focus {
    border-color: var(--om-primary);
}

.om-config-select {
    flex: 1;
    padding: 3px 8px;
    background: var(--om-surface);
    border: 1px solid var(--om-border);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 11px;
    font-family: var(--om-font-mono);
    outline: none;
    max-width: 180px;
    cursor: pointer;
}

.om-config-select:focus {
    border-color: var(--om-primary);
}

.om-config-toggle {
    position: relative;
    width: 32px;
    height: 17px;
    background: var(--om-border);
    border-radius: 9px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.om-config-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.2s;
}

.om-config-toggle.on {
    background: var(--om-primary-dim);
}

.om-config-toggle.on::after {
    left: 17px;
    background: var(--om-primary);
}

/* ── Mini Card ───────────────────────────────────────────────────────── */
.om-mini-card {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 340px;
    background: var(--om-base);
    border: 1px solid var(--om-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 8500;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s ease-out;
    cursor: grab;
    overflow: hidden;
}

.om-mini-card:active { cursor: grabbing; }

.om-mini-card.om-mini-visible {
    opacity: 1;
    transform: translateY(0);
}

.om-mini-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--om-elevated);
    border-bottom: 1px solid var(--om-border);
}

.om-mini-icon {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--om-primary-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--om-primary);
    font-size: 10px;
}

.om-mini-title {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-primary);
    flex: 1;
}

.om-mini-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.om-mini-status-dot.running { background: var(--om-success); box-shadow: 0 0 4px var(--om-success-dim); }
.om-mini-status-dot.stopped { background: var(--om-text-muted); }

.om-mini-actions {
    display: flex;
    gap: 2px;
}

.om-mini-btn {
    width: 22px; height: 22px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.15s;
}

.om-mini-btn:hover { background: var(--bg-hover); color: var(--om-text-primary); }

/* Mini Card — Trend Badge */
.om-mini-trend {
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--om-border);
    color: var(--om-text-secondary);
    font-family: var(--om-font-mono);
}
.om-mini-trend.bull { background: var(--om-success-dim); color: var(--om-profit); }
.om-mini-trend.bear { background: var(--om-danger-dim); color: var(--om-loss); }

/* Mini Card — Position Row */
.om-mini-pos {
    padding: 6px 10px;
    border-bottom: 1px solid var(--om-border);
}
.om-mini-pos-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.om-mini-side {
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}
.om-mini-side.long { background: var(--om-success-dim); color: var(--om-profit); }
.om-mini-side.short { background: var(--om-danger-dim); color: var(--om-loss); }
.om-mini-pos-sym {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--om-text-primary);
    font-family: var(--om-font-mono);
}
.om-mini-pos-pnl {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--om-font-mono);
}

/* Mini Card — Grid Progress Bar */
.om-mini-grid-bar {
    position: relative;
    height: 12px;
    background: var(--om-surface-alt);
    border-radius: 4px;
    margin-top: 5px;
    overflow: hidden;
}
.om-mini-grid-fill {
    height: 100%;
    background: var(--om-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.om-mini-grid-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 12px;
    color: var(--om-text-primary);
    font-family: var(--om-font-mono);
    text-shadow: 0 1px 2px var(--om-base);
}

/* Mini Card — Footer */
.om-mini-footer {
    padding: 5px 10px;
    border-top: 1px solid var(--om-border);
    font-size: 0.6rem;
    color: var(--om-text-muted);
    font-family: var(--om-font-mono);
    text-align: center;
    letter-spacing: 0.03em;
}

.om-mini-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 8px 10px;
}

.om-mini-stat {
    display: flex;
    flex-direction: column;
}

.om-mini-stat-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    font-family: var(--om-font-mono);
}

/* Mini Card — TP/SL Levels */
.om-mini-pos-levels {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.55rem;
    font-family: var(--om-font-mono);
    font-weight: 600;
}
.om-mini-tp { color: var(--om-profit); }
.om-mini-tp i { margin-right: 2px; }
.om-mini-sl { color: var(--om-loss); }
.om-mini-sl i { margin-right: 2px; }

/* Mini Card — Recent Trades */
.om-mini-trades {
    padding: 4px 10px 6px;
    border-top: 1px solid var(--om-border);
}
.om-mini-trades-header {
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-family: var(--om-font-mono);
    margin-bottom: 3px;
}
.om-mini-trade-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 1px 0;
    font-size: 0.62rem;
    font-family: var(--om-font-mono);
}
.om-mini-trade-side {
    font-size: 0.58rem;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}
.om-mini-trade-sym {
    color: var(--text-secondary);
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.om-mini-trade-pnl {
    font-weight: 700;
    flex-shrink: 0;
}

/* Mini Card — Quick Actions */
.om-mini-quick-actions {
    padding: 5px 10px;
    border-top: 1px solid var(--om-border);
    display: flex;
    gap: 6px;
}
.om-mini-action-btn {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--om-border);
    background: var(--om-surface-alt);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 0.58rem;
    font-weight: 700;
    font-family: var(--om-font-mono);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.om-mini-action-btn:hover:not(:disabled) {
    background: var(--om-primary-dim);
    color: var(--om-primary);
    border-color: var(--om-primary);
}
.om-mini-action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.om-mini-find-btn i { font-size: 0.55rem; }

/* Mini Card — Emergency Stop */
.om-mini-estop-btn {
    flex: 0 0 auto;
    background: var(--om-loss-bg, rgba(234,57,67,0.08));
    border-color: var(--om-loss, #ea3943);
    color: var(--om-loss, #ea3943);
}
.om-mini-estop-btn:hover:not(:disabled) {
    background: var(--om-loss, #ea3943);
    color: var(--om-surface);
    border-color: var(--om-loss, #ea3943);
}

/* Mini Card — Scan Progress */
.om-mini-scan {
    padding: 5px 10px;
    border-top: 1px solid var(--om-border);
    font-size: 0.58rem;
    font-family: var(--om-font-mono);
    font-weight: 600;
    color: var(--om-primary);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.om-mini-scan-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.om-mini-scan-bar {
    height: 3px;
    background: var(--om-border);
    border-radius: 2px;
    overflow: hidden;
}
.om-mini-scan-fill {
    height: 100%;
    background: var(--om-primary);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.om-mini-scan-done {
    color: var(--om-profit, #16c784);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
.om-mini-scan-err {
    color: var(--om-loss, #ea3943);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

/* Mini Card — TP Progress Bar */
.om-mini-tp-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.om-mini-tp-bar {
    flex: 1;
    height: 3px;
    background: var(--om-border);
    border-radius: 2px;
    overflow: hidden;
}
.om-mini-tp-fill {
    height: 100%;
    background: var(--om-profit, #16c784);
    border-radius: 2px;
    transition: width 0.5s ease;
}
.om-mini-tp-fill.om-mini-tp-hit {
    background: var(--om-profit, #16c784);
    animation: om-tp-pulse 1s infinite;
}
@keyframes om-tp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.om-mini-tp-pct {
    font-size: 0.52rem;
    font-family: var(--om-font-mono);
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 24px;
    text-align: right;
}

/* Mini Card — Footer idle */
.om-mini-footer-idle {
    color: var(--text-tertiary);
    opacity: 0.6;
}

/* Mini Card — Stat value transitions */
.om-mini-stat-value {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--om-font-mono);
    transition: color 0.3s;
}

/* Mini Card — Signals Preview */
.om-mini-signals {
    padding: 4px 10px 6px;
    border-top: 1px solid var(--om-border);
}
.om-mini-sig-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 1px 0;
    font-size: 0.62rem;
    font-family: var(--om-font-mono);
}
.om-mini-sig-sym {
    color: var(--text-secondary);
    font-weight: 600;
    flex: 1;
}
.om-mini-sig-price {
    color: var(--text-muted);
    font-weight: 600;
}

/* ── Balance Validation Overlay ──────────────────────────────────────── */
.om-balance-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--om-base-90, rgba(10, 10, 14, 0.9));
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.om-balance-overlay.om-balance-visible { opacity: 1; }
.om-balance-card {
    text-align: center;
    padding: 20px 30px;
}
.om-balance-spinner {
    font-size: 2rem;
    color: var(--om-primary);
    margin-bottom: 10px;
}
.om-balance-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
}
.om-balance-ok .om-balance-icon { color: var(--om-success); }
.om-balance-fail .om-balance-icon { color: var(--om-danger); }
.om-balance-amount {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--om-font-mono);
    color: var(--text-primary);
    margin-bottom: 4px;
}
.om-balance-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--om-font-mono);
}
.om-balance-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: var(--om-font-mono);
    letter-spacing: 0.03em;
}

/* ── No Data State ───────────────────────────────────────────────────── */
.om-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.om-empty i {
    font-size: 2rem;
    color: var(--om-primary-dim);
    margin-bottom: 8px;
    display: block;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .om-panel {
        width: 100%;
        height: 100vh;
        max-height: none;
        border-radius: 0;
    }

    .om-metrics-strip {
        gap: 8px;
        padding: 8px 10px;
    }

    .om-mstrip-item { min-width: 48px; }

    .om-config-row {
        flex-wrap: wrap;
    }

    .om-config-label {
        flex: 0 0 100%;
    }

    .om-config-input, .om-config-select {
        max-width: 100%;
    }

    .om-mini-card { width: calc(100% - 20px); right: 10px; }
}

/* ── Positions / Trade History ───────────────────────────────────────── */

.om-section-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.om-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--om-border);
    background: var(--om-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.15s;
}
.om-icon-btn:hover {
    background: var(--om-primary-dim);
    color: var(--om-primary);
    border-color: var(--om-primary);
}
.om-icon-btn-danger:hover {
    background: var(--om-danger-dim);
    color: var(--om-loss);
    border-color: var(--om-loss);
}

.om-table-wrap {
    overflow-x: auto;
}

.om-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs, 0.72rem);
    font-family: var(--om-font-mono, 'JetBrains Mono', monospace);
}
.om-table thead th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--om-border);
    white-space: nowrap;
}
.om-table tbody td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--om-border);
    color: var(--text-secondary);
    white-space: nowrap;
}
.om-table tbody tr:hover td {
    background: var(--om-primary-dim);
}
.om-table .profit { color: var(--om-profit); }
.om-table .loss { color: var(--om-loss); }
.om-td-compact { font-size: 0.65rem; }

.om-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.om-badge-long {
    background: var(--om-success-dim);
    color: var(--om-profit);
}
.om-badge-short {
    background: var(--om-danger-dim);
    color: var(--om-loss);
}
.om-badge-reason {
    background: var(--om-primary-dim);
    color: var(--om-primary);
}

.om-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 0 4px;
}
.om-page-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--om-border);
    background: var(--om-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: all 0.15s;
}
.om-page-btn:hover:not(:disabled) {
    background: var(--om-primary-dim);
    color: var(--om-primary);
    border-color: var(--om-primary);
}
.om-page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.om-page-info {
    font-size: var(--text-xs, 0.72rem);
    color: var(--text-muted);
    font-family: var(--om-font-mono, monospace);
}

/* ══════════════════════════════════════════════════
   SCANNER (embedded in Dashboard)
   ══════════════════════════════════════════════════ */

/* ─── Scanner Section ─── */
.om-scan-section {
    border: 1px solid var(--om-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--om-surface);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.om-scan-section:hover,
.om-scan-section.om-scan-open {
    border-color: var(--om-border-glow);
}
.om-scan-section.om-scan-has-signals {
    border-color: var(--om-primary);
    box-shadow: 0 0 16px var(--om-primary-dim), inset 0 0 30px var(--om-primary-dim);
}

/* Scanner Header — Symbol input row */
.om-scan-header {
    padding: 10px 12px;
}

/* Symbol Input Row */
.om-sym-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.om-sym-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--om-surface-alt);
    border: 1px solid var(--om-border);
    border-radius: 8px;
    padding: 0 4px 0 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 36px;
}
.om-sym-input-wrap:focus-within {
    border-color: var(--om-primary);
    box-shadow: 0 0 10px var(--om-primary-dim);
}
.om-sym-input-icon {
    color: var(--om-primary);
    font-size: 0.75rem;
    margin-right: 8px;
    opacity: 0.7;
}
.om-sym-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--om-font-mono, monospace);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0;
    height: 100%;
}
.om-sym-input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
    font-weight: 400;
}
.om-sym-apply-btn {
    width: 28px; height: 28px;
    border: none;
    border-radius: 6px;
    background: var(--om-primary-dim);
    color: var(--om-primary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    transition: all 0.15s;
    flex-shrink: 0;
}
.om-sym-apply-btn:hover {
    background: var(--om-primary);
    color: var(--om-text-inverse);
}

/* Start / Stop buttons */
.om-scan-start-btn, .om-scan-stop-btn {
    height: 36px;
    border: 1px solid var(--om-border-glow);
    border-radius: 8px;
    background: var(--om-primary-dim);
    color: var(--om-primary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0 14px;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.om-scan-start-btn:hover {
    background: var(--om-primary);
    color: var(--om-text-inverse);
    border-color: var(--om-primary);
    box-shadow: 0 0 12px var(--om-border-glow);
}
.om-scan-stop-btn {
    background: var(--om-danger-dim);
    color: var(--om-danger);
    border-color: var(--om-danger);
    padding: 0 10px;
}
.om-scan-stop-btn:hover {
    background: var(--om-danger);
    color: var(--om-text-primary);
    border-color: var(--om-danger);
    box-shadow: 0 0 10px var(--om-danger-dim);
}

/* Expand Bar */
.om-scan-expand-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-top: 1px solid var(--om-border);
    cursor: pointer;
    user-select: none;
    font-size: var(--text-xs, 0.72rem);
    color: var(--om-text-muted);
    transition: background 0.15s;
}
.om-scan-expand-bar:hover {
    background: var(--bg-hover);
}
.om-scan-expand-bar i:first-child {
    color: var(--om-primary);
    margin-right: 6px;
    opacity: 0.6;
}
.om-scan-chevron-wrap {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
}
.om-scan-chevron-wrap i {
    font-size: 0.55rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.om-scan-badge {
    background: var(--om-primary);
    color: var(--om-text-inverse);
    font-size: 0.56rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 9px;
    letter-spacing: 0.03em;
    margin-left: 6px;
    animation: omBadgePop 0.3s ease-out;
}
@keyframes omBadgePop {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* Scanner Body */
.om-scan-body {
    padding: 6px 12px 12px;
    border-top: 1px solid var(--om-border);
}

/* Trade / Active buttons in results */
.om-scan-trade-btn {
    border: 1px solid var(--om-primary);
    border-radius: 5px;
    background: transparent;
    color: var(--om-primary);
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 10px;
    display: flex; align-items: center; gap: 4px;
    transition: all 0.15s;
    white-space: nowrap;
}
.om-scan-trade-btn:hover {
    background: var(--om-primary);
    color: var(--om-text-inverse);
    transform: scale(1.05);
}
.om-scan-active-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--om-profit);
    padding: 3px 10px;
    border-radius: 5px;
    background: var(--om-success-dim);
    border: 1px solid var(--om-profit);
}
.om-scan-active-icon {
    color: var(--om-primary);
    font-size: 0.5rem;
    animation: omActivePulse 2s ease-in-out infinite;
}
@keyframes omActivePulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.om-scan-row-active {
    background: var(--om-primary-dim);
}
.om-scan-row-active td:first-child {
    color: var(--om-primary);
}

/* Progress */
.om-scan-progress {
    margin-bottom: 12px;
}
.om-scan-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--om-surface-alt);
    border-radius: 3px;
    overflow: hidden;
}
.om-scan-progress-fill {
    height: 100%;
    background: var(--om-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.om-scan-progress-fill.om-scan-done {
    background: var(--om-success);
}
.om-scan-progress-fill.om-scan-pulse {
    animation: omScanPulse 1.5s infinite;
}
@keyframes omScanPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
.om-scan-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs, 0.72rem);
    color: var(--text-secondary);
    margin-top: 5px;
}
.om-scan-progress-info i { margin-right: 4px; }
.om-scan-error {
    font-size: var(--text-xs, 0.72rem);
    color: var(--om-danger);
    padding: 6px 0;
}
.om-scan-error i { margin-right: 4px; }

/* Results table */
.om-scan-results {
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--om-border) transparent;
}
.om-scan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs, 0.72rem);
}
.om-scan-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--om-surface);
    color: var(--om-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--om-border);
}
.om-scan-table thead th:last-child { text-align: center; width: 80px; }
.om-scan-row td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--om-border);
    white-space: nowrap;
}
.om-scan-row:hover { background: var(--om-primary-dim); }
.om-scan-sym {
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--om-font-mono, monospace);
}
.om-scan-price {
    color: var(--text-secondary);
    font-family: var(--om-font-mono, monospace);
}
.om-scan-vol {
    color: var(--text-muted);
    font-family: var(--om-font-mono, monospace);
}
.om-chg-up { color: var(--om-profit); font-family: var(--om-font-mono); }
.om-chg-down { color: var(--om-loss); font-family: var(--om-font-mono); }

/* Signal badges */
.om-scan-signal {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.64rem;
    letter-spacing: 0.03em;
}
.om-sig-long {
    background: var(--om-success-dim);
    color: var(--om-profit);
    border: 1px solid var(--om-profit);
}
.om-sig-short {
    background: var(--om-danger-dim);
    color: var(--om-loss);
    border: 1px solid var(--om-loss);
}

/* Pipeline Scanner Active Stage */
.om-pipe-stage.om-pipe-active {
    border-color: var(--om-primary);
    box-shadow: 0 0 10px var(--om-primary-dim);
}
.om-pipe-stage.om-pipe-active .om-pipe-icon {
    color: var(--om-primary);
}

/* Pipeline Bull/Bear trend-aware stages */
.om-pipe-stage.om-pipe-bull {
    background: var(--om-success-dim);
}
.om-pipe-stage.om-pipe-bull .om-pipe-icon {
    color: var(--om-success);
}
.om-pipe-stage.om-pipe-bull .om-pipe-value {
    color: var(--om-success);
}
.om-pipe-stage.om-pipe-bear {
    background: var(--om-danger-dim);
}
.om-pipe-stage.om-pipe-bear .om-pipe-icon {
    color: var(--om-danger);
}
.om-pipe-stage.om-pipe-bear .om-pipe-value {
    color: var(--om-danger);
}
.om-pipe-stage.om-pipe-done {
    background: var(--om-surface-alt);
}
.om-pipe-stage.om-pipe-done .om-pipe-icon {
    color: var(--text-muted);
}

/* Instance count badge in header */
.om-instance-count {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--om-surface-alt);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
    font-family: var(--om-font-mono);
}

/* ── Multi-Instance Elements ─────────────────────────────────────────── */
.om-instance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--om-primary-dim);
    color: var(--om-primary);
    border: 1px solid var(--om-primary);
    margin-left: 4px;
    letter-spacing: 0.02em;
}

.om-sym-link {
    color: var(--om-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.72rem;
    font-family: var(--om-font-mono, monospace);
    transition: color 0.15s;
}
.om-sym-link:hover {
    color: var(--om-accent);
    text-decoration: underline;
}

.om-stop-instance-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: 0.6rem;
    font-weight: 600;
    background: var(--om-danger-dim);
    color: var(--om-danger);
    border: 1px solid var(--om-danger);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.om-stop-instance-btn:hover {
    background: var(--om-danger);
    color: var(--om-surface);
}
.om-stop-instance-btn i {
    font-size: 8px;
}

/* ── Adaptive Mode Badge ─────────────────────────────────────────────── */
.om-adaptive-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--om-primary-dim);
    color: var(--om-primary);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--om-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: 8px;
}

/* ── Enhanced Trend Stats ────────────────────────────────────────────── */
.om-trend-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.om-trend-dip {
    background: var(--om-primary-dim);
    color: var(--om-primary);
    border: 1px solid var(--om-primary);
}

/* ── Unified Trading Session (dashboard) ─────────────────────────────── */
.om-session-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}

.om-session-active-row td {
    background: var(--om-primary-dim);
    border-bottom: 2px solid var(--om-primary);
}

.om-table-compact th,
.om-table-compact td {
    padding: 3px 5px;
    font-size: 0.68rem;
}

.om-th-num {
    text-align: right;
}

.om-td-num {
    text-align: right;
    font-family: var(--om-font-mono, monospace);
}

.om-sl-val {
    color: var(--om-loss);
}

.om-tp-val {
    color: var(--om-profit);
}

.om-empty-compact {
    padding: 20px 16px;
}

.om-badge-grid {
    background: var(--om-accent-dim);
    color: var(--om-accent);
    font-size: 0.58rem;
    margin-left: 4px;
}

.om-badge-dca {
    background: var(--om-primary-dim);
    color: var(--om-primary);
    font-size: 0.58rem;
    margin-left: 4px;
}

.om-badge-active {
    background: var(--om-success-dim);
    color: var(--om-profit);
    border: 1px solid var(--om-profit);
}

.om-pulse {
    font-size: 6px;
    animation: omPulse 1.5s ease-in-out infinite;
}

@keyframes omPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ── Header tick counter ─────────────────────────────────────────────── */
.om-header-tick {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--om-font-mono, monospace);
}

/* ── Close confirm modal classes ─────────────────────────────────────── */
.om-close-modal-card {
    background: var(--om-surface);
    border: 1px solid var(--om-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 360px;
    text-align: center;
}

.om-close-modal-icon {
    font-size: 1.4rem;
    color: var(--color-warning);
    margin-bottom: 12px;
}

.om-close-modal-title {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.om-close-modal-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.om-close-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* ── Action bar engine label ─────────────────────────────────────────── */
.om-action-bar-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--om-font-mono, monospace);
}

/* ── Status bar PnL coloring ─────────────────────────────────────────── */
.om-status-pnl-profit { color: var(--om-profit); }
.om-status-pnl-loss   { color: var(--om-loss); }

/* ── Scan done info padding ──────────────────────────────────────────── */
.om-scan-done-info {
    padding: 0 0 6px;
}

/* ── Mini card PnL colors ────────────────────────────────────────────── */
.om-mini-pnl-profit { color: var(--om-profit); }
.om-mini-pnl-loss   { color: var(--om-loss); }

/* ── Empty state (positions) ─────────────────────────────────────────── */
.om-table-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 24px;
}
.om-trend-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px 12px;
    background: var(--om-surface);
    border: 1px solid var(--om-border);
    border-radius: 8px;
    margin-top: 6px;
    font-family: var(--om-font-mono);
}
.om-trend-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.om-trend-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.om-trend-stat-value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: 600;
}
.om-trend-stat-value .dim {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 10px;
}

/* ── Scanner Expanded Preview ────────────────────────────────────────── */
.om-scan-row { cursor: pointer; }
.om-scan-row.om-scan-row-active { cursor: default; }
.om-scan-row-expanded {
    background: var(--om-surface) !important;
    border-color: var(--om-primary);
}
.om-scan-expand-icon {
    color: var(--text-secondary);
    font-size: 11px;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.om-scan-row:hover .om-scan-expand-icon { opacity: 1; }
.om-scan-row-expanded .om-scan-expand-icon { color: var(--om-primary); opacity: 1; }
.om-adaptive-badge-sm {
    display: inline-block;
    background: var(--om-primary-dim);
    color: var(--om-primary);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}
.om-scan-preview-tr td {
    padding: 0 !important;
    border: none !important;
}
.om-scan-preview {
    background: var(--om-surface);
    border: 1px solid var(--om-primary);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 10px 12px;
    margin: 0 4px 6px;
}
.om-preview-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--om-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.om-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px;
}
.om-preview-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 6px;
    background: var(--om-base);
    border-radius: 6px;
    border: 1px solid var(--om-border);
}
.om-preview-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--om-font-mono);
}
.om-preview-value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: 700;
    font-family: var(--om-font-mono);
}
.om-preview-value.om-preview-warn {
    color: var(--om-loss);
}
.om-preview-warning {
    margin-top: 6px;
    padding: 4px 8px;
    background: var(--om-danger-dim);
    color: var(--om-loss);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.om-preview-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}
.om-preview-actions .om-scan-trade-btn {
    padding: 6px 16px;
    font-size: 12px;
}

/* ══════════════════════════════════════════════════════════════════════
   ENGINE METRICS (compact row inside Engine & Trend section)
   ══════════════════════════════════════════════════════════════════════ */
.om-engine-metrics {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    margin-top: 10px;
    background: var(--om-surface-alt);
    border-radius: 8px;
    border: 1px solid var(--om-border);
    font-family: var(--om-font-mono);
    overflow-x: auto;
}
.om-em-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 6px 4px;
    min-width: 0;
}
.om-em-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    line-height: 1;
    margin-bottom: 2px;
}
.om-em-val {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.om-em-val.profit { color: var(--om-profit); }
.om-em-val.loss { color: var(--om-loss); }
.om-em-sep {
    width: 1px;
    align-self: stretch;
    background: var(--om-border);
    flex-shrink: 0;
}

/* ── Polymoly-style Metrics Grid (legacy — kept for compatibility) ── */
.om-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 4px;
    margin-bottom: 6px;
}
.om-metric-card {
    background: var(--bg-base, var(--om-surface));
    border: 1px solid var(--om-border);
    border-radius: var(--radius-sm, 6px);
    padding: 4px 8px;
    text-align: center;
}
.om-metric-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-family: var(--om-font-mono);
}
.om-metric-val.profit { color: var(--om-profit); }
.om-metric-val.loss { color: var(--om-loss); }
.om-metric-val .dim { color: var(--text-muted); font-weight: 400; }
.om-metric-lbl {
    font-size: var(--text-xs, 11px);
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Compact Engine Layout (Polymoly-inspired) ───────────────────── */
.om-engine-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 4px;
}
.om-engine-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.om-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
}
.om-status-live {
    background: var(--om-success-dim);
    color: var(--om-profit);
    border: 1px solid var(--om-profit);
}
.om-status-idle {
    background: var(--om-surface-alt);
    color: var(--text-muted);
    border: 1px solid var(--om-border);
}
.om-badge-jbr {
    background: var(--om-primary-dim);
    color: var(--om-primary);
    border: 1px solid var(--om-primary);
    font-size: 0.58rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.om-engine-phase-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 0;
}
.om-engine-phase-row span {
    color: var(--om-profit);
}
.om-engine-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--om-profit);
    animation: omPulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
.om-engine-flow-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 4px 0 2px;
    flex-wrap: wrap;
    border-top: 1px solid var(--om-border);
}
.om-engine-flow-row span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.om-engine-flow-row i {
    font-size: 9px;
    opacity: 0.6;
}
.om-engine-flow-row .profit { color: var(--om-profit); }
.om-engine-flow-row .loss { color: var(--om-loss); }
.om-engine-flow-row .dim { color: var(--text-muted); font-weight: 400; }
.om-engine-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: var(--text-muted);
    padding: 2px 0;
    font-family: var(--om-font-mono);
}
.om-engine-detail-row span {
    background: var(--om-surface-alt);
    border: 1px solid var(--om-border);
    border-radius: 4px;
    padding: 1px 6px;
}
.om-engine-brand {
    font-size: 0.55rem;
    color: var(--text-muted);
    opacity: 0.6;
    padding-top: 4px;
    letter-spacing: 0.04em;
}
.om-engine-brand b {
    color: var(--om-primary);
    font-weight: 700;
}

/* ── Engine State Row (legacy) ───────────────────────────────────── */
.om-engine-state {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 0 0;
}
.om-engine-state-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.om-engine-state-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}
.om-engine-state-dot.active {
    background: var(--om-profit);
    box-shadow: 0 0 6px var(--om-success-dim);
    animation: omPulse 2s infinite;
}
@keyframes omPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.om-engine-state-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.om-trend-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--om-surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--om-border);
}
.om-trend-pill.bull { background: var(--om-success-dim); color: var(--om-profit); border-color: var(--om-profit); }
.om-trend-pill.bear { background: var(--om-danger-dim); color: var(--om-loss); border-color: var(--om-loss); }
.om-engine-tag {
    font-size: 0.62rem;
    font-weight: 600;
    font-family: var(--om-font-mono);
    color: var(--text-muted);
    padding: 1px 6px;
    background: var(--om-surface-alt);
    border-radius: 4px;
    border: 1px solid var(--om-border);
}
.om-engine-tag.dim { opacity: 0.6; }

/* ══════════════════════════════════════════════════════════════════════
   SIGNAL HUB (combined scanner + trading sessions + history)
   ══════════════════════════════════════════════════════════════════════ */
.om-signal-hub {
    margin-bottom: 14px;
}
.om-signal-hub > .om-section-header {
    margin-bottom: 10px;
}
.om-hub-header {
    margin-bottom: 8px;
}

/* Scan status line — compact inline */
.om-scan-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    font-family: var(--om-font-mono);
    font-weight: 600;
    color: var(--text-secondary);
    padding: 4px 8px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: var(--om-surface-alt);
    border-left: 3px solid var(--om-border);
}
.om-scan-inline i { font-size: 0.58rem; flex-shrink: 0; }
.om-scan-inline-active {
    color: var(--om-primary-hover);
    border-left-color: var(--om-primary);
}
.om-scan-inline-done {
    color: var(--om-success);
    border-left-color: var(--om-success);
}
.om-scan-inline-err {
    color: var(--om-danger);
    border-left-color: var(--om-danger);
}
.om-scan-inline-bar {
    flex: 1;
    height: 3px;
    background: var(--om-border);
    border-radius: 2px;
    overflow: hidden;
    min-width: 40px;
    max-width: 120px;
}
.om-scan-inline-fill {
    height: 100%;
    background: var(--om-primary);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Scan progress bar */
.om-scan-progress {
    height: 4px;
    background: var(--om-surface);
    border-radius: 2px;
    overflow: hidden;
}
.om-scan-progress-fill {
    height: 100%;
    background: var(--om-primary);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.om-scan-progress-indeterminate {
    width: 30% !important;
    animation: omScanSlide 1.2s ease-in-out infinite;
}
@keyframes omScanSlide {
    0%   { margin-left: 0; }
    50%  { margin-left: 70%; }
    100% { margin-left: 0; }
}

/* Empty state */
.om-hub-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 0.78rem;
    border: 1px dashed var(--om-border);
    border-radius: 8px;
    margin-bottom: 8px;
}
.om-hub-empty i {
    font-size: 1.6rem;
    opacity: 0.5;
}
.om-hub-empty b {
    color: var(--om-primary);
}

/* Hub table */
.om-hub-wrap {
    max-height: 480px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--om-border) transparent;
    border: 1px solid var(--om-border);
    border-radius: 8px;
}
.om-hub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}
.om-hub-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--om-surface);
    color: var(--om-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--om-border);
}
.om-hub-table thead th:last-child { text-align: center; width: 36px; }
.om-hub-sortable { cursor: pointer; user-select: none; }
.om-hub-sortable:hover { color: var(--om-primary); }
.om-hub-sorted { color: var(--om-primary); }
.om-sort-icon { font-size: 0.5rem; opacity: 0.4; margin-left: 2px; vertical-align: middle; }
.om-hub-sorted .om-sort-icon { opacity: 1; }

/* Hub rows */
.om-hub-row td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--om-border);
    white-space: nowrap;
}
.om-hub-row { cursor: pointer; transition: background 0.15s; }
.om-hub-row:hover { background: var(--om-primary-dim); }
.om-hub-sym {
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--om-font-mono, monospace);
}
.om-hub-price {
    color: var(--text-secondary);
    font-family: var(--om-font-mono, monospace);
}
.om-hub-atr {
    font-weight: 700;
    color: var(--om-primary);
    font-family: var(--om-font-mono, monospace);
}
.om-hub-tick {
    font-weight: 700;
    color: var(--om-primary);
    font-family: var(--om-font-mono, monospace);
}
.om-hub-vol {
    color: var(--text-muted);
    font-family: var(--om-font-mono, monospace);
}
.om-hub-pnl {
    font-family: var(--om-font-mono, monospace);
    font-weight: 700;
}
.om-hub-pnl.profit { color: var(--om-profit); }
.om-hub-pnl.loss { color: var(--om-loss); }
.om-hub-chevron {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.6rem;
}
.om-active-bolt {
    color: var(--om-primary);
    font-size: 0.55rem;
    margin-right: 3px;
    animation: omActivePulse 2s ease-in-out infinite;
}

/* Active row highlight */
.om-hub-row-active {
    background: var(--om-primary-dim);
}
.om-hub-row-active:hover {
    background: var(--om-primary-dim);
}
.om-hub-row-active td:first-child {
    color: var(--om-primary);
}
.om-hub-row-expanded {
    background: var(--om-surface-alt);
}

/* TP progress bar (inline in row) */
.om-hub-tp-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}
.om-tp-bar {
    flex: 1;
    height: 5px;
    min-width: 40px;
    max-width: 80px;
    background: var(--om-surface-alt);
    border-radius: 3px;
    overflow: hidden;
}
.om-tp-bar.om-tp-lg {
    max-width: 120px;
    height: 6px;
}
.om-tp-fill {
    height: 100%;
    background: var(--om-primary);
    border-radius: 3px;
    transition: width 0.3s;
}
.om-tp-fill.om-tp-hit {
    background: var(--om-profit);
}
.om-tp-pct {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-secondary);
    font-family: var(--om-font-mono);
    white-space: nowrap;
}

/* ── Closed rows (dimmed / grayed – Polymoly-style) ──────────────── */
.om-hub-row-closed {
    cursor: default;
    opacity: 0.45;
    filter: saturate(0.3);
    transition: opacity 0.2s, filter 0.2s;
}
.om-hub-row-closed:hover {
    opacity: 0.65;
    filter: saturate(0.5);
    background: transparent;
}
.om-hub-row-closed td {
    border-bottom: 1px solid var(--om-border);
}
.om-sig-dim {
    opacity: 0.6;
    border-color: var(--om-border) !important;
}

/* Divider between active/signals and closed */
.om-hub-divider td {
    padding: 4px 8px;
    text-align: left;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    background: var(--om-surface-alt);
    border-bottom: 1px solid var(--om-border);
}
.om-hub-divider td span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.om-hub-divider td span::before,
.om-hub-divider td span::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--om-border);
}

/* ── Hub inline controls (expanded row) ──────────────────────────── */
.om-hub-ctrl-tr td {
    padding: 0 !important;
    border-bottom: 2px solid var(--om-primary-dim);
}
.om-hub-ctrls {
    padding: 8px 10px;
    background: var(--om-surface);
    border-top: 1px solid var(--om-border);
}
.om-hub-ctrl-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.om-hub-ctrl-strip:last-child { margin-bottom: 0; }
.om-hub-ctrl-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.om-hub-ctrl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.om-hub-ctrl-row:last-child { margin-bottom: 0; }
.om-hub-ctrl {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.om-hub-cl {
    font-size: 0.52rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}
.om-hub-in {
    width: 52px;
    padding: 3px 5px;
    font-size: 0.62rem;
    font-family: var(--om-font-mono);
    background: var(--om-surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--om-border);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.15s;
}
.om-hub-in:focus {
    border-color: var(--om-primary);
}
.om-hub-sel {
    padding: 3px 5px;
    font-size: 0.58rem;
    background: var(--om-surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--om-border);
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

/* Toggle switch — compact */
.om-hub-tog {
    position: relative;
    width: 28px;
    height: 14px;
    border-radius: 7px;
    background: var(--om-surface-alt);
    border: 1px solid var(--om-border);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    padding: 0;
    flex-shrink: 0;
}
.om-hub-tog::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.2s, background 0.2s;
}
.om-hub-tog.on {
    background: var(--om-primary-dim);
    border-color: var(--om-primary);
}
.om-hub-tog.on::after {
    transform: translateX(14px);
    background: var(--om-primary);
}

/* Hub info row */
.om-hub-ctrl-info {
    align-items: flex-end;
}
.om-hub-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.om-hub-sl {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}
.om-hub-sv {
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--om-font-mono);
}
.om-hub-sv.profit { color: var(--om-profit); }
.om-hub-sv.loss { color: var(--om-loss); }

/* Hub preview stats (for signal rows) */
.om-hub-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Hub action buttons */
.om-hub-ctrl-btns {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.om-hub-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.om-hub-btn-primary {
    background: var(--om-primary-dim);
    color: var(--om-primary);
    border-color: var(--om-primary);
}
.om-hub-btn-primary:hover {
    background: var(--om-primary);
    color: var(--om-text-inverse);
}
.om-hub-btn-danger {
    background: var(--om-danger-dim);
    color: var(--om-danger);
    border-color: var(--om-danger);
}
.om-hub-btn-danger:hover {
    background: var(--om-danger);
    color: var(--om-surface);
}
.om-hub-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--om-border);
}
.om-hub-btn-ghost:hover {
    background: var(--om-surface-alt);
    color: var(--text-primary);
}

/* Icon-only action buttons (Polymoly-style) */
.om-hub-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
}
.om-hub-btn-icon:hover {
    background: var(--bg-hover, rgba(255,255,255,0.06));
    color: var(--text-primary);
}
.om-hub-btn-icon-danger {
    color: var(--om-loss);
}
.om-hub-btn-icon-danger:hover {
    background: var(--om-danger-dim);
    color: var(--om-loss);
}

/* Signal row directional coloring */
.om-row-bull {
    border-left: 2px solid var(--om-profit);
}
.om-row-bear {
    border-left: 2px solid var(--om-loss);
}
.om-hub-chg {
    font-size: 0.62rem;
    font-weight: 600;
    font-family: var(--om-font-mono);
    font-variant-numeric: tabular-nums;
}
.om-hub-chg.profit { color: var(--om-profit); }
.om-hub-chg.loss { color: var(--om-loss); }

/* Inferred signal badge (tick_spread mode — no kline signal) */
.om-sig-inferred {
    opacity: 0.7;
    border-style: dashed !important;
}

/* Signal pager inside table */
.om-hub-row-pager td {
    padding: 4px 0 !important;
    border-bottom: none !important;
}
.om-signal-pager {
    justify-content: center;
}

/* Hub action buttons (dynamic footer) */
.om-hub-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 0 0;
}
.om-hub-actions:empty {
    display: none;
}

/* ── Scan toolbar (mode selector + options) ──────────────────────── */
.om-scan-toolbar {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.om-scan-mode-sel {
    padding: 2px 6px;
    font-size: 0.6rem;
    background: var(--om-surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--om-border);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    font-weight: 600;
}
.om-scan-mode-sel:focus {
    border-color: var(--om-primary);
}

/* ── Expanded Panel (Signal + Monitor) ───────────────────────────── */
.om-hub-panel {
    padding: 8px 10px;
}
.om-hub-panel-monitor {
    padding: 6px 10px;
    border-left: 2px solid var(--om-accent);
}

/* Controls row — flex inline */
.om-hub-controls {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.om-hub-ctrl-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.om-hub-ctrl-cell .om-hub-cl {
    font-size: var(--text-xs, 11px);
    color: var(--om-muted);
    white-space: nowrap;
}
.om-hub-ctrl-cell .om-hub-in {
    width: 64px;
}
.om-hub-ctrl-cell .om-hub-sel {
    min-width: 80px;
}
.om-hub-spread-info {
    font-size: var(--text-xs, 11px);
    color: var(--om-accent);
    white-space: nowrap;
    margin-top: 1px;
}

/* Config arrow button */
.om-hub-cfg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--om-border);
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--om-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    align-self: flex-end;
}
.om-hub-cfg-btn:hover {
    background: var(--bg-hover, rgba(255,255,255,0.06));
    color: var(--om-text);
}

/* Metrics badge strip */
.om-hub-metrics {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 5px 0;
    border-top: 1px solid var(--om-border);
}
.om-hub-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs, 11px);
    color: var(--om-muted);
    background: var(--om-base);
    border: 1px solid var(--om-border);
    border-radius: var(--radius-sm, 6px);
    padding: 2px 6px;
    white-space: nowrap;
}
.om-hub-tag b {
    color: var(--om-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Per-level margin breakdown */
.om-hub-levels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 5px;
    border-top: 1px solid var(--om-border);
    margin-top: 4px;
}
.om-hub-lvl {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 16px;
    position: relative;
}
.om-hub-lvl-n {
    font-size: 10px;
    color: var(--om-muted);
    width: 18px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.om-hub-lvl-m {
    font-size: 10px;
    color: var(--om-text);
    width: 40px;
    text-align: right;
    flex-shrink: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.om-hub-lvl-fill {
    height: 6px;
    background: var(--om-accent);
    border-radius: 3px;
    opacity: 0.5;
    transition: width 0.2s;
    min-width: 2px;
}
.om-hub-lvl-status {
    padding-top: 3px;
    font-size: var(--text-xs, 11px);
}
.om-hub-lvl-ok {
    color: var(--om-profit, #22c55e);
}
.om-hub-lvl-ok i { margin-right: 3px; }
.om-hub-lvl-warn {
    color: var(--om-loss, #ef4444);
}
.om-hub-lvl-warn i { margin-right: 3px; }

/* ── Monitor bar (active positions) ─────────────────────────────── */
.om-hub-monitor {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.om-hub-mon-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.om-hub-tp-strip {
    display: flex;
    align-items: center;
    gap: 6px;
}
.om-hub-tp-label {
    font-size: var(--text-xs, 11px);
    color: var(--om-muted);
    flex-shrink: 0;
}
.om-hub-tp-strip .om-tp-bar { flex: 1; }
.om-hub-tp-strip .om-tp-pct {
    font-size: var(--text-xs, 11px);
    color: var(--om-text);
    font-weight: 600;
    min-width: 32px;
    text-align: right;
}
.om-hub-mon-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--om-border);
}

/* ── Responsive adjustments for signal hub ───────────────────────── */
@media (max-width: 600px) {
    .om-hub-ctrl-row {
        gap: 8px;
    }
    .om-hub-in {
        width: 60px;
    }
    .om-engine-metrics {
        gap: 0;
        padding: 0;
    }
    .om-em-item { padding: 4px 2px; }
    .om-em-val { font-size: 0.7rem; }
    .om-hub-actions {
        flex-direction: column;
    }
    .om-hub-table {
        font-size: 0.65rem;
    }
    .om-hub-table thead th {
        font-size: 0.55rem;
        padding: 4px 6px;
    }
    .om-hub-row td {
        padding: 5px 6px;
    }
}