/* VB Scanner Dynamic - Professional Trading Platform Style */
:root {
    /* Professional theme with better contrast */
    --vbd-bg-primary: #0f1114;
    --vbd-bg-secondary: #1a1d21;
    --vbd-bg-tertiary: #232830;
    --vbd-bg-hover: rgba(255, 255, 255, 0.03);

    /* Text - Optimized for readability */
    --vbd-text-primary: #e2e8f0;
    --vbd-text-secondary: #94a3b8;
    --vbd-text-muted: #64748b;

    /* Borders - Subtle definition */
    --vbd-border: rgba(148, 163, 184, 0.1);
    --vbd-border-light: rgba(148, 163, 184, 0.05);

    /* Semantic colors - Professional palette */
    --vbd-green: #10b981;
    --vbd-red: #ef4444;
    --vbd-yellow: #f59e0b;
    --vbd-orange: #f97316;
    --vbd-blue: #3b82f6;
    --vbd-purple: #8b5cf6;

    /* Primary accent - Teal inspired by VB brand */
    --vbd-accent: #06b6d4;
    --vbd-accent-bg: rgba(6, 182, 212, 0.1);
    --vbd-accent-border: rgba(6, 182, 212, 0.2);

    /* Table specific */
    --vbd-table-bg: #0f1114;
    --vbd-table-hover: rgba(148, 163, 184, 0.03);
    --vbd-row-border: rgba(148, 163, 184, 0.08);

    /* Inputs and modals */
    --vbd-input-bg: #1a1d21;
    --vbd-modal-bg: rgba(0, 0, 0, 0.8);

    /* Shadows - Subtle depth */
    --vbd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --vbd-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Light theme - High Contrast & Readable */
.vbd-container.vbd-light-theme {
    --vbd-bg-primary: #ffffff;
    --vbd-bg-secondary: #f5f5f7;
    --vbd-bg-tertiary: #e8e8ed;
    --vbd-bg-hover: rgba(0, 0, 0, 0.04);
    --vbd-text-primary: #1d1d1f;
    --vbd-text-secondary: #515154;
    --vbd-text-muted: #6e6e73;
    --vbd-border: rgba(0, 0, 0, 0.15);
    --vbd-border-light: rgba(0, 0, 0, 0.08);
    --vbd-accent: #007a6e;  /* Darker teal for better contrast */
    --vbd-accent-bg: rgba(0, 122, 110, 0.08);
    --vbd-accent-border: rgba(0, 122, 110, 0.25);
    --vbd-green: #00875a;  /* Much darker green */
    --vbd-red: #d70015;    /* Darker red */
    --vbd-yellow: #996900; /* Much darker yellow/gold */
    --vbd-orange: #cc5500; /* Darker orange */
    --vbd-blue: #0051d5;   /* Darker blue */
    --vbd-purple: #7c2d9e; /* Darker purple */
    --vbd-table-bg: #ffffff;
    --vbd-table-hover: rgba(0, 122, 110, 0.04);
    --vbd-row-border: rgba(0, 0, 0, 0.08);
    --vbd-input-bg: #ffffff;
    --vbd-modal-bg: rgba(0, 0, 0, 0.5);
    --vbd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --vbd-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.vbd-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', sans-serif;
    background: var(--vbd-bg-primary);
    color: var(--vbd-text-primary);
    max-width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Top Refresh Bar */
.vbd-refresh-bar-container {
    height: 3px;
    background: var(--vbd-bg-tertiary);
    position: relative;
}

/* Full width refresh bar that spans above sidebar */
.vbd-refresh-bar-container.vbd-full-width {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999; /* Above sidebar */
}

/* Adjust for WordPress admin bar */
body.admin-bar .vbd-refresh-bar-container.vbd-full-width {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .vbd-refresh-bar-container.vbd-full-width {
        top: 46px;
    }
}

.vbd-refresh-bar {
    height: 100%;
    background: var(--vbd-accent);
    width: 100%;
    animation: vbd-countdown 120s linear infinite;
    box-shadow: 0 0 4px var(--vbd-accent-border);
}

@keyframes vbd-countdown {
    from { width: 100%; }
    to { width: 0%; }
}

/* Header - Clean and professional */
.vbd-header {
    background: var(--vbd-bg-secondary);
    border-bottom: 1px solid var(--vbd-border);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vbd-header-brand {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Logo styling - Professional */
.vbd-logo {
    height: 32px;
    width: auto;
    opacity: 0.95;
    transition: opacity 0.2s ease;
}

/* Logo switching for light/dark mode */
.vbd-light-theme .vbd-logo-dark {
    display: none !important;
}

.vbd-light-theme .vbd-logo-light {
    display: block !important;
}

.vbd-container:not(.vbd-light-theme) .vbd-logo-dark {
    display: block !important;
}

.vbd-container:not(.vbd-light-theme) .vbd-logo-light {
    display: none !important;
}

.vbd-logo:hover {
    opacity: 1;
}

.vbd-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--vbd-accent);
    letter-spacing: 1px;
}

.vbd-market-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Market Open */
.vbd-market-status.open {
    background: rgba(0, 212, 170, 0.2);
    border-color: rgba(0, 212, 170, 0.4);
    color: #00d4aa;
}

.vbd-market-status.open .vbd-status-dot {
    background: #00d4aa;
    animation: pulse 2s infinite;
}

/* Market Closed */
.vbd-market-status.closed,
.vbd-market-status.weekend {
    background: rgba(113, 113, 122, 0.1);
    border-color: rgba(113, 113, 122, 0.2);
    color: #71717a;
}

.vbd-market-status.closed .vbd-status-dot,
.vbd-market-status.weekend .vbd-status-dot {
    background: #71717a;
    animation: none;
}

/* Pre-Market */
.vbd-market-status.premarket {
    background: rgba(255, 165, 0, 0.2);
    border-color: rgba(255, 165, 0, 0.4);
    color: #ffa500;
}

.vbd-market-status.premarket .vbd-status-dot {
    background: #ffa500;
    animation: pulse 3s infinite;
}

/* After Hours */
.vbd-market-status.afterhours {
    background: rgba(156, 136, 255, 0.2);
    border-color: rgba(156, 136, 255, 0.4);
    color: #9c88ff;
}

.vbd-market-status.afterhours .vbd-status-dot {
    background: #9c88ff;
    animation: none;
}

/* Holiday */
.vbd-market-status.holiday {
    background: rgba(251, 146, 60, 0.15);
    border-color: rgba(251, 146, 60, 0.3);
    color: #fb923c;
}

.vbd-market-status.holiday .vbd-status-dot {
    background: #fb923c;
    animation: none;
}

.vbd-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.vbd-status-dot.active {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* Header Controls */
.vbd-header-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.vbd-filter-tabs {
    display: flex;
    background: var(--vbd-bg-tertiary);
    border-radius: 6px;
    padding: 3px;
    gap: 2px;
}

.vbd-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--vbd-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
    position: relative;
}

.vbd-tab:hover {
    color: var(--vbd-text-primary);
    background: rgba(148, 163, 184, 0.05);
}

.vbd-tab.active {
    background: var(--vbd-bg-primary);
    color: var(--vbd-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.vbd-header-actions {
    display: flex;
    gap: 8px;
}

.vbd-btn-theme-toggle {
    width: 32px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--vbd-border);
    border-radius: 3px;
    color: var(--vbd-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-size: 14px;
}

.vbd-btn-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--vbd-text-primary);
}

.vbd-light-theme .vbd-btn-theme-toggle {
    background: var(--vbd-bg-secondary);
    border-color: var(--vbd-border);
}

.vbd-light-theme .vbd-btn-theme-toggle:hover {
    background: var(--vbd-bg-hover);
    color: var(--vbd-accent);
    border-color: var(--vbd-accent);
}

.vbd-btn-settings,
.vbd-btn-refresh {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--vbd-border);
    border-radius: 3px;
    color: var(--vbd-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-size: 13px;
}

.vbd-btn-settings:hover,
.vbd-btn-refresh:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--vbd-text-primary);
}

/* Market Overview - Clean stats bar */
.vbd-market-overview {
    background: linear-gradient(to bottom, var(--vbd-bg-secondary), var(--vbd-bg-primary));
    border-bottom: 1px solid var(--vbd-border);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vbd-overview-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vbd-overview-label {
    font-size: 10px;
    color: var(--vbd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vbd-overview-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--vbd-text-primary);
    font-family: 'SF Mono', 'Monaco', monospace;
}

#vbd-bull-bear {
    color: var(--vbd-accent);
}

#vbd-refresh-timer {
    color: #ffa500;
}

/* Main Content */
.vbd-main-content {
    background: var(--vbd-bg-primary);
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--vbd-border) var(--vbd-bg-primary);
}

/* Custom scrollbar for webkit browsers */
.vbd-main-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.vbd-main-content::-webkit-scrollbar-track {
    background: var(--vbd-bg-primary);
}

.vbd-main-content::-webkit-scrollbar-thumb {
    background-color: var(--vbd-border);
    border-radius: 4px;
}

.vbd-main-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--vbd-text-muted);
}

/* Market Pulse Display */
.vbd-mp-display {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
}

.vbd-mp-cell {
    font-size: 11px;
}

.vbd-mp-color {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 10px;
}

.vbd-mp-color.green {
    background: rgba(0, 212, 170, 0.2);
    color: var(--vbd-accent);
    border: 1px solid rgba(0, 212, 170, 0.4);
}

.vbd-mp-color.yellow {
    background: rgba(255, 235, 59, 0.2);
    color: #ffeb3b;
    border: 1px solid rgba(255, 235, 59, 0.4);
}

.vbd-mp-color.orange {
    background: rgba(255, 165, 0, 0.2);
    color: #ffa500;
    border: 1px solid rgba(255, 165, 0, 0.4);
}

.vbd-mp-color.red {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
    border: 1px solid rgba(255, 82, 82, 0.4);
}

.vbd-mp-signal-badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--vbd-border);
    color: var(--vbd-text-primary);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #444;
}

/* Darvas S/R Levels */
.vbd-darvas-levels {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
}

.vbd-support-info,
.vbd-resistance-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vbd-level-label {
    color: var(--vbd-text-secondary);
    font-weight: 600;
    min-width: 15px;
}

.vbd-level-price {
    color: var(--vbd-text-primary);
    font-weight: 500;
}

.vbd-level-distance {
    color: var(--vbd-text-secondary);
    font-size: 10px;
}

.vbd-support-info .vbd-level-label {
    color: var(--vbd-accent);
}

.vbd-resistance-info .vbd-level-label {
    color: #ff5252;
}

.vbd-levels-na {
    color: var(--vbd-text-secondary);
    font-size: 10px;
    font-style: italic;
}

/* Trading Table */
/* Trading Table - Compact and professional */
.vbd-trading-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    table-layout: fixed;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.vbd-trading-table thead {
    background: var(--vbd-bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vbd-trading-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--vbd-text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-bottom: 2px solid var(--vbd-border);
}

/* Center align specific columns */
.vbd-trading-table th.vbd-th-entry,
.vbd-trading-table th.vbd-th-stop,
.vbd-trading-table th.vbd-th-target,
.vbd-trading-table th.vbd-th-sensitivity {
    text-align: center;
}

.vbd-trading-table tbody tr {
    border-bottom: 1px solid var(--vbd-row-border);
    transition: all 0.15s ease;
}

.vbd-trading-table tbody tr:hover {
    background: var(--vbd-bg-hover);
}

.vbd-trading-table td {
    padding: 8px;
    color: var(--vbd-text-primary);
    white-space: nowrap;
    font-size: 12px;
}

/* Ensure specific cells are centered */
.vbd-model-cell,
.vbd-sensitivity-cell,
.vbd-entry-price,
.vbd-stop-price,
.vbd-target-price {
    text-align: center !important;
}

/* Table Columns */
.vbd-th-rank {
    width: 35px;
    text-align: center;
}

.vbd-th-symbol {
    width: 80px;
    font-weight: 600;
    text-align: left;
    padding-left: 8px;
}

.vbd-th-direction {
    width: 55px;
    text-align: center;
}

.vbd-th-entry,
.vbd-th-stop,
.vbd-th-target {
    width: 75px;
    text-align: center;
}

.vbd-th-model {
    width: 65px;
    text-align: center;
}

.vbd-th-sensitivity {
    width: 50px;
    text-align: center;
}

.vbd-th-levels {
    min-width: 140px;
    width: 140px;
}

.vbd-th-stage {
    min-width: 80px;
    width: 80px;
    text-align: center;
}

.vbd-th-days {
    min-width: 55px;
    width: 55px;
    text-align: center;
}

.vbd-th-signal {
    min-width: 110px;
    width: 110px;
    text-align: center;
}

.vbd-th-winrate,
.vbd-th-expectancy {
    width: 60px;
    text-align: center;
}

.vbd-th-score {
    width: 80px;
}

/* Cell Styles */
.vbd-rank {
    text-align: center;
    color: var(--vbd-text-secondary);
    font-weight: 500;
}

.vbd-symbol {
    font-weight: 600;
    color: var(--vbd-text-primary);
    letter-spacing: 0.5px;
}


.vbd-symbol-link:hover {
    color: var(--vbd-accent);
}

.vbd-symbol-link:hover .vbd-symbol {
    color: var(--vbd-accent);
}

.vbd-direction {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 0.5px;
}

.vbd-direction.long {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.1));
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.vbd-direction.short {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.1));
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Price cells - Monospace for precision */
.vbd-price {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
    text-align: center !important;
    font-size: 12px;
    letter-spacing: -0.5px;
    font-weight: 500;
}

.vbd-entry-price {
    color: var(--vbd-text-primary);
    font-weight: 400;
}

.vbd-stop-price {
    color: var(--vbd-red);
    opacity: 0.9;
}

.vbd-target-price {
    color: var(--vbd-green);
    opacity: 0.9;
}

.vbd-rr-ratio {
    text-align: center;
    font-weight: 600;
}

.vbd-rr-positive {
    color: var(--vbd-accent);
}

.vbd-rr-negative {
    color: #ff5252;
}

/* S/R Levels */
.vbd-levels-display {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.vbd-level-bar {
    flex: 1;
    height: 16px;
    background: linear-gradient(90deg, var(--vbd-accent) 0%, var(--vbd-border) 50%, #ff5252 100%);
    border-radius: 2px;
    position: relative;
    min-width: 80px;
}

.vbd-price-marker {
    position: absolute;
    width: 2px;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 4px rgba(255,255,255,0.5);
}

.vbd-level-text {
    font-size: 10px;
    color: var(--vbd-text-secondary);
}

/* Signal */
.vbd-signal-type {
    font-size: 12px;
    color: var(--vbd-text-secondary);
}

/* Stats */
.vbd-winrate {
    text-align: center !important;
    font-weight: 500;
    color: var(--vbd-text-secondary);
}

.vbd-winrate-good {
    color: var(--vbd-green);
}

.vbd-winrate-neutral {
    color: #ffa500;
}

.vbd-winrate-poor {
    color: var(--vbd-red);
}

.vbd-expectancy {
    text-align: center !important;
    font-weight: 500;
    color: var(--vbd-text-secondary);
}

.vbd-expectancy-positive {
    color: var(--vbd-green);
}

.vbd-expectancy-negative {
    color: var(--vbd-red);
}

/* Score */
.vbd-score-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vbd-score-bar {
    flex: 1;
    height: 20px;
    background: var(--vbd-bg-tertiary);
    border: 1px solid var(--vbd-border);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.vbd-score-fill {
    height: 100%;
    transition: width 0.3s;
}

.vbd-score-value {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--vbd-text-primary);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Loading */
.vbd-loading-row td {
    text-align: center;
    padding: 40px;
}

.vbd-loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.vbd-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--vbd-border);
    border-top-color: var(--vbd-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Filters Panel */
.vbd-filters-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 320px;
    background: var(--vbd-bg-secondary);
    border-left: 1px solid var(--vbd-border);
    z-index: 1000;
    box-shadow: -4px 0 12px var(--vbd-shadow);
}

.vbd-filters-header {
    background: var(--vbd-bg-secondary);
    padding: 16px 20px;
    border-bottom: 1px solid var(--vbd-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vbd-filters-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--vbd-accent);
}

.vbd-close-filters {
    background: none;
    border: none;
    color: var(--vbd-text-secondary);
    font-size: 24px;
    cursor: pointer;
}

.vbd-filters-content {
    padding: 20px;
}

.vbd-filter-group {
    margin-bottom: 24px;
}

.vbd-filter-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--vbd-text-secondary);
    text-transform: uppercase;
}

.vbd-filter-group select {
    width: 100%;
    padding: 8px;
    background: var(--vbd-bg-secondary);
    border: 1px solid var(--vbd-border);
    color: var(--vbd-text-primary);
    border-radius: 3px;
}

.vbd-range-slider {
    position: relative;
    margin-top: 20px;
}

.vbd-range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    -webkit-appearance: none;
    height: 4px;
    background: transparent;
    pointer-events: none;
}

.vbd-range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--vbd-accent);
    cursor: pointer;
    pointer-events: all;
}

.vbd-range-values {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--vbd-text-secondary);
}

.vbd-filter-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.vbd-filter-actions button {
    flex: 1;
    padding: 10px;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.vbd-apply-filters {
    background: var(--vbd-accent);
    border: none;
    color: #000;
}

.vbd-reset-filters {
    background: transparent;
    border: 1px solid var(--vbd-border);
    color: var(--vbd-text-secondary);
}

/* Pagination Container */
.vbd-pagination-container {
    background: var(--vbd-bg-primary);
    border-bottom: 1px solid var(--vbd-border);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-height: 44px;
    position: relative;
    z-index: 100;
}

.vbd-pagination-info {
    font-size: 11px;
    color: var(--vbd-text-secondary);
    flex: 0 0 auto;
    white-space: nowrap;
}

.vbd-pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: flex-end;
    margin-right: 20px;
}

.vbd-page-btn {
    background: transparent;
    border: 1px solid var(--vbd-border);
    color: var(--vbd-text-secondary);
    padding: 4px 8px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    vertical-align: middle;
}

.vbd-page-btn:hover:not(:disabled) {
    background: var(--vbd-bg-hover);
    color: var(--vbd-text-primary);
    border-color: var(--vbd-accent);
}

.vbd-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.vbd-page-numbers {
    display: flex;
    gap: 4px;
    align-items: center;
}

.vbd-page-number {
    background: transparent;
    border: 1px solid var(--vbd-border);
    color: var(--vbd-text-secondary);
    padding: 4px 8px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.1s;
    font-size: 11px;
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
}

.vbd-page-number:hover {
    background: var(--vbd-bg-hover);
    color: var(--vbd-text-primary);
}

.vbd-page-number.active {
    background: var(--vbd-accent);
    color: var(--vbd-bg-primary);
    border-color: var(--vbd-accent);
    font-weight: 600;
}

.vbd-page-size {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--vbd-text-secondary);
    flex: 0 0 auto;
    white-space: nowrap;
}

.vbd-page-size span {
    font-size: 11px;
    color: var(--vbd-text-secondary);
}

.vbd-page-size select {
    background: var(--vbd-bg-tertiary);
    border: 1px solid var(--vbd-border);
    color: var(--vbd-text-primary);
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 11px;
    cursor: pointer;
    height: 24px;
}

.vbd-page-ellipsis {
    padding: 0 2px;
    color: var(--vbd-text-muted);
    font-size: 10px;
    display: inline-flex;
    align-items: center;
}

/* Status Bar - Subtle footer */
.vbd-status-bar {
    background: var(--vbd-bg-primary);
    border-top: 1px solid var(--vbd-border);
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}

.vbd-status-left,
.vbd-status-right {
    display: flex;
    gap: 20px;
}

.vbd-status-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--vbd-text-secondary);
}

.vbd-status-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.vbd-status-indicator.online {
    background: var(--vbd-accent);
}

.vbd-status-indicator.offline {
    background: #ff5252;
}

/* Market Stage Indicator */
.vbd-market-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    min-width: 200px;
}

.vbd-stage-label {
    font-size: 10px;
    color: var(--vbd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.vbd-stage-indicator {
    width: 100%;
}

.vbd-stage-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    text-align: center;
}

.vbd-stage-meter {
    width: 100%;
    height: 6px;
    background: var(--vbd-border);
    border-radius: 3px;
    overflow: hidden;
}

.vbd-stage-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffa500, #ffb833);
    transition: width 0.5s ease, background 0.5s ease;
}

.vbd-market-stage.bullish .vbd-stage-value { color: var(--vbd-accent); }
.vbd-market-stage.bearish .vbd-stage-value { color: #ff5252; }
.vbd-market-stage.neutral .vbd-stage-value { color: #ffa500; }

/* Watchlist Selector */
.vbd-watchlist-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Status Filter */
.vbd-status-filter {
    margin-right: 10px;
}

#vbd-status-select {
    padding: 6px 10px;
    background: var(--vbd-bg-secondary);
    border: 1px solid var(--vbd-border);
    border-radius: 3px;
    color: var(--vbd-text-primary);
    font-size: 12px;
    cursor: pointer;
    min-width: 100px;
}

#vbd-status-select:hover {
    border-color: var(--vbd-accent);
}

#vbd-watchlist-select {
    background: var(--vbd-bg-primary);
    border: 1px solid var(--vbd-border);
    color: var(--vbd-text-primary);
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 12px;
    min-width: 150px;
}

.vbd-btn-watchlist-manage {
    background: transparent;
    border: 1px solid var(--vbd-border);
    color: var(--vbd-text-secondary);
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.vbd-btn-watchlist-manage:hover {
    background: var(--vbd-border);
    color: var(--vbd-accent);
}

/* Modal Styles */
.vbd-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--vbd-modal-bg);
    z-index: 10000;
}

.vbd-modal-content {
    position: relative;
    background: var(--vbd-bg-primary);
    border: 1px solid var(--vbd-border);
    border-radius: 4px;
    max-width: 800px;
    max-height: 80vh;
    margin: 5% auto;
    overflow: hidden;
}

.vbd-modal-header {
    background: var(--vbd-bg-secondary);
    padding: 16px 20px;
    border-bottom: 1px solid var(--vbd-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vbd-modal-header h3 {
    margin: 0;
    color: var(--vbd-accent);
    font-size: 16px;
}

.vbd-modal-close {
    background: transparent;
    border: none;
    color: var(--vbd-text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vbd-modal-close:hover {
    color: #ff5252;
}

.vbd-modal-body {
    padding: 20px;
    max-height: calc(80vh - 60px);
    overflow-y: auto;
}

/* Symbol Explorer */
.vbd-explorer-search {
    margin-bottom: 20px;
}

#vbd-symbol-search {
    width: 100%;
    padding: 10px;
    background: var(--vbd-bg-secondary);
    border: 1px solid var(--vbd-border);
    color: var(--vbd-text-primary);
    border-radius: 3px;
    font-size: 14px;
}

.vbd-search-filters {
    display: flex;
    gap: 20px;
}

.vbd-search-filters label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--vbd-text-secondary);
    font-size: 12px;
    cursor: pointer;
}

.vbd-search-filters input[type="checkbox"] {
    cursor: pointer;
}

.vbd-explorer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.vbd-symbol-card {
    background: var(--vbd-bg-secondary);
    border: 1px solid var(--vbd-border);
    border-radius: 3px;
    padding: 8px;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.vbd-symbol-card:hover {
    background: var(--vbd-border);
    border-color: var(--vbd-accent);
}

.vbd-symbol-card.has-signal {
    border-color: var(--vbd-accent);
    background: rgba(0, 212, 170, 0.05);
}

.vbd-symbol-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--vbd-text-primary);
    margin-bottom: 4px;
}

.vbd-symbol-info {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.vbd-signal-badge {
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
    font-weight: 500;
}

.vbd-signal-badge.long {
    background: rgba(0, 212, 170, 0.2);
    color: var(--vbd-accent);
}

.vbd-signal-badge.short {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
}

.vbd-score-badge {
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
    background: var(--vbd-border);
    color: #ffa500;
}

/* Watchlist Manager */
.vbd-watchlist-controls {
    margin-bottom: 20px;
}

#vbd-create-watchlist {
    padding: 10px 20px;
    background: var(--vbd-accent);
    border: none;
    color: #000;
    border-radius: 3px;
    font-weight: 600;
    cursor: pointer;
}

.vbd-watchlist-item {
    background: var(--vbd-bg-secondary);
    border: 1px solid var(--vbd-border);
    border-radius: 3px;
    padding: 16px;
    margin-bottom: 12px;
}

.vbd-watchlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.vbd-watchlist-header h4 {
    margin: 0;
    color: var(--vbd-accent);
    font-size: 14px;
}

.vbd-watchlist-actions {
    display: flex;
    gap: 8px;
}

.vbd-watchlist-actions button {
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--vbd-border);
    color: var(--vbd-text-secondary);
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
}

.vbd-watchlist-actions button:hover {
    background: var(--vbd-border);
    color: var(--vbd-text-primary);
}

.vbd-watchlist-symbols {
    font-size: 12px;
    color: var(--vbd-text-secondary);
    line-height: 1.5;
}

/* Explorer button */
.vbd-btn-explorer {
    background: transparent;
    border: 1px solid var(--vbd-border);
    color: var(--vbd-text-muted);
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vbd-btn-explorer:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--vbd-text-primary);
}

/* Responsive */
@media (max-width: 1200px) {
    .vbd-trading-table {
        font-size: 12px;
    }
    
    .vbd-trading-table th,
    .vbd-trading-table td {
        padding: 8px;
    }
    
    .vbd-market-stage {
        min-width: 150px;
    }
}

@media (max-width: 768px) {
    .vbd-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .vbd-market-overview {
        flex-wrap: wrap;
    }
    
    .vbd-overview-item {
        flex: 1 0 30%;
        margin-bottom: 8px;
    }
    
    .vbd-market-stage {
        width: 100%;
    }
}

/* S/R Levels Display (Darvas) */
.vbd-sr-cell {
    font-size: 11px;
    padding: 6px !important;
}

.vbd-sr-levels {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

/* Simple swing indicators */
.vbd-swing-up {
    color: #4caf50;
    font-weight: 600;
    font-size: 11px;
}

.vbd-swing-down {
    color: #ff9800;
    font-weight: 600;
    font-size: 11px;
}

.vbd-swing-breakout {
    color: #00d4aa;
    font-weight: 700;
    font-size: 11px;
}

.vbd-swing-breakdown {
    color: #ff5252;
    font-weight: 700;
    font-size: 11px;
}

.vbd-levels-na {
    color: var(--vbd-text-muted);
    font-size: 11px;
}

.vbd-sr-item {
    padding: 4px 8px;
    background: linear-gradient(135deg, rgba(120, 120, 120, 0.3), rgba(100, 100, 100, 0.25));
    border: 1px solid rgba(150, 150, 150, 0.5);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #c0c0c0;
    min-width: 70px;
    text-align: center;
    letter-spacing: 0.5px;
}

.vbd-sr-item.vbd-near {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.35), rgba(255, 140, 0, 0.25));
    color: #ffa500;
    font-weight: 700;
    border: 1px solid rgba(255, 165, 0, 0.6);
    text-shadow: 0 0 3px rgba(255, 165, 0, 0.6);
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 165, 0, 0.4); }
    50% { box-shadow: 0 0 10px rgba(255, 165, 0, 0.6); }
}

.vbd-no-levels {
    color: var(--vbd-text-secondary);
    font-size: 11px;
    font-style: italic;
}

/* Visual Darvas S/R Levels */
.vbd-darvas-visual {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 180px;
}
.vbd-darvas-bar {
    flex: 1;
    height: 8px;
    background: rgba(50, 50, 50, 0.3);
    border: 1px solid rgba(100, 100, 100, 0.4);
    border-radius: 4px;
    position: relative;
    overflow: visible;
}
.vbd-darvas-position {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 16px;
    background: var(--vbd-accent);
    border-radius: 1.5px;
    transform: translateX(-50%);
}
.vbd-darvas-price {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 600;
    color: var(--vbd-accent);
    white-space: nowrap;
}
.vbd-darvas-support,
.vbd-darvas-resistance {
    font-size: 10px;
    font-weight: 600;
    color: var(--vbd-text-secondary);
    white-space: nowrap;
}
.vbd-darvas-support.vbd-near {
    color: var(--vbd-accent);
    font-weight: 700;
}
.vbd-darvas-resistance.vbd-near {
    color: #ff5252;
    font-weight: 700;
}
.vbd-darvas-partial {
    display: flex;
    gap: 12px;
    font-size: 11px;
}
.vbd-darvas-partial .vbd-darvas-support {
    color: var(--vbd-accent);
}
.vbd-darvas-partial .vbd-darvas-resistance {
    color: #ff9800;
}

/* Enhanced Market Pulse Badges */
.vbd-mp-display {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.vbd-stage-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    min-width: 65px;
    text-align: center;
    letter-spacing: 0.5px;
}

.vbd-stage-badge.green {
    background: rgba(0, 212, 170, 0.35);
    color: var(--vbd-text-primary);
    border: 1px solid rgba(0, 212, 170, 0.6);
    text-shadow: none;
}

.vbd-stage-badge.yellow {
    background: rgba(255, 235, 59, 0.35);
    color: var(--vbd-text-primary);
    border: 1px solid rgba(255, 235, 59, 0.6);
    text-shadow: none;
}

.vbd-stage-badge.orange {
    background: rgba(255, 165, 0, 0.35);
    color: var(--vbd-text-primary);
    border: 1px solid rgba(255, 165, 0, 0.6);
    text-shadow: none;
}

.vbd-stage-badge.red {
    background: rgba(255, 82, 82, 0.35);
    color: var(--vbd-text-primary);
    border: 1px solid rgba(255, 82, 82, 0.6);
    text-shadow: none;
}

.vbd-mp-signal-badge {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(140, 140, 255, 0.4), rgba(110, 110, 255, 0.3));
    border: 1px solid rgba(140, 140, 255, 0.7);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #d0d0ff;
    min-width: 120px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 4px rgba(140, 140, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.vbd-aligned-indicator {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: rgba(0, 212, 170, 0.3);
    color: var(--vbd-accent);
    border: 1px solid rgba(0, 212, 170, 0.5);
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    margin-left: 4px;
    animation: pulse-glow 2s infinite;
}

/* Direction Badge - More Visible */
.vbd-direction-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    min-width: 60px;
    text-align: center;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

.vbd-direction-badge.long {
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.35), rgba(0, 212, 170, 0.25));
    color: var(--vbd-text-primary);
    border: 1px solid rgba(0, 212, 170, 0.5);
    text-shadow: none;
}

.vbd-direction-badge.short {
    background: linear-gradient(135deg, rgba(255, 82, 82, 0.35), rgba(255, 82, 82, 0.25));
    color: var(--vbd-text-primary);
    border: 1px solid rgba(255, 82, 82, 0.5);
    text-shadow: none;
}

/* Model Badge */
.vbd-model-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    min-width: 60px;
    text-align: center;
    letter-spacing: 0.5px;
}

.vbd-model-badge.hourly {
    background: transparent;
    color: var(--vbd-text-primary);
    border: 1px solid rgba(255, 165, 0, 0.5);
    text-shadow: none;
}

.vbd-model-badge.daily {
    background: transparent;
    color: var(--vbd-text-primary);
    border: 1px solid rgba(100, 149, 237, 0.5);
    text-shadow: none;
}

.vbd-model-badge.unknown {
    background: rgba(100, 100, 100, 0.2);
    color: var(--vbd-text-secondary);
    border: 1px solid rgba(100, 100, 100, 0.3);
}

/* Overlap indicator for symbols with both hourly and daily */
.vbd-model-badge.overlap {
    position: relative;
    box-shadow: 0 0 0 2px var(--vbd-accent), 0 2px 8px rgba(6, 182, 212, 0.4);
}

.vbd-model-badge.hourly.overlap {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.5), rgba(255, 140, 0, 0.35));
    border-color: var(--vbd-accent);
}

.vbd-model-badge.daily.overlap {
    background: linear-gradient(135deg, rgba(100, 149, 237, 0.5), rgba(65, 105, 225, 0.35));
    border-color: var(--vbd-accent);
}

/* Sensitivity Badge */
.vbd-sensitivity-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    min-width: 32px;
    text-align: center;
    letter-spacing: 0.5px;
}

.vbd-sensitivity-badge.aggressive {
    background: transparent;
    color: var(--vbd-text-primary);
    border: 1px solid rgba(255, 165, 0, 0.5);
    text-shadow: none;
}

.vbd-sensitivity-badge.conservative {
    background: transparent;
    color: var(--vbd-text-primary);
    border: 1px solid rgba(100, 149, 237, 0.5);
    text-shadow: none;
}

.vbd-sensitivity-cell {
    padding: 8px 4px !important;
    text-align: center !important;
}

/* Badge hover effects */
.vbd-stage-badge:hover,
.vbd-mp-signal-badge:hover,
.vbd-direction-badge:hover,
.vbd-model-badge:hover,
.vbd-sensitivity-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Stage and Signal Cells */
.vbd-stage-cell {
    padding: 8px 4px !important;
    text-align: center !important;
}

.vbd-days-cell {
    padding: 8px 4px !important;
    text-align: center !important;
}

.vbd-signal-cell {
    text-align: center !important;
    padding: 8px 4px !important;
}

/* Days Value - Clean and minimal */
.vbd-days-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--vbd-text-secondary);
}

/* Subtle indicators for freshness */
.vbd-days-new {
    font-weight: 700;
    color: var(--vbd-accent);  /* Green for fresh */
}

.vbd-days-recent {
    font-weight: 500;
}

.vbd-days-standard {
    font-weight: 400;
}

.vbd-days-extended {
    font-weight: 400;
    opacity: 0.6;
    color: var(--vbd-text-muted);
}

/* NEW badge for fresh transitions */
.vbd-new-badge {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: var(--vbd-accent);
    color: var(--vbd-bg-primary);
}

/* Extended warning */
.vbd-extended-warn {
    display: inline-block;
    margin-left: 2px;
    font-size: 10px;
    color: var(--vbd-orange);
    font-weight: 600;
}

.vbd-signal-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--vbd-bg-secondary);
    border: 1px solid var(--vbd-border);
    font-size: 10px;
    font-weight: 500;
    color: var(--vbd-text-primary);
}

.vbd-trading-table td {
    vertical-align: middle;
}

/* Candle pattern styling - Unified clean style */
.vbd-signal-badge.vbd-pattern-good,
.vbd-signal-badge.vbd-pattern-warning,
.vbd-signal-badge.vbd-pattern-caution,
.vbd-signal-badge.vbd-pattern-danger,
.vbd-signal-badge.vbd-pattern-neutral {
    background: var(--vbd-bg-secondary);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--vbd-text-primary);
    font-weight: 500;
}

/* Trade Status Badges */
.vbd-trade-status {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 5px;
}

.vbd-status-target {
    background: rgba(0, 200, 150, 0.2);
    color: #00c896;
    border: 1px solid rgba(0, 200, 150, 0.3);
}

.vbd-status-stop {
    background: rgba(255, 71, 87, 0.2);
    color: #ff4757;
    border: 1px solid rgba(255, 71, 87, 0.3);
}

.vbd-status-eod {
    background: rgba(255, 165, 0, 0.2);
    color: #ffa500;
    border: 1px solid rgba(255, 165, 0, 0.3);
}

/* Closed Trade Rows */
.vbd-closed-trade {
    opacity: 0.7;
}

.vbd-closed-trade:hover {
    opacity: 0.9;
}

.vbd-closed-trade .vbd-symbol {
    position: relative;
}

.vbd-closed-trade td {
    position: relative;
}
/* Range & Multiplier Display */
.vbd-swing-cell {
    padding: 5px 10px !important;
}

.vbd-swing-display {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.vbd-range-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vbd-range-bar {
    position: relative;
    height: 16px;
    background: var(--vbd-bg-secondary);
    border: 1px solid var(--vbd-border);
    border-radius: 2px;
    overflow: hidden;
}

.vbd-range-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: width 0.3s ease;
}

.vbd-price-position {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 12px;
    background: white;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 1px;
    cursor: pointer;
}

.vbd-price-position:hover .vbd-position-tooltip {
    display: block;
}

.vbd-position-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vbd-bg-secondary);
    color: var(--vbd-text-primary);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    white-space: nowrap;
    margin-bottom: 4px;
    border: 1px solid var(--vbd-border);
    z-index: 10;
}

.vbd-multiplier-info {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 2px;
    border-top: 1px solid var(--vbd-border);
}

.vbd-swing-nodata {
    font-size: 11px;
    color: var(--vbd-text-secondary);
    text-align: center;
    font-style: italic;
}

/* Daily Swing Display */
.vbd-swing-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    max-width: 100%;
}

.vbd-swing-numbers {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
}

.vbd-swing-today {
    font-weight: 600;
    font-size: 12px;
}

.vbd-swing-vs {
    color: var(--vbd-text-secondary);
    font-size: 9px;
    opacity: 0.6;
}

.vbd-swing-typical {
    color: var(--vbd-text-secondary);
    font-size: 10px;
}

.vbd-swing-meter {
    position: relative;
    height: 8px;
    background: var(--vbd-bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

.vbd-swing-meter-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4px;
    opacity: 0.4;
    transition: width 0.3s ease;
}

.vbd-swing-meter-optimal {
    position: absolute;
    left: 75%;
    right: 0;
    top: 0;
    height: 100%;
    width: 45%;
    max-width: 45px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 212, 170, 0.1) 10%,
        rgba(0, 212, 170, 0.1) 90%,
        transparent 100%);
    border-left: 1px dashed rgba(0, 212, 170, 0.3);
    border-right: 1px dashed rgba(0, 212, 170, 0.3);
}

.vbd-swing-optimal-dot {
    position: absolute;
    top: 50%;
    left: 97.5%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: #00d4aa;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 212, 170, 0.5);
}

/* ========================================
   COLLAPSIBLE SIDEBAR
   ======================================== */

/* Left Sidebar */
.vbd-sidebar {
    position: fixed;
    left: -320px;
    top: 0;
    width: 320px;
    height: 100vh;
    background: #0f1114;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 1000;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

.vbd-sidebar.active {
    left: 0;
}

.vbd-sidebar-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    background: #0f1114;
    z-index: 10;
}

.vbd-sidebar-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #e4e4e7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vbd-sidebar-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #71717a;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.2s;
}

.vbd-sidebar-close:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e4e4e7;
}

.vbd-sidebar-content {
    padding: 0 20px 20px 20px;
}

/* Sidebar Sections */
.vbd-sidebar-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vbd-sidebar-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.vbd-sidebar-section h4 {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #06b6d4;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

/* Quick Filters */
.vbd-quick-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin: 5px 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
    color: #a1a1aa;
    font-size: 12px;
}

.vbd-quick-filter:hover {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.3);
}

.vbd-quick-filter.active {
    background: rgba(6, 182, 212, 0.15);
    border-color: #06b6d4;
    color: #06b6d4;
}

.vbd-filter-label {
    flex: 1;
    font-size: 12px;
    color: inherit;
}

.vbd-filter-count {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* Range Sliders */
.vbd-range-inputs {
    position: relative;
    margin-top: 10px;
}

.vbd-range-slider {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
    margin: 8px 0;
    cursor: pointer;
    -webkit-appearance: none;
}

.vbd-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #06b6d4;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.vbd-range-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #06b6d4;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.vbd-range-values {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #a1a1aa;
    margin-top: 5px;
}

/* Filter Actions */
.vbd-filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.vbd-apply-filters,
.vbd-reset-filters {
    flex: 1;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.vbd-apply-filters {
    background: rgba(6, 182, 212, 0.1);
    border-color: #06b6d4;
    color: #06b6d4;
}

.vbd-apply-filters:hover {
    background: rgba(6, 182, 212, 0.2);
}

.vbd-reset-filters {
    background: transparent;
    color: #a1a1aa;
}

.vbd-reset-filters:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e4e4e7;
}

/* Sidebar Overlay */
.vbd-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.vbd-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Toggle Button Adjustment */
#vbd-sidebar-toggle {
    margin-right: 10px;
}

/* ========================================
   INTEGRATED FILTER PANEL
   ======================================== */

.vbd-content-wrapper {
    display: flex;
    flex-direction: row;
    flex: 1 0 auto;
}

.vbd-filter-panel {
    width: 280px;
    min-width: 280px;
    background: #0f1114;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
    overflow-y: auto;
    flex-shrink: 0;
}

.vbd-filter-panel.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
    overflow: hidden;
}

.vbd-filter-panel-header {
    padding: 16px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: #0f1114;
    z-index: 10;
}

.vbd-filter-panel-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #e4e4e7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vbd-filter-panel-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a1a1aa;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
}

.vbd-filter-panel-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e4e4e7;
}

.vbd-filter-panel-toggle.collapsed {
    transform: rotate(180deg);
}

.vbd-filter-panel-content {
    padding: 0 15px 15px 15px;
}

.vbd-filter-section {
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vbd-filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.vbd-filter-section h4 {
    margin: 0 0 8px 0;
    font-size: 11px;
    color: #06b6d4;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Collapsible Filter Sections */
.vbd-collapsible .vbd-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    padding: 4px 0;
}

.vbd-collapsible .vbd-filter-header:hover {
    color: var(--vbd-accent);
    background: none;
    background-color: transparent;
    box-shadow: none;
}

.vbd-collapse-icon {
    width: 12px;
    height: 12px;
    position: relative;
    display: inline-block;
    margin-left: 4px;
    transition: all 0.2s ease;
}

.vbd-collapse-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 1px;
    background: var(--vbd-text-muted);
    transform: translate(-50%, -50%);
    transition: all 0.2s ease;
}

.vbd-collapse-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 8px;
    background: var(--vbd-text-muted);
    transform: translate(-50%, -50%);
    transition: all 0.2s ease;
}

.vbd-collapsible.collapsed .vbd-collapse-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.vbd-collapsible .vbd-filter-header:hover .vbd-collapse-icon::before,
.vbd-collapsible .vbd-filter-header:hover .vbd-collapse-icon::after {
    background: var(--vbd-accent);
}

.vbd-filter-content {
    overflow: visible;
    transition: all 0.3s ease;
    margin-top: 8px;
    background: none;
    background-color: transparent;
}

.vbd-collapsible.collapsed .vbd-filter-content {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
}

.vbd-collapsible:not(.collapsed) .vbd-filter-content {
    max-height: 500px;
    opacity: 1;
}

/* Better spacing between filter options */
.vbd-filter-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: none;
    background-color: transparent;
}

.vbd-filter-buttons .vbd-filter-btn {
    margin-bottom: 0;
}

/* Filter sections spacing */
.vbd-filter-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.vbd-filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Filter Range Inputs */
.vbd-filter-range {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vbd-filter-range label {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    color: var(--vbd-text-secondary);
    font-weight: 500;
    gap: 4px;
}

.vbd-filter-range input {
    background: var(--vbd-input-bg);
    border: 1px solid var(--vbd-border);
    border-radius: 4px;
    padding: 6px 8px;
    color: var(--vbd-text-primary);
    font-size: 12px;
    transition: all 0.2s ease;
}

.vbd-filter-range input:focus {
    outline: none;
    border-color: var(--vbd-accent);
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
}

.vbd-filter-range input::placeholder {
    color: var(--vbd-text-muted);
}

/* Light theme adjustments for collapsible sections */
.vbd-light-theme .vbd-collapsible .vbd-filter-header:hover {
    color: var(--vbd-accent);
    background: none;
    background-color: transparent;
    box-shadow: none;
}

.vbd-filter-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vbd-filter-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
    color: #a1a1aa;
    font-size: 12px;
}

.vbd-filter-btn:hover {
    background: none;
    border-color: rgba(6, 182, 212, 0.3);
}

.vbd-filter-btn.active {
    background: rgba(6, 182, 212, 0.15);
    border-color: #06b6d4;
    color: #06b6d4;
}

.vbd-filter-label {
    flex: 1;
    font-size: 12px;
    color: inherit;
}

.vbd-filter-count {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.vbd-reset-btn {
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a1a1aa;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.vbd-reset-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e4e4e7;
}

.vbd-main-content {
    flex: 1;
    overflow-x: auto;
}

/* Filter Toggle Button in Info Bar */
.vbd-filter-toggle {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06b6d4;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 15px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.vbd-filter-toggle:hover {
    background: rgba(6, 182, 212, 0.2);
    border-color: #06b6d4;
}

.vbd-filter-toggle.active {
    background: rgba(6, 182, 212, 0.3);
    color: #ffffff;
}

.filter-icon {
    width: 14px;
    height: 14px;
}

/* Theme Toggle Button */
.vbd-btn-theme-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a1a1aa;
    width: 32px;
    height: 28px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.15s;
    margin-left: 20px;
}

.vbd-btn-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e4e4e7;
    border-color: rgba(255, 255, 255, 0.2);
}

.vbd-theme-icon {
    line-height: 1;
}

/* Typography Standardization */
:root {
    --vbd-font-xs: 10px;     /* Small labels, badges */
    --vbd-font-sm: 11px;     /* Table headers, small text */
    --vbd-font-base: 12px;   /* Main table content */
    --vbd-font-lg: 14px;     /* Section headers */
    --vbd-font-xl: 16px;     /* Main headings */
}

/* Standardize table typography */
.vbd-trading-table {
    font-size: var(--vbd-font-base) !important;
}

.vbd-trading-table th {
    font-size: var(--vbd-font-sm) !important;
    font-weight: 600 !important;
}

.vbd-trading-table td {
    font-size: var(--vbd-font-base) !important;
    font-weight: 400 !important;
}

/* Stage labels - consistent sizing */
.vbd-stage-badge,
.vbd-direction-badge,
.vbd-signal-badge,
.vbd-trade-status,
.vbd-model-badge,
.vbd-sensitivity-badge {
    font-size: var(--vbd-font-xs) !important;
    font-weight: 600 !important;
}

/* Model display */
.vbd-model-cell {
    font-size: var(--vbd-font-base) !important;
    font-weight: 500 !important;
}

/* Daily swing text - improved readability */
.vbd-swing-today {
    font-size: var(--vbd-font-base) !important;
    font-weight: 600 !important;
}

.vbd-swing-vs {
    font-size: var(--vbd-font-xs) !important;
    font-weight: 400 !important;
    color: var(--vbd-text-secondary) !important;
}

.vbd-swing-typical {
    font-size: var(--vbd-font-xs) !important;
    font-weight: 400 !important;
    color: var(--vbd-text-secondary) !important;
}

/* Price cells - clean dollar signs */
.vbd-price {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
    font-size: var(--vbd-font-base) !important;
    font-weight: 500 !important;
}

/* Days values */
.vbd-days-value {
    font-size: var(--vbd-font-base) !important;
    font-weight: 500 !important;
}

/* Win rate and expectancy */
.vbd-winrate, .vbd-expectancy {
    font-size: var(--vbd-font-base) !important;
    font-weight: 500 !important;
}

/* Score values */
.vbd-score-value {
    font-size: var(--vbd-font-xs) !important;
    font-weight: 600 !important;
}

/* Center specific table columns (both headers and cells) */
/* Note: nth-child(3) is SYMBOL - left aligned, nth-child(4) is SIDE */
.vbd-trading-table th:nth-child(1),  /* checkbox */
.vbd-trading-table td:nth-child(1),
.vbd-trading-table th:nth-child(2),  /* # */
.vbd-trading-table td:nth-child(2),
.vbd-trading-table th:nth-child(4),  /* SIDE */
.vbd-trading-table td:nth-child(4),
.vbd-trading-table th:nth-child(5),  /* ENTRY */
.vbd-trading-table td:nth-child(5),
.vbd-trading-table th:nth-child(6),  /* STOP */
.vbd-trading-table td:nth-child(6),
.vbd-trading-table th:nth-child(7),  /* TARGET */
.vbd-trading-table td:nth-child(7),
.vbd-trading-table th:nth-child(8),  /* MODEL */
.vbd-trading-table td:nth-child(8),
.vbd-trading-table th:nth-child(10), /* STAGE */
.vbd-trading-table td:nth-child(10),
.vbd-trading-table th:nth-child(11), /* DAYS */
.vbd-trading-table td:nth-child(11),
.vbd-trading-table th:nth-child(12), /* SIGNAL */
.vbd-trading-table td:nth-child(12),
.vbd-trading-table th:nth-child(13), /* WIN% */
.vbd-trading-table td:nth-child(13),
.vbd-trading-table th:nth-child(14), /* EV */
.vbd-trading-table td:nth-child(14) {
    text-align: center !important;
}

/* SYMBOL column - left aligned */
.vbd-trading-table th:nth-child(3),
.vbd-trading-table td:nth-child(3) {
    text-align: left !important;
    padding-left: 12px !important;
}

/* Icon Button Styles for Theme Toggle */
.vbd-btn-icon {
    background: transparent;
    border: 1px solid var(--vbd-border);
    color: var(--vbd-text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 4px;
}

.vbd-btn-icon:hover {
    background: var(--vbd-bg-hover);
    color: var(--vbd-text-primary);
    border-color: var(--vbd-accent-border);
}

#vbd-theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* Theme icon visibility */
.vbd-light-theme .sun-icon {
    display: none;
}

.vbd-light-theme .moon-icon {
    display: block !important;
}

.vbd-container:not(.vbd-light-theme) .sun-icon {
    display: block;
}

.vbd-container:not(.vbd-light-theme) .moon-icon {
    display: none !important;
}

/* Light theme specific enhancements */
.vbd-light-theme .vbd-market-status {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.vbd-light-theme .vbd-market-status.open {
    background: rgba(0, 135, 90, 0.1);
    border-color: rgba(0, 135, 90, 0.3);
    color: #00875a;
}

.vbd-light-theme .vbd-direction.long {
    background: rgba(0, 135, 90, 0.1);
    color: #00875a;
    border: 1px solid rgba(0, 135, 90, 0.3);
    font-weight: 600;
}

.vbd-light-theme .vbd-direction.short {
    background: rgba(215, 0, 21, 0.1);
    color: #d70015;
    border: 1px solid rgba(215, 0, 21, 0.3);
    font-weight: 600;
}

.vbd-light-theme .vbd-trading-table thead {
    background: #f5f5f7;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.vbd-light-theme .vbd-trading-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

.vbd-light-theme .vbd-score-bar {
    background: #f5f5f7;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.vbd-light-theme .vbd-filter-btn.active {
    background: rgba(0, 122, 110, 0.12);
    border-color: #007a6e;
    color: #007a6e;
}

.vbd-light-theme .vbd-filter-btn:hover {
    background: none;
    border-color: rgba(0, 122, 110, 0.3);
}

.vbd-light-theme .vbd-stage-badge.green {
    background: rgba(0, 135, 90, 0.12);
    color: var(--vbd-text-primary);
    border: 1px solid rgba(0, 135, 90, 0.3);
    text-shadow: none;
    font-weight: 600;
}

.vbd-light-theme .vbd-stage-badge.yellow {
    background: rgba(153, 105, 0, 0.12);
    color: var(--vbd-text-primary);
    border: 1px solid rgba(153, 105, 0, 0.3);
    text-shadow: none;
    font-weight: 600;
}

.vbd-light-theme .vbd-stage-badge.orange {
    background: rgba(204, 85, 0, 0.12);
    color: var(--vbd-text-primary);
    border: 1px solid rgba(204, 85, 0, 0.3);
    text-shadow: none;
    font-weight: 600;
}

.vbd-light-theme .vbd-stage-badge.red {
    background: rgba(215, 0, 21, 0.12);
    color: var(--vbd-text-primary);
    border: 1px solid rgba(215, 0, 21, 0.3);
    text-shadow: none;
    font-weight: 600;
}

.vbd-light-theme .vbd-model-badge.hourly {
    background: transparent;
    color: var(--vbd-text-primary);
    border: 1px solid rgba(204, 85, 0, 0.3);
    text-shadow: none;
    font-weight: 600;
}

.vbd-light-theme .vbd-model-badge.daily {
    background: transparent;
    color: var(--vbd-text-primary);
    border: 1px solid rgba(0, 81, 213, 0.3);
    text-shadow: none;
    font-weight: 600;
}

.vbd-light-theme .vbd-sensitivity-badge.aggressive {
    background: transparent;
    color: var(--vbd-text-primary);
    border: 1px solid rgba(204, 85, 0, 0.3);
    text-shadow: none;
    font-weight: 600;
}

.vbd-light-theme .vbd-sensitivity-badge.conservative {
    background: transparent;
    color: var(--vbd-text-primary);
    border: 1px solid rgba(0, 81, 213, 0.3);
    text-shadow: none;
    font-weight: 600;
}

.vbd-light-theme .vbd-btn-icon:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
}

.vbd-light-theme .vbd-select-compact {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #1d1d1f;
}

.vbd-light-theme .vbd-select-compact:hover {
    border-color: #00a99d;
}

.vbd-light-theme .vbd-select-compact:focus {
    outline: none;
    border-color: #00a99d;
    box-shadow: 0 0 0 3px rgba(0, 169, 157, 0.1);
}

.vbd-light-theme .vbd-page-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}

.vbd-light-theme .vbd-page-number.active {
    background: #007a6e;
    color: #ffffff;
    border-color: #007a6e;
}

.vbd-light-theme .vbd-loading-spinner {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: #007a6e;
}

/* Light theme filter panel */
.vbd-light-theme .vbd-filter-panel {
    background: #fafafa;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.vbd-light-theme .vbd-filter-panel-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 18px 20px;
}

.vbd-light-theme .vbd-filter-panel-header h3 {
    color: #1d1d1f;
    font-weight: 600;
    font-size: 15px;
}

.vbd-light-theme .vbd-filter-section {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.vbd-light-theme .vbd-filter-section h4 {
    margin: 0 0 15px 0;
    padding-top: 5px;
    color: #1d1d1f;
    font-size: 11px;
    letter-spacing: 0.5px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Price cells in light mode */
.vbd-light-theme .vbd-stop-price {
    color: #d70015;
    opacity: 1;
    font-weight: 500;
}

.vbd-light-theme .vbd-target-price {
    color: #00875a;
    opacity: 1;
    font-weight: 500;
}

.vbd-light-theme .vbd-winrate-good {
    color: #00875a;
    font-weight: 500;
}

.vbd-light-theme .vbd-winrate-poor {
    color: #d70015;
    font-weight: 500;
}

.vbd-light-theme .vbd-expectancy-positive {
    color: #00875a;
    font-weight: 500;
}

.vbd-light-theme .vbd-expectancy-negative {
    color: #d70015;
    font-weight: 500;
}

/* Additional light mode contrast fixes */
.vbd-light-theme .vbd-mp-signal-badge {
    background: rgba(100, 100, 100, 0.12);
    border: 1px solid rgba(100, 100, 100, 0.3);
    color: #484848;
    font-weight: 600;
}

.vbd-light-theme .vbd-days-new {
    color: #007a6e;
    font-weight: 700;
}

.vbd-light-theme .vbd-signal-badge.vbd-pattern-good,
.vbd-light-theme .vbd-signal-badge.vbd-pattern-warning,
.vbd-light-theme .vbd-signal-badge.vbd-pattern-caution,
.vbd-light-theme .vbd-signal-badge.vbd-pattern-danger,
.vbd-light-theme .vbd-signal-badge.vbd-pattern-neutral {
    background: var(--vbd-bg-secondary);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--vbd-text-primary);
    font-weight: 500;
}

.vbd-light-theme .vbd-score-fill {
    opacity: 0.9;
}

.vbd-light-theme .vbd-score-value {
    font-weight: 700;
    color: #1d1d1f;
}

.vbd-light-theme #vbd-bull-bear {
    color: #007a6e;
    font-weight: 600;
}

.vbd-light-theme .vbd-stat-value {
    font-weight: 600;
}

.vbd-light-theme .vbd-symbol {
    color: #1d1d1f;
    font-weight: 700;
}

/* Market Pulse color fixes in light mode */
.vbd-light-theme .vbd-mp-color.green {
    background: rgba(0, 135, 90, 0.15);
    color: #00875a;
    border: 1px solid rgba(0, 135, 90, 0.4);
    font-weight: 600;
}

.vbd-light-theme .vbd-mp-color.yellow {
    background: rgba(153, 105, 0, 0.15);
    color: #7a5500;
    border: 1px solid rgba(153, 105, 0, 0.4);
    font-weight: 600;
}

.vbd-light-theme .vbd-mp-color.orange {
    background: rgba(204, 85, 0, 0.15);
    color: #a04400;
    border: 1px solid rgba(204, 85, 0, 0.4);
    font-weight: 600;
}

.vbd-light-theme .vbd-mp-color.red {
    background: rgba(215, 0, 21, 0.15);
    color: #b50012;
    border: 1px solid rgba(215, 0, 21, 0.4);
    font-weight: 600;
}

/* Ensure hover states have good contrast */
.vbd-light-theme .vbd-select-compact:hover {
    border-color: #007a6e;
}

.vbd-light-theme .vbd-filter-toggle {
    background: rgba(0, 122, 110, 0.1);
    border: 1px solid rgba(0, 122, 110, 0.3);
    color: #007a6e;
    font-weight: 600;
}

.vbd-light-theme .vbd-filter-toggle:hover {
    background: rgba(0, 122, 110, 0.15);
    border-color: #007a6e;
}

/* Light mode filter improvements */
.vbd-light-theme .vbd-reset-btn {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #1d1d1f;
    font-weight: 500;
    transition: all 0.2s;
}

.vbd-light-theme .vbd-reset-btn:hover {
    background: #f5f5f7;
    border-color: #007a6e;
    color: #007a6e;
}

.vbd-light-theme .vbd-filter-btn {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #515154;
    font-weight: 500;
    transition: all 0.15s;
}

.vbd-light-theme .vbd-filter-btn:hover {
    background: none;
    border-color: rgba(0, 122, 110, 0.3);
    color: #1d1d1f;
}

.vbd-light-theme .vbd-filter-btn.active {
    background: rgba(0, 122, 110, 0.08);
    border-color: #007a6e;
    color: #007a6e;
    font-weight: 600;
}

.vbd-light-theme .vbd-filter-label {
    color: inherit;
    font-size: 12px;
}

.vbd-light-theme .vbd-filter-count {
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-weight: 600;
}

.vbd-light-theme .vbd-filter-btn.active .vbd-filter-count {
    background: rgba(0, 122, 110, 0.15);
    color: #007a6e;
}

/* Better spacing for filter sections */
.vbd-light-theme .vbd-filter-panel-content {
    padding: 15px 20px 20px 20px;
}

.vbd-light-theme .vbd-filter-section:first-child {
    /* Removed padding-top override */
}

.vbd-light-theme .vbd-filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 10px;
}

/* Polish the filter panel appearance */
.vbd-light-theme .vbd-filter-panel {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.vbd-light-theme .vbd-filter-buttons {
    gap: 8px;
}

/* Improve filter toggle button in light mode */
.vbd-light-theme .vbd-filter-toggle {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #1d1d1f;
    font-weight: 500;
}

.vbd-light-theme .vbd-filter-toggle:hover {
    background: #f5f5f7;
    border-color: #007a6e;
    color: #007a6e;
}

.vbd-light-theme .vbd-filter-toggle.active {
    background: rgba(0, 122, 110, 0.08);
    border-color: #007a6e;
    color: #007a6e;
}

.vbd-light-theme .vbd-filter-toggle svg {
    stroke: currentColor;
}

/* Additional light mode polish */
.vbd-light-theme {
    font-weight: 400;
}

.vbd-light-theme .vbd-container {
    background: #ffffff;
}

.vbd-light-theme .vbd-header {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.vbd-light-theme .vbd-info-bar {
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.vbd-light-theme .vbd-stats-group {
    color: #1d1d1f;
}

.vbd-light-theme .vbd-stat-label {
    color: #6e6e73;
    font-weight: 500;
}

.vbd-light-theme .vbd-trading-table {
    background: #ffffff;
}

.vbd-light-theme .vbd-trading-table tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.vbd-light-theme .vbd-trading-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.01);
}

.vbd-light-theme .vbd-status-bar {
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: #515154;
}

.vbd-light-theme .vbd-status-item {
    color: #515154;
}

.vbd-light-theme .vbd-rank {
    color: #6e6e73;
    font-weight: 500;
}

/* Clean up the filter panel box model */
.vbd-light-theme .vbd-filter-panel.collapsed {
    box-shadow: none;
}

.vbd-light-theme .vbd-content-wrapper {
    background: #ffffff;
}

/* Ensure good contrast for all interactive elements */
.vbd-light-theme button:focus,
.vbd-light-theme select:focus,
.vbd-light-theme input:focus {
    outline: 2px solid rgba(0, 122, 110, 0.3);
    outline-offset: 1px;
}

/* Apple-inspired Filter Sidebar Design */

/* Dark mode sidebar refinements */
.vbd-filter-panel {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.vbd-filter-panel-header {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
}

.vbd-filter-panel-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--vbd-border) 10%, 
        var(--vbd-border) 90%, 
        transparent 100%);
}

.vbd-filter-section h4 {
    position: relative;
}

/* Removed green left border on filter headings */

/* Apple-style filter buttons */
.vbd-filter-btn {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    position: relative;
    overflow: hidden;
}

.vbd-filter-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.vbd-filter-btn:hover::before {
    opacity: 1;
}

.vbd-filter-count {
    border-radius: 10px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    min-width: 24px;
}

/* Light mode Apple-inspired sidebar */
.vbd-light-theme .vbd-filter-panel {
    background: rgba(250, 250, 250, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 
        inset -1px 0 0 rgba(0, 0, 0, 0.05),
        0 0 20px rgba(0, 0, 0, 0.03);
}

.vbd-light-theme .vbd-filter-panel-header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.vbd-light-theme .vbd-filter-section {
    position: relative;
}

.vbd-light-theme .vbd-filter-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.06) 10%, 
        rgba(0, 0, 0, 0.06) 90%, 
        transparent 100%);
}

.vbd-light-theme .vbd-filter-section:last-child::after {
    display: none;
}

/* Apple-style buttons in light mode */
.vbd-light-theme .vbd-filter-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.vbd-light-theme .vbd-filter-btn:hover {
    background: none;
    box-shadow: none;
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
}

.vbd-light-theme .vbd-filter-btn.active {
    background: linear-gradient(135deg, 
        rgba(0, 122, 110, 0.1) 0%, 
        rgba(0, 122, 110, 0.08) 100%);
    box-shadow: 
        0 1px 2px rgba(0, 122, 110, 0.1),
        inset 0 1px 0 rgba(0, 122, 110, 0.05);
}

.vbd-light-theme .vbd-filter-count {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.04) 0%, 
        rgba(0, 0, 0, 0.06) 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.vbd-light-theme .vbd-filter-btn.active .vbd-filter-count {
    background: linear-gradient(135deg, 
        rgba(0, 122, 110, 0.12) 0%, 
        rgba(0, 122, 110, 0.15) 100%);
    box-shadow: inset 0 1px 2px rgba(0, 122, 110, 0.1);
}

/* Apple-style Reset button */
.vbd-light-theme .vbd-reset-btn {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(248, 248, 248, 0.95) 100%);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.2s;
}

.vbd-light-theme .vbd-reset-btn:hover {
    background: linear-gradient(135deg, 
        rgba(255, 59, 48, 0.08) 0%, 
        rgba(255, 59, 48, 0.05) 100%);
    border-color: rgba(255, 59, 48, 0.3);
    color: #d70015;
    transform: translateY(-1px);
    box-shadow: 
        0 2px 5px rgba(255, 59, 48, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Smooth transitions */
.vbd-filter-btn,
.vbd-reset-btn,
.vbd-filter-count {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode Apple-style buttons */
.vbd-container:not(.vbd-light-theme) .vbd-filter-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.vbd-container:not(.vbd-light-theme) .vbd-filter-btn:hover {
    background: none;
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.vbd-container:not(.vbd-light-theme) .vbd-filter-btn.active {
    background: linear-gradient(135deg, 
        rgba(6, 182, 212, 0.15) 0%, 
        rgba(6, 182, 212, 0.12) 100%);
    border-color: rgba(6, 182, 212, 0.3);
}

.vbd-container:not(.vbd-light-theme) .vbd-reset-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.vbd-container:not(.vbd-light-theme) .vbd-reset-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
    transform: translateY(-1px);
}

/* Filter panel animations */
.vbd-filter-panel {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vbd-filter-panel.collapsed {
    transform: translateX(-100%);
    opacity: 0;
}

/* Subtle hover effect for sections */
.vbd-filter-section {
    transition: all 0.2s;
    /* Removed padding and margin that was causing spacing issues */
}

/* Add margin-top to first filter section for clean spacing */
.vbd-filter-section:first-of-type {
    margin-top: 10px;
}

.vbd-light-theme .vbd-filter-section:hover {
    background: none;
}

.vbd-container:not(.vbd-light-theme) .vbd-filter-section:hover {
    background: none;
}

/* Refined typography */
.vbd-filter-panel-header h3 {
    font-weight: 600;
    letter-spacing: -0.3px;
}

.vbd-filter-section h4 {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.vbd-filter-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.1px;
}

/* ========================================
   COLUMN CUSTOMIZATION
   ======================================== */

.vbd-modal-wide {
    max-width: 800px !important;
}

.vbd-column-settings-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.vbd-column-settings-section h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--vbd-text-primary);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vbd-settings-hint {
    font-size: 11px;
    color: var(--vbd-text-secondary);
    margin: 0 0 12px 0;
    opacity: 0.8;
}

.vbd-column-list {
    background: var(--vbd-bg-secondary);
    border: 1px solid var(--vbd-border);
    border-radius: 8px;
    padding: 8px;
    min-height: 300px;
    max-height: 400px;
    overflow-y: auto;
}

.vbd-column-item {
    background: var(--vbd-bg-primary);
    border: 1px solid var(--vbd-border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
    user-select: none;
}

.vbd-column-item:hover {
    background: var(--vbd-bg-hover);
    transform: translateX(2px);
}

.vbd-column-item.dragging {
    opacity: 0.5;
    transform: scale(1.02);
}

.vbd-column-item.drag-over {
    border-color: var(--vbd-accent);
    background: rgba(6, 182, 212, 0.05);
}

.vbd-column-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vbd-column-drag-handle {
    color: var(--vbd-text-secondary);
    cursor: grab;
    font-size: 14px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.vbd-column-drag-handle:hover {
    opacity: 1;
}

.vbd-column-item.dragging .vbd-column-drag-handle {
    cursor: grabbing;
}

.vbd-column-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--vbd-text-primary);
}

.vbd-column-visibility {
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: var(--vbd-accent);
    transition: all 0.2s;
}

.vbd-column-visibility:hover {
    transform: scale(1.2);
}

.vbd-column-visibility.hidden {
    color: var(--vbd-text-secondary);
    opacity: 0.4;
}

/* Hidden columns list */
#vbd-hidden-columns .vbd-column-item {
    cursor: pointer;
    opacity: 0.7;
}

#vbd-hidden-columns .vbd-column-item:hover {
    opacity: 1;
    background: var(--vbd-bg-hover);
    border-color: var(--vbd-accent);
}

#vbd-hidden-columns .vbd-column-drag-handle {
    display: none;
}

/* Column settings actions */
.vbd-column-settings-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid var(--vbd-border);
}

.vbd-column-settings-actions > div {
    display: flex;
    gap: 10px;
}

.vbd-btn-primary,
.vbd-btn-secondary {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
}

.vbd-btn-primary {
    background: var(--vbd-accent);
    border-color: var(--vbd-accent);
    color: #ffffff;
}

.vbd-btn-primary:hover {
    background: #00a99d;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

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

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

/* Light mode adjustments */
.vbd-light-theme .vbd-column-list {
    background: #f5f5f7;
    border-color: rgba(0, 0, 0, 0.1);
}

.vbd-light-theme .vbd-column-item {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

.vbd-light-theme .vbd-column-item:hover {
    background: rgba(0, 122, 110, 0.04);
}

.vbd-light-theme .vbd-column-item.drag-over {
    border-color: #007a6e;
    background: rgba(0, 122, 110, 0.08);
}

.vbd-light-theme .vbd-btn-primary {
    background: #007a6e;
    border-color: #007a6e;
}

.vbd-light-theme .vbd-btn-primary:hover {
    background: #00665c;
}

.vbd-light-theme .vbd-btn-secondary {
    border-color: rgba(0, 0, 0, 0.15);
    color: #515154;
}

.vbd-light-theme .vbd-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #1d1d1f;
}

/* Hidden column styles */
.vbd-column-hidden {
    display: none !important;
}

/* ========================================
   APPLE-INSPIRED FILTER PANEL ENHANCEMENTS
   ======================================== */

/* Glass morphism and depth effects */
.vbd-filter-panel {
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    background: rgba(15, 17, 20, 0.92);
    box-shadow:
        2px 0 32px rgba(0, 0, 0, 0.15),
        inset -1px 0 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vbd-light-theme .vbd-filter-panel {
    background: rgba(252, 252, 252, 0.96);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
        2px 0 32px rgba(0, 0, 0, 0.08),
        inset -1px 0 0 rgba(0, 0, 0, 0.06);
}

/* Enhanced filter buttons with hover effects */
.vbd-filter-btn {
    border-radius: 10px;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    font-weight: 500;
}

.vbd-filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: left 0.5s;
}

.vbd-filter-btn:hover {
    transform: translateX(4px);
    background: none;
}

.vbd-filter-btn:hover::before {
    left: 100%;
}

.vbd-light-theme .vbd-filter-btn {
    background: rgba(0, 0, 0, 0.02);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.vbd-light-theme .vbd-filter-btn:hover {
    background: none;
    box-shadow: none;
}

/* Active state with depth */
.vbd-filter-btn.active {
    background: linear-gradient(135deg,
        rgba(6, 182, 212, 0.25) 0%,
        rgba(6, 182, 212, 0.18) 100%);
    box-shadow:
        0 6px 20px rgba(6, 182, 212, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transform: scale(1.02) translateX(2px);
    font-weight: 600;
}

.vbd-light-theme .vbd-filter-btn.active {
    background: linear-gradient(135deg,
        rgba(0, 122, 110, 0.12) 0%,
        rgba(0, 122, 110, 0.08) 100%);
    box-shadow:
        0 4px 16px rgba(0, 122, 110, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 122, 110, 0.1);
    color: #007a6e;
}

/* Enhanced filter count badges */
.vbd-filter-btn:hover .vbd-filter-count {
    transform: scale(1.1);
    background: none;
}

.vbd-filter-btn.active .vbd-filter-count {
    background: rgba(255, 255, 255, 0.3);
    font-weight: 700;
    transform: scale(1.05);
}

.vbd-light-theme .vbd-filter-btn:hover .vbd-filter-count {
    background: none;
}

.vbd-light-theme .vbd-filter-btn.active .vbd-filter-count {
    background: rgba(0, 122, 110, 0.2);
    color: white;
}

/* Enhanced Reset button with ripple effect */
.vbd-reset-btn {
    background: linear-gradient(135deg,
        rgba(255, 59, 48, 0.15) 0%,
        rgba(255, 59, 48, 0.1) 100%);
    border: 1px solid rgba(255, 59, 48, 0.25);
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vbd-reset-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.vbd-reset-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(255, 59, 48, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg,
        rgba(255, 59, 48, 0.2) 0%,
        rgba(255, 59, 48, 0.15) 100%);
}

.vbd-reset-btn:hover::after {
    width: 400px;
    height: 400px;
}

.vbd-reset-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.2);
}

.vbd-light-theme .vbd-reset-btn {
    background: linear-gradient(135deg,
        rgba(255, 59, 48, 0.08) 0%,
        rgba(255, 59, 48, 0.04) 100%);
    border: 1px solid rgba(255, 59, 48, 0.15);
    color: #d70015;
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.08);
}

.vbd-light-theme .vbd-reset-btn:hover {
    background: linear-gradient(135deg,
        rgba(255, 59, 48, 0.12) 0%,
        rgba(255, 59, 48, 0.08) 100%);
    box-shadow:
        0 6px 20px rgba(255, 59, 48, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Smooth panel transitions */
.vbd-filter-panel.collapsed {
    transform: translateX(-100%);
    opacity: 0;
    box-shadow: none;
}

/* Header with gradient overlay - reduced padding */
.vbd-filter-panel-header {
    background: linear-gradient(to bottom,
        rgba(15, 17, 20, 0.98) 0%,
        rgba(15, 17, 20, 0.94) 100%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 16px 15px;
}

.vbd-light-theme .vbd-filter-panel-header {
    background: linear-gradient(to bottom,
        rgba(252, 252, 252, 0.98) 0%,
        rgba(252, 252, 252, 0.94) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Reduced padding for filter sections */
.vbd-filter-section {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 18px;
}

/* Remove the section dividers */
.vbd-filter-section::after {
    display: none;
}

/* Filter toggle button enhancement */
.vbd-filter-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vbd-filter-toggle:hover {
    background: rgba(6, 182, 212, 0.1);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}

.vbd-filter-toggle .filter-icon {
    transition: transform 0.3s;
}

.vbd-filter-toggle:hover .filter-icon {
    transform: rotate(8deg) scale(1.1);
}

.vbd-light-theme .vbd-filter-toggle {
    background: rgba(0, 0, 0, 0.03);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.vbd-light-theme .vbd-filter-toggle:hover {
    background: rgba(0, 122, 110, 0.08);
    box-shadow: 0 3px 10px rgba(0, 122, 110, 0.15);
    color: #007a6e;
}

/* Bulk Actions Toolbar */
.vbd-bulk-actions {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 10px;
    backdrop-filter: blur(8px);
}

.vbd-bulk-actions-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.vbd-bulk-count {
    font-weight: 600;
    color: var(--vbd-accent);
    font-size: 14px;
}

.vbd-bulk-count #vbd-selected-count {
    font-size: 18px;
    font-weight: 700;
}

.vbd-bulk-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vbd-bulk-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 12px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.vbd-bulk-select:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--vbd-accent);
}

.vbd-bulk-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--vbd-accent) 0%, #00a896 100%);
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

.vbd-bulk-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

.vbd-bulk-btn:active {
    transform: translateY(0);
}

.vbd-bulk-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.vbd-bulk-btn svg {
    width: 18px;
    height: 18px;
}

.vbd-bulk-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 10px 18px;
    color: #999;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.vbd-bulk-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}





/* Re-center model column */
.vbd-th-model {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Light Theme */
.vbd-light-theme .vbd-bulk-actions {
    background: linear-gradient(135deg, rgba(0, 122, 110, 0.08) 0%, rgba(0, 122, 110, 0.04) 100%);
    border-color: rgba(0, 122, 110, 0.2);
}

.vbd-light-theme .vbd-bulk-count {
    color: #007a6e;
}

.vbd-light-theme .vbd-bulk-select {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: #333;
}

.vbd-light-theme .vbd-bulk-select:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: #007a6e;
}

.vbd-light-theme .vbd-bulk-btn {
    background: linear-gradient(135deg, #007a6e 0%, #006b5f 100%);
    box-shadow: 0 2px 8px rgba(0, 122, 110, 0.3);
}

.vbd-light-theme .vbd-bulk-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 122, 110, 0.4);
}

.vbd-light-theme .vbd-bulk-btn-secondary {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: #666;
}

.vbd-light-theme .vbd-bulk-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

/* Spinner for loading state */
.vbd-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vbd-spin 0.6s linear infinite;
}

@keyframes vbd-spin {
    to { transform: rotate(360deg); }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .vbd-bulk-actions-content {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .vbd-bulk-controls {
        flex-direction: column;
        width: 100%;
    }

    .vbd-bulk-select,
    .vbd-bulk-btn,
    .vbd-bulk-btn-secondary {
        width: 100%;
        justify-content: center;
    }
}



.vbd-toast {
    background: linear-gradient(135deg, rgba(15, 17, 20, 0.98) 0%, rgba(20, 23, 28, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: vbd-toast-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top right;
}

.vbd-toast.hiding {
    animation: vbd-toast-slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.vbd-toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vbd-toast-icon svg {
    width: 24px;
    height: 24px;
}

.vbd-toast.success .vbd-toast-icon {
    color: var(--vbd-accent);
}

.vbd-toast.error .vbd-toast-icon {
    color: #ff5252;
}

.vbd-toast.info .vbd-toast-icon {
    color: #64b5f6;
}

.vbd-toast-content {
    flex: 1;
    min-width: 0;
}

.vbd-toast-title {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    margin-bottom: 4px;
}

.vbd-toast-message {
    font-size: 13px;
    color: #999;
    line-height: 1.5;
}

.vbd-toast-files {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.vbd-toast-file {
    font-size: 12px;
    color: #666;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vbd-toast-file::before {
    content: "•";
    color: var(--vbd-accent);
    font-weight: bold;
}

.vbd-toast-close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
}

.vbd-toast-close:hover {
    color: #fff;
}

.vbd-toast-close svg {
    width: 16px;
    height: 16px;
}

@keyframes vbd-toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes vbd-toast-slide-out {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
}

/* Light theme */
.vbd-light-theme .vbd-toast {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.98) 100%);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.vbd-light-theme .vbd-toast-title {
    color: #1a1a1a;
}

.vbd-light-theme .vbd-toast-message {
    color: #666;
}

.vbd-light-theme .vbd-toast-file {
    color: #888;
}

.vbd-light-theme .vbd-toast-files {
    border-top-color: rgba(0, 0, 0, 0.06);
}

.vbd-light-theme .vbd-toast-close {
    color: #999;
}

.vbd-light-theme .vbd-toast-close:hover {
    color: #333;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .vbd-toast-container {
        top: 60px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
    
    .vbd-toast {
        padding: 14px 16px;
    }
}

/* Toast notifications (shared with watchlists) */
.vbd-toast-container {
  position: fixed;
  right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 99999;
}
.vbd-toast {
  min-width: 300px; max-width: 420px;
  background: #0e1014; color: #cbd5e1;
  border: 1px solid #273044; border-left: 4px solid #06b6d4; border-radius: 8px;
  padding: 14px 16px; display:flex; align-items:center; gap:12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  animation: vbd-toast-in 180ms ease-out;
  backdrop-filter: saturate(120%) blur(2px);
}
.vbd-toast.success { border-color:#175f47; border-left-color:#14d19c; background:#0f231c; color:#14d19c; }
.vbd-toast.error { border-color:#5f1717; border-left-color:#ff8a8a; background:#2a0f11; color:#ff8a8a; }
.vbd-toast.info { border-color:#1e3a8a; border-left-color:#60a5fa; background:#0f172a; color:#93c5fd; }
.vbd-toast .vbd-toast-icon { width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.vbd-toast .vbd-toast-text { flex:1; font-size:15px; line-height:1.45; }
.vbd-toast .vbd-toast-close { font-size:18px; }
.vbd-toast .vbd-toast-close { background:transparent; border:0; color:inherit; cursor:pointer; font-size:16px; opacity:.8; }
.vbd-toast .vbd-toast-close:hover { opacity:1; }

@keyframes vbd-toast-in {
  from { opacity:0; transform: translateY(6px); }
  to { opacity:1; transform: translateY(0); }
}

/* Light theme toasts */
.vbd-light-theme .vbd-toast { background:#ffffff; color:#1f2937; border-color:#e2e8f0; }
.vbd-light-theme .vbd-toast.success { background:#ecfdf5; color:#065f46; border-color:#99f6e4; }
.vbd-light-theme .vbd-toast.error { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.vbd-light-theme .vbd-toast.info { background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }

/* ========================================
   CHECKBOX, RANK, SYMBOL COLUMN STYLING
   ======================================== */

/* Center all checkboxes with identical column width */
.vbd-th-checkbox,
.vbd-checkbox {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 50px !important;
    padding: 12px 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.vbd-checkbox input[type="checkbox"],
.vbd-th-checkbox input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    cursor: pointer;
    accent-color: var(--vbd-accent);
    margin: 0 auto !important;
    padding: 0 !important;
    vertical-align: middle;
    display: inline-block;
}

/* Rank column - compact */
.vbd-th-rank,
.vbd-rank {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 32px !important;
    text-align: center !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Symbol column - left aligned with sector badges */
.vbd-th-symbol {
    text-align: left !important;
    padding-left: 8px !important;
    padding-right: 4px !important;
    width: 80px !important;
}

.vbd-symbol-link {
    justify-content: flex-start !important;
    text-align: left !important;
    display: inline-flex !important;
}

.vbd-symbol-cell {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
}

/* SIDE column spacing */
.vbd-th-direction {
    padding-left: 8px !important;
}

/* Daily swing column width */
.vbd-th-levels {
    min-width: 150px !important;
    width: 150px !important;
}

/* Swing visual fills column */
.vbd-swing-container {
    width: 100% !important;
    display: block !important;
}

.vbd-swing-bar {
    width: 100% !important;
}

/* Sector ETF Badges */
.vbd-sector-badges {
    display: inline-flex;
    gap: 3px;
    margin-left: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.vbd-sector-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Market Pulse color classes for sector badges */
.vbd-sector-badge.mp-green { background: rgba(16, 185, 129, 0.25); color: #34d399; }
.vbd-sector-badge.mp-yellow { background: rgba(234, 179, 8, 0.25); color: #fbbf24; }
.vbd-sector-badge.mp-orange { background: rgba(249, 115, 22, 0.25); color: #fb923c; }
.vbd-sector-badge.mp-red { background: rgba(239, 68, 68, 0.25); color: #f87171; }
.vbd-sector-badge.mp-gray { background: rgba(107, 114, 128, 0.25); color: #9ca3af; }

/* Mobile cards - sector badges */
.vbd-card-sectors {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

/* ============================================
   Featured Setups Section - Dental Intelligence Inspired
   Clean, white, professional design
   ============================================ */

.vbd-featured-section {
    padding: 24px 20px;
    background: var(--vbd-bg-secondary);
    border-bottom: 1px solid var(--vbd-border);
}

/* Market Narrative Card */
.vbd-narrative-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.vbd-narrative-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: radial-gradient(circle at 100% 50%, rgba(6, 182, 212, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.vbd-narrative-greeting {
    font-size: 28px;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.vbd-narrative-greeting span {
    color: #06b6d4;
}

.vbd-narrative-summary {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 700px;
}

.vbd-narrative-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 8px;
    color: #fb923c;
    font-size: 13px;
    font-weight: 500;
}

.vbd-narrative-warning svg {
    flex-shrink: 0;
}

/* Quick Stats Row */
.vbd-quick-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.vbd-quick-stat {
    background: var(--vbd-bg-tertiary);
    border: 1px solid var(--vbd-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vbd-quick-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vbd-quick-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--vbd-text-primary);
    margin-bottom: 4px;
}

.vbd-quick-stat-value.bullish {
    color: var(--vbd-green);
}

.vbd-quick-stat-value.bearish {
    color: var(--vbd-red);
}

.vbd-quick-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--vbd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Standouts Header */
.vbd-standouts-header {
    margin-bottom: 20px;
}

.vbd-standouts-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--vbd-text-primary);
    margin: 0 0 4px;
}

.vbd-standouts-subtitle {
    font-size: 14px;
    color: var(--vbd-text-muted);
    margin: 0;
}

/* Standout Cards Grid */
.vbd-standouts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

/* Individual Standout Card */
.vbd-standout-card {
    background: var(--vbd-bg-tertiary);
    border: 1px solid var(--vbd-border);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.vbd-standout-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    border-color: var(--vbd-accent-border);
}

.vbd-standout-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--vbd-accent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.vbd-standout-card:hover::before {
    opacity: 1;
}

.vbd-standout-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.vbd-standout-symbol {
    font-size: 24px;
    font-weight: 700;
    color: var(--vbd-text-primary);
    letter-spacing: -0.5px;
}

.vbd-standout-direction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
}

.vbd-standout-direction.long {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.vbd-standout-direction.short {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.vbd-standout-prices {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--vbd-text-secondary);
}

.vbd-standout-entry {
    font-weight: 600;
    color: var(--vbd-text-primary);
}

.vbd-standout-arrow {
    color: var(--vbd-text-muted);
}

.vbd-standout-target {
    color: var(--vbd-green);
    font-weight: 500;
}

.vbd-standout-stop {
    color: var(--vbd-red);
    font-weight: 500;
    font-size: 12px;
}

/* Confluence Factors */
.vbd-standout-factors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.vbd-factor-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--vbd-accent-bg);
    color: var(--vbd-accent);
    border: 1px solid var(--vbd-accent-border);
}

.vbd-factor-badge.highlight {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

/* Standout Footer */
.vbd-standout-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--vbd-border);
}

.vbd-standout-score {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vbd-score-label {
    font-size: 11px;
    color: var(--vbd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vbd-score-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--vbd-accent);
}

.vbd-standout-rr {
    font-size: 13px;
    font-weight: 600;
    color: var(--vbd-green);
}

/* No Standouts Message */
.vbd-no-standouts {
    text-align: center;
    padding: 40px 20px;
    color: var(--vbd-text-muted);
}

.vbd-no-standouts-icon {
    margin-bottom: 12px;
    opacity: 0.5;
}

.vbd-no-standouts-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--vbd-text-secondary);
    margin-bottom: 4px;
}

.vbd-no-standouts-subtext {
    font-size: 13px;
    color: var(--vbd-text-muted);
}

/* Section Divider */
.vbd-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}

.vbd-divider-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--vbd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vbd-divider-count {
    font-size: 13px;
    color: var(--vbd-text-muted);
}

.vbd-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--vbd-border);
}

/* Light Theme Adjustments */
.vbd-container.vbd-light-theme .vbd-featured-section {
    background: #f8fafc;
}

.vbd-container.vbd-light-theme .vbd-narrative-card {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}

.vbd-container.vbd-light-theme .vbd-quick-stat {
    background: #ffffff;
    border-color: #e2e8f0;
}

.vbd-container.vbd-light-theme .vbd-standout-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

.vbd-container.vbd-light-theme .vbd-standout-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .vbd-featured-section {
        padding: 16px;
    }

    .vbd-narrative-card {
        padding: 20px;
    }

    .vbd-narrative-greeting {
        font-size: 22px;
    }

    .vbd-narrative-summary {
        font-size: 14px;
    }

    .vbd-quick-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .vbd-quick-stat {
        padding: 16px;
    }

    .vbd-quick-stat-value {
        font-size: 22px;
    }

    .vbd-standouts-grid {
        grid-template-columns: 1fr;
    }

    .vbd-standout-card {
        padding: 20px;
    }
}

/* Microanimations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vbd-standout-card {
    animation: fadeInUp 0.4s ease forwards;
}

.vbd-standout-card:nth-child(1) { animation-delay: 0.05s; }
.vbd-standout-card:nth-child(2) { animation-delay: 0.1s; }
.vbd-standout-card:nth-child(3) { animation-delay: 0.15s; }
.vbd-standout-card:nth-child(4) { animation-delay: 0.2s; }
.vbd-standout-card:nth-child(5) { animation-delay: 0.25s; }

.vbd-quick-stat {
    animation: fadeInUp 0.3s ease forwards;
}

.vbd-quick-stat:nth-child(1) { animation-delay: 0s; }
.vbd-quick-stat:nth-child(2) { animation-delay: 0.05s; }
.vbd-quick-stat:nth-child(3) { animation-delay: 0.1s; }
.vbd-quick-stat:nth-child(4) { animation-delay: 0.15s; }

.vbd-narrative-card {
    animation: fadeInUp 0.4s ease forwards;
}

/* Scanner sector column */
/* Sector group headers in scanner table */
.vbd-sector-group-header td {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.06);
    border-left: 3px solid #3b82f6;
    letter-spacing: 0.3px;
}

/* ==================== MOBILE CARD SCORE ROW ==================== */
.vbd-card-score-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 6px;
    font-size: 12px;
}
.vbd-card-score-bar {
    flex: 1;
    height: 3px;
    background: var(--vbd-bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    max-width: 80px;
}
.vbd-card-score-fill {
    height: 100%;
    border-radius: 2px;
}
.vbd-card-score-num {
    font-weight: 700;
    color: var(--vbd-text-primary);
    min-width: 20px;
}
.vbd-card-mp-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vbd-card-mp-info {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--vbd-text-muted);
    font-size: 11px;
}
.vbd-card-time {
    color: var(--vbd-text-muted);
    font-size: 11px;
    margin-left: auto;
}

/* ==================== TIME COLUMN ==================== */
.vbd-time-cell {
    font-size: 12px;
    color: var(--vbd-text-secondary);
    white-space: nowrap;
}

/* ==================== MARKET CONTEXT STRIP ==================== */
.vbd-market-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    background: var(--vbd-bg-primary);
    border-bottom: 1px solid var(--vbd-border);
    font-size: 12px;
}
.vbd-strip-indices {
    display: flex;
    gap: 16px;
}
.vbd-strip-index {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: default;
}
.vbd-strip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64748b;
    flex-shrink: 0;
}
.vbd-strip-sym {
    font-weight: 600;
    color: var(--vbd-text-primary);
    letter-spacing: 0.02em;
}
.vbd-strip-days {
    color: var(--vbd-text-muted);
    font-size: 11px;
}
.vbd-strip-summary {
    color: var(--vbd-text-secondary);
    font-size: 11px;
}
.vbd-light-theme .vbd-market-strip { background: #fafafa; }

/* ==================== VIEW MODE TOGGLE ==================== */
.vbd-view-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--vbd-border);
    background: var(--vbd-bg-secondary);
}
.vbd-view-btns {
    display: flex;
    background: var(--vbd-bg-primary);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.vbd-view-btn {
    padding: 6px 16px;
    border: none;
    background: transparent;
    color: var(--vbd-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
}
.vbd-view-btn:hover { color: var(--vbd-text-primary); }
.vbd-view-btn.active {
    background: var(--vbd-accent, #06b6d4);
    color: #fff;
}
.vbd-direction-pills {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}
.vbd-toggle-tools {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.vbd-pill {
    padding: 4px 12px;
    border: 1px solid var(--vbd-border);
    background: transparent;
    color: var(--vbd-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.15s ease;
}
.vbd-pill:hover { border-color: var(--vbd-text-muted); color: var(--vbd-text-primary); }
.vbd-pill.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--vbd-text-muted);
    color: var(--vbd-text-primary);
}

/* ==================== PRESET FILTERS ==================== */
.vbd-presets-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--vbd-border);
    background: var(--vbd-bg-secondary);
}
.vbd-preset {
    padding: 4px 12px;
    border: 1px solid var(--vbd-border);
    background: transparent;
    color: var(--vbd-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.vbd-preset:hover {
    border-color: var(--vbd-text-muted);
    color: var(--vbd-text-primary);
    background: rgba(255, 255, 255, 0.03);
}
.vbd-preset.active {
    background: var(--vbd-accent, #06b6d4);
    border-color: var(--vbd-accent, #06b6d4);
    color: #fff;
}
.vbd-column-gear {
    margin-left: auto;
    padding: 4px 8px;
    border: 1px solid var(--vbd-border);
    background: transparent;
    color: var(--vbd-text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.15s ease;
}
.vbd-column-gear:hover {
    color: var(--vbd-text-primary);
    border-color: var(--vbd-text-muted);
}

/* ==================== TOP PICKS CARDS ==================== */
.vbd-top-picks-container {
    padding: 16px;
}
.vbd-top-picks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.vbd-top-pick-card {
    background: var(--vbd-bg-secondary);
    border: 1px solid var(--vbd-border);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.vbd-top-pick-card:hover {
    border-color: var(--vbd-text-muted);
    transform: translateY(-1px);
}
.vbd-top-pick-card.vbd-pick-long { border-left: 3px solid var(--vbd-green); }
.vbd-top-pick-card.vbd-pick-short { border-left: 3px solid var(--vbd-red); }
.vbd-pick-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.vbd-pick-symbol {
    font-size: 16px;
    font-weight: 700;
    color: var(--vbd-text-primary);
    letter-spacing: 0.02em;
}
.vbd-pick-direction {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}
.vbd-pick-direction.vbd-pick-long { background: rgba(16, 185, 129, 0.15); color: var(--vbd-green); }
.vbd-pick-direction.vbd-pick-short { background: rgba(239, 68, 68, 0.15); color: var(--vbd-red); }
.vbd-pick-score-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.vbd-pick-score-bar {
    flex: 1;
    height: 4px;
    background: var(--vbd-bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}
.vbd-pick-score-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.vbd-pick-score-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--vbd-text-primary);
    min-width: 24px;
    text-align: right;
}
.vbd-pick-prices {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}
.vbd-pick-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vbd-pick-label {
    font-size: 10px;
    color: var(--vbd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vbd-pick-price span:last-child {
    font-size: 13px;
    font-weight: 500;
    color: var(--vbd-text-primary);
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.vbd-pick-target { color: var(--vbd-green) !important; }
.vbd-pick-stop { color: var(--vbd-red) !important; }
.vbd-pick-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--vbd-text-secondary);
}
.vbd-pick-signal {
    text-transform: capitalize;
    font-style: italic;
}
.vbd-top-picks-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--vbd-text-secondary);
}
.vbd-top-picks-empty .vbd-muted {
    color: var(--vbd-text-muted);
    font-size: 13px;
    margin-top: 4px;
}

/* Light theme overrides */
.vbd-light-theme .vbd-top-pick-card { background: #fff; border-color: #e5e7eb; }
.vbd-light-theme .vbd-top-pick-card:hover { border-color: #999; }
.vbd-light-theme .vbd-view-toggle { background: #f5f5f7; }
.vbd-light-theme .vbd-view-btns { background: #e5e5e7; }
.vbd-light-theme .vbd-view-btn { color: #666; }
.vbd-light-theme .vbd-view-btn.active { background: var(--vbd-accent, #007a6e); color: #fff; }
.vbd-light-theme .vbd-pill { border-color: #d1d5db; color: #666; }
.vbd-light-theme .vbd-pill.active { background: rgba(0,0,0,0.05); border-color: #999; color: #1d1d1f; }
.vbd-light-theme .vbd-presets-bar { background: #f5f5f7; }
.vbd-light-theme .vbd-preset { border-color: #d1d5db; color: #666; }
.vbd-light-theme .vbd-preset:hover { border-color: #999; color: #1d1d1f; background: rgba(0,0,0,0.03); }
.vbd-light-theme .vbd-preset.active { background: var(--vbd-accent, #007a6e); border-color: var(--vbd-accent, #007a6e); color: #fff; }