/* static/style.css */

/* =========================================
   0. THEME VARIABLES
   ========================================= */
:root {
    --bg-app: #000000;
    --bg-panel: #1b1b1b;
    --bg-input: #2b2b2b;
    --bg-hover: #3b3b3b;
    --border-color: #2b2b2b;
    --border-light: #444444;
    --text-primary: #e0e0e0;
    --text-secondary: #cccccc;
    --text-muted: #888888;
    --accent-color: #2196F3;
    
    /* Chart Colors */
    --chart-grid: #2B2B43;
    --chart-text: #e0e0e0;
}

/* =========================================
   1. GLOBAL RESET
   ========================================= */
* { box-sizing: border-box; }

html, body { 
    margin: 0; 
    padding: 0; 
    font-family: Arial, sans-serif; 
    font-size: 15px; 
    background-color: var(--bg-app); 
    color: var(--text-primary); 
    overflow-x: hidden; 
    height: 100%;
}

body.drag-active { padding-bottom: 600px !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* =========================================
   2. HEADER
   ========================================= */
#sticky-wrapper { position: sticky; top: 0; z-index: 2000; background-color: var(--bg-app); border-bottom: 1px solid #333; }
#header { padding: 0 12px; background-color: var(--bg-panel); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; height: 44px; }
#header-left, #header-right { flex: 1; display: flex; align-items: center; }
#header-center { flex: 3; display: flex; justify-content: center; align-items: center; gap: 15px; }
.header-title { font-size: 18px; font-weight: bold; color: #fff; white-space: nowrap; }
.header-inputs { display: flex; gap: 10px; align-items: center; }
#header-right { justify-content: flex-end; gap: 10px; }

/* Dropdown */
.dropdown { position: relative; display: inline-block; }
.dropbtn { background-color: #333; color: white; padding: 6px 14px; font-size: 14px; border: 1px solid #555; cursor: pointer; border-radius: 3px; display: flex; align-items: center; gap: 6px; font-weight: bold; }
.dropbtn:hover { background-color: #444; border-color: #777; }
.dropdown-content { display: none; position: absolute; background-color: var(--bg-panel); min-width: 220px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.95); z-index: 2147483647; border: 1px solid var(--border-light); border-radius: 4px; top: 100%; left: 0; margin-top: 4px; }
.dropdown-content.show { display: block; }
.menu-info { padding: 8px 16px; font-size: 12px; color: var(--text-muted); border-bottom: 1px solid #333; background: #111; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; }
.dropdown-content .menu-item { color: var(--text-primary); padding: 10px 16px; text-decoration: none; display: block; font-size: 14px; cursor: pointer; white-space: nowrap; }
.dropdown-content .menu-item:hover { background-color: #333; color: #fff; }
.menu-separator { height: 1px; background: #333; margin: 4px 0; }
.has-submenu { display: flex; justify-content: space-between; align-items: center; position: relative; }
.has-submenu::after { content: '▶'; font-size: 10px; margin-left: 10px; color: #888; }
.submenu { display: none; position: absolute; left: 100%; top: -1px; background-color: var(--bg-panel); min-width: 180px; border: 1px solid var(--border-light); box-shadow: 4px 4px 12px rgba(0,0,0,0.95); border-radius: 4px; z-index: 2147483648; }
.has-submenu:hover .submenu, .submenu.show { display: block; }

/* Inputs */
#tickerInput { width: 70px; text-align: center; font-size: 14px; background-color: var(--bg-app); color: var(--text-primary); border: 1px solid var(--border-light); padding: 4px; border-radius: 3px; font-weight: bold; text-transform: uppercase; }
#expirationDisplay { cursor: pointer; background-color: var(--bg-app); color: var(--text-primary); border: 1px solid var(--border-light); border-radius: 3px; padding: 4px 10px; font-size: 14px; position: relative; display: inline-block; }
#expirationPicker { opacity: 0; width: 1px; height: 1px; border: 0; position: absolute; pointer-events: none; }
.icon-btn { background: var(--bg-input); border: 1px solid var(--border-light); color: var(--text-primary); width: 32px; height: 32px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn svg { fill: currentColor; width: 18px; height: 18px; }
#helpBtn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #666; background: #333; color: #fff; cursor: pointer; font-weight: bold; font-size: 16px; display: flex; align-items: center; justify-content: center; padding: 0; }
#helpBtn:hover { background: #444; border-color: #888; }
#ticker { text-align: center; font-weight: bold; padding: 8px 0; font-size: 16px; background: var(--bg-app); border-bottom: 1px solid #222; }
#spxOpenDisplay { text-align: center; font-size: 14px; padding: 5px 0; border-bottom: 1px solid #222; background-color: #111; color: #aaa; }

/* =========================================
   3. GRIDSTACK
   ========================================= */
.grid-stack { background: var(--bg-app); margin-top: 10px; min-height: 80vh; padding-bottom: 0; }
.grid-stack.edit-mode { padding-bottom: 800px !important; }
.grid-stack-item-content { background-color: var(--bg-app); border: 1px solid var(--border-color); display: flex; flex-direction: column; overflow: hidden !important; border-radius: 0; }
.widget-header { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; background-color: var(--bg-panel); border-bottom: 1px solid var(--border-color); font-size: 16px; font-weight: bold; cursor: grab; height: 26px; flex-shrink: 0; color: #ffffff; }
.widget-header:active { cursor: grabbing; }
.widget-title { flex-grow: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-controls { display: flex; gap: 6px; }
.widget-btn-remove { background: none; border: none; color: #fff; cursor: pointer; font-size: 18px; padding: 0 4px; line-height: 1; font-weight: bold; }
.widget-btn-remove:hover { color: #ff5555; }
.widget-btn-help { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #666; background: #333; color: #fff; cursor: pointer; font-weight: bold; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0; }
.widget-btn-help:hover { color: #fff; }
.widget-body { flex-grow: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; }

/* =========================================
   4. TOOLTIPS & MODALS
   ========================================= */
.tooltip { position: absolute; display: none; background-color: rgba(0,0,0,0.95); color: #fff; border: 1px solid #555; border-radius: 4px; padding: 8px; font-size: 12px; pointer-events: none; white-space: nowrap; z-index: 10000; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
#imageModal { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); display: none; justify-content: center; align-items: center; }
#imageModal.visible { display: flex; }
#modalImage { max-width: 95%; max-height: 95%; object-fit: contain; }
#modalClose { position: absolute; top: 15px; right: 35px; color: #fff; font-size: 40px; cursor: pointer; }
#saveLayoutModal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); }
#saveLayoutModal.visible { display: flex; justify-content: center; align-items: center; }
.save-modal-content { background-color: var(--bg-panel); padding: 20px; border: 1px solid var(--border-light); width: 350px; border-radius: 5px; color: var(--text-primary); box-shadow: 0 4px 15px rgba(0,0,0,0.9); }
.save-modal-header { font-size: 18px; font-weight: bold; margin-bottom: 15px; }
.save-input { width: 100%; padding: 8px; background: #000; border: 1px solid var(--border-light); color: #fff; margin-bottom: 10px; }
.save-list { max-height: 150px; overflow-y: auto; margin-bottom: 15px; border: 1px solid #333; }
.save-list-item { padding: 6px 10px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #222; }
.save-list-item:hover { background-color: #333; }
.save-actions { display: flex; justify-content: flex-end; gap: 10px; }
.save-btn { padding: 6px 12px; cursor: pointer; background: #333; color: #fff; border: 1px solid #555; }
.save-btn.primary { background: var(--accent-color); border-color: #1976D2; }

/* =========================================
   5. WIDGET: GEX PANEL
   ========================================= */
.gex-widget-wrapper { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--bg-app); position: relative; }
.gex-stats-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 15px; padding: 6px 10px; background-color: var(--bg-panel); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.gex-stat-label { font-size: 12px; color: var(--text-secondary); } 
.gex-stat-value { font-size: 12px; font-weight: bold; text-align: right; white-space: nowrap; }
.gex-chart-area { flex-grow: 1; min-height: 0; position: relative; }
.gex-controls { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 5px 0; background: var(--bg-panel); border-top: 1px solid var(--border-color); }
.gex-btn-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 4px; width: 100%; }
.gex-btn { background-color: var(--bg-input); color: #fff; border: 1px solid var(--border-light); padding: 4px 10px; cursor: pointer; font-size: 12px; }
.gex-btn:hover { background-color: var(--bg-hover); }
.gex-time-container { display: flex; align-items: center; gap: 5px; }
.gex-time-label { font-size: 14px; color: var(--text-primary); }
.historical-indicator { font-size: 12px; color: orange; font-style: italic; display: none; }
.gex-slider-container { width: 90%; max-width: 600px; position: relative; height: 35px; margin-top: 5px; }
.gex-slider { width: 100%; height: 8px; cursor: pointer; appearance: none; background: #444; border-radius: 4px; outline: none; position: absolute; bottom: 15px; margin: 0; z-index: 1; }
.gex-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: #ccc; border-radius: 50%; cursor: pointer; margin-top: -4px; transition: background-color 0.2s ease; }
.gex-slider::-moz-range-thumb { width: 16px; height: 16px; background: #ccc; border-radius: 50%; cursor: pointer; border: none; transition: background-color 0.2s ease; }
.gex-slider.at-latest::-webkit-slider-thumb { background-color: cyan; }
.gex-slider.at-latest::-moz-range-thumb { background-color: cyan; }
.timeline-marker { position: absolute; bottom: 11px; width: 2px; height: 16px; background-color: cyan; transform: translateX(-50%); pointer-events: none; z-index: 2; left: 0%; display: none; transition: left 0.2s ease-out; }
.timeline-label { position: absolute; bottom: 0px; font-size: 10px; color: #888; white-space: nowrap; }
.timeline-label-start { left: 0; }
.timeline-label-end { right: 0; }
.aux-controls { display: flex; gap: 5px; padding: 4px; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); justify-content: flex-end; }
.toggle-btn { background-color: var(--bg-input); color: #fff; border: 1px solid var(--border-light); padding: 2px 8px; cursor: pointer; font-size: 11px; }
.toggle-btn.active { background-color: var(--bg-hover); box-shadow: inset 0 0 3px #fff; border-color: #666; }
.gex-tooltip-box { position: fixed; display: none; background-color: rgba(0,0,0,0.9); color: #fff; border: 1px solid var(--border-light); border-radius: 4px; padding: 8px; font-size: 12px; pointer-events: none; white-space: nowrap; z-index: 10000; }

/* =========================================
   6. WIDGET: PREDICTION PANEL
   ========================================= */
.prediction-widget-wrapper { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--bg-app); overflow: hidden; }
.prediction-content-wrapper { flex-grow: 1; display: flex; gap: 10px; min-height: 0; overflow: hidden; position: relative; padding: 10px; }
.pred-col-left { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pred-col-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pred-stats-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 15px; background-color: var(--bg-panel); padding: 8px; border: 1px solid var(--border-color); align-content: start; }
.pred-stat-item { display: contents; }
.pred-stat-label { font-size: 12px; color: var(--text-secondary); } 
.pred-stat-value { font-size: 12px; font-weight: bold; text-align: right; white-space: nowrap; }
.pred-separator { display: none; }
.pred-image-container { flex-grow: 1; display: flex; align-items: center; justify-content: center; background-color: var(--bg-panel); overflow: hidden; border: 1px solid var(--border-color); position: relative; }
.pred-image-output { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; display: none; }
.pred-trades-container { flex-grow: 1; display: flex; flex-direction: column; background-color: var(--bg-panel); padding: 0; border: 1px solid var(--border-color); overflow: hidden; }
.pred-trades-label { font-weight: bold; padding: 6px; color: #ccc; font-size: 13px; text-align: center; background: #222; border-bottom: 1px solid #333; flex-shrink: 0; }
.pred-trades-content { font-family: Consolas, "Lucida Console", "Courier New", monospace; font-size: 12px; line-height: 1.8; white-space: pre-wrap; word-wrap: break-word; background-color: #000; padding: 12px; color: var(--text-primary); flex-grow: 1; overflow-y: auto; }
.pred-controls { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 5px 0; background: var(--bg-panel); border-top: 1px solid var(--border-color); }
.pred-btn-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 5px; width: 100%; }
.pred-btn { background-color: var(--bg-input); color: #fff; border: 1px solid var(--border-light); padding: 4px 10px; cursor: pointer; font-size: 12px; }
.pred-btn:hover { background-color: var(--bg-hover); }
.pred-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pred-time-container { display: flex; align-items: center; gap: 5px; }
.pred-time-label { font-size: 14px; color: var(--text-primary); }
.pred-slider-container { width: 90%; max-width: 600px; position: relative; height: 35px; margin-top: 5px; }
.pred-slider { width: 100%; height: 8px; cursor: pointer; appearance: none; background: #444; border-radius: 4px; outline: none; position: absolute; bottom: 15px; margin: 0; z-index: 1; }
.pred-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: #ccc; border-radius: 50%; cursor: pointer; margin-top: -4px; transition: background-color 0.2s ease; }
.pred-slider::-moz-range-thumb { width: 16px; height: 16px; background: #ccc; border-radius: 50%; cursor: pointer; border: none; transition: background-color 0.2s ease; }
.pred-slider.at-latest::-webkit-slider-thumb { background-color: cyan; }
.pred-slider.at-latest::-moz-range-thumb { background-color: cyan; }
/* FIXED: Centered Divider */
.pred-flex-divider { position: absolute; top: 0; bottom: 0; width: 4px; cursor: col-resize; z-index: 10; background: rgba(120,160,255,0.45); border-left: 1px solid #2a2f3a; border-right: 1px solid #2a2f3a; }

/* =========================================
   6b. WIDGET: PREDICTION MINI
   ========================================= */
.prediction-mini-wrapper {
    height: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
}

.prediction-mini-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* or flex-start if you prefer top-aligned */
}

.prediction-mini-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 2px 0;
}

/* labels/values reuse .pred-stat-label / .pred-stat-value */

/* --- Trend history strip --- */
.prediction-mini-trendbar {
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--border-color); /* separator line */
    font-size: 10px;
}

.prediction-mini-trendbar-strip {
    margin-top: 2px;
    height: 12px; overflow-x:auto; flex-wrap:nowrap;
    display: flex;
    gap: 3px;
    align-items: center;
}

/* fixed-size “squares”, count grows up to 10 */
.prediction-mini-trendbar-strip::-webkit-scrollbar-corner { background:transparent; }
.prediction-mini-trend-segment {
    width: 10px;
    height: 8px;
    flex: 0 0 auto;
    background-color: #333; /* fallback/default */
    border-radius: 2px;
    cursor: pointer;
}

.prediction-mini-trend-segment.trend-up {
    background-color: #00c853;
    cursor: pointer;
}

.prediction-mini-trend-segment.trend-down {
    background-color: #ff3b30;
    cursor: pointer;
}

.prediction-mini-trend-segment.trend-chop {
    background-color: #555;
    cursor: pointer;
}

.prediction-mini-trendbar-label {
    margin-top: 2px;
    font-size: 9px;
    color: var(--text-muted);
}
/* Highlight latest bar (rightmost) */
.prediction-mini-trendbar-strip .prediction-mini-trend-segment:last-child {
    box-shadow: inset 0 0 0 2px #fff;
    
    border-radius: 3px;
}


/* =========================================
   7. WIDGET: SPX CHART
   ========================================= */
.spx-widget-wrapper { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--bg-app); position: relative; }
.spx-chart-area { flex-grow: 1; min-height: 0; position: relative; }
.spx-controls { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 5px; padding: 4px; background: var(--bg-panel); border-top: 1px solid var(--border-color); align-items: center; justify-content: center; }
.spx-control-select { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-light); font-size: 12px; padding: 2px; border-radius: 3px; }
.spx-btn { background: #333; color: var(--text-primary); border: 1px solid var(--border-light); font-size: 12px; padding: 2px 6px; cursor: pointer; border-radius: 3px; }
.spx-btn:hover { background: #444; }
.sr-panel { position: absolute; bottom: 40px; right: 10px; width: 240px; background: var(--bg-panel); border: 1px solid var(--border-light); padding: 10px; z-index: 2000; box-shadow: 0 4px 8px rgba(0,0,0,0.5); display: none; }
.sr-panel.visible { display: block; }
.sr-textarea { width: 100%; height: 80px; background: #000; color: var(--text-primary); border: 1px solid var(--border-light); font-family: monospace; font-size: 12px; margin-bottom: 5px; resize: none; }
.sr-buttons { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.color-picker-btn { width: 24px; height: 24px; border: 1px solid var(--border-light); cursor: pointer; }
.color-options { position: absolute; top: 100%; left: 50%; transform: translate(-50%); display: flex; gap: 5px; background: var(--bg-panel); padding: 5px; border: 1px solid var(--border-light); z-index: 1501; display: none; }
.color-options.visible { display: flex; }
.color-option { width: 20px; height: 20px; border: 1px solid var(--border-light); cursor: pointer; }
.chart-tooltip, .gex-tooltip { position: fixed; display: none; background-color: rgba(0,0,0,0.9); color: #fff; border: 1px solid var(--border-light); border-radius: 4px; padding: 8px; font-size: 12px; pointer-events: none; white-space: nowrap; z-index: 10000; }

/* =========================================
   8. WIDGET: AI TRADES
   ========================================= */
.ai-trades-wrapper { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--bg-app); }
.ai-trades-controls { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 8px; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.ai-trades-btn { background-color: var(--bg-input); color: #fff; border: 1px solid var(--border-light); padding: 5px 12px; cursor: pointer; font-size: 13px; border-radius: 3px; }
.ai-trades-btn:hover { background-color: var(--bg-hover); }
.ai-trades-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-trades-label { font-size: 12px; color: #aaa; }
.ai-trades-box { flex-grow: 1; overflow-y: auto; background-color: var(--bg-panel); padding: 10px; color: var(--text-primary); font-size: 14px; line-height: 1.4; }

/* =========================================
   9. WIDGET: DEBUG LOG
   ========================================= */
.debug-widget-wrapper { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--bg-app); overflow: hidden; font-family: "Consolas", "Monaco", "Courier New", monospace; color: var(--text-primary); border: 1px solid var(--border-color); }
.debug-content { flex-grow: 1; overflow-y: auto; padding: 10px; white-space: pre-wrap; word-wrap: break-word; font-size: 12px; line-height: 1.5; }
.debug-timestamp { border-top: 1px solid var(--border-color); padding: 4px 10px; font-size: 11px; color: #888; background: var(--bg-panel); flex-shrink: 0; text-align: right; }

/* =========================================
   10. WIDGET: FINANCIAL JUICE
   ========================================= */
.fj-widget-wrapper { height: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; background-color: #1e222d; position: relative; display: flex; flex-direction: column; }
.fj-widget-wrapper > div, .fj-widget-wrapper iframe { width: 100% !important; height: 100% !important; border: none !important; display: block !important; flex-grow: 1 !important; margin: 0 !important; padding: 0 !important; }

/* =========================================
   11. WIDGET: OPTIONS BUILDER
   ========================================= */
.ob-widget-wrapper { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--bg-app); overflow: hidden; position: relative; }
.ob-widget-wrapper .panel-header { display:none; } 
.ob-widget-wrapper .panel-content { padding:0; display: flex; flex-direction: column; flex-grow: 1; min-height: 0; overflow: hidden; }
.ob-widget-wrapper .ob-legend { padding:10px 12px 6px; border-bottom:1px solid var(--border-color); flex-shrink: 0; }
.ob-widget-wrapper .ob-legend-desktop { display:block; }
.ob-widget-wrapper .ob-legend-mobile { display:none; }
.ob-widget-wrapper .ob-line { display:flex; flex-wrap:wrap; gap:22px; align-items:baseline; justify-content:center; }
.ob-widget-wrapper .ob-item { display:flex; gap:6px; align-items:baseline; }
.ob-widget-wrapper .ob-k { color:#cfcfcf; font-size:14px; font-weight:500; }
.ob-widget-wrapper .ob-v { color:#eaeaea; font-weight:700; font-size:14px; }
.ob-widget-wrapper .ob-muted { opacity:.8; margin-left:6px; }
.ob-widget-wrapper .ob-dot { opacity:.5; }
.ob-widget-wrapper .ob-mini-sep { opacity:.5; margin:0 10px; }
.ob-widget-wrapper .ob-legend-sep { height:1px; background:#2b2b2b; margin:8px 0; }
.ob-widget-wrapper .ob-chart-wrap { position:relative; flex: 1 1 auto; min-height: 100px; overflow: hidden; }
.ob-widget-wrapper .ob-chart { position:absolute; inset:0; }
.ob-widget-wrapper .ob-overlay { position:absolute; inset:0; pointer-events:none; z-index:5; }
.ob-widget-wrapper .ob-vline { position:absolute; top:0; bottom:0; border-left:1px dotted rgba(0,255,255,.9); }
.ob-widget-wrapper .ob-vline.be { border-left:1px solid #9ae6ff; }
.ob-widget-wrapper .ob-badge { position:absolute; top:8px; transform:translateX(-50%); background:#0e0e0e; border:1px solid var(--border-light); color:var(--text-primary); font-size:12px; padding:2px 6px; border-radius:3px; white-space:nowrap; z-index:6; }
.ob-widget-wrapper .ob-badge.be { color:#9be7ff; border-color:#2c5160; background:#081016; }
.ob-widget-wrapper .ob-hline { position:absolute; left:0; right:0; border-top:1px solid #fff; opacity:.95; z-index:4; pointer-events:none; }
.ob-widget-wrapper .ob-chart-wrap.ob-inactive { cursor: pointer; }
.ob-widget-wrapper .ob-chart-wrap.ob-active   { cursor: grab; }
.ob-widget-wrapper .ob-chart-wrap.ob-active.dragging { cursor: grabbing; }
.ob-widget-wrapper .tv-lightweight-charts__logo,
.ob-widget-wrapper .tv-crosshair__time-label { display:none !important; }
.ob-chart-tooltip { position:absolute; display:none; background:rgba(0,0,0,.85); color:#fff; border:1px solid var(--border-light); border-radius:4px; padding:8px; font-size:12px; pointer-events:none; white-space:pre; z-index:7; }
.ob-widget-wrapper .ob-pltable-wrap { padding:6px 12px 0; flex: 1 1 auto; overflow:auto; display: none; min-height: 0; }
.ob-bottom-section { flex: 0 0 auto; display: flex; flex-direction: column; max-height: 70%; overflow-y: auto; border-top: 1px solid var(--border-color); background: var(--bg-app); }
.ob-widget-wrapper .ob-controls-desktop { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px 12px; flex-shrink: 0; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); }
.ob-widget-wrapper .ob-controls-mobile { display:none; }
.ob-widget-wrapper .ob-sep-line { display:none; } 
.ob-widget-wrapper .ob-select, .ob-widget-wrapper .ob-input, .ob-widget-wrapper .ob-btn { background:var(--bg-input); color:#fff; border:1px solid var(--border-light); border-radius:3px; font-size:13px; padding:5px 8px; }
.ob-widget-wrapper .ob-input[readonly] { background:#1e1e1e; color:#aaa; cursor:not-allowed; }
.ob-widget-wrapper .ob-btn { cursor:pointer; }
.ob-widget-wrapper .ob-btn:hover { background:var(--bg-hover); }
.ob-widget-wrapper .ob-btn.ob-sm { font-size:12px; padding:3px 6px; }
.ob-widget-wrapper .ob-pad { padding:0 12px 12px; flex-shrink: 0; }
.ob-widget-wrapper .ob-section { display:flex; align-items:center; gap:10px; font-weight:700; margin:8px 0 6px; }
.ob-widget-wrapper .ob-trades { background:#000; border:1px solid var(--border-color); border-radius:3px; padding:8px; font-family:monospace; font-size:12px; white-space:pre-wrap; max-height:110px; overflow:auto; }
.ob-widget-wrapper .ob-trades.is-hidden { display:none; }
.ob-widget-wrapper .ob-legs-scroll { width:100%; overflow-x:auto; overflow-y:hidden; }
.ob-widget-wrapper table { width:100%; border-collapse:collapse; }
.ob-widget-wrapper th, .ob-widget-wrapper td { border-top:1px solid var(--border-color); padding:8px 10px; text-align:left; vertical-align:middle; font-size:13px; background:transparent; }
.ob-widget-wrapper thead th { text-align:center !important; position:sticky; top:0; background:#0b0b0b; z-index:1; }
.ob-widget-wrapper .ob-mono { font-family:monospace; }
.ob-widget-wrapper .ob-right-align { text-align:right; }
.ob-widget-wrapper input[type="number"] { width:80px; }
.ob-widget-wrapper .qty-input { width:70px; text-align:right; }
.ob-widget-wrapper .strike-input { width:100px; text-align:right; }
.ob-widget-wrapper .price-input { width:90px; text-align:right; }
.ob-widget-wrapper .strategy-header td { background:#1a1a1a; font-weight:bold; cursor:pointer; }
.ob-widget-wrapper .strategy-header:hover td { background:#252525; }
.ob-widget-wrapper .strategy-toggle { display:inline-block; width:20px; text-align:center; transition:transform .2s; }
.ob-widget-wrapper .strategy-header.collapsed .strategy-toggle { transform:rotate(-90deg); }
.ob-widget-wrapper tr.leg-row.collapsed { display:none; }
.del-strategy { cursor:pointer; background:var(--bg-input); border:1px solid var(--border-light); border-radius:3px; padding:2px 8px; }
.del-strategy:hover { background:var(--bg-hover); }
.ob-widget-wrapper .ob-pltable { border-collapse:collapse; table-layout:fixed; width:100%; }
.ob-widget-wrapper .ob-pltable thead th { position:sticky; top:0; background:#0b0b0b; z-index:2; border-bottom:1px solid var(--border-color); padding:6px 8px; font-weight:700; font-size:12px; text-align:center; white-space:nowrap; }
.ob-widget-wrapper .ob-pltable tbody td, .ob-widget-wrapper .ob-pltable tbody th { border-top:1px solid var(--border-color); padding:8px 10px; font-size:12px; text-align:center; }
.ob-widget-wrapper .ob-pltable tbody th { position:sticky; left:0; background:#111; z-index:1; text-align:right; font-weight:700; }
.ob-widget-wrapper .ob-pltable td.pos { color:#6ee786; }
.ob-widget-wrapper .ob-pltable td.neg { color:#ff6b6b; }
.ob-widget-wrapper .ob-pltable td.neu { color:#ddd; }
.ob-widget-wrapper .ob-pltable tr.spot-row th, .ob-widget-wrapper .ob-pltable tr.spot-row td { background: linear-gradient(90deg, rgba(155,231,255,0.22), rgba(155,231,255,0.12)) !important; }
.ob-widget-wrapper .ob-pltable tr.spot-row th { box-shadow: inset 4px 0 0 #9be7ff; }
.ob-widget-wrapper .panel-content.is-table  .ob-chart-wrap { display:none; }
.ob-widget-wrapper .panel-content.is-table  .ob-pltable-wrap { display:block; }
.ob-widget-wrapper .panel-content.is-graph  .ob-chart-wrap { display:block; }
.ob-widget-wrapper .panel-content.is-graph  .ob-pltable-wrap { display:none; }
.ob-widget-wrapper #obToggleView { margin-left:auto; }

/* =========================================
   12. WIDGET: GEX HEATMAP
   ========================================= */
.vph-widget-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #111; display: flex; flex-direction: column; overflow: hidden; }
.vph-widget-wrapper .vph-header, .vph-widget-wrapper .vph-subheader { padding: 4px 10px; border-bottom: 1px solid var(--border-color); font-size: 12px; color: #ccc; display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 10px; align-items: center; flex-shrink: 0; }
.vph-widget-wrapper .vph-header span, .vph-widget-wrapper .vph-subheader span { white-space: nowrap; }
.vph-widget-wrapper .vph-header span:nth-child(2), .vph-widget-wrapper .vph-subheader span:nth-child(2) { text-align: center; }
.vph-widget-wrapper .vph-header span:nth-child(3), .vph-widget-wrapper .vph-subheader span:nth-child(3) { text-align: right; }
.vph-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.vph-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vph-table thead th { position: sticky; top: 0; background: #0b0b0b; z-index: 4; padding: 6px 8px; border-bottom: 1px solid var(--border-color); text-align: center; }
.vph-table tbody td, .vph-table tbody th { padding: 4px 6px; border-top: 1px solid #222; background: transparent; white-space: nowrap; }
.vph-table tbody th { text-align: right; font-weight: 600; font-family: monospace; position: sticky; left: 0; background: #111; z-index: 3; }
.vph-widget-wrapper .vph-legend { padding: 4px 8px 6px; font-size: 11px; color: #aaa; border-top: 1px solid #222; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.vph-widget-wrapper .vph-chip { display: inline-flex; align-items: center; gap: 4px; }
.vph-widget-wrapper .vph-box { width: 16px; height: 10px; border-radius: 2px; border: 1px solid #444; }

/* =========================================
   13. MOBILE OVERRIDES
   ========================================= */
@media (max-width: 768px) {
    #header { padding: 0 8px; gap: 8px; }
    #header-left { flex: 0 0 auto; }
    #header-center { flex: 1; justify-content: center; }
    #header-right { flex: 0 0 auto; gap: 8px; }
    .header-title { font-size: 14px; display: none; }
    #tickerInput { width: 55px; font-size: 13px; padding: 3px; }
    #expirationDisplay { font-size: 13px; padding: 3px 6px; }
    .dropbtn { padding: 5px 10px; font-size: 13px; }
    .icon-btn { width: 28px; height: 28px; }
    #helpBtn { width: 24px; height: 24px; font-size: 14px; }
    #header-right .icon-btn, #header-right #helpBtn { flex-shrink: 0; }
    #ticker, #spxOpenDisplay { font-size: 12px; padding: 3px 0; }
    .flatpickr-calendar { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; max-width: 95vw !important; }

    .gex-stats-grid { gap: 2px 8px; padding: 4px 6px; }
    .gex-stat-label, .gex-stat-value { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
    .gex-slider-container { width: 95%; height: 30px; }
    .gex-slider { bottom: 10px; }
    .timeline-marker { bottom: 6px; }
    .timeline-label { bottom: -2px; }

    .prediction-content-wrapper { flex-direction: column; overflow-y: hidden; }
    .pred-col-left { flex: 1 1 50%; width: 100%; gap: 5px; overflow-y: auto; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; }
    .pred-col-right { flex: 1 1 50%; width: 100%; overflow-y: auto; min-height: 0; }
    .pred-stats-grid { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
    .pred-stat-item { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: 2px; }
    .pred-separator { display: block; height: 1px; background: #444; margin: 5px 0; order: 6; }
    .pred-stat-item[data-m="1"] { order: 1; } .pred-stat-item[data-m="2"] { order: 2; } .pred-stat-item[data-m="3"] { order: 3; } .pred-stat-item[data-m="4"] { order: 4; } .pred-stat-item[data-m="5"] { order: 5; } .pred-stat-item[data-m="6"] { order: 11; } .pred-stat-item[data-m="7"] { order: 7; } .pred-stat-item[data-m="8"] { order: 8; } .pred-stat-item[data-m="9"] { order: 9; } .pred-stat-item[data-m="10"] { order: 10; } .pred-stat-item[data-m="11"] { order: 11; }
    .pred-image-container { min-height: 200px; margin-top: 5px; flex-shrink: 0; }
    .pred-flex-divider { display: none; }
    .pred-slider-container { width: 95%; height: 30px; }
    .pred-slider { bottom: 10px; }

    .spx-controls { gap: 3px; }
    .spx-control-select, .spx-btn { font-size: 11px; padding: 1px 4px; }
    .sr-panel { width: 90%; right: 5%; bottom: 50px; }

    .ai-trades-controls { flex-wrap: wrap; }

    .vph-widget-wrapper .vph-header, .vph-widget-wrapper .vph-subheader { font-size: 11px; padding: 3px 6px; }
    .vph-table { font-size: 11px; width: 100%; }
    .vph-table tbody td, .vph-table tbody th { padding: 3px 4px; }

    .ob-widget-wrapper .ob-legend-desktop { display:none; }
    .ob-widget-wrapper .ob-legend-mobile { display:block; -webkit-text-size-adjust:100%; }
    .ob-widget-wrapper .ob-legend { padding:6px 10px 4px; }
    .ob-widget-wrapper .ob-k { font-size:11px; font-weight:500; }
    .ob-widget-wrapper .ob-v { font-size:11px; font-weight:700; }
    .ob-widget-wrapper .ob-muted { font-size:10px; opacity:.85; margin-left:4px; }
    .ob-widget-wrapper .ob-legend-mobile .ob-mgrid {
      display:grid;
      grid-template-columns:auto 1fr auto 1fr;
      grid-template-areas:
        "spotK spotV netK  netV"
        "upnlK upnlV maxpK maxpV"
        "beK   beV   maxlK maxlV";
      column-gap:8px; row-gap:2px; align-items:center;
    }
    .ob-widget-wrapper .ob-legend-mobile .ob-mcol,
    .ob-widget-wrapper .ob-legend-mobile .ob-item { display:contents; }
    .ob-widget-wrapper .ob-legend-mobile .i-spotK { grid-area:spotK; }
    .ob-widget-wrapper .ob-legend-mobile .i-spotV { grid-area:spotV; }
    .ob-widget-wrapper .ob-legend-mobile .i-upnlK { grid-area:upnlK; }
    .ob-widget-wrapper .ob-legend-mobile .i-upnlV { grid-area:upnlV; }
    .ob-widget-wrapper .ob-legend-mobile .i-beK   { grid-area:beK; }
    .ob-widget-wrapper .ob-legend-mobile .i-beV   { grid-area:beV; }
    .ob-widget-wrapper .ob-legend-mobile .i-netK  { grid-area:netK; }
    .ob-widget-wrapper .ob-legend-mobile .i-netV  { grid-area:netV; }
    .ob-widget-wrapper .ob-legend-mobile .i-maxpK { grid-area:maxpK; }
    .ob-widget-wrapper .ob-legend-mobile .i-maxpV { grid-area:maxpV; }
    .ob-widget-wrapper .ob-legend-mobile .i-maxlK { grid-area:maxlK; }
    .ob-widget-wrapper .ob-legend-mobile .i-maxlV { grid-area:maxlV; }
    .ob-widget-wrapper .ob-legend-mobile .i-spotV,
    .ob-widget-wrapper .ob-legend-mobile .i-upnlV,
    .ob-widget-wrapper .ob-legend-mobile .i-beV,
    .ob-widget-wrapper .ob-legend-mobile .i-netV,
    .ob-widget-wrapper .ob-legend-mobile .i-maxpV,
    .ob-widget-wrapper .ob-legend-mobile .i-maxlV { justify-self:end; text-align:right; }
    .ob-widget-wrapper .ob-controls-desktop { display: none; }
    .ob-widget-wrapper .ob-controls-mobile {
        display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; background: #1b1b1b; border-top: 1px solid #2b2b2b;
    }
    .ob-widget-wrapper .ob-controls-mobile .ob-control-row {
        display: flex; gap: 10px; width: 100%; align-items: center;
    }
    .ob-widget-wrapper .ob-controls-mobile .ob-labeled-input {
        display: flex; flex-direction: column; flex-grow: 1;
    }
    .ob-widget-wrapper .ob-controls-mobile .ob-labeled-input .ob-label {
        font-size: 11px; color: #ccc; margin-bottom: 2px;
    }
    .ob-widget-wrapper .ob-controls-mobile .ob-labeled-input .ob-input,
    .ob-widget-wrapper .ob-controls-mobile .ob-labeled-input .ob-select {
        width: 100%;
    }
    .ob-widget-wrapper .ob-controls-mobile #obTickerM { max-width: 50px; }
    .ob-widget-wrapper .ob-controls-mobile .ob-control-row .ob-btn { flex-grow: 1; }
    .ob-widget-wrapper .ob-controls-mobile .ob-control-row:first-child { align-items: flex-end; }
    .ob-widget-wrapper .panel-content.is-table .ob-pltable-wrap {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .ob-widget-wrapper .ob-pltable th, .ob-widget-wrapper .ob-pltable td {
        padding: 2px 4px; font-size: 0.8rem; white-space: nowrap;
    }
    .ob-widget-wrapper .ob-legs-scroll input.ob-input { min-width: 50px; }
    .ob-widget-wrapper .ob-legs-scroll select.ob-select { min-width: 60px; }
    .ob-widget-wrapper .ob-legs-scroll button.ob-btn { min-width: 24px; }
}
@media (min-width: 821px){ .ob-widget-wrapper .ob-line-g { display:none; } }

/* =========================================
   14. AUTH MODALS & FORMS
   ========================================= */
.auth-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 10001;
    display: none; justify-content: center; align-items: center;
}
.auth-modal-overlay.visible { display: flex; }

.auth-modal-content {
    background: var(--bg-panel); border: 1px solid var(--border-light);
    width: 360px; padding: 30px; border-radius: 8px;
    position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.9);
}

.auth-header { font-size: 22px; font-weight: bold; margin-bottom: 25px; text-align: center; color: #fff; }
.auth-subheader { font-size: 14px; font-weight: bold; margin-bottom: 10px; color: var(--text-secondary); }

.auth-input {
    width: 100%; padding: 12px; margin-bottom: 12px;
    background: #000; border: 1px solid #333; color: #fff;
    border-radius: 4px; box-sizing: border-box; font-size: 14px;
}
.auth-input:focus { border-color: #666; outline: none; }

.auth-btn {
    width: 100%; padding: 12px; margin-bottom: 10px;
    cursor: pointer; border-radius: 4px; font-weight: bold;
    border: none; font-size: 14px;
}
.auth-btn.primary { background: var(--accent-color); color: #fff; }
.auth-btn.primary:hover { background: #1976D2; }

/* New Auth Provider Buttons */
.auth-provider-btn {
    width: 100%; padding: 10px; margin-bottom: 12px;
    cursor: pointer; border-radius: 4px; font-weight: bold;
    border: 1px solid transparent; font-size: 14px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.auth-provider-btn svg { width: 20px; height: 20px; }

.auth-provider-btn.google { background: #fff; color: #333; border-color: #ddd; }
.auth-provider-btn.google:hover { background: #f5f5f5; }

.auth-provider-btn.apple { background: #000; color: #fff; border-color: #333; }
.auth-provider-btn.apple:hover { background: #111; border-color: #555; }

.auth-divider { 
    text-align: center; margin: 20px 0; color: #666; font-size: 12px; 
    position: relative; 
}
.auth-divider::before {
    content: ""; position: absolute; top: 50%; left: 0; right: 0;
    border-top: 1px solid #333; z-index: 0;
}
.auth-divider span {
    background: var(--bg-panel); padding: 0 10px; position: relative; z-index: 1; text-transform: uppercase;
}

.auth-footer { text-align: center; margin-top: 20px; font-size: 13px; color: #888; }
.auth-link { color: var(--accent-color); cursor: pointer; text-decoration: none; font-weight: bold; }
.auth-link:hover { text-decoration: underline; }

.modal-close-btn {
    position: absolute; top: 15px; right: 20px;
    font-size: 24px; color: #888; cursor: pointer;
}
.modal-close-btn:hover { color: #fff; }

.account-info-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.tier-badge { background: #333; padding: 2px 6px; border-radius: 3px; font-size: 12px; border: 1px solid #555; }
.auth-separator { border: 0; border-top: 1px solid #333; margin: 20px 0; }

/* =========================================
   15. PASSWORD TOGGLE & BADGES
   ========================================= */
.password-group { position: relative; margin-bottom: 12px; }
.password-group .auth-input { margin-bottom: 0; padding-right: 35px; }
.toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #888; user-select: none; }
.toggle-password:hover { color: #fff; }

.menu-badge { font-size: 10px; padding: 1px 4px; border-radius: 2px; margin-left: 8px; font-weight: bold; text-transform: uppercase; }
.menu-badge.pro { background: #FFD700; color: #000; }
.menu-item.disabled { opacity: 0.5; cursor: not-allowed; }

/* =========================================
   16. PASSWORD REQUIREMENTS
   ========================================= */
.password-requirements { font-size: 12px; color: #888; margin-bottom: 15px; }
.req-title { font-weight: bold; margin-bottom: 5px; color: #ccc; }
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.req-item { display: flex; align-items: center; gap: 5px; }
.req-item.valid { color: #4CAF50; } /* Green */
.req-item.invalid { color: #888; } /* Default/Grey */

/* =========================================
   17. UPGRADE BUTTON
   ========================================= */
.upgrade-link {
    font-size: 12px;
    color: var(--accent-color);
    text-decoration: none;
    border: 1px solid var(--accent-color);
    padding: 2px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}
.upgrade-link:hover {
    background-color: var(--accent-color);
    color: #fff;
}

/* =========================================
   18. WIDGET OVERLAY (CLICK-TO-INTERACT)
   ========================================= */
/* Default (Desktop): Click */
.widget-overlay {
    position: absolute;
    top: 37px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: transparent;
    cursor: pointer;
    /* Prevent default touch actions (like scrolling) ONLY if we want to trap them, 
       but here we WANT scrolling until activated. */
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    
    /* PREVENT TEXT SELECTION */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.grid-stack-item-content.widget-active .widget-overlay {
    display: none;
}

/* Desktop Hint (Only for devices that support hover) */
@media (hover: hover) {
    .widget-overlay::after {
        content: "";
        display: none;
        /* Cleanest way to remove the box */
    }

    .widget-overlay:hover {
        /* Optional: slight highlight to indicate clickable area? */
        /* background: rgba(255,255,255,0.02); */
    }
}

/* Mobile / Touch Specifics */
@media (hover: none) and (pointer: coarse) {
    .widget-overlay::after {
        content: "";
        /* No text on mobile - intuitive only */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        pointer-events: none;
    }

    /* Visual Feedback for Long Press Activation - Flash the overlay */
    .widget-overlay.overlay-triggered {
        animation: overlayPop 0.3s ease-out;
        background: rgba(255, 255, 255, 0.1);
    }
    
    /* Visual Feedback for Pressing (Holding) */
    .widget-overlay.pressing {
        background: rgba(255, 255, 255, 0.05);
        transition: background 0.2s ease;
    }
}

@keyframes overlayPop {
    0% {
        transform: scale(1);
        background: rgba(255, 255, 255, 0);
    }

    50% {
        transform: scale(0.98);
        background: rgba(255, 255, 255, 0.2);
    }

    100% {
        transform: scale(1);
        background: rgba(255, 255, 255, 0);
    }
}


/* =========================================
   19. WIDGET: MINI DASHBOARD
   ========================================= */
.mini-dash-wrapper { display:flex; flex-direction:column; height:100%; background:var(--bg-app); overflow:hidden; position:relative; }
.mini-dash-header { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; background:var(--bg-panel); border-bottom:1px solid var(--border-color); flex-shrink:0; }
.mini-dash-time { font-size:13px; color:var(--text-secondary); }
.mini-dash-btns { display:flex; gap:12px; }
.mini-dash-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:18px; padding:2px; line-height:1; }
.mini-dash-btn:hover { color:#fff; }
.grid-stack:not(.edit-mode) .mini-dash-btns { display:none; }
.mini-dash-grid-area { flex:1; overflow:auto; padding:4px; }
.mini-dash-gs { background:transparent !important; }
.mini-dash-card { background:var(--bg-panel); border:1px solid var(--border-color); border-radius:4px; padding:8px 12px; display:flex; flex-direction:column; justify-content:center; height:100%; cursor:grab; }
.mini-dash-card:hover { border-color:var(--border-light); }
.mini-dash-card:active { cursor:grabbing; }
.mini-dash-card .pred-stat-label { font-size:10px; color:var(--text-muted); margin-bottom:3px; text-transform:uppercase; letter-spacing:0.5px; }
.mini-dash-card .pred-stat-value { font-size:15px; font-weight:600; color:var(--text-primary); }
.indicator-trend-bar-container { display:flex; gap:3px; height:18px; overflow-x:auto; flex-wrap:nowrap; margin-top:4px; align-items:center; }
.indicator-trend-bar-container::-webkit-scrollbar-corner { background:transparent; }
.trend-brick { width:25px; height:12px; flex:0 0 auto; border-radius:2px; }
.trend-brick.up { background:#00c853; }
.trend-brick.down { background:#ff3b30; }
.trend-brick.chop { background:#555; }
.indicator-trend-bar-container .trend-brick:last-child { box-shadow: inset 0 0 0 2px #fff; }
.mini-dash-gs .ui-resizable-handle { z-index:100 !important; }
.mini-dash-gs .ui-resizable-e, .mini-dash-gs .ui-resizable-w { width:6px !important; top:10% !important; height:80% !important; }
.mini-dash-gs .ui-resizable-se { width:12px !important; height:12px !important; right:0 !important; bottom:0 !important; }
.mini-dash-modal { position:absolute; inset:0; background:rgba(0,0,0,0.85); z-index:200; display:none; justify-content:center; align-items:center; }
.mini-dash-modal .modal-box { background:var(--bg-panel); border:1px solid var(--border-light); border-radius:6px; padding:15px; width:90%; max-width:280px; max-height:90%; overflow-y:auto; }
.mini-dash-modal h3 { margin:0 0 10px; font-size:14px; color:#fff; border-bottom:1px solid var(--border-color); padding-bottom:8px; }
.mini-dash-modal .modal-list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.mini-dash-modal label { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-secondary); cursor:pointer; }
.mini-dash-modal label:hover { color:var(--text-primary); }
.mini-dash-modal .modal-actions { display:flex; gap:10px; justify-content:flex-end; }
.mini-dash-modal button { padding:8px 16px; border:none; border-radius:3px; cursor:pointer; font-size:13px; }
.mini-dash-modal .btn-save { background:var(--accent-color); color:#fff; }
.mini-dash-modal .btn-cancel { background:#444; color:#ccc; }

/* =========================================
   20. WIDGET: DEALER FLOW
   ========================================= */
.dealer-flow-wrapper { width:100%; height:100%; display:flex; flex-direction:column; }
.df-header { display:flex; justify-content:space-between; align-items:center; padding:4px 8px; font-size:13px; flex-shrink:0; height:36px; background:rgba(0,0,0,0.3); border-bottom:1px solid #333; }
.df-controls { display:flex; gap:8px; align-items:center; }
.df-toggle { background:transparent; border:1px solid #555; color:#888; padding:2px 8px; border-radius:3px; cursor:pointer; font-size:10px; }
.df-toggle.active { background:#333; color:#fff; }
.df-toggle:hover { border-color:#777; }
.df-legend-split { display:none; gap:10px; margin-left:8px; }
.df-legend-total { display:flex; gap:10px; margin-left:8px; }
.df-live { display:flex; gap:12px; align-items:center; }
.df-live-flow, .df-live-spx { font-weight:500; }
.df-live-trend { font-weight:600; }
.df-conviction { font-size:10px; padding:1px 5px; border-radius:2px; background:#333; }
.chart-area { flex:1; min-height:0; }
.df-tooltip { position:fixed; display:none; background:rgba(0,0,0,0.9); border:1px solid #00FFFF; border-radius:4px; padding:8px 12px; font-size:12px; z-index:1000; pointer-events:none; min-width:180px; }

/* When locked, use default pointer cursor on cards */
.grid-stack:not(.edit-mode) .mini-dash-card { cursor: pointer; }
.grid-stack:not(.edit-mode) .mini-dash-card:active { cursor: pointer; }
/* Better hover on trend bricks */
.trend-brick { transition: opacity 0.15s; }
.trend-brick:hover { opacity: 0.7; cursor: help; }

/* Explicit grab cursor when unlocked */
.grid-stack.edit-mode .mini-dash-card { cursor: grab !important; }
.grid-stack.edit-mode .mini-dash-card:active { cursor: grabbing !important; }


/* AI Button - Round like help button */
.widget-btn-ai:hover { border-color: #667eea; }
.widget-btn-ai.loading { animation: glow 1.5s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 3px #667eea; } 50% { box-shadow: 0 0 10px #667eea, 0 0 20px #667eea; } }
/* AI Popover */
.ai-popover { position: absolute; top: 100%; right: 0; margin-top: 8px; width: 420px; min-width: 300px; max-width: 600px; min-height: 200px; max-height: 500px; resize: both; overflow: hidden; background: var(--bg-panel, #1b1b1b); border: 1px solid var(--border-light, #444); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 10002; display: none; flex-direction: column; }
.ai-popover.open { display: flex; }
.ai-popover-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border-color, #333); background: rgba(102, 126, 234, 0.1); border-radius: 8px 8px 0 0; }
.ai-popover-title { font-weight: bold; font-size: 12px; color: #667eea; }
.ai-popover-close { background: none; border: none; color: #888; cursor: pointer; font-size: 14px; padding: 0; line-height: 1; }
.ai-popover-close:hover { color: #ff5555; }
.ai-popover-body { padding: 14px 16px; overflow-y: auto; flex: 1; font-size: 12px; line-height: 1.6; }
.ai-popover-body h2 { font-size: 14px; margin: 12px 0 6px 0; color: #667eea; }
.ai-popover-body h3 { font-size: 13px; margin: 14px 0 6px 0; color: #8be9fd; font-weight: 600; }
.ai-popover-body ul { margin-left: 14px; margin-bottom: 8px; }
.ai-popover-body p { margin: 0 0 12px 0; color: #ccc; }
.ai-popover-body ul { margin-left: 14px; margin-bottom: 10px; }
.ai-popover-body li { margin-bottom: 6px; }
@media (max-width: 500px) { .ai-popover { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90vw; height: 80vh; max-height: 80vh; margin: 0; right: auto; z-index: 10005; box-shadow: 0 0 0 1000px rgba(0,0,0,0.7); } .ai-popover-body { max-height: none; } }
.ai-popover-controls { display: flex; align-items: center; gap: 8px; }
.ai-popover-refresh { background: none; border: none; cursor: pointer; font-size: 14px; padding: 0; opacity: 0.7; transition: opacity 0.2s; }
.ai-popover-refresh:hover { opacity: 1; transform: rotate(180deg); transition: transform 0.3s ease; }
/* AI Split Button */
.widget-ai-group { display: inline-flex; align-items: center; background: #2a2a3e; border: 1px solid #555; border-radius: 4px; height: 20px; margin-right: 6px; overflow: hidden; transition: border-color 0.2s; }
.widget-ai-group:hover { border-color: #667eea; }
.widget-btn-ai-main { background: transparent; border: none; border-right: 1px solid #444; color: #667eea; font-size: 10px; font-weight: 700; padding: 0 6px; cursor: pointer; height: 100%; display: flex; align-items: center; }
.widget-btn-ai-caret { background: transparent; border: none; color: #888; font-size: 8px; padding: 0 4px; cursor: pointer; height: 100%; display: flex; align-items: center; }
.widget-btn-ai-main:hover, .widget-btn-ai-caret:hover { background: rgba(102, 126, 234, 0.15); color: #fff; }
/* Loading state on wrapper */
.widget-ai-group.loading { border-color: #ffa500; }
.widget-ai-group.loading .widget-btn-ai-main { animation: pulseOrange 1s infinite; color: #ffa500; }
@keyframes pulseOrange { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }






/* MOBILE RESPONSIVE FIXES */
@media (max-width: 600px) { .df-header { flex-direction: column; height: auto; padding: 6px 8px; gap: 4px; } .df-controls { width: 100%; justify-content: flex-start; } .df-live { width: 100%; flex-wrap: wrap; gap: 8px; font-size: 12px; } .df-legend-split, .df-legend-total { display: flex !important; width: 100%; font-size: 10px; margin-top: 2px; gap: 6px; opacity: 0.8; } }
@media (max-width: 600px) { .prediction-mini-trendbar-strip { -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #555 transparent; } .prediction-mini-trendbar-strip::-webkit-scrollbar { height: 6px; } .prediction-mini-trendbar-strip::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); border-radius: 3px; } .prediction-mini-trendbar-strip::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; } .prediction-mini-trend-segment { width: 14px; height: 12px; min-width: 14px; } }