/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Mobile filter bar — hidden on desktop */
.mobile-filter-bar {
    display: none;
}

/* =====================================
   UNIFIED FILTER TOOLBAR
   Replaces the left sidebar with an inline expandable toolbar
   ===================================== */
.filter-toolbar {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: visible;
    position: relative;
    z-index: 40;
    /* Multi-property transition for premium feel */
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease;
    will-change: transform, opacity, box-shadow;
}

/* Sticky toolbar — now for all viewports */
.filter-toolbar.toolbar-sticky {
    position: sticky;
    top: 0;
    z-index: 45;
    border-radius: 0 0 12px 12px;
    border-top: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Mobile tweaks for sticky */
@media (max-width: 1024px) {
    .filter-toolbar.toolbar-sticky {
        border-radius: 0;
        margin-left: -1rem;
        margin-right: -1rem;
        border-left: none;
        border-right: none;
    }
}

/* Hidden state — slide up with fade */
.filter-toolbar.toolbar-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
}

/* Reveal animation when coming back */
.filter-toolbar.toolbar-reveal {
    animation: toolbarSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toolbarSlideIn {
    from {
        transform: translateY(-30%);
        opacity: 0;
        box-shadow: none;
    }

    to {
        transform: translateY(0);
        opacity: 1;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    }
}

/* Subtle top-shadow when pinned at top */
.filter-toolbar.toolbar-pinned {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border-color: rgba(229, 231, 235, 0.7);
}

.filter-toolbar-always {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    min-height: 44px;
    flex-wrap: wrap;
}

/* ── Toolbar Time Label (always visible) ── */
/* ── Toolbar Time Dropdown (always visible) ── */
.toolbar-time-dropdown {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.toolbar-time-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar-time-btn i {
    font-size: 9px;
    color: #9ca3af;
}

.toolbar-time-btn:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.toolbar-time-btn.time-custom {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.toolbar-time-btn.time-custom i {
    color: #3b82f6;
}

/* Grayed out when ticker search bypasses time filter */
.toolbar-time-btn.time-disabled {
    opacity: 0.4;
    pointer-events: none;
    text-decoration: line-through;
}

.toolbar-time-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    width: 140px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    overflow: hidden;
}

.toolbar-time-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.1s;
}

.toolbar-time-option:hover {
    background: #f3f4f6;
}

.toolbar-time-option.active {
    color: #2563eb;
    background: #eff6ff;
    font-weight: 600;
}

/* ── Inline Toggle Buttons in Toolbar ── */
.toolbar-inline-toggles {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 6px 0;
}

.toolbar-inline-toggles::-webkit-scrollbar {
    display: none;
}

.badge-tooltip-wrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.badge-tooltip-info-icon {
    font-size: 10px;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.badge-tooltip-info-icon:hover {
    color: #64748b;
}

.toolbar-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 10px;
    min-height: 30px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    background: rgba(255, 251, 235, 0.4);
    border: 1.5px solid rgba(245, 158, 11, 0.35);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    position: relative;
    line-height: 1;
}

.toolbar-toggle-btn i {
    font-size: 10px;
    flex-shrink: 0;
}

.toolbar-toggle-btn:hover {
    background: rgba(255, 251, 235, 0.8);
    border-color: rgba(245, 158, 11, 0.55);
}

.toolbar-toggle-btn.active {
    color: #92400e;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: rgba(245, 158, 11, 0.7);
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.15);
}

/* Non-Pro toggle variant (e.g., Primary Only) */
.toolbar-toggle-btn:not(.pro-filter-toggle) {
    background: #f9fafb;
    border-color: #d1d5db;
}

.toolbar-toggle-btn:not(.pro-filter-toggle):hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.toolbar-toggle-btn:not(.pro-filter-toggle).active {
    color: #1e40af;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.15);
}

.pro-toggle-badge-sm {
    position: absolute;
    top: -5px;
    right: -5px;
    padding: 1px 4px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #92400e;
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 999px;
    line-height: 1.4;
    pointer-events: none;
}

/* ── Catalyst Strength Range Slider ── */
.catalyst-slider-container {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-height: 30px;
    white-space: nowrap;
    position: relative;
}

.catalyst-slider-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.catalyst-slider-icon-btn:hover {
    border-color: #f59e0b;
    color: #f59e0b;
    background: #fffbeb;
}

.catalyst-slider-icon-btn.active {
    border-color: #f59e0b;
    color: #f59e0b;
    background: #fffbeb;
}

.catalyst-slider-reveal {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    margin-left: 4px;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: max-width 0.25s ease, opacity 0.2s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Desktop: hover to reveal */
@media (hover: hover) {

    .catalyst-slider-container:hover .catalyst-slider-reveal,
    .catalyst-slider-container.expanded .catalyst-slider-reveal {
        max-width: 220px;
        opacity: 1;
        transform: scaleX(1);
        pointer-events: auto;
    }
}

/* Mobile: tap to toggle (via .expanded class) */
@media (hover: none) {
    .catalyst-slider-container.expanded .catalyst-slider-reveal {
        max-width: 220px;
        opacity: 1;
        transform: scaleX(1);
        pointer-events: auto;
    }
}

.catalyst-slider-container.active .catalyst-slider-reveal {
    border-color: rgba(59, 130, 246, 0.5);
    background: #eff6ff;
}

.catalyst-slider-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    cursor: default;
    user-select: none;
}

.catalyst-slider-track-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100px;
    position: relative;
}

.catalyst-slider-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #e5e7eb 0%, #93c5fd 33%, #34d399 66%, #fbbf24 100%);
    outline: none;
    cursor: pointer;
}

.catalyst-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.catalyst-slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.catalyst-slider-input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.catalyst-slider-stops {
    display: flex;
    justify-content: space-between;
    margin-top: 1px;
    padding: 0 1px;
}

.catalyst-slider-stops span {
    font-size: 7px;
    font-weight: 600;
    color: #9ca3af;
    cursor: pointer;
    user-select: none;
}

.catalyst-slider-stops span.active-stop {
    color: #3b82f6;
    font-weight: 700;
}

/* Catalyst sub-filter chips — smooth entrance/exit */
.catalyst-sub-filter {
    opacity: 0;
    transform: translateX(-8px) scale(0.95);
    pointer-events: none;
    max-width: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0;
    border-width: 0;
    transition: opacity 0.25s ease, transform 0.25s ease, max-width 0.3s ease, padding 0.25s ease, border-width 0.2s ease, margin 0.25s ease;
}

.catalyst-sub-filter.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
    max-width: 200px;
    padding: 5px 10px !important;
    margin: 0;
    border-width: 1.5px;
}

/* On small screens: horizontal scroll for inline toggles */
@media (max-width: 900px) {
    .toolbar-inline-toggles {
        flex: 1 1 0;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .toolbar-inline-toggles::-webkit-scrollbar {
        display: none;
    }

    .filter-toolbar-always {
        flex-wrap: wrap;
    }
}

/* Mobile web: single horizontally-scrolling row (matches mobile app) */
@media (max-width: 768px) {
    .filter-toolbar-always {
        flex-wrap: nowrap;
        gap: 6px;
        padding: 6px 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .filter-toolbar-always::-webkit-scrollbar {
        display: none;
    }

    /* Hide "News" label to save horizontal space */
    .news-tab-selector+span {
        display: none;
    }

    /* All children stay on one line */
    .filter-toolbar-always>* {
        flex-shrink: 0;
    }

    /* Ticker search: fixed compact width */
    .toolbar-inline-ticker {
        flex: 0 0 auto;
        min-width: 80px;
        max-width: 120px;
    }

    /* Toggles stay inline, no wrap */
    .toolbar-inline-toggles {
        flex: 0 0 auto;
        display: flex;
        gap: 5px;
        padding: 0;
    }

    .toolbar-inline-toggles .toolbar-toggle-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 11px;
        padding: 5px 8px;
    }

    /* Sort dropdown — compact */
    #sortFilter {
        max-width: 110px;
        font-size: 11px;
    }

    /* Right group stays together */
    .filter-toolbar-always>.flex.items-center.ml-auto {
        flex-shrink: 0;
        margin-left: 0;
    }
}

/* Tighter sizing for small phones (≤430px) */
@media (max-width: 430px) {
    .filter-toolbar-always {
        gap: 5px;
        padding: 5px 8px;
    }

    .news-tab-selector-btn {
        font-size: 12px;
        padding: 3px 7px;
    }

    #filterToolbarToggle {
        width: 28px;
        height: 28px;
    }

    #sortFilter {
        font-size: 10px;
        padding: 3px 5px;
        max-width: 95px;
    }

    .toolbar-inline-ticker {
        min-width: 70px;
        max-width: 100px;
    }

    .toolbar-inline-toggles .toolbar-toggle-btn {
        font-size: 10px;
        padding: 4px 6px;
        gap: 3px;
    }

    .toolbar-inline-toggles .toolbar-toggle-btn i {
        font-size: 9px;
    }

    .pro-toggle-badge-sm {
        font-size: 6px;
        padding: 1px 3px;
        top: -4px;
        right: -4px;
    }

    .toolbar-time-btn {
        padding: 2px 5px;
        font-size: 9px;
    }
}

/* ── News Tab Selector Dropdown ── */
.news-tab-selector {
    position: relative;
    z-index: 50;
}

.news-tab-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.news-tab-selector-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.news-tab-chevron {
    font-size: 9px;
    transition: transform 0.2s ease;
}

.news-tab-selector.open .news-tab-chevron {
    transform: rotate(180deg);
}

.news-tab-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px;
    z-index: 100;
}

.news-tab-selector.open .news-tab-dropdown {
    display: block;
    animation: ftExpand 0.15s ease-out;
}

.news-tab-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s ease;
    text-align: left;
}

.news-tab-option:hover {
    background: #f3f4f6;
}

.news-tab-gear {
    font-size: 11px;
    color: #9ca3af;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    margin-left: auto;
    padding: 2px 4px;
    border-radius: 4px;
}

.news-tab-option:hover .news-tab-gear {
    opacity: 1;
}

.news-tab-gear:hover {
    color: #2563eb;
    background: #e0e7ff;
}

.news-tab-option.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

/* ── Inline Ticker Search in Toolbar ── */
.toolbar-inline-ticker {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    max-width: 280px;
}

.toolbar-inline-ticker .ticker-autocomplete {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.toolbar-inline-ticker .ticker-autocomplete .w-full {
    border-width: 1px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.toolbar-inline-ticker .ticker-autocomplete input {
    padding: 5px 8px !important;
    font-size: 12px !important;
}

.toolbar-inline-ticker .ticker-autocomplete .flex-shrink-0 {
    padding-left: 8px !important;
}

.toolbar-inline-ticker .ticker-autocomplete .fa-search {
    font-size: 11px;
}

/* ── Ticker Bubbles Row (separate row below toolbar) ── */
.active-filters-row {
    display: none;
    padding: 8px 16px;
    border-top: 1px solid #f3f4f6;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.active-filters-row.has-active-filters {
    display: flex;
}

.active-filters-tickers {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.active-filters-tickers #selectedTickersBubbles {
    margin: 0 !important;
    min-height: auto !important;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.active-filters-tickers #selectedTickersBubbles .ticker-bubble {
    font-size: 11px !important;
    padding: 3px 8px !important;
    white-space: nowrap;
}

.active-filters-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* Divider between ticker bubbles and filter chips */
.active-filters-tickers:not(:empty)+.active-filters-chips:not(:empty)::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 16px;
    background: #d1d5db;
    margin-right: 2px;
    flex-shrink: 0;
}

/* (filter-toolbar-chips replaced by active-filters-row) */

.filter-toolbar-expanded {
    border-top: 1px solid #f3f4f6;
    padding: 12px 16px 14px;
    display: none;
}

.filter-toolbar-expanded.open {
    display: block;
    animation: ftExpand 0.2s ease-out;
}

@keyframes ftExpand {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 500px;
    }
}

.filter-toolbar-search {
    margin-bottom: 10px;
    max-width: 480px;
    position: relative;
    z-index: 100;
}

.filter-toolbar-search .ticker-autocomplete {
    margin-bottom: 0;
}

.filter-toolbar-search .ticker-autocomplete input {
    padding: 6px 10px !important;
    font-size: 13px !important;
}

.filter-toolbar-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-toolbar-dropdowns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.filter-toolbar-dropdowns>* {
    flex: 0 1 auto;
    min-width: 110px;
    max-width: 170px;
}

.filter-toolbar-dropdowns .direction-dropdown-toggle,
.filter-toolbar-dropdowns .sector-dropdown-toggle,
.filter-toolbar-dropdowns .tone-dropdown-toggle,
.filter-toolbar-dropdowns .time-dropdown-toggle {
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    border-width: 1px !important;
}

.filter-toolbar-toggles-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-toolbar-toggles-wrap #sidebarTogglesContainer {
    display: flex !important;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-toolbar-toggles-wrap #sidebarTogglesContainer>button {
    font-size: 11px !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
}

#filterToolbarToggle.active {
    background: #eff6ff;
    border-color: #3b82f6;
}

#filterToolbarToggle.active i {
    color: #3b82f6;
}

#toolbarUpgradeRow #freeTierUpgradePrompt {
    margin-top: 8px;
}

/* Force-hide leftColumn (sidebar replaced by toolbar) */
#leftColumn {
    display: none !important;
}

/* Filters minitab no longer needed (toolbar replaces sidebar) */
.filters-minitab {
    display: none !important;
}

/* =====================================
   ERROR NOTIFICATION ANIMATIONS
   Smooth slide-in/out animations for data load errors
   ===================================== */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* Prevent FOUC - hide body until loaded */
body:not(.loaded) {
    visibility: hidden;
}

body.loaded {
    visibility: visible;
}

/* Prevent flash of authenticated content on load - hide sidebars until auth check completes */
#leftColumn,
#rightSidebarContainer,
#mainNewsContent {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
}

#leftColumn.loaded,
#rightSidebarContainer.loaded,
#mainNewsContent.loaded {
    opacity: 1;
    visibility: visible;
}

/* Loading overlay spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Slow spin animation for icons */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

/* Fade-in animation for advanced filters */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out forwards;
}

/* =====================================
   SIMPLIFIED SIDEBAR STYLES
   Modern, clean design for the new sidebar
   ===================================== */

/* Ticker Bubbles - Modern gradient style */
.ticker-bubble {
    animation: fadeIn 0.2s ease-out;
}

.ticker-bubble:hover {
    transform: translateY(-1px);
}

.ticker-bubble .remove-ticker:hover {
    transform: scale(1.1);
}

/* Ticker bubble wrapper z-index for watchlist hover popup */
.ticker-bubble-wrapper {
    z-index: 1;
}

.ticker-bubble-wrapper:hover {
    z-index: 200;
}

.ticker-bubble-wrapper .watchlist-action-btn {
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Ticker bubbles container - organized layout */
#selectedTickersBubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
    padding: 4px 0;
}

/* Advanced Filters Toggle Button */
#advancedFiltersToggle:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

#advancedFiltersChevron {
    transition: transform 0.3s ease;
}

#advancedFiltersChevron.rotate-180 {
    transform: rotate(180deg);
}

/* Enhanced Ticker Search Input */
#tickerQuickInput:focus {
    outline: none;
}

#tickerQuickInput::placeholder {
    color: #9ca3af;
}

/* Primary Ticker Toggle Star */
.primary-ticker-toggle {
    transition: all 0.2s ease;
}

.primary-ticker-toggle:hover {
    transform: scale(1.1);
}

.primary-ticker-toggle.active i {
    color: #fbbf24 !important;
}

/* Filter Dropdowns - Enhanced hover states */
.direction-dropdown-toggle:hover,
.sector-dropdown-toggle:hover,
.tone-dropdown-toggle:hover,
.time-dropdown-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Toggle Buttons in Advanced Section */
#advancedFiltersContent button {
    transition: all 0.2s ease;
}

#advancedFiltersContent button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#advancedFiltersContent button.active,
#advancedFiltersContent button[data-active="true"] {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border-color: #2563eb !important;
}

/* Source Info Card */
.source-info-card {
    animation: fadeIn 0.3s ease-out;
}

/* Filter Chips Enhancement */
#unifiedFilterChips {
    transition: all 0.2s ease;
}

#unifiedFilterChips:empty::before {
    content: 'No filters active';
    color: #9ca3af;
    font-size: 0.75rem;
    font-style: italic;
}

/* Reset Button Enhancement */
#inlineResetFilters {
    transition: all 0.2s ease;
}

#inlineResetFilters:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Sticky Search Section */
.sticky {
    position: sticky;
    background: white;
}

/* Smooth transitions for all interactive elements */
button,
input,
select {
    transition: all 0.15s ease;
}

/* Focus ring for accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ===================================== */

/* SPA Content Transition */
#mainContentArea {
    transition: opacity 0.15s ease-in-out;
    opacity: 1;
}

#mainContentArea.transitioning {
    opacity: 0;
}

/* Dashboard-only controls - hidden by default, shown via JS */
.dashboard-only {
    display: none;
}

/* Educational Modal Styles */
#understoodEducationalBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

#understoodEducationalBtn:not(:disabled) {
    cursor: pointer;
}

/* ==================== THEME VARIABLES ==================== */
:root {
    /* Light Mode Colors */
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --border-primary: #e5e7eb;
    --border-secondary: #d1d5db;
    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    --dropdown-bg: #ffffff;
    --dropdown-hover: #f3f4f6;
    --input-bg: #ffffff;
    --input-border: #d1d5db;
}

[data-theme="dark"] {
    /* Dark Mode Colors - Enhanced Visibility */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e1;
    --border-primary: #475569;
    --border-secondary: #64748b;
    --card-bg: #1e293b;
    --card-border: #475569;
    --dropdown-bg: #1e293b;
    --dropdown-hover: #334155;
    --input-bg: #0f172a;
    --input-border: #475569;
}

/* MiniTabs for Sidebar Navigation */
.performance-minitab,
.filters-minitab,
.news-minitab {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
    display: none;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    padding: 0 12px;
}

.performance-minitab {
    right: 0;
    border-radius: 12px 0 0 12px;
}

.filters-minitab,
.news-minitab {
    left: 0;
    border-radius: 0 12px 12px 0;
}

.performance-minitab .minitab-icon,
.filters-minitab .minitab-icon,
.news-minitab .minitab-icon {
    font-size: 1.25rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.performance-minitab .minitab-label,
.filters-minitab .minitab-label,
.news-minitab .minitab-label {
    opacity: 0;
    margin-left: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.025em;
    white-space: nowrap;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.performance-minitab:hover,
.filters-minitab:hover,
.news-minitab:hover {
    width: 150px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 6px 24px rgba(37, 99, 235, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.performance-minitab:hover {
    transform: translateY(-50%) translateX(-4px);
}

.filters-minitab:hover,
.news-minitab:hover {
    transform: translateY(-50%) translateX(4px);
}

.performance-minitab:hover .minitab-icon,
.filters-minitab:hover .minitab-icon,
.news-minitab:hover .minitab-icon {
    transform: scale(1.1);
}

.performance-minitab:hover .minitab-label,
.filters-minitab:hover .minitab-label,
.news-minitab:hover .minitab-label {
    opacity: 1;
}

.performance-minitab:active,
.filters-minitab:active,
.news-minitab:active {
    transform: translateY(-50%) scale(0.95);
}

/* Desktop: Only show minitabs when sidebars are explicitly hidden */
@media (min-width: 1024px) {
    body.performance-hidden .performance-minitab {
        display: flex;
    }

    body.filters-hidden .filters-minitab {
        display: flex;
    }

    /* Never show news minitab on desktop */
    .news-minitab {
        display: none !important;
    }

    /* Hide filters minitab in grid view */
    body.grid-layout-mode .filters-minitab {
        display: none !important;
    }
}

/* Mobile: JavaScript controls minitab visibility */
@media (max-width: 1023px) {

    .performance-minitab,
    .filters-minitab,
    .news-minitab {
        z-index: 50;
    }
}

/* Smooth theme transitions */
*,
*::before,
*::after {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevent transition on page load */
.preload *,
.preload *::before,
.preload *::after {
    transition: none !important;
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* Blue Spawning Aura Animation - Game-style */
@keyframes spawnAura {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7),
            0 0 0 0 rgba(96, 165, 250, 0.5),
            inset 0 0 20px rgba(59, 130, 246, 0.3);
        transform: scale(0.95) translateY(10px);
        opacity: 0;
    }

    50% {
        box-shadow: 0 0 40px 10px rgba(59, 130, 246, 0.6),
            0 0 80px 20px rgba(96, 165, 250, 0.4),
            inset 0 0 30px rgba(59, 130, 246, 0.5);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
            0 2px 4px -1px rgba(0, 0, 0, 0.06),
            inset 0 0 0 rgba(59, 130, 246, 0);
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.4),
            0 0 40px rgba(96, 165, 250, 0.2);
    }

    50% {
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.6),
            0 0 60px rgba(96, 165, 250, 0.4);
    }
}

@keyframes slideInFromTop {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.news-card.spawning {
    animation: spawnAura 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    border: 2px solid rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(255, 255, 255, 1) 50%);
}

.news-card.spawning::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
            rgba(59, 130, 246, 0.4),
            rgba(96, 165, 250, 0.3),
            rgba(147, 197, 253, 0.2),
            rgba(59, 130, 246, 0.4));
    border-radius: inherit;
    z-index: -1;
    animation: pulseGlow 2s ease-in-out infinite;
    opacity: 0;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
}

.news-card.spawning .new-article-badge {
    animation: slideInFromTop 0.6s ease-out 0.4s both;
}

.new-article-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
}

.new-article-badge i {
    font-size: 10px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Robinhood-style Price Update Animations */
@keyframes priceFlashGreen {
    0% {
        background-color: rgba(34, 197, 94, 0.2);
        transform: scale(1);
    }

    50% {
        background-color: rgba(34, 197, 94, 0.4);
        transform: scale(1.05);
    }

    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

@keyframes priceFlashRed {
    0% {
        background-color: rgba(239, 68, 68, 0.2);
        transform: scale(1);
    }

    50% {
        background-color: rgba(239, 68, 68, 0.4);
        transform: scale(1.05);
    }

    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

@keyframes countUp {
    from {
        opacity: 0.6;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Train Schedule Flip Animation - for stats and numbers */
@keyframes flipNumber {
    0% {
        transform: translateY(0) rotateX(0deg);
        opacity: 1;
    }

    50% {
        transform: translateY(-20px) rotateX(90deg);
        opacity: 0;
    }

    51% {
        transform: translateY(20px) rotateX(-90deg);
        opacity: 0;
    }

    100% {
        transform: translateY(0) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes slideUpNumber {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Number flip container */
.number-flip-container {
    display: inline-block;
    position: relative;
    perspective: 200px;
}

.number-flip {
    display: inline-block;
    animation: flipNumber 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.number-slide {
    display: inline-block;
    animation: slideUpNumber 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Apply smooth transitions to all price elements */
.price-value,
.current-price,
.performance-change,
.percentage-change,
[data-price],
.tracker-price,
.tracker-change {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Price flash animation classes */
.price-flash-green {
    animation: priceFlashGreen 0.8s ease-out;
    border-radius: 6px;
    padding: 2px 6px;
}

.price-flash-red {
    animation: priceFlashRed 0.8s ease-out;
    border-radius: 6px;
    padding: 2px 6px;
}

.price-counting {
    animation: countUp 0.4s ease-out;
}

#navigationBar {
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: sticky;
    top: 0;
    z-index: 50;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Hide navbar together with filter toolbar on mobile */
@media (max-width: 767px) {
    #navigationBar.nav-hidden {
        transform: translateY(-100%);
    }
}

#miniMarketBar {
    position: sticky;
    top: 64px;
    z-index: 40;
    background: linear-gradient(to right, #f9fafb, #f3f4f6);
    border-bottom: 1px solid #e5e7eb;
    min-height: 32px;
}

.dashboard-shell {
    max-width: 1700px;
    width: 100%;
    margin: 0 auto;
    padding: 2.75rem 1.5rem 3rem;
}

.main-dashboard {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    border-radius: 32px;
    background: transparent;
    padding: 1.5rem;
    gap: 1.25rem;
    transition: all 0.3s ease;
}

/* Grid Layout Mode */
body.grid-layout-mode .dashboard-shell {
    max-width: 100%;
    padding: 0;
}

body.grid-layout-mode .main-dashboard {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    gap: 0;
    height: calc(100vh - 64px);
    max-height: calc(100vh - 64px);
    overflow: hidden;
    border-radius: 0;
}

body.grid-layout-mode .main-feed {
    width: 60% !important;
    flex: 0 0 60%;
    max-width: 60%;
    height: calc(100vh - 64px);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding-top: 6rem;
}

body.grid-layout-mode #rightSidebarContainer {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 35;
    padding-top: 0 !important;
    margin-top: 0 !important;
    flex: 0 0 40% !important;
}

/* Explicitly reset sidebar heights when NOT in grid mode */
body:not(.grid-layout-mode) #rightSidebarContainer {
    height: auto !important;
    min-height: auto !important;
    max-height: calc(100vh - 100px) !important;
}

body:not(.grid-layout-mode) .right-sidebar-card {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Hide scrollbar for rightSidebarContainer in grid mode */
body.grid-layout-mode #rightSidebarContainer::-webkit-scrollbar {
    width: 0px;
    display: none;
}

body.grid-layout-mode #rightSidebarContainer {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.grid-layout-mode .right-sidebar-card {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    border-radius: 0;
    border-right: none;
    border-top: none;
    border-bottom: none;
    padding: 0 !important;
    overflow: visible !important;
}

/* Grid Layout - Performance Tracker Expansion */
body.grid-layout-mode #rightPanelSlider {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

body.grid-layout-mode #performancePanel {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
}

body.grid-layout-mode #marketDataPanel {
    height: auto !important;
    overflow: visible !important;
    padding: 1rem !important;
}

/* Respect the hidden class for panel switching */
body.grid-layout-mode #performancePanel.hidden,
body.grid-layout-mode #marketDataPanel.hidden {
    display: none !important;
}

body.grid-layout-mode #performanceSummary {
    position: sticky !important;
    top: 7.5rem !important;
    z-index: 25 !important;
    background: white !important;
    overflow: visible !important;
    padding: 1rem 1rem 0.75rem 1rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 0.75rem !important;
}

body.grid-layout-mode #topPerformers {
    overflow: visible !important;
    padding: 0 !important;
}

body.grid-layout-mode .performance-leaders-scroll {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0px !important;
}

body.grid-layout-mode #rightSidebarTabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 35 !important;
    background: white !important;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
}

body.grid-layout-mode #rightSidebarStatsRegime {
    position: sticky !important;
    top: 3.25rem !important;
    z-index: 30 !important;
    background: white !important;
    padding: 0.75rem 1rem 0.5rem 1rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

body.grid-layout-mode #rightSidebarTabs .px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

body.grid-layout-mode #rightSidebarTabs .py-3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

body.grid-layout-mode #rightSidebarTabs button {
    font-size: 0.875rem !important;
    padding: 0.375rem 0.75rem !important;
}

/* Grid Layout - Larger Font Sizes for Performance Tracker */
body.grid-layout-mode #topPerformers {
    font-size: 1rem;
}

/* Hide header in grid layout mode */
body.grid-layout-mode header {
    display: none !important;
}

/* ==================== STICKY SORT HEADER ==================== */
/* Make the sort header sticky at the top while scrolling */
#mainSortHeader {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* Account for navbar (64px) + mobile upgrade bar (40px) */
    z-index: 45;
    background: linear-gradient(to bottom, #f9fafb 0%, #f9fafb 85%, rgba(249, 250, 251, 0.95) 100%);
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding: 1rem 0.25rem 0.75rem 0.25rem;
    margin-bottom: 0.5rem;
    margin-top: -1.5rem;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* On mobile, toolbar sits below navbar and transitions smoothly */
@media (max-width: 767px) {
    #mainSortHeader {
        top: 64px;
        transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: top;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Sort info button more tappable on mobile */
    #sortInfoBtn {
        width: 28px;
        height: 28px;
    }

    #sortInfoBtn i {
        font-size: 12px;
    }
}

/* On larger screens, account for navbar */
@media (min-width: 768px) {
    #mainSortHeader {
        top: 64px;
    }
}

/* Add shadow when scrolled */
#mainSortHeader.scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Hide redundant sort dropdown in grid mode */
body.grid-layout-mode #mainSortHeader {
    display: none !important;
}

/* Increase performance table row and cell sizes */
body.grid-layout-mode .performance-row {
    font-size: 1.05rem !important;
}

body.grid-layout-mode .performance-row td {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Ticker column text */
body.grid-layout-mode .performance-row td:first-child .font-semibold {
    font-size: 1.125rem !important;
}

body.grid-layout-mode .performance-row td .text-gray-900 {
    font-size: 1.125rem !important;
}

/* Signal badge */
body.grid-layout-mode .performance-row .inline-flex {
    font-size: 0.875rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* Time text and labels (Entry, Live, Position, Stop) */
body.grid-layout-mode .performance-row .text-gray-400,
body.grid-layout-mode .performance-row .text-gray-500 {
    font-size: 0.75rem !important;
}

/* Entry, Current, Position prices */
body.grid-layout-mode .performance-row .font-medium {
    font-size: 1.05rem !important;
}

/* Percentage changes */
body.grid-layout-mode .performance-row .text-green-600,
body.grid-layout-mode .performance-row .text-red-600 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
}

/* Table header */
body.grid-layout-mode #topPerformers thead {
    position: sticky;
    top: 9.5rem;
    z-index: 20;
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

body.grid-layout-mode #topPerformers thead th {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
    background: linear-gradient(to right, #f9fafb, #f3f4f6);
    border-bottom: 2px solid #e5e7eb;
}

/* Target actual performance card elements */
body.grid-layout-mode #topPerformers .text-xl {
    font-size: 1.5rem !important;
}

body.grid-layout-mode #topPerformers .text-lg {
    font-size: 1.25rem !important;
}

/* Grid Layout - News Card Typography Scaling */
body.grid-layout-mode .news-card .text-xs {
    font-size: 0.8rem !important;
}

body.grid-layout-mode .news-card .text-sm {
    font-size: 0.95rem !important;
}

body.grid-layout-mode .news-card .text-base {
    font-size: 1.05rem !important;
}

body.grid-layout-mode .news-card .text-lg {
    font-size: 1.25rem !important;
}

body.grid-layout-mode .news-card .text-xl {
    font-size: 1.5rem !important;
}

body.grid-layout-mode .news-card .text-2xl {
    font-size: 1.7rem !important;
}

body.grid-layout-mode .news-card .text-3xl {
    font-size: 1.9rem !important;
}

body.grid-layout-mode .news-card .text-\[10px\] {
    font-size: 0.7rem !important;
}

body.grid-layout-mode .news-card .text-\[9px\] {
    font-size: 0.65rem !important;
}

body.grid-layout-mode .news-card .text-\[11px\] {
    font-size: 0.78rem !important;
}

/* ==================== NEWS CARD INDICATOR STYLING ==================== */
/* Modern Horizontal Pills - Ultra Compact */
.technical-indicator-card {
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0.5rem 0.625rem !important;
    display: flex !important;
    align-items: center !important;
}

.technical-indicator-value {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.technical-indicator-icon {
    font-size: 0.875rem !important;
}

/* Economic Indicators - Horizontal Pills */
.economic-indicator-card {
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0.5rem 0.625rem !important;
    display: flex !important;
    align-items: center !important;
}

.economic-indicator-value {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

.economic-indicator-icon {
    font-size: 0.875rem !important;
}

/* Market Context - Compact but Emphasized */
.market-context-card {
    min-height: 85px !important;
    padding: 0.625rem !important;
}

.market-context-price {
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.market-context-regime {
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.market-context-trend {
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.market-context-icon {
    font-size: 1.125rem !important;
}

/* Responsive sizing */
@media (min-width: 640px) {
    .technical-indicator-value {
        font-size: 0.9375rem !important;
    }

    .economic-indicator-value {
        font-size: 0.875rem !important;
    }

    .market-context-price {
        font-size: 1.25rem !important;
    }

    .market-context-regime {
        font-size: 1.125rem !important;
    }

    .market-context-trend {
        font-size: 1.25rem !important;
    }
}

/* Market Data Panel Styling */
body.grid-layout-mode #marketDataPanel {
    padding: 1rem !important;
}

body.grid-layout-mode #marketDataContent {
    display: block !important;
    visibility: visible !important;
}

body.grid-layout-mode #marketDataContent table {
    width: 100% !important;
    font-size: 1.05rem !important;
}

body.grid-layout-mode #marketDataContent td {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

body.grid-layout-mode #marketDataContent .text-\[13px\] {
    font-size: 1.125rem !important;
}

body.grid-layout-mode #marketDataContent .text-\[11px\] {
    font-size: 1.05rem !important;
}

body.grid-layout-mode #marketDataContent .text-\[9px\] {
    font-size: 0.75rem !important;
}

/* Major Market Indices in Grid View - Larger and More Prominent */
body.grid-layout-mode #marketIndicesContent {
    padding: 0.5rem 0 !important;
}

body.grid-layout-mode #marketIndicesContent>div {
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
}

body.grid-layout-mode #marketIndicesContent .text-xs {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
}

body.grid-layout-mode #marketIndicesContent .text-3xl,
body.grid-layout-mode #marketIndicesContent .text-2xl {
    font-size: 3rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

body.grid-layout-mode #marketIndicesContent .text-sm {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

body.grid-layout-mode #marketIndicesContent .text-\[10px\] {
    font-size: 1rem !important;
    font-weight: 500 !important;
}

body.grid-layout-mode #marketIndicesContent .text-\[9px\] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

body.grid-layout-mode #marketIndicesContent .text-base {
    font-size: 1.25rem !important;
}

body.grid-layout-mode #marketIndicesContent .h-1 {
    height: 0.5rem !important;
}

body.grid-layout-mode #marketIndicesContent .rounded-full {
    border-radius: 0.5rem !important;
}

body.grid-layout-mode #topPerformers .text-base {
    font-size: 1.125rem !important;
}

body.grid-layout-mode #topPerformers .text-sm {
    font-size: 1rem !important;
}

body.grid-layout-mode #topPerformers .text-xs {
    font-size: 0.875rem !important;
}

body.grid-layout-mode #topPerformers .text-3xl {
    font-size: 2rem !important;
}

body.grid-layout-mode #topPerformers .text-2xl {
    font-size: 1.75rem !important;
}

/* Increase cell padding for table rows */
body.grid-layout-mode #topPerformers>div,
body.grid-layout-mode #topPerformers .py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

body.grid-layout-mode #topPerformers .px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Make cards larger with better spacing */
body.grid-layout-mode #topPerformers .rounded-xl {
    padding: 1.25rem !important;
}

body.grid-layout-mode #topPerformers .p-6 {
    padding: 1.25rem !important;
}

body.grid-layout-mode #topPerformers .p-3 {
    padding: 0.875rem !important;
}

/* Increase font weight for better readability */
body.grid-layout-mode #topPerformers .font-semibold {
    font-weight: 700 !important;
}

body.grid-layout-mode #topPerformers .font-bold {
    font-weight: 800 !important;
}

body.grid-layout-mode #topPerformers .text-xs {
    font-size: 1.125rem !important;
}

body.grid-layout-mode #topPerformers .text-sm {
    font-size: 1.25rem !important;
}

body.grid-layout-mode #topPerformers .text-base {
    font-size: 1.5rem !important;
}

body.grid-layout-mode #topPerformers .font-semibold,
body.grid-layout-mode #topPerformers .font-bold {
    font-weight: 600;
}

/* Larger ticker symbols */
body.grid-layout-mode #topPerformers [class*="ticker"],
body.grid-layout-mode #topPerformers .ticker-symbol {
    font-size: 1.5rem !important;
    font-weight: 700;
}

/* Larger prices and percentages */
body.grid-layout-mode #topPerformers .tracker-price,
body.grid-layout-mode #topPerformers .tracker-change,
body.grid-layout-mode #topPerformers [class*="price"],
body.grid-layout-mode #topPerformers [class*="percentage"] {
    font-size: 1.3rem !important;
}

/* Increase padding for better spacing */
body.grid-layout-mode #topPerformers>div {
    padding: 1.5rem !important;
}

/* Larger performance summary stats */
body.grid-layout-mode #performanceSummary {
    font-size: 0.95rem;
}

body.grid-layout-mode #performanceSummary .text-2xl,
body.grid-layout-mode #performanceSummary .text-3xl {
    font-size: 1.5rem !important;
}

body.grid-layout-mode #performanceSummary .text-xl {
    font-size: 1.25rem !important;
}

body.grid-layout-mode #performanceSummary .text-lg {
    font-size: 1.125rem !important;
}

/* Grid Layout - Sticky Controls Bar */
body.grid-layout-mode .grid-controls-bar {
    display: flex !important;
    flex-direction: column !important;
    position: fixed;
    top: 4rem;
    left: 4rem;
    width: 55%;
    z-index: 35;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0 0 20px 20px;
    padding: 0.75rem 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: left 0.35s ease, width 0.35s ease, border-radius 0.35s ease, transform 0.35s ease;
}

/* Center and expand width when performance panel is hidden */
body.performance-hidden.grid-layout-mode .grid-controls-bar {
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
}

/* Grid toggle button styles */
.grid-toggle-btn.active.bg-amber-500 {
    background-color: #f59e0b !important;
    color: white !important;
    border-color: #d97706 !important;
}

.grid-toggle-btn.active.bg-green-500 {
    background-color: #10b981 !important;
    color: white !important;
    border-color: #059669 !important;
}

.grid-toggle-btn.active.bg-violet-500 {
    background-color: #8b5cf6 !important;
    color: white !important;
    border-color: #7c3aed !important;
}

/* Show Filters Button (appears when filter bar is hidden) */
#showGridFiltersBtn {
    display: none;
}

body.grid-layout-mode .grid-controls-bar.hidden-on-scroll~#navigationBar #showGridFiltersBtn,
body.grid-layout-mode.filters-hidden #showGridFiltersBtn {
    display: inline-flex !important;
}

.main-feed {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    transition: max-width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        flex 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.left-sidebar-panel {
    position: relative;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    border-radius: 32px 0 0 32px;
    background: #fff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.left-sidebar-scroll {
    overflow-y: auto;
    height: 100%;
    padding: 30px;
}

.left-sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.left-sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 99px;
}

.sidebar-filter-card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    padding: 0.85rem 1rem;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.25);
}

.ticker-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #eef2ff;
    color: #312e81;
    border: 1px solid rgba(99, 102, 241, 0.35);
}

.ticker-chip button {
    border: none;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    padding: 0;
    cursor: pointer;
}

.filter-pill-select {
    appearance: none;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    font-weight: 600;
    color: #0f172a;
    padding: 0.35rem 2.5rem 0.35rem 0.9rem;
    position: relative;
}

.show-filters-button {
    display: inline-flex;
}

.show-filters-button.hidden {
    display: none !important;
}

.minimize-filters-btn {
    width: 36px;
    height: 36px;
}

@media (max-width: 768px) {
    .minimize-filters-btn {
        display: none !important;
    }
}

.ticker-autocomplete {
    position: relative;
}

.ticker-suggestions {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 200px;
    width: 100%;
    max-width: 340px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
    z-index: 80;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.35rem;
    box-sizing: border-box;
}

.ticker-suggestions.align-right {
    left: auto;
    right: 0;
}

.ticker-suggestions.dropup {
    top: auto;
    bottom: calc(100% + 0.35rem);
}

.sector-dropdown-wrapper {
    position: relative;
}

/* Grid-specific dropdown wrappers */
.sector-dropdown-wrapper-grid {
    position: relative;
}

.direction-dropdown-wrapper-grid {
    position: relative;
}

.time-dropdown-wrapper-grid {
    position: relative;
}

.ticker-autocomplete-grid {
    position: relative;
}

/* Grid dropdown menus - ensure they appear above everything */
.grid-controls-bar #gridSectorDropdownList,
.grid-controls-bar #gridDirectionDropdownList,
.grid-controls-bar #gridTimeDropdownList,
.grid-controls-bar #gridTickerSuggestions {
    z-index: 9999 !important;
    position: absolute !important;
}

/* Prevent dropdown cutoff in grid view - align right for last dropdowns */
#gridFiltersContainer .sector-dropdown,
#gridFiltersContainer .ticker-suggestions,
#gridFiltersContainer .direction-dropdown,
#gridFiltersContainer .source-dropdown,
#gridFiltersContainer #sectorDropdownList,
#gridFiltersContainer #tickerSuggestionsList,
#gridFiltersContainer #directionDropdownList,
#gridFiltersContainer #sourceDropdownList {
    right: 0;
    left: auto;
}

/* Time dropdown stays left-aligned */
#gridFiltersContainer .time-dropdown {
    left: 0;
    right: auto;
}

body.grid-layout-mode .sector-dropdown-wrapper-grid,
body.grid-layout-mode .direction-dropdown-wrapper-grid,
body.grid-layout-mode .time-dropdown-wrapper-grid,
body.grid-layout-mode .ticker-autocomplete-grid {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
}

.sector-dropdown-toggle {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    font-weight: 600;
    color: #0f172a;
}

.sector-count-badge {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}

.sector-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 250px;
    width: max-content;
    max-width: 340px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
    z-index: 90;
    max-height: 260px;
    overflow-y: auto;
    padding: 0.35rem;
}

.sector-dropdown.align-right {
    left: -100px;
    right: 0;
}

.sector-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 14px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    transform: rotate(45deg);
}

.sector-dropdown.dropup {
    top: auto;
}

/* Direction Dropdown Styles */
.direction-dropdown-wrapper {
    position: relative;
}

.direction-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 220px;
    width: max-content;
    max-width: 340px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
    z-index: 90;
    max-height: 260px;
    overflow-y: auto;
    padding: 0.35rem;
}

.direction-dropdown.align-right {
    left: auto;
    right: 0;
}

.direction-dropdown label {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.65rem;
    border-radius: 12px;
    font-size: 0.85rem;
    transition: all 0.15s ease;
    cursor: pointer;
}

.direction-dropdown label:hover {
    background: rgba(59, 130, 246, 0.08);
}

.direction-dropdown input[type="checkbox"] {
    margin-right: 0.5rem;
}

/* Source Dropdown Styles */
.source-dropdown-wrapper {
    position: relative;
}

.source-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 220px;
    width: max-content;
    max-width: 340px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
    z-index: 90;
    max-height: 260px;
    overflow-y: auto;
    padding: 0.35rem;
}

.source-dropdown.align-right {
    left: auto;
    right: 0;
}

.source-dropdown label {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.65rem;
    border-radius: 12px;
    font-size: 0.85rem;
    transition: all 0.15s ease;
    cursor: pointer;
}

.source-dropdown label:hover {
    background: rgba(59, 130, 246, 0.08);
}

.source-dropdown input[type="checkbox"] {
    margin-right: 0.5rem;
}

.source-count-badge {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}

.sector-dropdown.dropup::before {
    top: auto;
    bottom: -8px;
    transform: rotate(225deg);
}

.sector-dropdown button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.65rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
    border: none;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.sector-dropdown button .sector-option-check {
    width: 20px;
    height: 20px;
    border-radius: 99px;
    border: 1px solid rgba(15, 23, 42, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: transparent;
}

.sector-dropdown button.active {
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
}

.sector-dropdown button.active .sector-option-check {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.sector-dropdown .dropdown-empty {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
}

.ticker-suggestion {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.75rem;
    border-radius: 12px;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    transition: background 0.15s ease, color 0.15s ease;
}

.ticker-suggestion:hover {
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
}

.ticker-suggestion.active {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.ticker-suggestion .ticker-add {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}

.ticker-suggestion.empty {
    font-weight: 500;
    color: #94a3b8;
    justify-content: center;
}

/* Touch devices: always show action buttons and watchlist stars (no hover available) */
@media (hover: none) {
    .ticker-suggestion .ticker-suggestion-actions {
        opacity: 1 !important;
    }

    .binder-tab-watchlist {
        opacity: 1 !important;
    }

    .news-tab-gear {
        opacity: 1 !important;
    }
}

.toggle-track {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #e2e8f0;
    transition: background 0.2s ease;
    display: inline-block;
    position: relative;
}

.toggle-thumb {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
    transition: transform 0.2s ease;
    display: inline-block;
    margin-left: -30px;
    transform: translateX(0);
    pointer-events: none;
}

label.inline-flex>input:checked+.toggle-track {
    background: #22c55e;
}

label.inline-flex>input:checked+.toggle-track+.toggle-thumb {
    transform: translateX(16px);
}

/* Performance Pill Styling */
.performance-pill {
    animation: slideIn 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Bull position background - show bull image on the right at 15% width */
.performance-pill.bull-position {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.7) 0%, rgba(255, 255, 255, 0.75) 100%),
        url('../../images/bull-bg.png');
    background-size: auto, 15% auto;
    background-position: center, right 8px center;
    background-repeat: no-repeat, no-repeat;
}

/* Bull position with winning performance - green gradient */
.performance-pill.bull-position.performance-up {
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.7) 0%, rgba(255, 255, 255, 0.75) 100%),
        url('../../images/bull-bg.png');
    background-size: auto, 15% auto;
    background-position: center, right 8px center;
    background-repeat: no-repeat, no-repeat;
}

/* Bull position with losing performance - red gradient */
.performance-pill.bull-position.performance-down {
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.7) 0%, rgba(255, 255, 255, 0.75) 100%),
        url('../../images/bull-bg.png');
    background-size: auto, 15% auto;
    background-position: center, right 8px center;
    background-repeat: no-repeat, no-repeat;
}

/* Bear position background - show bear image on the right at 15% width */
.performance-pill.bear-position {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.7) 0%, rgba(255, 255, 255, 0.75) 100%),
        url('../../images/bear-bg.png');
    background-size: auto, 15% auto;
    background-position: center, right 8px center;
    background-repeat: no-repeat, no-repeat;
}

/* Bear position with winning performance - green gradient */
.performance-pill.bear-position.performance-up {
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.7) 0%, rgba(255, 255, 255, 0.75) 100%),
        url('../../images/bear-bg.png');
    background-size: auto, 15% auto;
    background-position: center, right 8px center;
    background-repeat: no-repeat, no-repeat;
}

/* Bear position with losing performance - red gradient */
.performance-pill.bear-position.performance-down {
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.7) 0%, rgba(255, 255, 255, 0.75) 100%),
        url('../../images/bear-bg.png');
    background-size: auto, 15% auto;
    background-position: center, right 8px center;
    background-repeat: no-repeat, no-repeat;
}

/* Neutral/Mixed positions - no image */
.performance-pill.neutral-position {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.7) 0%, rgba(255, 255, 255, 0.75) 100%);
}

.performance-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Thesis Container Animation */
.thesis-container {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Advanced Filters Dropdown Animation */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dropdownFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

/* Advanced Filters Dropdown Styling */
#advancedFiltersContent {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s;
}

#advancedFiltersContent.opening {
    animation: dropdownFadeIn 0.2s ease-out forwards;
}

#advancedFiltersContent.closing {
    animation: dropdownFadeOut 0.2s ease-out forwards;
}

/* More button active state - light up when filters are active */
#advancedFiltersToggle {
    transition: all 0.2s ease;
}

#advancedFiltersToggle.has-active-filters {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

/* Smooth color transition for More button */
[data-theme="dark"] #advancedFiltersToggle.has-active-filters {
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

.legend-title {
    font-size: 0.85rem;
    font-weight: 600;
}

.legend-copy {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

#rightSidebarContainer {
    position: sticky;
    top: 100px;
    width: 420px;
    flex: 0 0 auto;
    min-width: 280px;
    height: auto;
    max-height: calc(100vh - 100px);
    align-self: flex-start;
    background: transparent;
    border-left: none;
    box-shadow: none;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
    backface-visibility: hidden;
    contain: paint;
}

/* Regular view (non-grid) - ensure proper sticky behavior */
body:not(.grid-layout-mode) #rightSidebarContainer {
    position: sticky !important;
    top: 100px !important;
    height: calc(100vh - 100px) !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: visible !important;
}

body:not(.grid-layout-mode) .right-sidebar-card {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

/* Override for grid layout mode - force full width */
body.grid-layout-mode #rightSidebarContainer {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    top: 100px !important;
    position: sticky !important;
}

.right-sidebar-card {
    position: relative;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    border-radius: 0 32px 32px 0;
    background: #fff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    contain: paint;
}

#rightPanelSlider {
    position: relative;
    min-height: 800px;
}

/* Desktop sidebar tracker viewport behavior */
@media (min-width: 1025px) {
    body:not(.grid-layout-mode) #rightPanelSlider {
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    body:not(.grid-layout-mode) #performancePanel {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body:not(.grid-layout-mode) #rightSidebarStatsRegime,
    body:not(.grid-layout-mode) #performanceSummary {
        flex: 0 0 auto !important;
    }

    body:not(.grid-layout-mode) #rightSidebarStatsRegime {
        margin-bottom: 12px !important;
    }

    body:not(.grid-layout-mode) #performanceSummary {
        margin-bottom: 12px !important;
    }

    body:not(.grid-layout-mode) #topPerformers {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body:not(.grid-layout-mode) #topPerformers>div.bg-white.rounded-lg.border {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }

    body:not(.grid-layout-mode) #topPerformers .perf-scroll-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: auto !important;
        padding-bottom: 10px !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        position: relative;
    }

    body:not(.grid-layout-mode) #topPerformers .perf-table tbody tr:last-child td {
        padding-bottom: 14px !important;
    }

    body:not(.grid-layout-mode) #topPerformers .perf-table thead {
        position: sticky;
        top: 0;
        z-index: 14;
    }
}

.sliding-panel {
    position: absolute;
    inset: 0;
}

.performance-leaders-scroll {
    max-height: 600px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.performance-leaders-scroll::-webkit-scrollbar {
    width: 0px;
    display: none;
}

/* Grid mode overrides to show scrollbar */
body:not(.grid-layout-mode) .performance-leaders-scroll::-webkit-scrollbar {
    width: 0px !important;
    display: none !important;
}

.performance-leaders-scroll::-webkit-scrollbar-thumb {
    background: transparent;
}

.hide-scrollbar::-webkit-scrollbar {
    width: 0px;
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media (max-width: 1024px) {

    /* Mini Market Bar - adjust for mobile nav height */
    #miniMarketBar {
        top: 64px !important;
        font-size: 0.75rem;
        overflow-x: auto;
    }

    #miniMarketBar .flex {
        flex-wrap: nowrap;
        gap: 0.75rem;
        min-width: max-content;
    }

    #miniMarketIndices {
        flex-shrink: 0;
    }

    #miniMarketRegime {
        flex-shrink: 0;
    }

    /* Mobile view state management */
    body.mobile-view-news #leftColumn,
    body.mobile-view-news #rightSidebarContainer {
        display: none !important;
    }

    body.mobile-view-news #mainNewsContent {
        display: block !important;
    }

    body.mobile-view-filters #leftColumn {
        display: block !important;
    }

    body.mobile-view-filters #mainNewsContent,
    body.mobile-view-filters #rightSidebarContainer {
        display: none !important;
    }

    body.mobile-view-performance #rightSidebarContainer {
        display: block !important;
    }

    body.mobile-view-performance #leftColumn,
    body.mobile-view-performance #mainNewsContent {
        display: none !important;
    }

    .mobile-action-btn {
        border: 1px solid transparent;
    }

    .mobile-action-btn.active {
        border-color: rgba(59, 130, 246, 0.4);
        box-shadow: 0 12px 25px rgba(59, 130, 246, 0.2);
    }

    /* Full-screen mobile layouts - remove boxes, maximize content */
    .dashboard-shell {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .main-dashboard {
        flex-direction: column;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 0 !important;
        background: #f8fafc;
    }

    /* Left Sidebar (Filters) - Full screen, no padding waste */
    #leftColumn {
        flex: 1 1 100%;
        width: 100% !important;
        position: relative;
        top: 0 !important;
        height: auto !important;
        margin: 0 !important;
    }

    .left-sidebar-panel {
        position: relative;
        top: 0;
        height: auto;
        overflow: visible;
        border-right: none;
        border-bottom: none;
        border-radius: 0 !important;
        box-shadow: none !important;
        min-height: 800px;
        background: #fff;
    }

    .left-sidebar-scroll {
        padding: 1rem !important;
    }

    /* Main News Feed - Full width, no wasted space */
    .main-feed {
        order: 2;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: calc(100vh - 120px);
    }

    .news-feed {
        padding: 0.75rem !important;
    }

    .news-card {
        border-radius: 16px !important;
        margin-bottom: 0.75rem !important;
    }

    /* Right Sidebar (Performance) - Full screen */
    #rightSidebarContainer {
        position: relative;
        width: 100% !important;
        height: auto !important;
        top: 0 !important;
        margin: 0 !important;
        flex: 1 1 100%;
    }

    .right-sidebar-card {
        border-radius: 0 !important;
        box-shadow: none !important;
        min-height: 800px;
        background: #fff;
    }

    .performance-leaders-scroll {
        max-height: none;
        overflow-y: visible;
        padding: 0.75rem !important;
    }

    /* Market data cards - better spacing */
    .market-data-grid {
        padding: 0.75rem !important;
        gap: 0.5rem;
    }

    .market-data-card {
        margin: 0.25rem 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 640px) {

    /* Mini Market Bar - ultra compact for small screens */
    #miniMarketBar {
        top: 64px !important;
        font-size: 0.625rem;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }

    #miniMarketBar>div {
        padding: 0.375rem 0.5rem !important;
        min-width: max-content;
    }

    #miniMarketBar .flex {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }

    #miniMarketIndices {
        gap: 0.375rem !important;
        font-size: 0.625rem;
        flex-shrink: 0;
    }

    #miniMarketIndices>* {
        white-space: nowrap;
    }

    #miniMarketRegime {
        gap: 0.25rem !important;
        flex-shrink: 0;
    }

    #miniMarketRegime>* {
        white-space: nowrap;
    }

    /* Even more aggressive space optimization for small screens */
    .dashboard-shell {
        padding: 0 !important;
    }

    .main-dashboard {
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Filters - maximize vertical space */
    .left-sidebar-scroll {
        padding: 0.75rem !important;
    }

    .sidebar-filter-card {
        border-radius: 12px;
        padding: 0.75rem !important;
    }

    /* News cards - tighter but readable */
    .news-feed {
        padding: 0.5rem !important;
    }

    .news-card {
        border-radius: 12px !important;
        margin-bottom: 0.5rem !important;
    }

    .news-card .card-front {
        padding: 1.25rem !important;
    }

    .news-card .full-view-content {
        padding: 0.75rem !important;
    }

    /* Performance panel - full height utilization */
    .right-sidebar-card {
        min-height: 800px;
        padding: 0 !important;
    }

    .performance-leaders-scroll {
        padding: 0.5rem !important;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    /* Ensure proper display states */
    body.mobile-view-filters #leftColumn,
    body.mobile-view-performance #rightSidebarContainer,
    body.mobile-view-news #mainNewsContent {
        display: block !important;
        width: 100% !important;
        min-height: calc(100vh - 120px);
    }

    #leftColumn,
    #mainNewsContent,
    #rightSidebarContainer {
        display: block;
    }

    /* Tab panels - better mobile spacing */
    #rightPanelSlider {
        padding: 0;
    }

    #performancePanel,
    #marketDataPanel {
        padding: 0.5rem !important;
    }
}

.news-card {
    border: none;
    border-radius: 20px;
    margin: 0 auto 1.5rem auto;
    width: 100%;
    max-width: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: #ffffff;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    will-change: transform;
}

/* Collapsed view */
.news-card.collapsed {
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(59, 130, 246, 0.15);
    transform: translateY(-3px);
}

/* =============================================
   2-COLUMN TLDR + COMPANIES GRID
   ============================================= */
.card-tldr-grid {
    display: grid;
    grid-template-columns: 7fr auto 3fr;
    gap: 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: background 0.2s ease;
    margin-top: 4px;
}

.card-tldr-grid:hover {
    background: #f1f5f9;
}

.card-tldr-divider {
    width: 1px;
    background: linear-gradient(to bottom, transparent, #cbd5e1, transparent);
    margin: 6px 0;
}

.card-companies-panel {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.card-companies-panel::-webkit-scrollbar {
    width: 3px;
}

.card-companies-panel::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.company-entry {
    transition: background 0.15s ease;
}

.company-entry:hover {
    background: rgba(59, 130, 246, 0.04);
}

/* Responsive: stack on mobile */
@media (max-width: 640px) {
    .card-tldr-grid {
        grid-template-columns: 1fr;
    }

    .card-tldr-divider {
        width: auto;
        height: 1px;
        background: linear-gradient(to right, transparent, #cbd5e1, transparent);
        margin: 0 16px;
    }

    .card-companies-panel {
        max-height: 200px;
    }
}

/* =============================================
   WALL STREET SIGNAL BORDER STRIP
   Visual urgency indicator (Bloomberg/Reuters style)
   ============================================= */
.news-card[data-signal="bullish"],
.news-card[data-signal="bearish"],
.news-card[data-signal="neutral"],
.news-card[data-signal="mixed"] {
    border: 1px solid rgba(148, 163, 184, 0.35);
}

/* =============================================
   BADGE INFO TOOLTIPS
   Click-to-show explanations inside badges
   ============================================= */
/* .badge-tooltip-wrap base is defined in toolbar section above */

.badge-info-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 290px;
    padding: 10px 12px;
    background: #1e293b;
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    z-index: 60;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}

/* Arrow pointing up */
.badge-info-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #1e293b;
    border-left: 1px solid rgba(100, 116, 139, 0.35);
    border-top: 1px solid rgba(100, 116, 139, 0.35);
}

/* =============================================
   SOCIAL ENGAGEMENT BAR
   FB-style hover-to-expand reactions for cards
   ============================================= */
.social-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 0.25rem;
}

.social-reactions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

/* Wrapper for the trigger + flyout */
.social-react-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Single trigger button (👍 + total count) */
.social-react-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 0.85rem;
    color: #64748b;
    transition: all 0.18s ease;
    user-select: none;
    line-height: 1;
}

.social-react-trigger:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.3);
}

.social-react-trigger.active {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.35);
    color: #6366f1;
}

.social-react-emoji {
    font-size: 1rem;
    line-height: 1;
}

/* Inline emoji + count pairs */
.social-react-counts {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}

.react-count-pair {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.react-count-emoji {
    font-size: 0.85rem;
    line-height: 1;
}

.react-count-num {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1;
    min-width: 8px;
    text-align: center;
}

.social-react-trigger.active .react-count-num {
    color: #6366f1;
}

/* Flyout bubble with all reactions */
.social-flyout {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    display: flex;
    align-items: center;
    gap: 2px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 28px;
    padding: 6px 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    z-index: 20;
}

/* Invisible bridge from trigger to flyout */
.social-flyout::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
}

.social-react-wrap:hover .social-flyout {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

.social-flyout-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 1.25rem;
    transition: transform 0.15s ease, background 0.15s;
    line-height: 1;
}

.social-flyout-btn:hover {
    transform: scale(1.35);
    background: #f1f5f9;
}

.social-flyout-btn.active {
    background: rgba(99, 102, 241, 0.12);
}

.social-reaction-count {
    font-size: 0.72rem;
    font-weight: 600;
    min-width: 8px;
    text-align: center;
}

.social-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.social-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: none;
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font-size: 0.78rem;
    color: #64748b;
    transition: all 0.18s ease;
    user-select: none;
}

.social-action-btn:hover {
    background: #f1f5f9;
    color: #6366f1;
}

.social-action-btn i {
    font-size: 0.82rem;
}

/* ── Card engagement bar (disclaimer left + actions right — matches detail page) ── */
.card-engagement-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    margin-top: 10px;
    border-top: 1px solid #e5e7eb;
}

.card-engagement-left {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
}

.card-engagement-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Style the social bar inside engagement bar to match detail page buttons */
.card-engagement-actions .social-bar {
    padding: 0;
    border-top: none;
    margin-top: 0;
    gap: 0;
}

.card-engagement-actions .social-bar .social-actions {
    display: none;
}

.card-engagement-actions .social-react-trigger {
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-size: 0.85rem;
    gap: 5px;
}

.card-engagement-actions .social-react-trigger:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Bookmark button in engagement bar */
.card-bookmark-btn.is-bookmarked {
    color: #7c3aed;
    border-color: #c4b5fd;
    background: #f5f3ff;
}

.card-bookmark-btn.is-bookmarked:hover {
    background: #ede9fe;
}

.card-footer-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-footer-disclaimer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    font-weight: 500;
    color: #b0b5bf;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
}

.card-footer-disclaimer:hover {
    color: #7c3aed;
    text-decoration: underline;
}

.card-footer-disclaimer i {
    font-size: 0.58rem;
}

.detail-footer-disclaimer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.15s;
}

.detail-footer-disclaimer:hover {
    color: #7c3aed;
    text-decoration: underline;
}

.card-footer-label i {
    font-size: 0.7rem;
}

.card-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.card-footer-btn:hover {
    background: #f1f5f9;
}

.card-footer-btn i {
    font-size: 0.82rem;
}

.card-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: #6366f1;
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.01em;
}

.card-footer-cta:hover {
    background: #4f46e5;
    gap: 8px;
}

.card-footer-cta i {
    font-size: 0.65rem;
}

/* ── Save button next to headline ── */
.detail-save-title-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    color: #9ca3af;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.18s;
    flex-shrink: 0;
    margin-top: 2px;
}

.detail-save-title-btn:hover {
    background: #f9fafb;
    color: #6366f1;
    border-color: #c7d2fe;
}

.detail-save-title-btn .fas {
    color: #6366f1;
}

/* ── Detail engagement bar (disclaimer left + reactions right) ── */
.detail-engagement-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.detail-actions-left {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
}

.detail-react-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

/* Make the reaction trigger match detail-action-btn style */
.detail-actions-right .social-react-trigger {
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-size: 0.85rem;
    gap: 5px;
}

.detail-actions-right .social-react-trigger:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.detail-actions-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.detail-action-btn:hover {
    background: #f9fafb;
    color: #374151;
    border-color: #d1d5db;
}

.detail-action-btn i {
    font-size: 0.7rem;
}

.detail-action-badge {
    background: #eef2ff;
    color: #6366f1;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
}

/* Flyout per-emoji count */
.flyout-count {
    display: block;
    font-size: 0.55rem;
    font-weight: 700;
    color: #6b7280;
    text-align: center;
    line-height: 1;
    margin-top: -2px;
}

/* Sheet reactions row (inside comments bottom sheet) */
.sheet-reactions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 10px;
    border-bottom: 1px solid #f1f5f9;
}

.sheet-reactions .detail-react-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sheet-reactions-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sheet-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.sheet-action-pill:hover {
    background: #f9fafb;
    color: #374151;
    border-color: #d1d5db;
}

.sheet-action-pill i {
    font-size: 0.68rem;
}

/* Detail page social/comments section */
.social-detail-section {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.social-detail-reactions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

/* Base style for detail-page reaction buttons (used in buildDetailReactionsHTML / buildDetailSocialHTML) */
.social-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: #f1f5f9;
    cursor: pointer;
    font-size: 0.8rem;
    color: #64748b;
    transition: all 0.18s ease;
    user-select: none;
    line-height: 1;
}

.social-reaction-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
    color: #6366f1;
    transform: scale(1.08);
}

.social-reaction-btn.active {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
    color: #6366f1;
    font-weight: 600;
}

.social-detail-reactions .social-reaction-btn {
    padding: 6px 12px;
    font-size: 0.88rem;
}

.comments-section {
    margin-top: 1rem;
}

.comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.comments-header h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.comments-count-badge {
    font-size: 0.72rem;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.comment-input-wrap {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.comment-input {
    flex: 1;
    padding: 0.6rem 0.85rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #1e293b;
    font-size: 0.85rem;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.comment-input:focus {
    border-color: #6366f1;
}

.comment-input::placeholder {
    color: #94a3b8;
}

.comment-submit-btn {
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
}

.comment-submit-btn:hover {
    opacity: 0.9;
    transform: scale(1.03);
}

.comment-submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.comment-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.comment-author {
    font-size: 0.82rem;
    font-weight: 600;
    color: #6366f1;
}

.comment-time {
    font-size: 0.72rem;
    color: #94a3b8;
}

.comment-content {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.45;
    word-break: break-word;
}

.comment-delete-btn {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.72rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.comment-delete-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.comments-login-prompt {
    text-align: center;
    padding: 1rem;
    color: #94a3b8;
    font-size: 0.85rem;
}

.comments-login-prompt a {
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
}

.load-more-comments {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    font-size: 0.82rem;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}

.load-more-comments:hover {
    background: #e2e8f0;
}

.detail-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #64748b;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.18s;
    margin-top: 0.75rem;
}

.detail-share-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
    color: #6366f1;
}

/* =============================================
   PRIMARY POSITION QUICK-GLANCE ROW
   Always visible entry/current/P&L summary
   ============================================= */
.position-quickglance {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    margin-top: 0.5rem;
    transition: all 0.2s ease;
}

.position-quickglance:hover {
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
}

.position-quickglance .qg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.position-quickglance .qg-label {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 2px;
}

.position-quickglance .qg-value {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.position-quickglance .qg-divider {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    flex-shrink: 0;
}

/* PnL coloring */
.position-quickglance .qg-positive {
    color: #059669;
}

.position-quickglance .qg-negative {
    color: #dc2626;
}

.position-quickglance .qg-neutral {
    color: #64748b;
}

/* Ticker header badge */
.card-ticker-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: linear-gradient(135deg, #95a6bd 0%, #4873d8 100%);
    color: white;
    border-radius: 6px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.card-ticker-badge:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.card-ticker-badge .ticker-live-dot {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.card-ticker-price {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.85;
    margin-left: 2px;
}

/* Risk/Reward compact meter */
.risk-reward-meter {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 10px;
    font-weight: 600;
}

.risk-reward-meter .rr-bar {
    width: 40px;
    height: 4px;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
    border-radius: 2px;
    position: relative;
}

.risk-reward-meter .rr-marker {
    position: absolute;
    top: -2px;
    width: 8px;
    height: 8px;
    background: white;
    border: 2px solid #1e40af;
    border-radius: 50%;
    transform: translateX(-50%);
    transition: left 0.3s ease;
}

.news-card[data-state="expanded"] {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(59, 130, 246, 0.15);
}

/* Smooth card transitions */
.full-view-content {
    will-change: opacity, transform;
}

.card-focus-highlight {
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.35) !important;
    transform: scale(1.01);
    position: relative;
    z-index: 20;
}

.direction-badge,
.impact-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
}

.badge-bullish {
    background: #ecfdf3;
    color: #047857;
    border-color: #bbf7d0;
}

.badge-bearish {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecdd3;
}

.badge-neutral {
    background: #f3f4f6;
    color: #374151;
    border-color: #e5e7eb;
}

.badge-impact-low {
    background: #ecfdf3;
    color: #047857;
    border-color: #bbf7d0;
}

.badge-impact-mid {
    background: #eef2ff;
    color: #1d4ed8;
    border-color: #c7d2fe;
}

.badge-impact-high {
    background: #f5f3ff;
    color: #6b21a8;
    border-color: #ddd6fe;
}

.inline-labeled-select {
    position: relative;
}

.inline-labeled-select .inline-label {
    position: absolute;
    left: 12px;
    top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    pointer-events: none;
    line-height: 1;
    z-index: 2;
    background: linear-gradient(90deg, #fff 0%, #fff 60%, rgba(255, 255, 255, 0) 100%);
    padding-right: 6px;
}

.inline-labeled-select select {
    padding-top: 1.35rem;
    padding-left: 12px;
    position: relative;
    z-index: 1;
}

.news-card .card-front {
    padding: 2.5rem;
}

.news-card .new-article-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 12px rgba(239, 68, 68, 0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
    animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    z-index: 10;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.15);
    }
}

.news-card .new-article-dot.hidden {
    opacity: 0;
    transform: scale(0);
    animation: none;
}

/* New Articles Counter Badge */
.new-articles-badge {
    position: fixed;
    top: 80px;
    right: 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 24px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.9);
    z-index: 1000;
    animation: slide-in-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.new-articles-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.9);
}

.new-articles-badge .badge-icon {
    animation: spin 2s linear infinite;
}

@keyframes slide-in-bounce {
    0% {
        transform: translateX(400px);
        opacity: 0;
    }

    60% {
        transform: translateX(-20px);
        opacity: 1;
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.card-summary-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 24px;
    padding: 1.5rem;
    background: linear-gradient(145deg, #f8fafc 0%, #eef2ff 60%, #ffffff 100%);
}

.card-detail-section {
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.news-card:not(.collapsed) .card-detail-section {
    opacity: 1;
    transform: translateY(0);
}

/* Primary Ticker Preview - visible when collapsed, hidden when expanded */
.primary-ticker-preview {
    transition: opacity 0.25s ease, max-height 0.35s ease;
    max-height: 300px;
    opacity: 1;
}

.news-card:not(.collapsed) .primary-ticker-preview {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ==============================================
   NEWS CARDS RESPONSIVE GRID LAYOUT
   ============================================== */

/* Default: Single-column scrollable feed */
.news-feed {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    transition: gap 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hero card: first child (single column, no spanning needed) */
.news-feed>.news-card:first-child {
    /* Single column layout — no grid-column spanning */
}

/* Single column on narrow screens */
@media (max-width: 900px) {
    .news-feed {
        grid-template-columns: 1fr !important;
    }
}

/* Single column when performance sidebar is minimized */
body.performance-hidden .news-feed {
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* Note: filters-hidden no longer auto-triggers extra columns because
   the sidebar has been replaced by the inline filter toolbar.
   Column count is now user-controlled via the view toggle button. */

/* ==================== GRID LAYOUT MODE OVERRIDES ==================== */
/* When in grid layout mode, apply same responsive behavior */
body.grid-layout-mode .news-feed {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
}

body.grid-layout-mode.performance-hidden .news-feed {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
}

/* ==================== FORCED COLUMN COUNTS ==================== */
/* Maximum specificity to ensure forced columns always override responsive behavior */

/* Forced columns - Works WITHOUT grid-layout-mode class (highest priority) */
body[data-forced-columns="1"] .news-feed {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    transition: grid-template-columns 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        gap 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body[data-forced-columns="2"] .news-feed {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    transition: grid-template-columns 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        gap 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 3-col option removed — max 2 columns */

/* Subtle animation effect during column transitions */
body[data-forced-columns] .news-feed .news-card {
    animation: cardReflow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cardReflow {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    20% {
        opacity: 0.85;
        transform: scale(0.98);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Grid-layout-mode forced columns (simplified - sidebar always hidden) */
body.grid-layout-mode[data-forced-columns="1"] .news-feed,
body.grid-layout-mode[data-forced-columns="1"] #analysisResults {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
}

body.grid-layout-mode[data-forced-columns="2"] .news-feed,
body.grid-layout-mode[data-forced-columns="2"] #analysisResults {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
}

/* 3-col grid-layout-mode option removed — max 2 columns */

/* Mobile responsive - always single column on small screens */
@media (max-width: 768px) {

    .news-feed,
    body.grid-layout-mode .news-feed,
    body[data-forced-columns] .news-feed {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Hide view toggle on mobile */
    #viewToggleButton {
        display: none !important;
    }
}

/* Tablet responsive - max 2 columns on medium screens */
@media (min-width: 769px) and (max-width: 1200px) {

    /* 3-col tablet fallback removed — max 2 columns */
}

/* ==============================================
   VIEW TOGGLE BUTTON STYLING
   ============================================== */

/* Single cycling grid button */
#viewToggleButton {
    user-select: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

#viewToggleButton::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: inherit;
}

#viewToggleButton:active {
    transform: scale(0.96);
}

#viewToggleButton:active::before {
    transform: scale(1);
    opacity: 1;
    transition: transform 0s, opacity 0s;
}

/* Smooth label and icon transitions */
#viewToggleButton i,
#viewToggleButton span {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#viewToggleButton:hover i,
#viewToggleButton:hover span {
    transform: scale(1.05);
}

/* Smooth card entrance animations */
.news-card {
    animation: cardFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Stagger animation for cards */
.news-card:nth-child(1) {
    animation-delay: 0.05s;
}

.news-card:nth-child(2) {
    animation-delay: 0.1s;
}

.news-card:nth-child(3) {
    animation-delay: 0.15s;
}

.news-card:nth-child(4) {
    animation-delay: 0.2s;
}

.news-card:nth-child(5) {
    animation-delay: 0.25s;
}

.news-card:nth-child(6) {
    animation-delay: 0.3s;
}

@media (min-width: 900px) {
    .main-dashboard {
        display: flex;
        align-items: flex-start;
    }

    .card-summary-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.company-tab-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    overflow-x: auto;
    padding-bottom: 0.25rem;
    white-space: nowrap;
    align-items: flex-end;
    margin-bottom: -1px;
    cursor: grab;
    user-select: none;
}

.company-tab-row.dragging {
    cursor: grabbing;
}

.company-tab-row::-webkit-scrollbar {
    height: 4px;
}

.company-tab-row::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 9999px;
}

/* Thin scrollbars for summary sections */
.summary-scroll::-webkit-scrollbar {
    width: 3px;
}

.summary-scroll::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.4);
    border-radius: 99px;
}

.summary-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* Hide expand indicator when card is expanded */
.trading-card:not(.collapsed) .expand-indicator {
    display: none;
}

.binder-tab-row {
    gap: 0.5rem;
}

.company-tab {
    position: relative;
    padding: 0.6rem 1rem 0.4rem;
    margin: 4px;
    border-radius: 12px 12px 0 0;
    border: 1px solid rgba(148, 163, 184, 0.7);
    border-bottom: none;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    font-size: 0.75rem;
    font-weight: 600;
    color: #475467;
    box-shadow: none;
    transition: all 0.2s ease;
    flex: 0 0 auto;
    min-width: 110px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.company-tab.binder-tab {
    margin-bottom: -4px;
}

.company-tab.active {
    border: 3px solid #3b82f6;
    border-bottom: none;
    color: #1e40af;
    box-shadow: 0 -3px 8px rgba(59, 130, 246, 0.25), inset 0 -2px 0 rgba(37, 99, 235, 0.15);
    font-weight: 700;
    transform: translateY(-2px);
}

/* Clean Performance-Based Tab Backgrounds (simplified) */
.company-tab.performance-up {
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.5) 0%, rgba(255, 255, 255, 0.7) 100%);
}

.company-tab.performance-down {
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.5) 0%, rgba(255, 255, 255, 0.7) 100%);
}

/* Simplified position badge */
.position-badge-simple {
    transition: all 0.2s ease;
}

.position-badge-simple:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.news-card {
    cursor: pointer;
}

/* Timestamp Tooltip Styles */
.timestamp-tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.timestamp-tooltip {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
    text-align: right;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    width: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.timestamp-tooltip::before {
    content: '';
    position: absolute;
    right: 8px;
    top: -4px;
    width: 8px;
    height: 8px;
    background: rgba(15, 23, 42, 0.95);
    transform: rotate(45deg);
}

/* Click to toggle - stays open when active */
.timestamp-tooltip-container.active .timestamp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Also show on hover for discoverability */
.timestamp-tooltip-container:hover .timestamp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Ensure hidden class overrides hover state */
.timestamp-tooltip.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-4px) !important;
}

/* Styled time elements within tooltip */
.timestamp-tooltip .tooltip-time {
    color: #60a5fa;
    font-weight: 600;
    font-family: 'Arial', 'Helvetica', 'Calibri', sans-serif;
}

.company-tab-panel {
    background: #f8fafc;
    border-radius: 0 0 18px 18px;
    overflow: visible;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 2000px;
    opacity: 1;
    visibility: visible;
}

/* Smooth animation for collapsed state */
.news-card.collapsed .company-tab-panel {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    overflow: hidden;
}

/* =============================================
   ANALYSIS DATA SECTION (light theme redesign)
   ============================================= */
.analysis-data-section {
    transition: all 0.2s ease;
}

.analysis-data-section:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.analysis-data-section .grid>div {
    transition: all 0.15s ease;
}

.analysis-data-section .grid>div:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* Expandable content animations - TLDR and Key Insights */
.expandable-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.expandable-content.expanded {
    max-height: 5000px;
}

.binder-tab-label {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.binder-tab-ticker {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tab-price {
    font-weight: 500;
    background-color: #ffffffa8;
}

/* =====================================
   SIDEBAR FADE-SLIDE ANIMATIONS
   Synchronized fade + slide for both sidebars
   ===================================== */

/* Left sidebar — collapsed (fade-slide left) */
body.filters-hidden #leftColumn {
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    opacity: 0;
    transform: translateX(-20px);
    overflow: hidden;
    pointer-events: none;
}

/* Left sidebar — expanded */
body:not(.filters-hidden) #leftColumn {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Left inner panel fade-slide */
body.filters-hidden .left-sidebar-panel {
    transform: translateX(-30px);
    opacity: 0;
    pointer-events: none;
}

.show-filters-button {
    opacity: 0;
    transform: translate(-10px, -50%);
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (max-width: 768px) {
    #showFiltersButton {
        display: none !important;
    }
}

body.filters-hidden #showFiltersButton {
    opacity: 1;
    transform: translate(0, -50%);
    left: 5rem;
}

body:not(.filters-hidden) #showFiltersButton {
    opacity: 0;
    pointer-events: none;
}

.impact-chip {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.impact-chip-positive {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.impact-chip-negative {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.impact-chip-neutral {
    background: rgba(148, 163, 184, 0.2);
    color: #475467;
}

.info-chip {
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    background: rgba(15, 23, 42, 0.06);
    color: #475467;
    font-weight: 600;
}

.info-chip.major-impact {
    background: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
}

.info-chip.moderate-impact {
    background: rgba(249, 115, 22, 0.15);
    color: #c2410c;
}

.info-chip.light-impact {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

/* Gradient Backgrounds */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Navigation Styles */
.nav-link {
    position: relative;
    overflow: hidden;
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.35) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.filter-bar {
    margin: 0 auto 1.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    width: 100%;
    max-width: 960px;
}

.filter-bar .filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2933;
}

.filter-bar input[type="range"] {
    width: 100%;
}

.filter-bar select,
.filter-bar input[type="text"] {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: 10px;
}

.filter-bar .filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem 1rem;
    align-items: center;
}

.filter-bar .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.filter-bar .filter-group .control-wrapper,
.filter-bar .filter-group select,
.filter-bar .filter-group input {
    width: 100%;
}

.filter-bar .control-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.nav-link:hover::before {
    left: 100%;
}

/* Panel Animation Styles */
.panel-slide-left {
    transform: translateX(-100%);
}

.panel-slide-right {
    transform: translateX(100%);
}

.panel-active {
    transform: translateX(0);
}

/* Quick Stats Styles */
#quickStats .stat-item {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
}

#quickStats .stat-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

/* Market Data Card Styles - Compact Version */
.market-data-card {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin: 0.3rem 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(148, 163, 184, 0.15);
    cursor: pointer;
    position: relative;
    height: 75px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.market-data-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
}

.market-data-card.clickable::after {
    content: '';
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 0.375rem;
    height: 0.375rem;
    background: #3b82f6;
    border-radius: 50%;
    opacity: 0.5;
    transition: all 0.2s;
}

.market-data-card.clickable:hover::after {
    opacity: 1;
    transform: scale(1.3);
}

/* Market Data Panel Container Constraints */
#marketDataPanel {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

#marketDataContent {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.card-summary-grid .card-summary,
.card-summary-grid .card-recommendation {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.card-summary-grid .card-summary {
    border-left: 3px solid rgba(13, 148, 136, 0.3);
    padding-left: 1rem;
}

.card-summary-grid .card-recommendation {
    border-left: 3px solid rgba(79, 70, 229, 0.35);
    padding-left: 1rem;
}

.card-inline-companies {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem 0.75rem;
}

.inline-company-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.inline-company-pill {
    background: rgba(241, 245, 249, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.5);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.75rem;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
}

.card-expand-toggle {
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.card-expand-toggle:hover {
    background: rgba(59, 130, 246, 0.15);
}

.news-card:not(.collapsed) .card-expand-toggle i {
    transform: rotate(180deg);
}

.tech-toggle-button {
    background: rgba(107, 114, 128, 0.12);
    color: #374151;
    border: 1px solid rgba(156, 163, 175, 0.6);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.2s ease;
}

.tech-toggle-button:hover {
    background: rgba(107, 114, 128, 0.2);
}

.technical-insights-panel {
    border: 1px dashed rgba(99, 102, 241, 0.4);
    border-radius: 14px;
    background: rgba(238, 242, 255, 0.8);
    padding: 0.85rem;
    margin-top: 0.5rem;
}

.technical-insights-list {
    list-style: disc;
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.8rem;
    color: #4338ca;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.technical-panel-card {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.2), rgba(59, 130, 246, 0.1));
    border-radius: 20px;
    padding: 1.25rem;
    min-height: 100%;
}

.technical-live-section {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 18px;
    padding: 0.75rem;
}

.technical-indicator-card {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.indicator-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #312e81;
    font-weight: 700;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
}

.indicator-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font-size: 0.78rem;
}

.indicator-label {
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0.5rem;
}

.indicator-value {
    font-weight: 700;
}

/* ── Performance tracker scroll + sticky ticker ── */
.perf-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.perf-scroll-wrap::-webkit-scrollbar {
    height: 6px;
}

.perf-scroll-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.perf-table {
    border-collapse: separate;
    border-spacing: 0;
}

.perf-sticky-col {
    position: sticky;
    left: 0;
    z-index: 5;
    background: inherit;
}

.perf-table thead .perf-sticky-col {
    z-index: 12;
}

/* shadow hint when scrolled */
.perf-scroll-wrap.is-scrolled .perf-sticky-col {
    box-shadow: 4px 0 8px -2px rgba(0, 0, 0, .08);
}

.performance-row {
    border-left: 5px solid transparent;
    background: #fff;
}

.performance-row.flag-bullish {
    border-left-color: #16a34a !important;
}

.performance-row.flag-bearish {
    border-left-color: #dc2626 !important;
}

.performance-row.flag-pending {
    border-left-color: #cbd5f5 !important;
}

.performance-row.flag-neutral {
    border-left-color: #94a3b8 !important;
}

.performance-row.flag-accurate {
    border-left-color: #22c55e !important;
}

.performance-row.flag-miss {
    border-left-color: #ef4444 !important;
}

.performance-row.flag-mixed {
    border-left-color: #9ca3af !important;
    /* Gray for MIXED/NEUTRAL */
}

.performance-row.flag-flat {
    border-left-color: #9ca3af !important;
    /* Gray for flat/near-zero movement */
}

/* Duplicate position styling */
.performance-row.duplicate-position {
    background: linear-gradient(to right, rgba(251, 191, 36, 0.05) 0%, rgba(251, 191, 36, 0.02) 100%);
    border-left-width: 3px !important;
    opacity: 0.9;
}

.performance-row.duplicate-position:hover {
    background: linear-gradient(to right, rgba(251, 191, 36, 0.08) 0%, rgba(251, 191, 36, 0.04) 100%);
    opacity: 1;
}

/* ========================================
   POSITION STATUS STYLING
   ======================================== */

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-left: 4px;
    border: 1px solid;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.status-badge:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Active Position Badge (Green) */
.status-badge.status-active {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #15803d;
    border-color: #86efac;
}

/* Closed/Exited Position Badge (Blue) */
.status-badge.status-exited {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-color: #93c5fd;
}

/* Expired Position Badge (Gray) */
.status-badge.status-expired {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #4b5563;
    border-color: #d1d5db;
}

/* Watchlist Position Badge (Purple) */
.status-badge.status-watchlist {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #7c3aed;
    border-color: #d8b4fe;
}

/* Neutral Position Badge (Gray) */
.status-badge.status-neutral {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #6b7280;
    border-color: #9ca3af;
}

/* Position Row Backgrounds & Borders */

/* Active Position Row (Subtle Green) */
.performance-row.position-active {
    background: linear-gradient(to right,
            rgba(220, 252, 231, 0.15) 0%,
            rgba(255, 255, 255, 1) 8%,
            rgba(255, 255, 255, 1) 100%);
}

.performance-row.position-active:hover {
    background: linear-gradient(to right,
            rgba(220, 252, 231, 0.25) 0%,
            rgba(255, 255, 255, 1) 10%,
            rgba(255, 255, 255, 1) 100%);
}

/* Closed/Exited Position Row (Subtle Blue) */
.performance-row.position-exited {
    background: linear-gradient(to right,
            rgba(219, 234, 254, 0.2) 0%,
            rgba(255, 255, 255, 1) 8%,
            rgba(255, 255, 255, 1) 100%);
}

.performance-row.position-exited:hover {
    background: linear-gradient(to right,
            rgba(219, 234, 254, 0.3) 0%,
            rgba(255, 255, 255, 1) 10%,
            rgba(255, 255, 255, 1) 100%);
}

/* Neutral Position Row (Subtle Gray) */
.performance-row.position-neutral {
    background: linear-gradient(to right,
            rgba(229, 231, 235, 0.2) 0%,
            rgba(255, 255, 255, 1) 8%,
            rgba(255, 255, 255, 1) 100%);
}

.performance-row.position-neutral:hover {
    background: linear-gradient(to right,
            rgba(229, 231, 235, 0.3) 0%,
            rgba(255, 255, 255, 1) 10%,
            rgba(255, 255, 255, 1) 100%);
}

/* Expired Position Row (Subtle Gray) */
.performance-row.position-expired {
    background: linear-gradient(to right,
            rgba(243, 244, 246, 0.3) 0%,
            rgba(255, 255, 255, 1) 8%,
            rgba(255, 255, 255, 1) 100%);
    opacity: 0.85;
}

.performance-row.position-expired:hover {
    background: linear-gradient(to right,
            rgba(243, 244, 246, 0.4) 0%,
            rgba(255, 255, 255, 1) 10%,
            rgba(255, 255, 255, 1) 100%);
    opacity: 1;
}

/* Watchlist Position Row (Subtle Purple) */
.performance-row.position-watchlist {
    background: linear-gradient(to right,
            rgba(243, 232, 255, 0.25) 0%,
            rgba(255, 255, 255, 1) 8%,
            rgba(255, 255, 255, 1) 100%);
}

.performance-row.position-watchlist:hover {
    background: linear-gradient(to right,
            rgba(243, 232, 255, 0.35) 0%,
            rgba(255, 255, 255, 1) 10%,
            rgba(255, 255, 255, 1) 100%);
}

/* Column-specific styling */
.if-held-column {
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.1) 0%, transparent 100%);
    padding: 0.25rem;
    border-radius: 6px;
}

.peak-column {
    background: linear-gradient(135deg, rgba(220, 252, 231, 0.1) 0%, transparent 100%);
    padding: 0.25rem;
    border-radius: 6px;
}

/* Compact grid layout - Single column with 70% width */
.market-data-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    align-items: center;
    justify-items: stretch;
}

/* Indicator header - optimized for wider cards */
.indicator-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    min-height: 2rem;
}

.indicator-title-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1;
    max-width: 70%;
}

.indicator-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.indicator-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.1;
}

.indicator-description {
    font-size: 0.65rem;
    color: #6b7280;
    line-height: 1.2;
    font-weight: 400;
}

.indicator-icon {
    color: #3b82f6;
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.indicator-period-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    max-width: 25%;
}

/* Rotating period indicator - optimized size */
.indicator-period {
    background: #3b82f6;
    color: white;
    font-size: 0.65rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}

.indicator-updated {
    font-size: 0.6rem;
    color: #9ca3af;
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
}

.market-data-card.clickable:hover .indicator-period {
    background: #3b82f6;
    color: white;
    transform: scale(1.05);
}

/* Data display area - optimized for wider cards */
.indicator-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.2rem 0;
    min-height: 1.5rem;
}

.indicator-value {
    font-weight: 700;
    font-size: 1.3rem;
    color: #111827;
    line-height: 1;
}

.indicator-change {
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Help text with compact spacing */
.indicator-help {
    margin-top: 0.2rem;
    min-height: 0.7rem;
}

.indicator-period-description {
    font-size: 0.6rem;
    color: #9ca3af;
    font-style: italic;
    line-height: 1.2;
}

.positive-change {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.negative-change {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.neutral-change {
    color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
}

/* Rotation animation for period cycling - Enhanced dial effect */
.period-rotating {
    animation: dialRotate 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: #3b82f6 !important;
    color: white !important;
}

@keyframes dialRotate {
    0% {
        transform: rotateY(-180deg) scale(0.8);
        opacity: 0;
    }

    25% {
        transform: rotateY(-90deg) scale(1.1);
        opacity: 0.5;
    }

    50% {
        transform: rotateY(0deg) scale(1.2);
        opacity: 0.8;
    }

    100% {
        transform: rotateY(0deg) scale(1);
        opacity: 1;
    }
}

/* Value animation for smooth transitions - Flip effect */
.value-updating {
    animation: valueFlip 0.4s ease-in-out;
}

@keyframes valueFlip {
    0% {
        transform: rotateX(0deg);
        color: #111827;
    }

    50% {
        transform: rotateX(90deg);
        color: #3b82f6;
        opacity: 0.7;
    }

    100% {
        transform: rotateX(0deg);
        color: #111827;
        opacity: 1;
    }
}

/* Card hover animation with slight rotation */
.market-data-card:hover {
    transform: translateY(-1px) rotateY(1deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
}

/* Instructions box - more compact */
.market-instructions {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: #1d4ed8;
}

.market-instructions .instruction-icon {
    color: #3b82f6;
    margin-right: 0.375rem;
}

/* Responsive adjustments for single column wide cards */
@media (max-width: 1024px) {
    .market-data-card {
        width: 80%;
        height: 70px;
        padding: 0.7rem 0.9rem;
        margin: 0.25rem 0;
    }

    .indicator-header {
        margin-bottom: 0.25rem;
        min-height: 1.8rem;
    }

    .indicator-title {
        font-size: 0.75rem;
    }

    .indicator-value {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .market-data-card {
        width: 90%;
        height: 65px;
        padding: 0.6rem 0.8rem;
        margin: 0.2rem 0;
    }

    .indicator-header {
        margin-bottom: 0.2rem;
        min-height: 1.6rem;
    }

    .indicator-title-row {
        max-width: 75%;
    }

    .indicator-period-info {
        max-width: 20%;
    }

    .indicator-title {
        font-size: 0.7rem;
    }

    .indicator-value {
        font-size: 1.1rem;
    }

    .indicator-change {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }

    .indicator-description {
        font-size: 0.6rem;
    }

    .indicator-updated {
        font-size: 0.55rem;
    }
}

@media (max-width: 480px) {
    .market-data-card {
        width: 95%;
        height: 60px;
        padding: 0.5rem 0.7rem;
        margin: 0.15rem 0;
    }

    .indicator-header {
        margin-bottom: 0.15rem;
        min-height: 1.4rem;
    }

    .indicator-title {
        font-size: 0.65rem;
    }

    .indicator-value {
        font-size: 1rem;
    }

    .indicator-icon {
        font-size: 0.8rem;
        width: 16px;
    }
}

/* Card Styles */
.trading-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.trading-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.trading-card.cursor-pointer:hover {
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Rating Circle */
.rating-circle {
    background: conic-gradient(from 0deg, #10b981 0%, #10b981 var(--percentage), #e5e7eb var(--percentage), #e5e7eb 100%);
}

/* Animation Classes */
.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Typewriter Effect */
.typewriter {
    overflow: hidden;
    border-right: .15em solid #667eea;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: #667eea;
    }
}

/* Dark Mode Styles */
.dark {
    background-color: #111827;
    color: #f9fafb;
}

.dark .bg-white {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
}

.dark .trading-card.cursor-pointer:hover {
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.25);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.dark .bg-gray-50 {
    background-color: #111827 !important;
}

.dark .text-gray-800 {
    color: #f9fafb !important;
}

.dark .text-gray-700 {
    color: #d1d5db !important;
}

.dark .text-gray-600 {
    color: #9ca3af !important;
}

.dark .text-gray-500 {
    color: #6b7280 !important;
}

.dark .border-gray-200 {
    border-color: #374151 !important;
}

.dark .border-gray-300 {
    border-color: #4b5563 !important;
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15) !important;
}

.dark select,
.dark input {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

.dark select:focus,
.dark input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Filter Controls */
.filter-hidden {
    display: none !important;
}

.filter-stats {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Compact/Expanded View Styles */
/* =============================================
   NEWS CARD SIZING
   Full detail view shown by default — auto-height
   ============================================= */
.compact-card {
    position: relative;
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    overflow: visible !important;
}

.compact-card .detailed-content {
    display: none;
}

.compact-card.expanded .detailed-content {
    display: block;
}

/* Price Update Animations */
.price-updated {
    animation: priceFlash 1s ease-in-out;
    background-color: rgba(34, 197, 94, 0.1) !important;
    transition: background-color 1s ease-out;
}

@keyframes priceFlash {
    0% {
        background-color: rgba(34, 197, 94, 0.3);
    }

    50% {
        background-color: rgba(34, 197, 94, 0.2);
    }

    100% {
        background-color: rgba(34, 197, 94, 0.1);
    }
}

.price-change.positive {
    color: #059669 !important;
}

.price-change.negative {
    color: #dc2626 !important;
}

/* Real-time Indicators */
.live-indicator {
    animation: livePulse 2s infinite;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.expand-toggle {
    transition: transform 0.3s ease;
}

.expand-toggle.rotated {
    transform: rotate(180deg);
}

/* Sticky Sidebar */
.sticky {
    position: sticky;
}

/* View Mode Buttons */
.view-btn-active {
    background-color: #3b82f6 !important;
    color: white !important;
}

.view-btn-inactive {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

/* Text Truncation Utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Column Resizer Styles */
.column-resizer {
    width: 6px;
    background: linear-gradient(to right, transparent 2px, #e5e7eb 2px, #e5e7eb 4px, transparent 4px);
    cursor: col-resize;
    position: relative;
    transition: background 0.2s ease;
    user-select: none;
}

.column-resizer:hover {
    background: linear-gradient(to right, transparent 1px, #3b82f6 1px, #3b82f6 5px, transparent 5px);
}

.column-resizer:active {
    background: linear-gradient(to right, transparent 1px, #1d4ed8 1px, #1d4ed8 5px, transparent 5px);
}

.column-resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 20px;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.column-resizer:hover::before {
    opacity: 0.5;
}

/* Simple 2-Column Layout */
.resizable-container {
    display: flex !important;
    width: 100% !important;
    padding: 0 1.5rem !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
}

.resizable-column {
    /* Ensure flex children don't override parent flex settings */
    flex-shrink: 0;
    overflow: visible;
}

#leftColumn {
    width: 25%;
    max-width: 25%;
    flex: 0 0 25%;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        max-width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        flex 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#leftResizer {
    width: 6px;
    flex: 0 0 6px;
    min-width: 6px;
}

#centerColumn {
    width: 75%;
    max-width: 75%;
    flex: 0 0 75%;
    min-width: 0;
    /* Removed debug background */
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .resizable-container {
        flex-direction: column;
        gap: 1.5rem;
        padding: 0 !important;
    }

    .resizable-column {
        width: 100% !important;
        max-width: none;
    }

    .column-resizer {
        display: none;
    }

    .resizable-column .mr-3,
    .resizable-column .ml-3 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sticky {
        position: static;
    }

    .mobile-layout .resizable-column {
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .ticker-content {
        animation-duration: 60s;
    }

    .ticker-item {
        font-size: 0.75rem;
        padding: 0 0.5rem;
        gap: 0.5rem;
    }

    .performance-sidebar {
        padding: 1rem;
    }
}

/* Expand/Collapse Animations */
.compact-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.compact-card .detailed-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-10px);
}

.compact-card.expanded .detailed-content {
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Summary text handling for compact vs expanded */
.compact-card .compact-summary {
    display: block;
}

.compact-card .expanded-summary {
    display: none;
}

.compact-card.expanded .compact-summary {
    display: none;
}

.compact-card.expanded .expanded-summary {
    display: block;
}

/* Override line-clamp in expanded state */
.compact-card.expanded .line-clamp-2,
.compact-card.expanded .line-clamp-3 {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    display: block !important;
}

.expand-toggle {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.expand-toggle.rotated {
    transform: rotate(180deg);
}

/* Expand indicator styling */
.expand-indicator {
    pointer-events: none;
    user-select: none;
}

.compact-card:hover .expand-indicator {
    color: #3b82f6 !important;
}

/* Source Link Styling */
.source-link {
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    border: 2px solid #e5e7eb;
    background-color: #f9fafb;
}

.source-link:hover {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: white !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.source-link:active {
    transform: scale(1.02);
}

.dark .source-link {
    background-color: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.dark .source-link:hover {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: white !important;
}

/* Ticker Button Styling */
.ticker-button {
    position: relative;
    overflow: hidden;
    font-weight: 600;
}

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

.ticker-button:hover::before {
    left: 100%;
}

.ticker-button:active {
    transform: scale(0.98);
}

.dark .ticker-button {
    background-color: #1e40af !important;
    border-color: #3b82f6 !important;
    color: #e0e7ff !important;
}

.dark .ticker-button:hover {
    background-color: #1d4ed8 !important;
    border-color: #60a5fa !important;
    color: white !important;
}

/* Click feedback for cards */
.compact-card.cursor-pointer:active {
    transform: translateY(-1px);
    transition: transform 0.1s ease;
}

/* Performance Card Animations */
.performance-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.performance-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Expanded Performance Panel - Column Takeover Mode */
.performance-panel-expanded {
    height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 1.5rem !important;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.performance-panel-expanded .performance-expanded-content {
    display: block;
}

.performance-expanded-content {
    display: none;
}

/* Remove overlay styles since we're not using overlay anymore */
.performance-overlay {
    display: none;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Enhanced Performance Display Styles */
.performance-detailed-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.performance-detailed-card.positive {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
}

.performance-detailed-card.negative {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fefcfc 100%);
}

.performance-detailed-card.neutral {
    border-left-color: #6b7280;
}

.performance-metric {
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.catalyst-comparison {
    background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
    padding: 8px;
    border-radius: 6px;
    border-left: 3px solid #8b5cf6;
}

.market-status-indicator {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.market-status-indicator.open {
    background-color: #d1fae5;
    color: #065f46;
}

.market-status-indicator.closed {
    background-color: #fee2e2;
    color: #991b1b;
}

.market-status-indicator.pre-market {
    background-color: #dbeafe;
    color: #1e40af;
}

.market-status-indicator.after-hours {
    background-color: #fef3c7;
    color: #92400e;
}

/* Column Width Indicators */
.column-width-indicator {
    position: fixed;
    top: 50%;
    background: rgba(59, 130, 246, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: translateY(-50%);
}

.column-width-indicator.show {
    opacity: 1;
}

/* Wall Street Ticker Styles */
.ticker-container {
    position: relative;
    overflow: hidden;
}

.ticker-content {
    display: flex;
    white-space: nowrap;
    animation: scroll-left 120s linear infinite;
    gap: 2rem;
}

.ticker-content:hover {
    animation-play-state: paused;
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    height: 100%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ticker-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.ticker-symbol {
    font-weight: bold;
    font-size: 0.875rem;
    min-width: 40px;
}

.ticker-price {
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0 0.5rem;
}

.ticker-change {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.ticker-change.positive {
    background-color: #10b981;
    color: white;
}

.ticker-change.negative {
    background-color: #ef4444;
    color: white;
}

.ticker-change.neutral {
    background-color: #6b7280;
    color: white;
}

.ticker-change.new-signal {
    background-color: #8b5cf6;
    color: white;
    animation: pulse 2s infinite;
    font-weight: 700;
}

.ticker-info {
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0 8px;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticker-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transform: scale(1.02);
}

.ticker-signal {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 0.5rem;
    font-weight: 600;
}

.ticker-signal.BUY {
    background-color: #3b82f6;
    color: white;
}

.ticker-signal.SELL {
    background-color: #f59e0b;
    color: white;
}

.ticker-signal.NEUTRAL {
    background-color: #6b7280;
    color: white;
}

/* Mobile Responsive Styles */
@media (max-width: 1024px) {
    .resizable-container {
        flex-direction: column;
        gap: 1rem;
        padding: 0 !important;
    }

    .resizable-column {
        width: 100% !important;
        min-width: 100% !important;
    }

    .column-resizer {
        display: none;
    }

    .sticky {
        position: static;
    }

    /* Mobile ticker */
    .ticker-content {
        animation: scroll-left 60s linear infinite;
    }

    .ticker-item {
        padding: 0 0.5rem;
        gap: 0.5rem;
    }

    .ticker-symbol {
        min-width: 30px;
        font-size: 0.75rem;
    }

    .ticker-price {
        font-size: 0.75rem;
    }

    .ticker-change {
        font-size: 0.625rem;
        padding: 1px 4px;
    }

    .ticker-signal {
        font-size: 0.625rem;
        padding: 1px 4px;
    }

    /* Hide some ticker elements on very small screens */
    @media (max-width: 640px) {
        .ticker-item .text-xs {
            display: none;
        }
    }
}

/* Tablet styles */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .grid-cols-1.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-1.md\\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile layout adjustments */
@media (max-width: 640px) {
    .text-3xl {
        font-size: 1.5rem;
    }

    .text-4xl {
        font-size: 2rem;
    }

    .grid-cols-1.md\\:grid-cols-4,
    .grid-cols-1.md\\:grid-cols-5 {
        grid-template-columns: 1fr;
    }

    .space-x-6> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1rem * var(--tw-space-x-reverse));
        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
    }
}

/* Live Price Update Animations */
.price-updated {
    animation: priceUpdate 1s ease-out;
    font-weight: 600;
}

@keyframes priceUpdate {
    0% {
        background-color: rgba(34, 197, 94, 0.3);
        transform: scale(1);
    }

    50% {
        background-color: rgba(34, 197, 94, 0.6);
        transform: scale(1.05);
    }

    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

.price-change.positive {
    color: #10b981;
    font-weight: 600;
}

.price-change.negative {
    color: #ef4444;
    font-weight: 600;
}

.api-status {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.api-status.connected {
    background-color: rgba(34, 197, 94, 0.1);
    color: #10b981;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.api-status.disconnected {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Update status indicators */
.update-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(59, 130, 246, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.update-indicator.show {
    opacity: 1;
    transform: translateX(0);
}

.update-indicator.success {
    background: rgba(16, 185, 129, 0.9);
}

.update-indicator.warning {
    background: rgba(245, 158, 11, 0.9);
}

/* Rapid News Navigation Styles */
.keyboard-highlighted {
    border: 3px solid #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Quick Scan Mode Styles */
.quick-scan-mode .compact-card .detailed-content {
    display: none !important;
}

.quick-scan-mode .compact-card .expand-indicator {
    opacity: 0.5;
    pointer-events: none;
}

.quick-scan-mode .compact-card {
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

/* Keyboard shortcut styles */
kbd {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #374151;
    vertical-align: middle;
    background-color: #f3f4f6;
    border: solid 1px #d1d5db;
    border-bottom-color: #9ca3af;
    border-radius: 0.375rem;
    box-shadow: inset 0 -1px 0 #9ca3af;
}

/* Navigation hint styles */
#navigation-hint {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Sidebar Resizer */
#sidebarResizer {
    position: absolute;
    left: -2px;
    top: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    transition: background-color 0.2s ease;
}

#sidebarResizer:hover {
    background: rgba(59, 130, 246, 0.3);
}

#sidebarResizer::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 60px;
    background: #d1d5db;
    border-radius: 0 2px 2px 0;
    transition: all 0.2s ease;
}

#sidebarResizer:hover::after {
    background: #3b82f6;
    height: 80px;
}

/* Market Data Panel - Clean Table Style (Inspired by Performance Tab) */
.market-data-container {
    padding: 0;
    background: transparent;
}

.market-data-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.market-header-left .market-count {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.market-header-right .market-period-info {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
}

.market-data-table {
    width: 100%;
    border-collapse: collapse;
}

.market-table-header {
    display: grid;
    grid-template-columns: 140px 100px 80px 85px;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    align-items: center;
}

.market-table-body {
    display: flex;
    flex-direction: column;
}

.market-table-row {
    display: grid;
    grid-template-columns: 160px 120px 120px;
    gap: 0.25rem;
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: all 0.2s ease;
    align-items: center;
}

.market-table-row:hover {
    background-color: #f9fafb;
    border-radius: 4px;
    margin: 0 -0.25rem;
    padding: 0.5rem 0.75rem;
}

.market-table-row:last-child {
    border-bottom: none;
}

/* Column Styles */
.market-col-indicator {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.25rem;
    width: 160px;
    overflow: visible;
    min-height: 2rem;
}

.indicator-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.indicator-icon {
    color: #3b82f6;
    font-size: 0.85rem;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.indicator-details {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    flex: 1;
}

.indicator-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.indicator-desc {
    font-size: 0.65rem;
    color: #6b7280;
    line-height: 1.2;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-height: 2.4rem;
    overflow: visible;
}

.market-col-period {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    align-items: flex-start;
    justify-content: center;
    width: 130px;
}

.period-badge {
    background: #3b82f6;
    color: white;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    text-align: center;
    transition: all 0.3s ease;
    width: fit-content;
    min-width: 50px;
    max-width: 125px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.1;
}

.market-table-row:hover .period-badge {
    background: #1d4ed8;
    transform: scale(1.05);
}

.period-updated {
    font-size: 0.6rem;
    color: #9ca3af;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-col-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    width: 100px;
}

.value-main {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    white-space: nowrap;
}

.market-col-change {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 85px;
}

.market-col-value-change {
    display: flex;
    align-items: center;
    text-align: center;
    width: 135px;
}

.value-change-container {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    align-items: center;
}

.change-value {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    min-width: 50px;
    max-width: 80px;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

/* Responsive Design for Market Table */
@media (max-width: 768px) {

    .market-table-header,
    .market-table-row {
        grid-template-columns: 1.5fr 1fr 0.8fr 0.8fr;
        gap: 0.5rem;
        font-size: 0.8rem;
    }

    .indicator-name {
        font-size: 0.8rem;
    }

    .indicator-desc {
        font-size: 0.7rem;
    }

    .value-main {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .market-data-header {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .market-table-header,
    .market-table-row {
        grid-template-columns: 2fr 1fr;
        gap: 0.5rem;
    }

    .market-col-period,
    .market-col-change {
        display: none;
    }

    .market-col-value {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }

    .value-main {
        font-size: 1.1rem;
    }
}

/* Sticky Upgrade Button Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slideIn {
    animation: slideIn 0.3s ease-out;
}

/* Pricing Modal Animation */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-modalSlideIn {
    animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}

/* Shake animation for mandatory disclosure warnings */
@keyframes shake {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-50%) translateX(-10px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(-50%) translateX(10px);
    }
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

/* Auto-hiding Filter Bar */
.filter-bar-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.filter-bar-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.filter-bar-transition {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Line Clamp Utilities for Multi-line Text Truncation */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Modal backdrop blur */
#pricingModal {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: backdrop-filter 0.3s ease;
}

/* =============================================
   NEWS CARD LAYOUT
   ============================================= */
.news-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-2px);
}

.full-view-content {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Line clamping for text truncation */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smooth flip animation */
@keyframes cardFlip {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(180deg);
    }
}

@keyframes cardFlipBack {
    from {
        transform: rotateY(180deg);
    }

    to {
        transform: rotateY(0deg);
    }
}

.company-impact-card {
    background: #f8fafc;
    padding: 1rem 1.25rem;
    border-radius: 0 0 18px 18px;
}

.company-impact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ticker-stack {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ticker-pill {
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, #e0ecff, #d4d9ff);
    color: #1e3a8a;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.08em;
}

.company-impact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.6rem 0.8rem;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.1);
}

.meta-block {
    flex: 1 1 120px;
    min-width: 110px;
}

.meta-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: block;
    color: #94a3b8;
}

.meta-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
}

.meta-value.impact-light {
    color: #2563eb;
}

.meta-value.impact-moderate {
    color: #d97706;
}

.meta-value.impact-strong {
    color: #b91c1c;
}

.impact-strong {
    color: #b91c1c;
}

.impact-moderate {
    color: #d97706;
}

.impact-light {
    color: #2563eb;
}

.filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #1d4ed8;
    background: #f8fafc;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.filter-toggle-btn i {
    color: inherit;
}

.filter-toggle-btn:hover {
    background: #e0ecff;
}

.filter-toggle-btn.active {
    background: #2563eb;
    color: #fff;
    border-color: #1d4ed8;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
}

.disclaimer-nav {
    color: #cbd5f5;
    letter-spacing: 0.05em;
    width: 600px;
    max-width: 100%;
}

.right-sidebar-card {
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative;
}

/* Right sidebar — collapsed (fade-slide right) */
body.performance-hidden #rightSidebarContainer {
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    opacity: 0;
    transform: translateX(20px);
    overflow: hidden;
    pointer-events: none;
}

/* Right sidebar — expanded */
body:not(.performance-hidden) #rightSidebarContainer {
    opacity: 1;
    transform: translateX(0);
}

/* Grid mode visible - proper sizing */
body:not(.performance-hidden).grid-layout-mode #rightSidebarContainer {
    width: 40% !important;
    max-width: 40% !important;
    flex: 0 0 40% !important;
}

body:not(.performance-hidden).grid-layout-mode #mainNewsContent {
    flex: 1 1 auto !important;
    max-width: 60% !important;
}

/* In grid mode, when performance is hidden, news column should expand */
body.performance-hidden.grid-layout-mode .main-feed {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

body.performance-hidden.grid-layout-mode #mainNewsContent {
    flex: 1 1 100%;
    max-width: 100%;
}

body.performance-hidden #mainNewsContent {
    margin-right: 0;
    padding-right: 1rem;
}

/* News column expansion when performance is minimized */
body.performance-hidden .main-feed,
#mainNewsContent.news-full-width,
.main-feed.news-full-width {
    padding-right: 0;
}

.show-performance-button {
    opacity: 0;
    transform: translate(10px, -50%);
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.performance-hidden #showPerformanceButton {
    display: flex !important;
    opacity: 1;
    transform: translate(0, -50%);
    right: 5em;
}

/* Hide bubble in grid mode (use minitab instead) */
body.performance-hidden.grid-layout-mode #showPerformanceButton {
    display: none !important;
}

body:not(.performance-hidden) #showPerformanceButton {
    opacity: 0;
    pointer-events: none;
}

/* Toggle Switch Component */
.toggle-switch {
    position: relative;
    width: 40px;
    height: 20px;
    background-color: #d1d5db;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.toggle-switch:hover {
    background-color: #9ca3af;
}

.toggle-switch.active {
    background-color: #3b82f6;
}

.toggle-switch.active:hover {
    background-color: #2563eb;
}

.toggle-switch-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch.active .toggle-switch-slider {
    transform: translateX(20px);
}

/* Analysis Card Tabs Styling */
.analysis-tab {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.analysis-tab:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.02);
    color: #374151;
}

.analysis-tab.active {
    border-bottom-width: 2px !important;
}

.analysis-tab-content {
    animation: fadeInTab 0.3s ease;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Collapsed Content Styling */
.collapsed-content {
    transition: all 0.3s ease;
}

/* Simplified Signal Badge */
.analysis-tab .fa-arrow-trend-up {
    animation: trendUp 1.5s ease-in-out infinite;
}

.analysis-tab .fa-arrow-trend-down {
    animation: trendDown 1.5s ease-in-out infinite;
}

@keyframes trendUp {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

@keyframes trendDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(2px);
    }
}

/* ==================== DARK MODE COMPONENT STYLES ==================== */

/* Cards and containers */
[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .bg-gray-50 {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
}

/* Text colors */
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-400 {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .text-gray-300 {
    color: var(--text-secondary) !important;
}

/* Borders */
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200 {
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .border-gray-300 {
    border-color: var(--border-secondary) !important;
}

/* Stock ticker boxes and price displays */
[data-theme="dark"] .bg-white.border {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .bg-white.rounded,
[data-theme="dark"] .bg-white.rounded-lg,
[data-theme="dark"] .bg-white.rounded-xl {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-white * {
    color: var(--text-primary) !important;
}

/* Category badges and pills */
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.25) !important;
    color: #c4b5fd !important;
}

[data-theme="dark"] .bg-yellow-50,
[data-theme="dark"] .bg-yellow-100 {
    background-color: rgba(234, 179, 8, 0.25) !important;
    color: #fcd34d !important;
}

[data-theme="dark"] .bg-orange-50,
[data-theme="dark"] .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.25) !important;
    color: #fdba74 !important;
}

[data-theme="dark"] .bg-pink-50,
[data-theme="dark"] .bg-pink-100 {
    background-color: rgba(236, 72, 153, 0.25) !important;
    color: #f9a8d4 !important;
}

[data-theme="dark"] .bg-emerald-50,
[data-theme="dark"] .bg-emerald-100 {
    background-color: rgba(16, 185, 129, 0.25) !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.25) !important;
    color: #fca5a5 !important;
}

/* Hover states */
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover {
    background-color: var(--dropdown-hover) !important;
}

/* News cards */
[data-theme="dark"] .news-card {
    background-color: var(--card-bg);
    border-color: var(--border-primary);
}

[data-theme="dark"] .news-card h3,
[data-theme="dark"] .news-card p {
    color: var(--text-primary) !important;
}

/* Tables */
[data-theme="dark"] table {
    background-color: var(--card-bg);
    border-color: var(--border-primary);
}

[data-theme="dark"] th {
    background-color: var(--bg-tertiary);
    color: var(--text-primary) !important;
}

[data-theme="dark"] td {
    border-color: var(--border-primary);
    color: var(--text-primary) !important;
}

/* Inputs */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

/* Positive/negative indicators */
[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-emerald-600 {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .text-red-600 {
    color: #fca5a5 !important;
}

/* Sidebar */
[data-theme="dark"] .left-sidebar-panel {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
}

/* ==================== DARK MODE TOGGLE ANIMATIONS ==================== */
@keyframes moonRise {
    0% {
        transform: translateY(20px) rotate(-90deg);
        opacity: 0;
    }

    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes sunRise {
    0% {
        transform: translateY(-20px) rotate(90deg);
        opacity: 0;
    }

    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
}

[data-theme="dark"] .dark-mode-icon {
    display: none !important;
}

[data-theme="dark"] .light-mode-icon {
    display: inline !important;
    animation: sunRise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] .dark-mode-icon {
    display: inline !important;
}

[data-theme="light"] .light-mode-icon {
    display: none !important;
}

[data-theme="dark"] .dark-mode-text {
    display: none;
}

[data-theme="dark"] .light-mode-text {
    display: inline;
}

[data-theme="light"] .dark-mode-text {
    display: inline;
}

[data-theme="light"] .light-mode-text {
    display: none;
}

/* ==================== UNAUTHENTICATED USER LIMITS ==================== */
/* Lock overlay for content beyond preview limit */
.locked-content-overlay {
    position: relative;
    margin-top: 2rem;
}

.locked-articles-preview {
    filter: blur(8px);
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

/* Performance panel blur overlay */
.performance-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.96), rgba(255, 255, 255, 0.98));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.performance-lock-overlay:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(249, 250, 251, 0.98), rgba(255, 255, 255, 0.99));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

[data-theme="dark"] .performance-lock-overlay {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98));
}

[data-theme="dark"] .performance-lock-overlay:hover {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.99), rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99));
}

/* Lock icon animation on hover */
.performance-lock-overlay .fa-hand-pointer {
    animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Shadow enhancement for hover state */
.performance-lock-overlay:hover .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}

/* Modal animations */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-modalSlideIn {
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Modal backdrop blur enhancement */
#registerModal,
#loginModal {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Input focus glow effect */
#registerModal input:focus,
#loginModal input:focus {
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2);
}

/* Button hover lift effect */
#registerModal button:hover:not(:disabled),
#loginModal button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Gradient background animation for modal headers */
#registerModal .bg-gradient-to-br,
#loginModal .bg-gradient-to-br {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Disabled filter controls for unauthenticated users */
.filter-disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: auto;
    position: relative;
}

.filter-disabled::after {
    content: '';
    position: absolute;
    inset: 0;
    cursor: not-allowed;
    pointer-events: none;
}

.filter-disabled:hover {
    opacity: 0.7;
}

/* Lock badge for disabled features */
.lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 9999px;
    margin-left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Unlock CTA hover effects */
.unlock-cta {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.unlock-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Progress indicator for article viewing */
.article-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
}

.article-progress-bar {
    width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 9999px;
    overflow: hidden;
}

.article-progress-fill {
    height: 100%;
    background: white;
    border-radius: 9999px;
    transition: width 0.5s ease;
}

/* News Status Badges */
.breaking-news-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

/* T1 Catalyst Badge — top-tier Pro catalyst signal (PRO) */
.t1-catalyst-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
    animation: pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Just In badge — recent news (< 4hrs), softer style */
.just-in-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.expiring-news-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.expired-news-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Pro-only time filter option styling */
#timeFilter option[value="include-expired"] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    font-weight: 600;
}

/* Sidebar time dropdown Include Expired option */
#includeExpiredOption {
    position: relative;
}

#includeExpiredOption:hover {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
}

/* ==================== MOBILE RESPONSIVE DESIGN ==================== */
@media (max-width: 768px) {

    /* Hide side mini tabs on mobile */
    .filters-minitab,
    .news-minitab,
    .performance-minitab {
        display: none !important;
    }

    /* Move existing mobile quick actions to bottom */
    #mobileQuickActions {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0;
        right: 0;
        background: linear-gradient(to right, #3b82f6, #2563eb) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-bottom: none !important;
        box-shadow: 0 -4px 16px rgba(37, 99, 235, 0.3) !important;
        z-index: 100 !important;
        padding: 0.75rem 1rem;
    }

    /* Style the mobile action buttons */
    #mobileFiltersButton,
    #mobilePerformanceButton {
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: white !important;
        font-weight: 600 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Active state for mobile buttons - show which screen is visible */
    #mobileFiltersButton[aria-pressed="true"],
    #mobilePerformanceButton[aria-pressed="true"] {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #2563eb !important;
        border: 1px solid rgba(255, 255, 255, 1) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        font-weight: 700 !important;
    }

    #mobileFiltersButton:hover,
    #mobilePerformanceButton:hover {
        background: rgba(255, 255, 255, 0.25) !important;
    }

    /* Don't change active button on hover */
    #mobileFiltersButton[aria-pressed="true"]:hover,
    #mobilePerformanceButton[aria-pressed="true"]:hover {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #2563eb !important;
    }

    #mobileFiltersButton:active,
    #mobilePerformanceButton:active {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: scale(0.95);
    }

    /* Dynamically adjust scroll-to-top button position based on visible elements */
    #scrollToTopButton {
        position: fixed !important;
        right: 1rem !important;
        width: 48px !important;
        height: 48px !important;
        z-index: 150 !important;
        bottom: 115px !important;
        transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Adjust when disclaimer bar is also visible */
    body.show-disclaimer #scrollToTopButton {
        bottom: 180px !important;
        /* 115px (mobile bar) + ~65px (disclaimer bar) */
    }

    /* When mobile actions are hidden, position near bottom */
    body:not(.mobile-view-news):not(.mobile-view-filters):not(.mobile-view-performance) #scrollToTopButton {
        bottom: 1.5rem !important;
    }

    /* Adjust with disclaimer but no mobile bar */
    body.show-disclaimer:not(.mobile-view-news):not(.mobile-view-filters):not(.mobile-view-performance) #scrollToTopButton {
        bottom: 90px !important;
        /* Just above disclaimer bar */
    }

    /* Add bottom padding to main content to prevent overlap with mobile bar */
    #mainNewsContent,
    .main-feed,
    #dashboardMainContent {
        padding-bottom: 90px !important;
    }

    /* Ensure grid controls bar doesn't interfere on mobile */
    body.grid-layout-mode .grid-controls-bar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        transform: none !important;
        border-radius: 12px !important;
        margin-bottom: 1rem;
    }

    /* Make ticker dropdown appear above the input on mobile */
    .ticker-suggestions {
        top: auto !important;
    }

    /* Detail page search drops downward (search bar is at page top) */
    #detailSearchDropdown.ticker-suggestions {
        top: calc(100% + 0.35rem) !important;
        bottom: auto !important;
    }

    /* Also apply to grid ticker suggestions */
    .grid-controls-bar #gridTickerSuggestions,
    #gridFiltersContainer .ticker-suggestions {
        top: auto !important;
        bottom: calc(100% + 0.35rem) !important;
    }
}

/* ─── Accessibility: Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==============================================
   DASHBOARD FLOATING ICONS + FILTER SIDEBAR
   ============================================== */

/* ── Floating Search + Catalyst icons (vertical stack) ── */
.dash-float-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dash-float-icons.hidden-by-sidebar {
    opacity: 0;
    pointer-events: none;
}

/* Overview FAB highlight for explore CTA pulse */
@keyframes ctaHighlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.explore-cta-btn.cta-highlight {
    animation: ctaHighlightPulse 0.6s ease 2;
    pointer-events: none;
    transform: translateX(-12px);
}

/* Reuse .detail-search-fab / .fab-icon styles from detail page for dashboard icons */
.dash-float-icons .fab-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: white;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
    color: #6b7280;
    font-size: 14px;
}

.dash-float-icons .fab-icon:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #4f46e5;
}

.dash-float-icons .fab-icon.active {
    background: #eff6ff;
    border-color: #c7d2fe;
    color: #6366f1;
}

/* Search expand — exactly like detail page */
.dash-float-icons .detail-search-fab {
    position: relative;
    display: flex;
    align-items: center;
}

.dash-float-icons .detail-search-fab .fab-expand {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 340px;
    width: 340px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
    transform-origin: left center;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
}

.dash-float-icons .detail-search-fab.expanded .fab-icon {
    opacity: 0;
    pointer-events: none;
}

.dash-float-icons .detail-search-fab.expanded .fab-expand {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.dash-float-icons .detail-search-fab .fab-expand input {
    width: 100%;
    padding: 8px 36px 8px 14px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font-size: 13px;
    background: white;
    color: #1f2937;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    outline: none;
    transition: border-color 0.2s;
}

.dash-float-icons .detail-search-fab .fab-expand input:focus {
    border-color: #818cf8;
}

.dash-float-icons .detail-search-fab .fab-expand .fab-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 12px;
    padding: 4px;
    transition: color 0.15s;
}

.dash-float-icons .detail-search-fab .fab-expand .fab-close:hover {
    color: #6366f1;
}

@media (min-width: 1024px) {
    .dash-float-icons .detail-search-fab .fab-expand {
        width: 380px;
        max-width: 380px;
    }
}

/* ── Left Filter Sidebar ── */
/* Hide floating search FAB — search is now inline in the hub */
.dash-filter-sidebar .dash-float-icons {
    display: none !important;
}

.dash-filter-sidebar {
    position: fixed;
    top: 80px;
    left: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 0;
    transition: top 0.15s ease;
    pointer-events: none;
    /* let clicks pass through the transparent gap */
}

/* All interactive children get pointer events back */
.dash-filter-sidebar>* {
    pointer-events: auto;
}

/* Icon stack (search + catalyst) — vertical */
.dash-filter-sidebar>.dash-float-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
}

/* Hide icons when sidebar panel is open */
.dash-filter-sidebar.open>.dash-float-icons {
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    gap: 0;
    transition: opacity 0.15s ease;
}

/* Peek tab — always visible at left edge */
.dash-filter-sidebar-tab {
    width: 38px;
    min-height: 90px;
    background: linear-gradient(135deg, #d1d5db, #9ca3af);
    border: none;
    border-radius: 0 12px 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    cursor: pointer;
    box-shadow: 2px 2px 8px rgba(156, 163, 175, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
}

/* Tab turns blue/purple when filters are active */
.dash-filter-sidebar-tab.has-active-filters {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    box-shadow: 2px 2px 12px rgba(99, 102, 241, 0.3);
}

.dash-filter-sidebar-tab i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.dash-filter-sidebar-tab span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.dash-filter-sidebar-tab:hover {
    width: 42px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    box-shadow: 3px 3px 18px rgba(99, 102, 241, 0.4);
}

/* Hide the tab when sidebar is open */
.dash-filter-sidebar.open .dash-filter-sidebar-tab {
    opacity: 0;
    width: 0;
    height: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
}

/* Intro pulse — draws attention on first page load */
@keyframes sidebarPulse {

    0%,
    100% {
        box-shadow: 2px 2px 12px rgba(99, 102, 241, 0.3);
    }

    50% {
        box-shadow: 2px 2px 24px rgba(99, 102, 241, 0.6), 0 0 0 4px rgba(99, 102, 241, 0.15);
    }
}

.dash-filter-sidebar.intro-pulse .dash-filter-sidebar-tab {
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    animation: sidebarPulse 1.2s ease-in-out 3;
}

/* Expandable panel */
.dash-filter-sidebar-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    opacity: 0;
    overflow: visible;
    background: white;
    border: 1px solid #e5e7eb;
    border-left: none;
    border-radius: 0 14px 14px 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease;
    max-height: calc(100vh - 100px);
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
}

/* Inner scroll wrapper — everything below the dropdown rows scrolls */
.dash-filter-sidebar-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    padding-bottom: 12px;
}

.dash-filter-sidebar-panel>* {
    min-width: 420px;
}

.dash-filter-sidebar-scroll>* {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Direct panel children (header, filter row) also animate */
.dash-filter-sidebar-panel>.sidebar-header-row,
.dash-filter-sidebar-panel>.sidebar-filter-row {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Close button inside the panel header */
.sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sidebar-close-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Apply button — hidden on desktop, visible only on mobile */
.sidebar-apply-btn {
    display: none;
}

/* Open state */
.dash-filter-sidebar.open .dash-filter-sidebar-panel {
    width: 440px;
    opacity: 1;
}

.dash-filter-sidebar.open .dash-filter-sidebar-panel>.sidebar-header-row {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
}

.dash-filter-sidebar.open .dash-filter-sidebar-panel>.sidebar-filter-row {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.15s;
}

.dash-filter-sidebar.open .dash-filter-sidebar-scroll>* {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

/* Stagger child content fade-in */
.dash-filter-sidebar.open .dash-filter-sidebar-scroll>*:nth-child(2) {
    transition-delay: 0.25s;
}

.dash-filter-sidebar.open .dash-filter-sidebar-scroll>*:nth-child(3) {
    transition-delay: 0.3s;
}

.dash-filter-sidebar.open .dash-filter-sidebar-scroll>*:nth-child(4) {
    transition-delay: 0.35s;
}

.dash-filter-sidebar.open .dash-filter-sidebar-scroll>*:nth-child(5) {
    transition-delay: 0.4s;
}

/* Closing state — content fades out first, then panel shrinks */
.dash-filter-sidebar.closing .dash-filter-sidebar-panel {
    width: 0;
    opacity: 0;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.08s,
        opacity 0.15s ease;
}

.dash-filter-sidebar.closing .dash-filter-sidebar-scroll>* {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    transition-delay: 0s;
}

.dash-filter-sidebar.closing .dash-filter-sidebar-panel>.sidebar-header-row,
.dash-filter-sidebar.closing .dash-filter-sidebar-panel>.sidebar-filter-row {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    transition-delay: 0s;
}

@media (min-width: 1280px) {
    .dash-filter-sidebar.open .dash-filter-sidebar-panel {
        width: 480px;
    }

    .dash-filter-sidebar-panel>*,
    .dash-filter-sidebar-scroll>* {
        min-width: 460px;
    }
}

/* Panel hides overflow when closed to prevent content leaking */
.dash-filter-sidebar:not(.open):not(.closing) .dash-filter-sidebar-panel {
    overflow: hidden;
}

/* Filter toolbar reset when inside the sidebar panel */
.dash-filter-sidebar-panel .filter-toolbar {
    position: static;
    border: none;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: auto;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.dash-filter-sidebar-panel .filter-toolbar.toolbar-sticky,
.dash-filter-sidebar-panel .filter-toolbar.toolbar-hidden {
    position: static;
    top: auto;
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ── Sidebar header row: [Active ▼] [Time ▼] ... [Sort ▼ ⓘ] [XX News] ── */
.sidebar-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px 12px;
    flex-wrap: nowrap;
    position: relative;
    z-index: 200;
}

.sidebar-header-row> :first-child {
    flex: 1;
    min-width: 0;
}

.sidebar-header-row #toolbarSortContainer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sidebar-result-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
    padding: 3px 8px;
    background: #f3f4f6;
    border-radius: 8px;
}

/* (search-row and catalyst-row styles defined above in filter sidebar section) */

/* ── Sidebar filter row: Sentiment | Industry | News Tone (equal widths) ── */
.sidebar-filter-row {
    display: flex;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid #f3f4f6;
    position: relative;
    z-index: 100;
}

.sidebar-filter-row>* {
    flex: 1;
    min-width: 0;
}

/* Reset dropdown button widths to fill equally */
.sidebar-filter-row .direction-dropdown-wrapper,
.sidebar-filter-row .sector-dropdown-wrapper,
.sidebar-filter-row .tone-dropdown-wrapper {
    width: 100%;
    position: relative;
}

/* Dropdown menus — absolute within wrapper (panel overflow:visible lets them escape) */
.sidebar-filter-row .direction-dropdown,
.sidebar-filter-row .sector-dropdown,
.sidebar-filter-row .tone-dropdown {
    position: absolute !important;
    z-index: 2147483647;
    top: 100%;
    left: 0;
    right: auto;
    width: max-content;
    min-width: 100%;
    max-height: 280px;
    overflow-y: auto;
}

.sidebar-filter-row .direction-dropdown-toggle .flex.items-center.gap-2 i,
.sidebar-filter-row .sector-dropdown-toggle .flex.items-center.gap-2 i {
    font-size: 10px;
}

/* ── Sidebar search row ── */
.sidebar-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
}

.sidebar-search-row input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
    background: #f9fafb;
    color: #1f2937;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sidebar-search-row input::placeholder {
    color: #9ca3af;
}

.sidebar-search-row input:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    background: white;
}

.sidebar-search-row .ticker-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

/* ── Sidebar catalyst row ── */
.sidebar-catalyst-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 12px;
    flex-wrap: wrap;
}

.sidebar-catalyst-slider-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-catalyst-slider-label {
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.3px;
}

.sidebar-catalyst-slider-track {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Sidebar ticker bubbles: below everything with separator ── */
.sidebar-bubbles-section {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 4px;
    padding: 12px 18px 18px;
    min-height: 48px;
    position: relative;
}

.sidebar-bubbles-section:empty {
    display: none;
}

/* ── Hide time text in sidebar — icon-only to save width ── */
.dash-filter-sidebar-panel .toolbar-time-text {
    display: none;
}

/* ── Unified header-row button styles (match filter dropdown toggles) ── */
.sidebar-header-row .news-tab-selector-btn {
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 8px;
    border-width: 1.5px;
    border-color: #e5e7eb;
    background: white;
    min-height: 34px;
}

.sidebar-header-row .news-tab-selector-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.sidebar-header-row .toolbar-time-btn {
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 8px;
    border-width: 1.5px;
    min-height: 34px;
    background: white;
}

.sidebar-header-row .toolbar-time-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.sidebar-header-row .toolbar-time-btn i:first-child {
    font-size: 11px;
}

/* ── Equalize filter dropdown toggle heights ── */
.sidebar-filter-row .direction-dropdown-toggle,
.sidebar-filter-row .sector-dropdown-toggle,
.sidebar-filter-row .tone-dropdown-toggle {
    width: 100%;
    padding: 7px 10px;
    font-size: 12px;
    border-width: 1.5px;
    min-height: 36px;
    display: flex;
    align-items: center;
}

/* Boost z-index for all header-row dropdowns inside sidebar */
.sidebar-header-row .toolbar-time-dropdown-list,
.sidebar-header-row .news-tab-dropdown {
    z-index: 2147483647;
}

.sidebar-bubbles-section .active-filters-row {
    padding: 4px 0;
    border-top: none;
    flex-wrap: wrap;
    gap: 6px;
}

.sidebar-bubbles-section .active-filters-chips {
    flex-wrap: wrap;
    gap: 6px;
}

/* Hide only toggle-button chips in sidebar — keep time, tone, direction, industry visible */
.sidebar-bubbles-section .active-filters-chips [data-chip-type="special"] {
    display: none !important;
}

/* Hide the original inline reset button inside sidebar — use sidebar-reset-btn instead */
.sidebar-bubbles-section #inlineResetFilters {
    display: none !important;
}

/* Sidebar Clear All reset button — fixed top-right of bubbles section */
.sidebar-reset-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
}

.sidebar-reset-btn.visible {
    display: inline-flex;
}

.sidebar-reset-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

/* ── Sidebar Overview button ── */
.sidebar-overview-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #6366f1;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
}

.sidebar-overview-btn:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    color: #4f46e5;
}

/* Hide the old filter-toolbar-always layout inside sidebar (JS builds custom rows) */
.dash-filter-sidebar-panel .filter-toolbar-always {
    display: none;
}

.dash-filter-sidebar-panel .filter-toolbar-expanded {
    display: none;
}

/* Ticker bubbles in sidebar — visible when active */
.sidebar-bubbles-section .active-filters-row.has-active-filters {
    display: flex !important;
}

/* ── Collapse/Overview button — hidden in sidebar ── */
.dash-filter-sidebar-panel .collapse-feed-btn {
    display: none;
}

/* ══════════════════════════════════════════════════════
   Nav Floating Dropdown (Facebook-style)
   ══════════════════════════════════════════════════════ */

.nav-dropdown {
    position: fixed;
    top: 60px;
    width: min(392px, calc(100vw - 24px));
    max-height: calc(100vh - 80px);
    background: rgba(255, 255, 255, 0.96);
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    backdrop-filter: blur(18px);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.22),
        0 10px 24px rgba(15, 23, 42, 0.12);
    z-index: 300;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.22s cubic-bezier(.4, 0, .2, 1), transform 0.22s cubic-bezier(.4, 0, .2, 1), filter 0.22s cubic-bezier(.4, 0, .2, 1);
    transform-origin: top right;
}

.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -9px;
    left: var(--dropdown-arrow-left, calc(100% - 42px));
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(148, 163, 184, 0.24);
    border-left: 1px solid rgba(148, 163, 184, 0.24);
    transform: rotate(45deg);
    border-top-left-radius: 5px;
}

.nav-dropdown-enter {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
    filter: blur(4px);
    pointer-events: none;
}

.nav-dropdown-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}

.nav-dropdown-exit {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
    filter: blur(4px);
    pointer-events: none;
}

/* ── Dropdown header ── */
.nav-dropdown-header {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.nav-dropdown-header .dd-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}

.nav-dropdown-header .dd-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 1px;
}

.nav-dropdown-header .dd-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.nav-dropdown-header .dd-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.26);
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 11px;
}

.nav-dropdown-header .dd-action-btn:hover {
    background: rgba(255, 255, 255, 0.38);
    color: #fff;
}

/* ── Dropdown body ── */
.nav-dropdown-body {
    flex: 1;
    overflow-y: auto;
    min-height: 80px;
    max-height: 440px;
}

.nav-dropdown-body::-webkit-scrollbar {
    width: 5px;
}

.nav-dropdown-body::-webkit-scrollbar-track {
    background: transparent;
}

.nav-dropdown-body::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 3px;
}

.nav-dropdown-body::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.55);
}

/* ── Dropdown footer ── */
.nav-dropdown-footer {
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    padding: 10px 12px 12px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(248, 250, 252, 0.92));
}

/* ── Dropdown section headers ── */
.dd-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    padding: 10px 18px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dd-section-title i {
    font-size: 11px;
}

.dd-section-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
}

/* ── Dropdown items ── */
.dd-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.14s ease, transform 0.14s ease;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    position: relative;
}

.dd-item:hover {
    background: #f8fbff;
    transform: translateY(-1px);
}

.dd-item:last-child {
    border-bottom: none;
}

.dd-item-unread {
    background: #eef2ff;
}

.dd-item-unread:hover {
    background: #e6ecff;
}

.dd-item .dd-item-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}

.dd-item .dd-item-icon.text-white {
    letter-spacing: 0.02em;
}

.dd-item .dd-item-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
}

.dd-item-unread .dd-item-title {
    color: #0b1220;
    font-weight: 700;
}

.dd-item .dd-item-meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dd-item .dd-item-preview {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

.dd-item .dd-unread-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: #6366f1;
    flex-shrink: 0;
    margin-top: 6px;
}

.dd-item .dd-ticker {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: #1e293b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dd-item .dd-sentiment-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.dd-direction-meta.is-bullish {
    color: #059669;
    font-weight: 800;
}

.dd-direction-meta.is-bearish {
    color: #dc2626;
    font-weight: 800;
}

.dd-direction-meta.is-catalyst {
    color: #d97706;
    font-weight: 800;
}

.dd-direction-meta.is-neutral {
    color: #475569;
    font-weight: 700;
}

/* ── Empty and loading states ── */
.dd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.dd-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 20px;
}

.dd-empty h3 {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 4px;
}

.dd-empty h3 {
    color: #0f172a;
}

.dd-empty p {
    font-size: 12px;
    color: #64748b;
    max-width: 240px;
    margin: 0;
    line-height: 1.4;
}

.inbox-dropdown-surface {
    padding-top: 10px;
}

.inbox-dropdown-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px 10px;
}

.inbox-dropdown-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(99, 102, 241, 0.12));
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.inbox-toolbar-action {
    border: none;
    background: transparent;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 12px;
    font-weight: 700;
}

.inbox-toolbar-action:hover {
    background: rgba(99, 102, 241, 0.08);
    color: #312e81;
}

.inbox-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 6px 12px;
}

.inbox-topline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inbox-topline-copy {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.inbox-section-card {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.nav-user-trigger {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
}

.nav-user-trigger:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

.nav-user-trigger-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.72);
}

.nav-user-menu {
    color: #0f172a;
}

.nav-user-menu-arrow {
    position: absolute;
    top: -8px;
    right: 24px;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(148, 163, 184, 0.28);
    border-left: 1px solid rgba(148, 163, 184, 0.28);
    border-top-left-radius: 5px;
    transform: rotate(45deg);
}

.nav-user-menu-panel {
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2), 0 12px 26px rgba(15, 23, 42, 0.08);
}

.user-menu-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.92), rgba(238, 242, 255, 0.92));
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.user-menu-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 10px 18px rgba(59, 130, 246, 0.22);
}

.user-menu-profile-name {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.user-menu-profile-email {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-list {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    padding: 8px;
}

#userMenuPrimaryActions {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

#userMenuPrimaryActions.user-menu-fade-out {
    opacity: 0;
    transform: translateX(-18px);
}

#userMenuPrimaryActions.user-menu-fade-in {
    opacity: 1;
    transform: translateX(0);
}

.user-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: #334155;
    font-size: 13px;
    text-align: left;
    transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.user-menu-item:hover {
    background: rgba(99, 102, 241, 0.08);
    color: #0f172a;
    transform: translateY(-1px);
}

.user-menu-item-accent {
    color: #7c3aed;
}

.user-menu-item-upgrade {
    color: #047857;
}

.user-menu-item-logout {
    color: #dc2626;
}

.user-menu-count-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
}

.user-menu-subpanel {
    margin: 2px 0 8px;
    padding: 6px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96));
    border: 1px solid rgba(226, 232, 240, 0.92);
}

.user-menu-subview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.user-menu-subview.user-menu-slide-in {
    opacity: 1;
    transform: translateX(0);
}

.user-menu-subview.user-menu-slide-out {
    opacity: 0;
    transform: translateX(18px);
}

.user-menu-subview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 2px 2px;
}

.user-menu-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.08);
    color: #312e81;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: background 0.15s ease, transform 0.15s ease;
}

.user-menu-back-btn:hover {
    background: rgba(99, 102, 241, 0.14);
    transform: translateY(-1px);
}

.user-menu-subview-copy {
    min-width: 0;
}

.user-menu-subview-title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.user-menu-subview-subtitle {
    margin-top: 2px;
    font-size: 11px;
    color: #64748b;
}

.user-menu-saved-list {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-menu-saved-item {
    width: 100%;
    position: relative;
    padding: 12px 44px 12px 12px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 14px;
    background: #fff;
    text-align: left;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.user-menu-saved-item:hover {
    transform: translateY(-1px);
    border-color: rgba(167, 139, 250, 0.52);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.08);
}

.user-menu-saved-item.is-expired {
    opacity: 0.68;
}

.user-menu-saved-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.user-menu-saved-ticker,
.user-menu-saved-status {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.user-menu-saved-ticker {
    background: #0f172a;
    color: #fff;
}

.user-menu-saved-status {
    background: rgba(148, 163, 184, 0.2);
    color: #475569;
}

.user-menu-saved-headline {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.user-menu-saved-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11px;
    color: #64748b;
    flex-wrap: wrap;
}

.user-menu-saved-focus-meta.is-bullish {
    color: #059669;
    font-weight: 800;
}

.user-menu-saved-focus-meta.is-bearish {
    color: #dc2626;
    font-weight: 800;
}

.user-menu-saved-focus-meta.is-catalyst {
    color: #d97706;
    font-weight: 800;
}

.user-menu-saved-focus-meta.is-neutral {
    color: #475569;
    font-weight: 700;
}

.user-menu-saved-sep {
    color: #cbd5e1;
}

.user-menu-saved-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.user-menu-saved-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.user-menu-saved-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.user-menu-saved-empty-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
    flex-shrink: 0;
}

.user-menu-saved-empty-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.user-menu-saved-empty p {
    margin: 3px 0 0;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}

@media (max-width: 768px) {
    .nav-user-menu {
        position: fixed;
        top: 72px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        margin-top: 0;
    }

    .nav-user-menu-arrow {
        display: none;
    }

    .nav-user-menu-panel {
        max-height: calc(100vh - 92px);
        display: flex;
        flex-direction: column;
        border-radius: 22px;
    }

    .user-menu-list {
        overflow-y: auto;
        max-height: calc(100vh - 180px);
        padding-bottom: 14px;
    }

    .user-menu-profile {
        padding: 18px 16px;
    }

    .user-menu-subview {
        min-height: 320px;
    }

    #userMenuPrimaryActions.user-menu-fade-out {
        transform: translateX(-14px);
    }

    .user-menu-subview.user-menu-slide-out {
        transform: translateX(14px);
    }

    .user-menu-subview-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(248, 250, 252, 0.88));
        backdrop-filter: blur(14px);
        padding: 8px 2px 6px;
    }

    .user-menu-saved-list {
        max-height: none;
        padding-bottom: 6px;
    }

    .user-menu-saved-item {
        padding: 14px 48px 14px 14px;
        border-radius: 16px;
    }

    .user-menu-item {
        padding: 14px;
        min-height: 48px;
    }

    .user-menu-back-btn {
        min-width: 78px;
        justify-content: center;
    }
}

/* ── Dropdown CTA button ── */
.dd-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.dd-cta-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* ── Bookmark items (dark theme) ── */
.dd-bookmark-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid #eef2f7;
}

.dd-bookmark-item:hover {
    background: #f1f5fb;
}

.dd-bookmark-item .dd-bm-headline {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-bookmark-item .dd-bm-meta {
    font-size: 10px;
    color: #64748b;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dd-bookmark-item .dd-bm-remove {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 11px;
    opacity: 0;
    flex-shrink: 0;
}

.dd-bookmark-item:hover .dd-bm-remove {
    opacity: 1;
}

.dd-bookmark-item .dd-bm-remove:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ── Mobile: near full-width dropdown ── */
@media (max-width: 480px) {
    .nav-dropdown {
        width: calc(100vw - 16px);
        left: 8px !important;
        right: 8px !important;
        top: 56px;
    }
}

/* ══════════════════════════════════════════════════════
   Inbox Panel Tabs
   ══════════════════════════════════════════════════════ */

.inbox-tabs {
    display: flex;
    gap: 3px;
    background: #eef2ff;
    border-radius: 10px;
    padding: 3px;
    margin: 0 16px 8px;
}

.inbox-tab {
    flex: 1;
    padding: 7px 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #5b6480;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.inbox-tab:hover {
    color: #1f2a44;
    background: #e5eaff;
}

.inbox-tab.active {
    background: #fff;
    color: #1f2a44;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.18);
}

/* ══════════════════════════════════════════════════════
   Notification Items (used inside Inbox dropdown)
   ══════════════════════════════════════════════════════ */

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid #eef2f7;
}

.notif-item:hover {
    background: #f1f5fb;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-unread {
    background: #eef2ff;
}

.notif-unread:hover {
    background: #e6ecff;
}

.notif-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    background: #e5e9f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4f46e5;
    font-size: 13px;
}

.notif-unread .notif-icon {
    background: #c7d2fe;
    color: #3730a3;
}

.notif-body {
    flex: 1;
    min-width: 0;
}

.notif-text {
    font-size: 13px;
    color: #334155;
    line-height: 1.4;
}

.notif-text strong {
    font-weight: 700;
    color: #0f172a;
}

.notif-preview {
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

.notif-time {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 3px;
}

.notif-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: #6366f1;
    margin-top: 6px;
}

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
}

.notif-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #94a3b8;
    font-size: 20px;
}

/* ══════════════════════════════════════════════════════════════
   Signal Hub — Intent-Based Modular Dashboard
   ══════════════════════════════════════════════════════════════ */

.signal-hub {
    padding: 0 4px;
}

.signal-hub-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Main Column ── */
.signal-hub-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    flex: 1 1 0;
}

/* ── Market Bar (inline in main column) ── */
.hub-market-bar {
    padding: 10px 16px !important;
    border-radius: 14px;
}

.hub-market-clickable {
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.hub-market-clickable:hover {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f640;
}

.hub-market-bar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hub-market-bar-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.hub-market-bar-items {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
}

.hub-market-bar-items .hub-market-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
}

.hub-regime-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.hub-regime-badge.hidden {
    display: none;
}

/* ── Module Base ── */
.hub-module {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
}

/* Allow industry dropdown to overflow its parent module */
.hub-module.hub-module-feed {
    overflow: visible;
}

.hub-module:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

.hub-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    gap: 8px;
    flex-wrap: wrap;
}

.hub-module-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}

.hub-module-title i {
    font-size: 13px;
    color: #64748b;
}

.hub-module-body {
    padding: 0 16px 14px;
}

/* ── Module Stats Row (Portfolio Pulse) ── */
.hub-module-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px 8px;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.hub-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hub-stat-value {
    color: #1e293b;
    font-weight: 700;
}

.hub-stat-positive {
    color: #10b981;
}

.hub-stat-negative {
    color: #ef4444;
}

/* ── Horizontal Scroll Strip (Portfolio Pulse) ── */
.hub-scroll-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 16px 14px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.hub-scroll-strip::-webkit-scrollbar {
    display: none;
}

/* ── Position Card (used in Portfolio Pulse strip) ── */
.hub-position-card {
    flex: 0 0 180px;
    scroll-snap-align: start;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease,
        background 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hub-position-card:hover {
    border-color: #93c5fd;
    background: #f0f5ff;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.14), 0 4px 12px rgba(59, 130, 246, 0.06);
}

.hub-position-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.hub-position-ticker {
    font-size: 13px;
    font-weight: 800;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #0f172a;
}

.hub-position-dir {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hub-position-dir.bullish {
    color: #059669;
    background: #d1fae5;
}

.hub-position-dir.bearish {
    color: #dc2626;
    background: #fee2e2;
}

.hub-position-dir.neutral {
    color: #6b7280;
    background: #f3f4f6;
}

.hub-position-metrics {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.hub-position-live {
    font-size: 17px;
    font-weight: 800;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.hub-position-peak {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
}

.hub-position-peak span {
    font-weight: 700;
}

.hub-position-status {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
}

/* ── Sidebar vertical ticker tape (Breaking Catalysts + Watchlist) ── */
.hub-sidebar-tape-wrap {
    position: relative;
    overflow: hidden;
    max-height: 220px;
    mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%);
    cursor: default;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.hub-sidebar-tape-wrap::-webkit-scrollbar {
    width: 3px;
}

.hub-sidebar-tape-wrap::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 3px;
}

.hub-sidebar-tape-wrap.tape-scrollable {
    overflow-y: auto;
    scroll-behavior: smooth;
}

.hub-sidebar-tape-track {
    display: flex;
    flex-direction: column;
    gap: 8px;
    will-change: transform;
    padding: 4px 0;
}

/* Static mode — no animation, just show the cards */
.hub-sidebar-tape-track.tape-static {
    padding: 4px 0;
}

.hub-sidebar-tape-static {
    max-height: none;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
}

.hub-breaking-card {
    background: #fffbeb;
    border: 1px solid rgba(253, 230, 138, 0.5);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    flex: none;
    width: 100%;
    min-width: 0;
}

.hub-breaking-card:hover {
    border-color: #fbbf24;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
    transform: translateY(-2px);
}

.hub-breaking-card-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.hub-breaking-ticker {
    font-size: 12px;
    font-weight: 800;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #0f172a;
}

.hub-breaking-time {
    font-size: 9px;
    font-weight: 600;
    color: #d97706;
    background: #fef3c7;
    padding: 1px 6px;
    border-radius: 6px;
}

.hub-breaking-headline {
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.hub-breaking-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hub-breaking-dir {
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hub-breaking-perf {
    font-size: 11px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.hub-breaking-peak {
    font-size: 11px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.hub-watchlist-peak {
    font-size: 11px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.hub-card-peak {
    font-size: 14px;
    font-weight: 800;
    font-family: 'SF Mono', 'Fira Code', monospace;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.hub-breaking-perf-label,
.hub-watchlist-pct-label,
.hub-card-return-label,
.hub-leader-pct-label,
.hub-signal-pct-label,
.hub-position-metric-label {
    font-size: 8px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hub-card-return-label {
    font-size: 10px;
}

.hub-position-metric-label {
    font-size: 9px;
}

.hub-empty-state {
    padding: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}

/* ── Split Row: Breaking News + Watchlist side by side ── */
.hub-split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hub-split-col {
    min-width: 0;
}

/* ── Watchlist Cards (blue/slate theme) ── */
.hub-watchlist-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hub-watchlist-card {
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    flex: none;
    width: 100%;
    min-width: 0;
}

.hub-watchlist-card:hover {
    border-color: #818cf8;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.hub-watchlist-card-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.hub-watchlist-ticker {
    font-size: 12px;
    font-weight: 800;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #0f172a;
}

.hub-watchlist-headline {
    font-size: 11px;
    font-weight: 500;
    color: #475569;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.hub-watchlist-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hub-watchlist-dir {
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hub-watchlist-perf {
    font-size: 11px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* ── Watchlist Time Badge (matches breaking news) ── */
.hub-watchlist-time {
    font-size: 9px;
    font-weight: 600;
    color: #4338ca;
    background: #e0e7ff;
    padding: 1px 6px;
    border-radius: 6px;
}

/* ── Premium-gated card styles ── */
.hub-card-gated .hub-card-headline {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

.hub-card-gated .hub-card-return,
.hub-card-gated .hub-card-dir {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

.hub-card-gated .hub-card-return-label {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

/* ── Module Action Buttons ── */
.hub-module-action {
    font-size: 11px;
    font-weight: 600;
    color: #3b82f6;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.hub-module-action:hover {
    background: #eff6ff;
}

.hub-module-actions {
    display: flex;
    gap: 4px;
}

.hub-action-sm {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hub-action-sm:hover {
    background: #f1f5f9;
    color: #3b82f6;
    border-color: #bfdbfe;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.hub-action-sm:active {
    transform: scale(0.9);
    transition-duration: 0.1s;
}

.hub-freshness-badge {
    font-size: 10px;
    font-weight: 700;
    background: #fef3c7;
    color: #d97706;
    padding: 2px 8px;
    border-radius: 8px;
}

.hub-signal-count {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    padding: 2px 0;
    white-space: nowrap;
}

/* ── Today's Signals — Compact Feed ── */
.hub-feed-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hub-sort-select {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    outline: none;
}

.hub-sort-select:focus {
    border-color: #93c5fd;
}

.hub-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.hub-chip {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hub-chip:hover {
    background: #f1f5f9;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.hub-chip:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

.hub-chip.active {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.12);
}

/* ── Compact Signal Row ── */
.hub-signal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.25s ease, padding 0.25s ease, margin 0.25s ease;
    border-radius: 8px;
}

.hub-signal-row:hover {
    background: #f8fafc;
    margin: 0 -16px;
    padding: 8px 16px;
}

.hub-signal-row:last-child {
    border-bottom: none;
}

.hub-signal-dir-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hub-signal-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hub-signal-headline {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-signal-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
}

.hub-signal-meta-ticker {
    font-weight: 700;
    color: #64748b;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.hub-signal-catalyst-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 4px;
    background: #fef3c7;
    color: #d97706;
}

.hub-signal-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}

.hub-signal-pct {
    font-size: 12px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.hub-signal-peak {
    font-size: 9px;
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.hub-signal-entry {
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #64748b;
}

.hub-signal-time {
    font-size: 9px;
    color: #94a3b8;
    font-weight: 500;
}

/* ── Direction & Status Labels (Today's Feed) ── */
.hub-signal-dir-label {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.hub-signal-dir-label.bullish {
    background: #dcfce7;
    color: #16a34a;
}

.hub-signal-dir-label.bearish {
    background: #fee2e2;
    color: #dc2626;
}

.hub-signal-dir-label.neutral {
    background: #f1f5f9;
    color: #64748b;
}

.hub-signal-pct-label {
    font-size: 8px;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
}

.hub-signal-bookmark {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
    transition: color 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.hub-signal-bookmark:hover {
    color: #3b82f6;
    transform: scale(1.25);
}

.hub-signal-bookmark:active {
    transform: scale(0.9);
    transition-duration: 0.1s;
}

.hub-signal-bookmark.bookmarked {
    color: #3b82f6;
    animation: hubBookmarkPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ── Hub Watchlist Toggle (+/-) Button ── */
.hub-watchlist-toggle {
    background: none;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    font-size: 9px;
    line-height: 1;
    color: #64748b;
    margin-left: 4px;
    vertical-align: middle;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.7);
    display: inline-flex;
}

.hub-watchlist-toggle:hover {
    color: #3b82f6;
    border-color: #3b82f6;
    background: #eff6ff;
    transform: scale(1.1);
}

.hub-watchlist-toggle:active {
    transform: scale(0.85);
    transition-duration: 0.1s;
}

.hub-breaking-card:hover .hub-watchlist-toggle,
.hub-watchlist-card:hover .hub-watchlist-toggle,
.hub-signal-card:hover .hub-watchlist-toggle {
    opacity: 1;
    transform: scale(1);
}

/* ── Performance Tracker Watchlist Toggle (+/-) Button ── */
.perf-watchlist-toggle {
    background: none;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    width: 14px;
    height: 14px;
    font-size: 8px;
    line-height: 1;
    color: #64748b;
    margin-left: 2px;
    vertical-align: middle;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.7);
    display: inline-flex;
}

.perf-watchlist-toggle:hover {
    color: #3b82f6;
    border-color: #3b82f6;
    background: #eff6ff;
    transform: scale(1.1);
}

.perf-watchlist-toggle:active {
    transform: scale(0.85);
    transition-duration: 0.1s;
}

.performance-row:hover .perf-watchlist-toggle {
    opacity: 1;
    transform: scale(1);
}

/* ── Watchlist No-Analysis Label ── */
.hub-watchlist-no-analysis {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    font-style: italic;
}

.hub-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border: none;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    color: #3b82f6;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.hub-load-more:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.hub-load-more:active {
    background: #dbeafe;
    transition-duration: 0.1s;
}

/* ── Industry Section Inline Filters ── */
.hub-industry-filters {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.hub-ind-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    line-height: 1.4;
}

.hub-ind-filter-btn:hover {
    border-color: #d1d5db;
    background: #f3f4f6;
    transform: translateY(-1px);
}

.hub-ind-filter-btn:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

.hub-ind-filter-btn.active {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #2563eb;
}

.hub-ind-filter-btn.active[data-dir="bullish"] {
    background: #ecfdf5;
    border-color: #10b981;
    color: #059669;
}

.hub-ind-filter-btn.active[data-dir="bearish"] {
    background: #fef2f2;
    border-color: #ef4444;
    color: #dc2626;
}

.hub-ind-catalyst-btn.active.cat-pro {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #b45309;
}

.hub-ind-catalyst-btn.active.cat-std {
    background: #e0e7ff;
    border-color: #818cf8;
    color: #4338ca;
}

.hub-ind-filter-btn i {
    font-size: 9px;
}

.hub-ind-filter-sep {
    width: 1px;
    height: 16px;
    background: #e5e7eb;
    margin: 0 2px;
}

.hub-industry-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 16px;
    min-height: 0;
}

.hub-industry-chips:empty {
    display: none;
}

.hub-industry-chips .hub-ind-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid;
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

.hub-industry-chips .hub-ind-chip:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.hub-industry-chips .hub-ind-chip:active {
    transform: scale(0.93);
    transition-duration: 0.1s;
}

.hub-ind-chip.chip-dir {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.hub-ind-chip.chip-dir.chip-bullish {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #059669;
}

.hub-ind-chip.chip-dir.chip-bearish {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.hub-ind-chip.chip-cat-pro {
    background: #fef3c7;
    border-color: #fde68a;
    color: #b45309;
}

.hub-ind-chip.chip-cat-std {
    background: #e0e7ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

.hub-ind-chip .chip-remove {
    font-size: 9px;
    margin-left: 1px;
    opacity: 0.6;
}

/* ── Industry Card Grid ── */
.hub-industry-grid-body {
    max-height: 600px;
    overflow-y: auto;
    padding: 0 16px 14px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.hub-industry-grid-body::-webkit-scrollbar {
    width: 5px;
}

.hub-industry-grid-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.hub-latest-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: auto;
    min-width: 220px;
}

.hub-latest-title p {
    margin: 0;
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.hub-latest-brief-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hub-latest-brief {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: stretch;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hub-latest-brief:hover {
    transform: translateY(-2px);
    border-color: #a5b4fc;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

.hub-brief-rank {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.hub-brief-main {
    min-width: 0;
}

.hub-brief-topline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.hub-brief-topline .hub-card-dir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hub-brief-topline .hub-card-dir span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.hub-brief-time {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
}

.hub-brief-headline {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 750;
}

.hub-brief-headline i {
    color: #d97706;
    margin-right: 6px;
}

.hub-brief-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.hub-reason-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.hub-reason-tag.watchlist-match {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.hub-reason-tag.same-sector {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.hub-reason-tag.breaking,
.hub-reason-tag.high-impact {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.hub-reason-tag.pro-brief {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.hub-reason-tag.already-moved {
    background: #f8fafc;
    color: #64748b;
    border-color: #cbd5e1;
}

.hub-brief-metrics {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 190px;
}

.hub-brief-return {
    min-width: 54px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 15px;
    font-weight: 850;
    color: #1e293b;
    line-height: 1.1;
}

.hub-brief-return small {
    margin-top: 3px;
    font-size: 9px;
    color: #94a3b8;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hub-brief-metrics .hub-signal-bookmark {
    color: #94a3b8;
    padding: 4px;
}

.hub-brief-metrics .hub-signal-bookmark:hover {
    color: #4f46e5;
}

.hub-industry-row-section {
    margin-bottom: 14px;
}

.hub-industry-row-section:last-child {
    margin-bottom: 0;
}

.hub-industry-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 4px 0 6px;
    user-select: none;
}

.hub-industry-label i {
    font-size: 10px;
    color: #94a3b8;
    width: 14px;
    text-align: center;
}

.hub-industry-count {
    font-size: 9px;
    font-weight: 700;
    background: #e2e8f0;
    color: #64748b;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 2px;
}

.hub-industry-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 0 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.hub-industry-track::-webkit-scrollbar {
    height: 4px;
}

.hub-industry-track::-webkit-scrollbar-track {
    background: transparent;
}

.hub-industry-track::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.hub-industry-track::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ── Consolidated Pro Catalysts Banner ── */
.hub-pro-section {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
}

.hub-pro-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1.5px solid rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hub-pro-banner:hover {
    border-color: #f59e0b;
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.2);
    transform: translateY(-2px);
}

.hub-pro-banner:active {
    transform: translateY(0) scale(0.99);
    transition-duration: 0.1s;
}

.hub-pro-banner-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hub-pro-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hub-pro-banner-title {
    font-size: 14px;
    font-weight: 800;
    color: #92400E;
}

.hub-pro-banner-sub {
    font-size: 11px;
    font-weight: 500;
    color: #B45309;
    margin-top: 1px;
}

.hub-pro-banner-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.hub-pro-banner-btn:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
    transform: translateY(-1px);
}

.hub-pro-banner-btn:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.1s;
}

/* Load more analyses button */
.hub-load-more-row {
    text-align: center;
    padding: 12px 0 4px;
}

.hub-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #3b82f6;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hub-load-more-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.hub-load-more-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

body.dark-mode .hub-load-more-btn {
    color: #60a5fa;
    border-color: #374151;
}

body.dark-mode .hub-load-more-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: #4b5563;
}

.hub-signal-card {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 148px;
    min-width: 148px;
    max-width: 148px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    transition: flex-basis 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        min-width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        max-width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease,
        background 0.3s ease;
    scroll-snap-align: start;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.hub-signal-card:hover {
    flex-basis: 290px;
    min-width: 290px;
    max-width: 290px;
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: #a5b4fc;
    z-index: 10;
}

/* Main content column */
.hub-card-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.hub-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 4px;
}

.hub-card-ticker {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-card-dir {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.hub-card-dir.bull {
    background: #dcfce7;
    color: #15803d;
}

.hub-card-dir.bear {
    background: #fee2e2;
    color: #dc2626;
}

.hub-card-dir.neutral {
    background: #f1f5f9;
    color: #64748b;
}

.hub-card-return {
    font-size: 18px;
    font-weight: 800;
    font-family: 'SF Mono', 'Fira Code', monospace;
    line-height: 1.2;
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 6px;
}

.hub-card-headline {
    font-size: 10px;
    color: #64748b;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
    flex: 1 1 auto;
}

.hub-signal-card:hover .hub-card-headline {
    -webkit-line-clamp: 3;
}

.hub-card-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
}

.hub-card-time {
    color: #94a3b8;
    font-size: 10px;
}

.hub-card-footer .hub-signal-bookmark {
    margin-left: auto;
    font-size: 11px;
    padding: 2px;
}

.hub-card-catalyst {
    font-size: 8px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hub-card-catalyst.pro {
    background: #fef3c7;
    color: #b45309;
}

.hub-card-catalyst.cat {
    background: #e0e7ff;
    color: #4338ca;
}

/* Expand on hover — right-side column slides in */
.hub-card-expand {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 0;
    width: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    border-left: 1px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    transition: flex-basis 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.3s ease 0.1s,
        padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-left-color 0.3s ease;
}

.hub-signal-card:hover .hub-card-expand {
    flex-basis: 120px;
    width: 120px;
    opacity: 1;
    padding: 8px 10px;
    border-left-color: #f1f5f9;
}

/* Empty expand stays hidden */
.hub-card-expand:empty {
    display: none !important;
}

.hub-card-detail {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 10px;
    color: #64748b;
    padding: 2px 0;
    white-space: nowrap;
}

.hub-card-detail span:last-child {
    font-weight: 700;
    color: #334155;
}

/* ── Sidebar Sections ── */
.hub-sidebar-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
}

.hub-sidebar-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hub-sidebar-title i {
    font-size: 11px;
}

/* ── Market Context ── */
.hub-market-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f8fafc;
}

.hub-market-row:last-child {
    border-bottom: none;
}

.hub-market-symbol {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
}

.hub-market-pct {
    font-size: 12px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.hub-regime-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    margin-top: 6px;
}

/* ── Leaderboard ── */
.hub-leader-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 11px;
    border-bottom: 1px solid #f8fafc;
}

.hub-leader-row:last-child {
    border-bottom: none;
}

.hub-leader-ticker {
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #1e293b;
    font-size: 11px;
}

.hub-leader-dir {
    font-size: 8px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 6px;
}

.hub-leader-pct {
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
}

/* ── Quick Stats ── */
.hub-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.hub-stat-card {
    text-align: center;
    padding: 8px 4px;
    background: #f8fafc;
    border-radius: 8px;
}

.hub-stat-card-value {
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.hub-stat-card-label {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   Hub Layout Redesign — Left sidebar + main content columns
   ══════════════════════════════════════════════════════════════ */

/* Two-column flex: left sidebar + main */
.signal-hub-columns {
    display: flex;
    gap: 16px;
    min-height: 0;
}

/* ── Left Sidebar ── */
.hub-left-sidebar {
    flex: 0 0 280px;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.hub-left-sidebar::-webkit-scrollbar {
    width: 4px;
}

.hub-left-sidebar::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

.hub-sidebar-card {
    flex-shrink: 0;
}

.hub-sidebar-scroll {
    max-height: 220px;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.hub-sidebar-scroll::-webkit-scrollbar {
    width: 3px;
}

.hub-sidebar-scroll::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 3px;
}

/* Market items vertical layout in sidebar */
.hub-market-bar-vertical {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.hub-market-items-vertical {
    flex-direction: column;
    gap: 6px;
}

.hub-market-items-vertical .hub-market-row {
    justify-content: space-between;
    width: 100%;
}

/* ── Search Bar (replaces floating FAB in main content area) ── */
.hub-search-bar {
    position: relative;
    width: 100%;
    margin-bottom: 4px;
}

.hub-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 14px;
    gap: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hub-search-inner:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.hub-search-icon {
    color: #94a3b8;
    font-size: 14px;
    flex-shrink: 0;
}

.hub-search-inner:focus-within .hub-search-icon {
    color: #3b82f6;
}

.hub-search-inner input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    color: #1e293b;
    background: transparent;
    padding: 0;
}

.hub-search-inner input::placeholder {
    color: #94a3b8;
}

.hub-search-clear {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hub-search-clear:hover {
    color: #64748b;
}

/* ── Industry Multi-Select Dropdown ── */
.hub-industry-dropdown-wrap {
    position: relative;
}

.hub-industry-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    background: #fff;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.hub-industry-dropdown-toggle:hover {
    border-color: #93c5fd;
    background: #f0f5ff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.hub-industry-dropdown-toggle:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

.hub-industry-dropdown-toggle i:first-child {
    font-size: 12px;
    color: #64748b;
}

.hub-industry-dropdown-arrow {
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hub-industry-dropdown-wrap.open .hub-industry-dropdown-arrow {
    transform: rotate(180deg);
}

.hub-industry-dropdown-count {
    font-size: 10px;
    font-weight: 700;
    background: #3b82f6;
    color: #fff;
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

.hub-industry-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    max-height: 380px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: hubDropdownIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top left;
}

.hub-industry-dropdown-actions {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
}

.hub-ind-dropdown-action {
    font-size: 11px;
    font-weight: 600;
    color: #3b82f6;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
}

.hub-ind-dropdown-action:hover {
    text-decoration: underline;
}

.hub-industry-dropdown-list {
    overflow-y: auto;
    max-height: 320px;
    scrollbar-width: thin;
}

.hub-industry-dropdown-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    transition: background 0.1s ease;
    user-select: none;
}

.hub-industry-dropdown-list label:hover {
    background: #f8fafc;
}

.hub-industry-dropdown-list label.locked {
    opacity: 0.45;
    cursor: default;
}

.hub-industry-dropdown-list label .ind-icon {
    font-size: 11px;
    color: #94a3b8;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.hub-industry-dropdown-list label .ind-count {
    margin-left: auto;
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
}

.hub-industry-dropdown-list label .ind-lock {
    margin-left: auto;
    font-size: 10px;
    color: #d4a017;
}

.hub-industry-dropdown-list input[type="checkbox"] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1.5px solid #cbd5e1;
    flex-shrink: 0;
    accent-color: #3b82f6;
}

/* ── Sidebar Resize Handle ── */
.sidebar-resize-handle {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.sidebar-resize-line {
    width: 3px;
    height: 40px;
    border-radius: 3px;
    background: #e2e8f0;
    transition: background 0.15s ease, height 0.15s ease;
}

.sidebar-resize-handle:hover .sidebar-resize-line,
.sidebar-resize-handle.active .sidebar-resize-line {
    background: #3b82f6;
    height: 60px;
}

/* ── Dark Mode Hub Redesign ── */
body.dark-mode .hub-left-sidebar {
    scrollbar-color: #334155 transparent;
}

body.dark-mode .hub-search-inner {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

body.dark-mode .hub-search-inner input {
    color: #e2e8f0;
}

body.dark-mode .hub-search-inner input::placeholder {
    color: #64748b;
}

body.dark-mode .hub-industry-dropdown-toggle {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

body.dark-mode .hub-industry-dropdown-panel {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .hub-industry-dropdown-list label {
    color: #e2e8f0;
}

body.dark-mode .hub-industry-dropdown-list label:hover {
    background: #334155;
}

body.dark-mode .sidebar-resize-line {
    background: #334155;
}

body.dark-mode .sidebar-resize-handle:hover .sidebar-resize-line {
    background: #60a5fa;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .signal-hub-columns {
        flex-direction: column;
    }

    .hub-left-sidebar {
        flex: none;
        width: 100%;
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .sidebar-resize-handle {
        display: none;
    }

    .hub-market-bar-inner {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .hub-latest-brief {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .hub-brief-rank {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        font-size: 11px;
    }

    .hub-brief-metrics {
        grid-column: 2;
        justify-content: flex-start;
        min-width: 0;
        flex-wrap: wrap;
    }

    .hub-brief-headline {
        font-size: 14px;
    }

    .hub-split-row {
        grid-template-columns: 1fr;
    }

    .hub-breaking-card {
        flex: none;
        width: 100%;
    }

    .hub-watchlist-card {
        flex: none;
        width: 100%;
    }

    .hub-position-card {
        flex: 0 0 156px;
    }

    .hub-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hub-feed-controls {
        flex-wrap: wrap;
    }
}

/* ── Dark Mode ── */
body.dark-mode .hub-module,
body.dark-mode .hub-sidebar-section {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .hub-module:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

body.dark-mode .hub-module-title {
    color: #e2e8f0;
}

body.dark-mode .hub-module-title i {
    color: #94a3b8;
}

body.dark-mode .hub-position-card {
    background: #0f172a;
    border-color: #334155;
}

body.dark-mode .hub-position-card:hover {
    background: #1e293b;
    border-color: #475569;
}

body.dark-mode .hub-position-ticker {
    color: #f1f5f9;
}

body.dark-mode .hub-breaking-card {
    background: rgba(26, 26, 14, 0.85);
    border-color: #4a3f1f;
}

body.dark-mode .hub-breaking-card:hover {
    border-color: #d97706;
}

body.dark-mode .hub-breaking-ticker {
    color: #f1f5f9;
}

body.dark-mode .hub-breaking-headline {
    color: #cbd5e1;
}

body.dark-mode .hub-watchlist-card {
    background: #0f1729;
    border-color: #312e81;
}

body.dark-mode .hub-watchlist-card:hover {
    background: #1e1b4b;
    border-color: #4338ca;
}

body.dark-mode .hub-watchlist-ticker {
    color: #f1f5f9;
}

body.dark-mode .hub-watchlist-headline {
    color: #94a3b8;
}

body.dark-mode .hub-watchlist-time {
    color: #a5b4fc;
    background: #1e1b4b;
}

body.dark-mode .hub-signal-row:hover {
    background: #0f172a;
}

body.dark-mode .hub-signal-row {
    border-bottom-color: #1e293b;
}

body.dark-mode .hub-signal-headline {
    color: #e2e8f0;
}

body.dark-mode .hub-signal-meta-ticker {
    color: #94a3b8;
}

body.dark-mode .hub-signal-entry {
    color: #94a3b8;
}

body.dark-mode .hub-signal-dir-label.bullish {
    background: #052e16;
    color: #4ade80;
}

body.dark-mode .hub-signal-dir-label.bearish {
    background: #450a0a;
    color: #f87171;
}

body.dark-mode .hub-signal-dir-label.neutral {
    background: #1e293b;
    color: #94a3b8;
}

body.dark-mode .hub-signal-bookmark {
    color: #475569;
}

body.dark-mode .hub-signal-bookmark:hover {
    color: #60a5fa;
}

body.dark-mode .hub-signal-bookmark.bookmarked {
    color: #60a5fa;
}

body.dark-mode .hub-watchlist-toggle {
    color: #475569;
    border-color: #334155;
}

body.dark-mode .hub-watchlist-toggle:hover {
    color: #60a5fa;
    border-color: #60a5fa;
    background: #1e293b;
}

body.dark-mode .perf-watchlist-toggle {
    color: #475569;
    border-color: #334155;
}

body.dark-mode .perf-watchlist-toggle:hover {
    color: #60a5fa;
    border-color: #60a5fa;
    background: #1e293b;
}

body.dark-mode .hub-watchlist-no-analysis {
    color: #475569;
}

body.dark-mode .perf-scroll-wrap::-webkit-scrollbar-thumb {
    background: #475569;
}

body.dark-mode .perf-sticky-col {
    background: #0f172a;
}

body.dark-mode .perf-scroll-wrap.is-scrolled .perf-sticky-col {
    box-shadow: 4px 0 8px -2px rgba(0, 0, 0, .3);
}

body.dark-mode .hub-sort-select {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

body.dark-mode .hub-chip {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

body.dark-mode .hub-chip.active {
    background: #1e3a5f;
    border-color: #3b82f6;
    color: #93c5fd;
}

body.dark-mode .hub-load-more {
    background: #0f172a;
    border-top-color: #1e293b;
    color: #60a5fa;
}

body.dark-mode .hub-sidebar-title {
    color: #94a3b8;
}

body.dark-mode .hub-market-symbol {
    color: #e2e8f0;
}

body.dark-mode .hub-market-row {
    border-bottom-color: #1e293b;
}

body.dark-mode .hub-market-bar-title {
    color: #94a3b8;
}

body.dark-mode .hub-leader-row {
    border-bottom-color: #1e293b;
}

body.dark-mode .hub-leader-ticker {
    color: #e2e8f0;
}

body.dark-mode .hub-stat-card {
    background: #0f172a;
}

body.dark-mode .hub-stat-card-value {
    color: #e2e8f0;
}

body.dark-mode .hub-empty-state {
    color: #64748b;
}

/* ── Dark Mode: Industry Section Inline Filters ── */
body.dark-mode .hub-ind-filter-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

body.dark-mode .hub-ind-filter-btn:hover {
    background: #334155;
    border-color: #475569;
}

body.dark-mode .hub-ind-filter-btn.active {
    background: #1e3a5f;
    border-color: #3b82f6;
    color: #60a5fa;
}

body.dark-mode .hub-ind-filter-btn.active[data-dir="bullish"] {
    background: #052e16;
    border-color: #10b981;
    color: #4ade80;
}

body.dark-mode .hub-ind-filter-btn.active[data-dir="bearish"] {
    background: #450a0a;
    border-color: #ef4444;
    color: #f87171;
}

body.dark-mode .hub-ind-catalyst-btn.active.cat-pro {
    background: #451a03;
    border-color: #f59e0b;
    color: #fbbf24;
}

body.dark-mode .hub-ind-catalyst-btn.active.cat-std {
    background: #1e1b4b;
    border-color: #818cf8;
    color: #a5b4fc;
}

body.dark-mode .hub-ind-filter-sep {
    background: #334155;
}

body.dark-mode .hub-ind-chip.chip-dir {
    background: #1e3a5f;
    border-color: #2563eb;
    color: #60a5fa;
}

body.dark-mode .hub-ind-chip.chip-dir.chip-bullish {
    background: #052e16;
    border-color: #10b981;
    color: #4ade80;
}

body.dark-mode .hub-ind-chip.chip-dir.chip-bearish {
    background: #450a0a;
    border-color: #ef4444;
    color: #f87171;
}

body.dark-mode .hub-ind-chip.chip-cat-pro {
    background: #451a03;
    border-color: #f59e0b;
    color: #fbbf24;
}

body.dark-mode .hub-ind-chip.chip-cat-std {
    background: #1e1b4b;
    border-color: #818cf8;
    color: #a5b4fc;
}

/* ── Dark Mode: Industry Card Grid ── */
body.dark-mode .hub-industry-grid-body {
    scrollbar-color: #475569 transparent;
}

body.dark-mode .hub-industry-grid-body::-webkit-scrollbar-thumb {
    background: #475569;
}

body.dark-mode .hub-industry-label {
    color: #94a3b8;
}

body.dark-mode .hub-industry-label i {
    color: #64748b;
}

body.dark-mode .hub-industry-count {
    background: #334155;
    color: #94a3b8;
}

body.dark-mode .hub-pro-section {
    border-top-color: #334155;
}

body.dark-mode .hub-pro-banner {
    background: linear-gradient(135deg, #1a1a0e 0%, #1c1805 100%);
    border-color: rgba(245, 158, 11, 0.25);
}

body.dark-mode .hub-pro-banner:hover {
    border-color: #d97706;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.1);
}

body.dark-mode .hub-pro-banner-icon {
    background: rgba(245, 158, 11, 0.15);
}

body.dark-mode .hub-pro-banner-title {
    color: #fbbf24;
}

body.dark-mode .hub-pro-banner-sub {
    color: #d97706;
}

body.dark-mode .hub-signal-card {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .hub-signal-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .hub-card-ticker {
    color: #f1f5f9;
}

body.dark-mode .hub-card-dir.bull {
    background: #052e16;
    color: #4ade80;
}

body.dark-mode .hub-card-dir.bear {
    background: #450a0a;
    color: #f87171;
}

body.dark-mode .hub-card-dir.neutral {
    background: #1e293b;
    color: #94a3b8;
}

body.dark-mode .hub-card-headline {
    color: #94a3b8;
}

body.dark-mode .hub-card-time {
    color: #64748b;
}

body.dark-mode .hub-card-catalyst.pro {
    background: #451a03;
    color: #fbbf24;
}

body.dark-mode .hub-card-catalyst.cat {
    background: #1e1b4b;
    color: #a5b4fc;
}

body.dark-mode .hub-signal-card:hover .hub-card-expand {
    border-left-color: #334155;
}

body.dark-mode .hub-card-detail {
    color: #94a3b8;
}

body.dark-mode .hub-card-detail span:last-child {
    color: #cbd5e1;
}

body.dark-mode .hub-industry-track {
    scrollbar-color: #475569 transparent;
}

body.dark-mode .hub-industry-track::-webkit-scrollbar-thumb {
    background: #475569;
}

body.dark-mode .hub-industry-track::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ── Hub Keyframe Animations ── */
@keyframes hubCardEnter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hubBookmarkPop {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.35);
    }

    60% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes hubDropdownIn {
    from {
        opacity: 0;
        transform: scaleY(0.92) translateY(-6px);
    }

    to {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
}

@keyframes hubFadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hubModalIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes hubOverlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hubPulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.2);
    }

    50% {
        box-shadow: 0 0 12px 4px rgba(245, 158, 11, 0.15);
    }
}

@keyframes hubShimmer {
    from {
        background-position: -200px 0;
    }

    to {
        background-position: 200px 0;
    }
}

/* Card entrance animation class (applied via JS with stagger) */
.hub-card-enter {
    animation: hubCardEnter 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Fade-slide-up for sections */
.hub-section-enter {
    animation: hubFadeSlideUp 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Upgrade modal animation */
.hub-modal-overlay {
    animation: hubOverlayIn 0.25s ease both;
}

.hub-modal-content {
    animation: hubModalIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Pro banner glow pulse */
.hub-pro-banner {
    animation: hubPulseGlow 3s ease-in-out infinite;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {

    .hub-card-enter,
    .hub-section-enter,
    .hub-modal-overlay,
    .hub-modal-content,
    .hub-pro-banner,
    .hub-signal-bookmark.bookmarked,
    .hub-industry-dropdown-panel,
    .hub-card-expand {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}

/* ── View Toggle Button ── */
.hub-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hub-view-toggle:hover {
    background: #e2e8f0;
    color: #3b82f6;
    border-color: #93c5fd;
    transform: translateY(-1px);
}

.hub-view-toggle.active {
    background: #eff6ff;
    color: #2563eb;
    border-color: #93c5fd;
}

body.dark-mode .hub-view-toggle {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

body.dark-mode .hub-view-toggle:hover,
body.dark-mode .hub-view-toggle.active {
    background: #1e3a5f;
    color: #60a5fa;
    border-color: #3b82f6;
}


/* ============================================================
   PERFORMANCE TRACKER � viewport-bound layout with internal scroll
   Final override (must remain at end of file to win cascade)
   Goal: tracker height = window viewport; only the table scrolls
   vertically inside; tabs, summary stats, and table header are
   pinned. Works in both grid-layout-mode and the default sticky
   sidebar mode.
   ============================================================ */

/* Desktop only (mobile keeps natural document flow) */
@media (min-width: 1025px) {

    /* --- Right sidebar column -------------------------------------------- */
    #rightSidebarContainer {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Default (non-grid) layout: sticky to top of viewport */
    body:not(.grid-layout-mode) #rightSidebarContainer {
        position: sticky !important;
        top: 80px !important;
        height: calc(100vh - 96px) !important;
        max-height: calc(100vh - 96px) !important;
        padding-bottom: 16px !important;
    }

    /* Grid layout: parent .main-dashboard is height: calc(100vh - 64px) */
    body.grid-layout-mode #rightSidebarContainer {
        position: relative !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    /* --- The white card fills the column --------------------------------- */
    .right-sidebar-card {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    /* --- Tabs row (Active / Watchlist / Market) -------------------------- */
    #rightSidebarTabs {
        flex: 0 0 auto !important;
        position: relative !important;
        background: #fff !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    /* --- Sliding panel container (holds performance + market panels) ----- */
    #rightPanelSlider {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* --- Active panel (performance or market data) ----------------------- */
    /* Performance panel uses internal flex scroll (table scrolls inside).
       Market panel just scrolls its own content vertically. */
    #performancePanel {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
        padding: 14px 14px 0 14px !important;
    }

    #marketDataPanel {
        flex: 1 1 auto !important;
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(0, 0, 0, 0.22) transparent !important;
        padding: 14px !important;
    }

    #marketDataPanel::-webkit-scrollbar {
        width: 8px !important;
        display: block !important;
    }
    #marketDataPanel::-webkit-scrollbar-track {
        background: transparent !important;
    }
    #marketDataPanel::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.22) !important;
        border-radius: 4px !important;
    }
    #marketDataPanel::-webkit-scrollbar-thumb:hover {
        background: rgba(15, 23, 42, 0.4) !important;
    }

    /* Hidden panels stay hidden even with display override.
       The .hidden class (Tailwind) is the single source of truth for tab
       visibility — every tab handler toggles it correctly.
       Specificity boost (double class) so this beats older rules like
       `body:not(.grid-layout-mode) #performancePanel { display: flex }`
       which have specificity (0,1,1,1) — we need (0,1,2,0)+ to win. */
    #rightPanelSlider #performancePanel.hidden,
    #rightPanelSlider #marketDataPanel.hidden,
    #performancePanel.hidden.hidden,
    #marketDataPanel.hidden.hidden {
        display: none !important;
    }

    /* --- Pinned header region: stats banner + summary -------------------- */
    #rightSidebarStatsRegime,
    #performanceSummary {
        flex: 0 0 auto !important;
        position: static !important;
        top: auto !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }

    /* --- Static HTML wrapper around #topPerformers (div.bg-white) -------- */
    /* This wrapper is hard-coded in dashboard.html as the parent of #topPerformers.
       Without flex sizing it collapses to content height, leaving #topPerformers
       with no space to grow into. */
    #performancePanel > .bg-white:has(#topPerformers),
    #performancePanel > div.bg-white {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    /* --- Top performers wrap = grows to fill remaining space ------------- */
    #topPerformers {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    /* Direct child wrapper rendered by JS: <div class="bg-white rounded-lg border ..."> */
    #topPerformers > div.bg-white {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }

    /* --- THE scroll region: only this scrolls vertically ----------------- */
    #topPerformers .perf-scroll-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-gutter: stable !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(0, 0, 0, 0.22) transparent !important;
    }

    #topPerformers .perf-scroll-wrap::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important;
        display: block !important;
    }
    #topPerformers .perf-scroll-wrap::-webkit-scrollbar-track {
        background: transparent !important;
    }
    #topPerformers .perf-scroll-wrap::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.22) !important;
        border-radius: 4px !important;
    }
    #topPerformers .perf-scroll-wrap::-webkit-scrollbar-thumb:hover {
        background: rgba(15, 23, 42, 0.4) !important;
    }

    /* --- Sticky table header inside the scroll region ------------------- */
    #topPerformers .perf-table {
        position: relative !important;
    }
    #topPerformers .perf-table thead {
        position: sticky !important;
        top: 0 !important;
        z-index: 14 !important;
    }
    #topPerformers .perf-table thead tr th {
        background: linear-gradient(to right, #f9fafb, #f3f4f6) !important;
        box-shadow: inset 0 -1px 0 #e5e7eb !important;
    }

    /* Free-tier upgrade footer pinned to bottom of card */
    #topPerformers > div.bg-white > div.text-center {
        flex: 0 0 auto !important;
    }

    /* Beta link sits below the card, not inside the scroll region */
    #betaTradingQuickLink {
        flex: 0 0 auto !important;
        margin-top: 8px !important;
    }

    /* Override the older max-height:600px on this class */
    .performance-leaders-scroll {
        max-height: none !important;
        overflow: hidden !important;
    }
}

/* Mobile / tablet (< 1025px): restore natural document flow */
@media (max-width: 1024px) {
    #rightSidebarContainer,
    .right-sidebar-card,
    #rightPanelSlider,
    #performancePanel,
    #marketDataPanel,
    #topPerformers,
    #topPerformers > div.bg-white,
    #topPerformers .perf-scroll-wrap {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ============================================================
   SIGNAL HUB + LEFT SIDEBAR � match performance tracker height
   Viewport-bound columns with internal scroll regions.
   ============================================================ */

@media (min-width: 1025px) {

    /* Signal hub fills the available space inside main-feed */
    .signal-hub {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .signal-hub-grid {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    /* Two-column container: sticky to top of viewport, viewport-bound height,
       matching the right sidebar's sticky behavior. */
    body:not(.grid-layout-mode) .signal-hub-columns {
        position: sticky !important;
        top: 80px !important;
        align-self: stretch !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: calc(100vh - 96px) !important;
        max-height: calc(100vh - 96px) !important;
        min-height: 0 !important;
        align-items: stretch !important;
    }

    /* Ensure the hub-module (section) fills the main column width */
    body:not(.grid-layout-mode) .signal-hub-main > .hub-module,
    body:not(.grid-layout-mode) .signal-hub-main > .hub-module-feed {
        width: 100% !important;
        box-sizing: border-box !important;
        align-self: stretch !important;
    }

    /* Left sidebar: full column height, scroll internally */
    body:not(.grid-layout-mode) .hub-left-sidebar {
        position: relative !important;
        top: auto !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    /* Main column: flex column, internal scroll handled by grid-body */
    body:not(.grid-layout-mode) .signal-hub-main {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* The feed module fills the main column */
    body:not(.grid-layout-mode) .signal-hub-main .hub-module-feed {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Pinned header + chips inside the feed module */
    body:not(.grid-layout-mode) .signal-hub-main .hub-module-feed > .hub-module-header,
    body:not(.grid-layout-mode) .signal-hub-main .hub-module-feed > .hub-industry-chips {
        flex: 0 0 auto !important;
    }

    /* Industry grid body = the only scroll region inside the main column */
    body:not(.grid-layout-mode) .hub-industry-grid-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable !important;
    }

    /* Grid-layout-mode: parent .main-feed is already viewport-bound and scrollable,
       so signal hub should flow naturally inside it (no sticky / no inner scroll
       fighting the outer scroll). */
    body.grid-layout-mode .signal-hub-columns {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        max-height: none !important;
    }

    body.grid-layout-mode .hub-left-sidebar {
        position: sticky !important;
        top: 0 !important;
        height: auto !important;
        max-height: calc(100vh - 64px) !important;
    }

    body.grid-layout-mode .signal-hub-main {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.grid-layout-mode .hub-industry-grid-body {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Mobile / tablet: natural document flow */
@media (max-width: 1024px) {
    .signal-hub-columns,
    .hub-left-sidebar,
    .signal-hub-main,
    .hub-industry-grid-body {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}