/* Dashboard Specific Styles */

:root {
    --bg-primary: #f5f5f5;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;
    --border-color: #e5e7eb;
    --text-primary: #1a1a1a;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --hover-bg: #f3f4f6;
    --sidebar-bg: #ffffff;
    --accent-orange: #ff6b00;
    --accent-orange-light: rgba(255, 107, 0, 0.1);
    --accent-orange-medium: rgba(255, 107, 0, 0.2);
    --primary: #ff6b00;
    --primary-dark: #e05d00;
}

body.dark-mode {
    --bg-primary: #141517;
    --bg-secondary: #1a1c1e;
    --bg-card: #1a1a1a;
    --border-color: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --hover-bg: #1f1f1f;
    --sidebar-bg: #141517;
    --accent-orange: #ff8534;
    --accent-orange-light: rgba(255, 133, 52, 0.15);
    --accent-orange-medium: rgba(255, 133, 52, 0.3);
    --primary: #ff8534;
    --primary-dark: hsl(217 100% 25%);
    background: #141517 !important;
}

/* Alert Bar */
.alert-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-dark);
    padding: 0 16px;
    z-index: 40;
    transition: background 0.3s;
}

.alert-text {
    font-size: 0.875rem;
    color: #ffffff;
    font-weight: 300;
    text-align: center;
    margin: 0;
}

.dashboard-navbar {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 16px;
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 30;
    transition: background 0.3s, border-color 0.3s;
}

.dashboard-nav {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 1rem;
}

.nav-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-left .nav-logo {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: var(--text-primary);
    white-space: nowrap;
}

.logo-text {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    transition: color 0.3s;
}

.badge-live {
    background: hsl(29 100% 47% / 0.2);
    border: 1px solid hsl(29 100% 47% / 0.3);
    color: hsl(29 100% 47%);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: 8px;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.badge-beta {
    display: none;
    background: hsl(29 100% 47%);
    border: none;
    color: #ffffff;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    margin-left: 6px;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* Mobile Welcome Banner - hidden on desktop */
.mobile-welcome-banner {
    display: none;
    background: var(--bg-card, #1a1a1a);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 0.5rem;
    position: relative;
    overflow: hidden;
}

.mobile-welcome-content {
    flex: 1;
    min-width: 0;
}

.mobile-welcome-title {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 1.1rem;
    font-weight: 800;
    color: hsl(29, 100%, 47%);
    letter-spacing: 0.02em;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.mobile-welcome-text {
    font-size: 0.8rem;
    color: var(--text-secondary, #a0a0a0);
    line-height: 1.5;
    margin: 0;
}

.mobile-welcome-highlight {
    background: #ccff00;
    color: #111;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
}

.mobile-welcome-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 56px;
    height: 56px;
    object-fit: contain;
    opacity: 0.9;
}

.mobile-welcome-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.mobile-welcome-dismiss {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary, #a0a0a0);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-welcome-dismiss:hover {
    background: rgba(255, 255, 255, 0.12);
}

.mobile-welcome-cta {
    flex: 1;
    background: hsl(29, 100%, 47%);
    border: none;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-welcome-cta:hover {
    background: hsl(29, 100%, 55%);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .7;
    }
}

.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 512px;
    margin: 0 auto;
}

.search-container {
    position: relative;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 10px 16px 10px 44px;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: all 0.3s;
}

.search-input:focus {
    outline: none;
    border-color: var(--text-muted);
    background: var(--bg-primary);
}

.search-input::placeholder {
    color: #9ca3af;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Variant Avatar Button - Special expanding button */
.nav-icon-btn.variant-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    border-radius: 4px;
    text-decoration: none;
    padding: 0;
    width: 36px;
    height: 36px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-right: 8px;
}

.nav-icon-btn.variant-avatar-btn:hover {
    width: auto;
    padding: 8px 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.icon-v {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.nav-icon-btn.variant-avatar-btn:hover .icon-v {
    color: #ea580c;
}

.nav-icon-btn .btn-text {
    display: none;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    color: #ea580c;
    margin-left: 8px;
    white-space: nowrap;
}

.nav-icon-btn.variant-avatar-btn:hover .btn-text {
    display: inline;
}

/* Standard Nav Buttons - Ghost style with exact specifications */
.nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--text-primary);
    text-decoration: none;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    white-space: nowrap;
}

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

.nav-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-primary);
    flex-shrink: 0;
}

.sign-out-btn {
    margin-left: 4px;
}

/* Theme Toggle */
.theme-toggle {
    position: relative;
}

.theme-icon {
    transition: all 0.3s ease;
}

.sun-icon {
    display: block;
}

.moon-icon {
    display: none;
}

body.dark-mode .sun-icon {
    display: none;
}

body.dark-mode .moon-icon {
    display: block;
}

body.dark-mode .dashboard-navbar {
    background: #141517;
}

body.dark-mode .dashboard-layout {
    background: #141517;
}

.theme-toggle:hover {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
}

.theme-toggle:hover svg {
    stroke: #ffffff;
}

/* Dashboard Layout */
.dashboard-layout {
    display: flex;
    margin-top: 104px;
    min-height: calc(100vh - 104px);
    background: var(--bg-primary);
    transition: background 0.3s;
}

.sidebar {
    position: fixed;
    top: 104px; /* 40px alert bar + 64px navbar */
    left: 0;
    bottom: 0;
    width: 256px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    padding: 1.5rem 0;
    overflow-y: auto;
    transition: background 0.3s, border-color 0.3s;
    z-index: 10;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.sidebar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.sidebar-section {
    margin-bottom: 2rem;
}

.sidebar-heading {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 1.5rem;
    margin-bottom: 0.75rem;
    transition: color 0.3s;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    position: relative;
}

.sidebar-link:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.sidebar-link.active {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.sidebar-link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

.sidebar-link > span:first-of-type:not(.pulse-container) {
    flex: 1;
}

/* Pro Intelligence Special Button */
.sidebar-link-pro {
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0.625rem 1.5rem !important;
    position: relative;
    overflow: visible;
}

.sidebar-link-pro::before {
    display: none;
}

.sidebar-link-pro:hover::before {
    display: none;
}

.sidebar-link-pro:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
    border: none;
    transform: none;
}

.sidebar-link-pro svg {
    color: rgba(255, 255, 255, 0.7);
}

.pro-badge {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;

}

.new-badge {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}


    letter-spacing: 0.05em;
    margin-left: auto;
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(139, 92, 246, 0.5);
    }
    50% {
        box-shadow: 0 0 10px rgba(139, 92, 246, 0.8), 0 0 15px rgba(139, 92, 246, 0.4);
    }
}

/* Animated Pulse Dot for Jobs */
.pulse-container {
    position: relative;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pulse-dot {
    position: absolute;
    border-radius: 50%;
}

.pulse-outer {
    width: 16px;
    height: 16px;
    background: #16a34a;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.75;
}

.pulse-inner {
    width: 10px;
    height: 10px;
    background: #16a34a;
}

@keyframes ping {
    75%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Badges */
.badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-left: auto;
}

.badge-new {
    background: #ef4444;
    color: #ffffff;
}

.badge-trending {
    background: #16a34a;
    color: #ffffff;
}

/* Category Links */
.sidebar-category {
    font-size: 0.8125rem;
}

.category-icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.category-icon {
    width: 16px;
    height: 16px;
    background: var(--text-primary);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.625rem;
    flex-shrink: 0;
    transition: all 0.3s;
}

.category-icon-img {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    transition: all 0.3s;
}

.category-icon-yellow {
    background: #fbbf24;
    color: #000000;
}

body.dark-mode .category-icon-yellow {
    background: var(--accent-orange);
    color: #000000;
}

/* Main Content */
.dashboard-main {
    flex: 1;
    margin-left: 256px; /* Match sidebar width */
    padding: 2rem;
    overflow-y: auto;
    background: var(--bg-primary);
    transition: background 0.3s;
}

/* Featured Showcase Section */
.featured-showcase-section {
    max-width: 1200px;
    margin: 0 auto 1.5rem auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    padding: 0.5rem 0.75rem;
    box-shadow: none;
}

/* Light mode - add blue accent and gradient */
body:not(.dark-mode) .featured-showcase-section {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Featured Section Header */
.featured-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--border-color);
}

.featured-section-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0;
}

/* Light mode - make title more prominent with black */
body:not(.dark-mode) .featured-section-title {
    color: #000000;
    font-weight: 700;
}

body:not(.dark-mode) .featured-section-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.featured-live-indicator-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: #10b981;
    letter-spacing: 0.5px;
}

.featured-live-dot {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.5;
        transform: scale(0.9);
    }
}

/* Navigation Arrows */
.featured-nav-arrows {
    display: flex;
    gap: 0.375rem;
}

.featured-nav-btn {
    background: transparent;
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    padding: 0;
}

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

.featured-nav-btn:active {
    transform: scale(0.95);
}

/* Grid Container for Tiled Cards - Horizontal Scroll */
.featured-grid-container {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.25rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.featured-grid-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

/* Individual Featured Card */
.featured-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    min-width: 440px;
    max-width: 440px;
    flex-shrink: 0;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

body:not(.dark-mode) .featured-card {
    background: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body:not(.dark-mode) .featured-card:hover {
    background: #ebebeb;
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.featured-card:hover {
    background: var(--hover-bg);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Card Video/Thumbnail */
.featured-card-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.featured-card-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-card-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    transition: opacity 0.25s ease, background 0.2s ease;
    pointer-events: none;
}

.featured-card:hover .featured-card-play-overlay {
    opacity: 0;
}

.featured-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8eaed 0%, #f1f3f4 50%, #e8eaed 100%);
    position: relative;
}

.featured-card-placeholder img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

/* Card Info Section */
.featured-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* Card Header (Avatar + Name) */
.featured-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.featured-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.featured-card-author {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.featured-card-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.featured-card-expert-icon {
    width: 14px;
    height: 14px;
    color: #fbbf24;
    flex-shrink: 0;
}

/* Card Title */
.featured-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Card Badges and Tags Row (Horizontally Scrollable) */
.featured-card-badges-row {
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(249, 115, 22, 0.3) transparent;
}

.featured-card-badges-row::-webkit-scrollbar {
    height: 4px;
}

.featured-card-badges-row::-webkit-scrollbar-track {
    background: transparent;
}

.featured-card-badges-row::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.3);
    border-radius: 2px;
}

.featured-card-badges-row::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.5);
}

.featured-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    background: var(--accent-orange-light);
    border: 1px solid var(--accent-orange-medium);
    color: var(--accent-orange);
}

.featured-card-badge.exclusive-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
}

.featured-card-badge.research-badge {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: #fff;
}

.featured-card-badge.ticker-badge {
    background: #ccff00;
    color: #000;
}
}
}

/* Featured Placeholder (for items without video) */
.featured-showcase-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(249, 115, 22, 0.1));
}

/* Category Filter Section */
.category-filter-section {
    display: flex;
    gap: 1rem;
    margin: 0 auto 2rem auto;
    max-width: 1200px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.05);
    color-scheme: dark;
}

.category-filter-section::-webkit-scrollbar {
    height: 6px;
}

.category-filter-section::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.category-filter-section::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.category-filter-section::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.category-filter-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 320px;
    height: 100px;
    padding: 16px;
    background: var(--bg-primary);
    border: 1.5px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px var(--accent-orange-light);
    overflow: hidden;
    flex-shrink: 0;
}

.category-filter-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    padding: 1.5px;
    background: linear-gradient(to bottom right,
        rgba(249, 115, 22, 0.25),
        rgba(251, 146, 60, 0.18),
        rgba(249, 115, 22, 0.12)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.category-filter-card.active {
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.22);
}

/* Light mode - make cards much darker and more vibrant */
body:not(.dark-mode) .category-filter-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border: 1.5px solid rgba(255, 126, 31, 0.3);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

body:not(.dark-mode) .category-filter-card:hover {
    border-color: rgba(255, 126, 31, 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

body:not(.dark-mode) .category-filter-card.active {
    box-shadow: 0 8px 28px rgba(255, 126, 31, 0.4) !important;
}

/* Purple card (Featured Event) - more vibrant in light mode */
body:not(.dark-mode) .category-filter-card[data-category="hedge-fund-event"] {
    background: linear-gradient(135deg, #1a0a2e 0%, #3d1f5c 100%) !important;
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 6px 18px rgba(147, 51, 234, 0.3) !important;
}

body:not(.dark-mode) .category-filter-card[data-category="hedge-fund-event"]:hover {
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 0 8px 26px rgba(147, 51, 234, 0.4) !important;
}

/* Blue card (Create Agent) - more vibrant in light mode */
body:not(.dark-mode) .category-filter-card[data-category="build-avatar"] {
    background: linear-gradient(135deg, #0a1929 0%, #1e3a5f 100%) !important;
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.3) !important;
}

body:not(.dark-mode) .category-filter-card[data-category="build-avatar"]:hover {
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 8px 26px rgba(59, 130, 246, 0.4) !important;
}

/* Investment Strategy cards - vibrant orange gradients in light mode */
body:not(.dark-mode) .category-filter-card[data-category="special-situations"],
body:not(.dark-mode) .category-filter-card[data-category="activist"] {
    background: linear-gradient(to bottom right, #2a1506, rgba(255, 126, 31, 0.6), rgba(251, 146, 60, 0.5), #2a1506) !important;
    border-color: rgba(255, 126, 31, 0.5);
    box-shadow: 0 6px 20px rgba(255, 107, 26, 0.4) !important;
}

body:not(.dark-mode) .category-filter-card[data-category="special-situations"]:hover,
body:not(.dark-mode) .category-filter-card[data-category="activist"]:hover {
    border-color: rgba(255, 126, 31, 0.7);
    box-shadow: 0 8px 26px rgba(255, 107, 26, 0.5) !important;
}

/* Sector Focus cards - vibrant orange in light mode */
body:not(.dark-mode) .category-filter-card[data-category="technology"],
body:not(.dark-mode) .category-filter-card[data-category="industrials"],
body:not(.dark-mode) .category-filter-card[data-category="healthcare"] {
    background: linear-gradient(to bottom right, #2a1506, rgba(255, 126, 31, 0.55), rgba(251, 146, 60, 0.45), #2a1506) !important;
    border-color: rgba(255, 126, 31, 0.5);
    box-shadow: 0 6px 20px rgba(255, 126, 31, 0.4) !important;
}

body:not(.dark-mode) .category-filter-card[data-category="technology"]:hover,
body:not(.dark-mode) .category-filter-card[data-category="industrials"]:hover,
body:not(.dark-mode) .category-filter-card[data-category="healthcare"]:hover {
    border-color: rgba(255, 126, 31, 0.7);
    box-shadow: 0 8px 26px rgba(255, 126, 31, 0.5) !important;
}

/* Text colors for light mode - keep text bright on dark cards */
body:not(.dark-mode) .category-filter-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

body:not(.dark-mode) .category-filter-title {
    color: rgba(255, 255, 255, 0.95);
}

body:not(.dark-mode) .category-filter-description {
    color: rgba(255, 255, 255, 0.65);
}

body:not(.dark-mode) .category-filter-button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 1);
}

.category-filter-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1;
    align-items: flex-start;
}

.category-filter-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    text-transform: uppercase;
    width: auto;
}

.category-filter-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    width: auto;
}

.category-filter-description {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.3;
    width: auto;
}

.category-filter-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 1);
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: auto;
    white-space: nowrap;
}

.category-filter-visual {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 100px;
    object-fit: contain;
    z-index: 0;
    padding-left: 3px;
}

.dashboard-content {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    color: var(--text-primary);
    transition: color 0.3s;
    align-items: start;
}

.feed-container {
    width: 100%;
}

.feed-right-column {
    position: sticky;
    top: 2rem;
    align-self: start;
}

/* Hide right column below 1200px and let content expand */
@media (max-width: 1200px) {
    .dashboard-content {
        grid-template-columns: 1fr;
    }

    .feed-right-column {
        display: none;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .sidebar {
        width: 200px;
    }
    
    .nav-center {
        max-width: 300px;
    }
    
    .feed-upnext-card {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* This is now handled by the new mobile responsive section at the end */
}

/* ============================================
   TWITCH-STYLE CONTENT LAYOUT
   ============================================ */

/* Featured Section */
.featured-section {
    margin-bottom: 2rem;
}

.featured-container {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 0;
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    height: 360px;
}

.featured-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    gap: 1.5rem;
    background: #1a1a1a;
}

.streamer-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.streamer-avatar-large {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: none;
}

.streamer-info {
    flex: 1;
}

.streamer-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    line-height: 1;
}

.stream-stats-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.live-badge {
    background: #00c853;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}

.viewer-count-large {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #ffffff;
}

.featured-stream-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stream-subtitle {
    font-size: 0.9375rem;
    color: #b0b0b0;
    line-height: 1.5;
    margin: 0;
}

.stream-category {
    font-size: 0.875rem;
    color: #b0b0b0;
    margin: 0;
}

.age-badge {
    background: var(--accent-orange-light);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    color: var(--accent-orange);
    border: 1px solid var(--accent-orange-medium);
}

.featured-right {
    position: relative;
    min-height: 360px;
    height: 100%;
}

.featured-main-image,
.featured-main-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-fade-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 150px;
    background: linear-gradient(to right, var(--bg-card) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.sound-toggle-btn {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 2;
}

.sound-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Categories Section */
.categories-section {
    margin-bottom: 3rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.categories-section::-webkit-scrollbar {
    height: 6px;
}

.categories-section::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.categories-section::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.3);
    border-radius: 3px;
}

.categories-section::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.5);
}

.categories-grid {
    display: flex;
    gap: 1rem;
    width: fit-content;
    min-width: 100%;
}

.category-card {
    aspect-ratio: 1;
    min-width: 150px;
    width: 150px;
    flex-shrink: 0;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}

.category-card:hover::before {
    opacity: 1;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.category-emoji {
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.category-name {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    text-align: center;
}

/* Category specific gradients */
.category-value {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(234, 88, 12, 0.25) 100%);
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.category-activism {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(220, 38, 38, 0.2) 100%);
    border: 1px solid rgba(249, 115, 22, 0.25);
}

.category-turnarounds {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(249, 115, 22, 0.15) 100%);
    border: 1px solid rgba(249, 115, 22, 0.25);
}

.category-microcap {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(249, 115, 22, 0.15) 100%);
    border: 1px solid rgba(249, 115, 22, 0.25);
}

.category-venture {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(251, 146, 60, 0.15) 100%);
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.category-overheard {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.15) 0%, rgba(249, 115, 22, 0.1) 100%);
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.category-blockchain {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(16, 185, 129, 0.2) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

@media (max-width: 480px) {
    .category-card {
        min-width: 130px;
        width: 130px;
    }

    .category-emoji {
        font-size: 2rem;
    }
    
    .category-name {
        font-size: 0.75rem;
    }
}

/* Videos Section */
.videos-section {
    margin-bottom: 2rem;
}

.trending-container {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(249, 115, 22, 0.1);
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', 'Monaco', 'Menlo', monospace;
    animation: fadeIn 0.6s ease-out;
    overflow: hidden;
}

.trending-header {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.4), rgba(30, 41, 59, 0.3));
    backdrop-filter: blur(10px);
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(249, 115, 22, 0.15);
}

.trending-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.trending-icon {
    color: #fb923c;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.trending-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fb923c;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.trending-badge {
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.2);
    padding: 0.25rem 0.75rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: #fb923c;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 6px;
}

.videos-grid {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.4), rgba(30, 41, 59, 0.3));
    backdrop-filter: blur(10px);
    padding: 1.5rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 1rem;
}

.video-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s;
    width: 100%;
    min-width: 0;
}

.video-card:hover {
    transform: translateY(-2px);
}

.video-thumbnail {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio - YouTube style */
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.video-thumbnail.vertical {
    padding-bottom: 56.25%; /* 16:9 aspect ratio - YouTube style */
}

.video-thumbnail img,
.video-thumbnail video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
}

.video-info {
    display: flex;
    gap: 0.75rem;
    position: relative;
}

.channel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.video-details {
    flex: 1;
    min-width: 0;
}

.video-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0 0 0.25rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.channel-name {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 0.125rem 0;
}

.video-meta-container {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
}

.video-meta-tags {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.video-meta-tags::-webkit-scrollbar {
    display: none;
}

.video-meta-tickers {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.video-meta {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: var(--accent-orange-light);
    border: 1px solid var(--accent-orange-medium);
    color: var(--accent-orange) !important;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0.025em;
    white-space: nowrap;
    flex-shrink: 0;
}

.ticker-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: #ccff00;
    border: none;
    color: #000000 !important;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
    flex-shrink: 0;
}

body.dark-mode .tag-badge {
    background: var(--accent-orange-light);
    border-color: var(--accent-orange-medium);
    color: var(--accent-orange) !important;
}

body.dark-mode .ticker-badge {
    background: #ccff00;
    color: #000000 !important;
}

.video-menu-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.video-menu-btn:hover {
    background: var(--hover-bg);
}

/* Responsive adjustments for video grid */
@media (max-width: 1400px) {
    .videos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .videos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem 0.75rem;
    }
}

@media (max-width: 768px) {
    .videos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .videos-grid {
        grid-template-columns: 1fr;
    }
    
    .video-card {
        flex-direction: row;
        gap: 0.75rem;
    }
    
    .video-thumbnail {
        width: 168px;
        padding-bottom: 0;
        height: 94px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .video-info {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .channel-avatar {
        display: none;
    }
}

/* Responsive Styles */
@media (min-width: 1440px) {
    .dashboard-content {
        max-width: 1200px;
    }
}

@media (min-width: 1600px) {
    .dashboard-content {
        max-width: 1200px;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .featured-container {
        grid-template-columns: 350px 1fr;
    }
    
    .featured-left {
        padding: 1.5rem;
    }
}

@media (max-width: 1024px) {
    
    .featured-container {
        grid-template-columns: 1fr;
    }
    
    .featured-right {
        min-height: 300px;
    }
    
    .image-fade-overlay {
        display: none;
    }
}

@media (max-width: 768px) {
    .featured-left {
        padding: 1.25rem;
    }
    
    .streamer-avatar-large {
        width: 60px;
        height: 60px;
    }
    
    .streamer-name {
        font-size: 1.5rem;
    }
    
    .featured-stream-title {
        font-size: 1rem;
    }
    
    .featured-right {
        min-height: 250px;
    }
}

@media (max-width: 640px) {
    .featured-left {
        padding: 1rem;
        gap: 1rem;
    }
    
    .streamer-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .featured-stream-title {
        font-size: 0.9375rem;
    }
    
    .sound-toggle-btn {
        width: 40px;
        height: 40px;
    }
}

/* Token Dialog / Modal Styles */
.token-dialog-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.token-dialog-overlay[style*="display: flex"] {
    display: flex !important;
}

.token-dialog {
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 126, 31, 0.3);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* COMMENTED OUT - Conflicts with universal modal in purchase_tokens_modal.html
.token-dialog-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.token-dialog-scroll {
    max-height: calc(90vh - 150px);
    overflow-y: auto;
    padding: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 126, 31, 0.3) transparent;
}

.token-dialog-scroll::-webkit-scrollbar {
    width: 8px;
}

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

.token-dialog-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 126, 31, 0.3);
    border-radius: 4px;
}

.token-dialog-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 126, 31, 0.5);
}

.token-dialog-close-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s;
}

.token-dialog-close-btn:hover {
    color: white;
}
*/

.token-dialog-footer {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    margin-top: 1rem;
}

/* Profile Setup Modal */
        .profile-setup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #141517;
            z-index: 10000;
            justify-content: center;
            align-items: center;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .profile-setup-overlay.show {
            display: flex;
        }

        .profile-setup-progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            z-index: 10002;
        }

        .profile-setup-progress-fill {
            height: 100%;
            background: #ff7e1f;
            transition: width 0.3s ease;
        }

        .profile-setup-modal {
            background: transparent;
            border: none;
            padding: 3rem;
            max-width: 800px;
            width: 100%;
            margin: auto;
            position: relative;
        }

        .profile-setup-step {
            display: none;
            animation: fadeIn 0.4s ease-in;
        }

        .profile-setup-step.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .profile-setup-logo {
            position: fixed;
            top: 2rem;
            left: 2rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            z-index: 10001;
        }

        .profile-setup-logo-text {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            letter-spacing: 0.1em;
        }

        .profile-setup-live {
            background: hsl(29 100% 47% / 0.2);
            border: 1px solid hsl(29 100% 47% / 0.3);
            color: hsl(29 100% 47%);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.625rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }

        .profile-setup-header {
            text-align: left;
            margin-bottom: 3rem;
            padding-top: 2rem;
        }

        .profile-setup-header-compact {
            margin-bottom: 1.5rem;
        }

        .profile-setup-title {
            font-size: 12px;
            font-weight: 400;
            color: #6B7280;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            text-transform: uppercase;
            letter-spacing: 0.35em;
            font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
        }

        .profile-setup-description {
            font-size: 1.125rem;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            max-width: 700px;
            margin: 0 0 0.5rem 0;
        }

        .profile-setup-examples {
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.4);
            line-height: 1.5;
            margin: 0 0 1rem 0;
            font-style: italic;
        }

        .profile-setup-highlight {
            background: #ff7e1f;
            color: #000000;
            padding: 0.125rem 0.375rem;
            border-radius: 4px;
        }

        .profile-setup-trending {
            margin: 2rem 0 1.5rem 0;
        }

        .profile-setup-trending-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 1.5rem;
            font-family: 'IBM Plex Mono', monospace;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .profile-setup-live-indicator {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.4);
        }

        .profile-setup-live-dot {
            width: 8px;
            height: 8px;
            background: #10b981;
            border-radius: 50%;
            position: relative;
            animation: sonarPulse 2s ease-out infinite;
        }

        .profile-setup-live-dot::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            background: #10b981;
            border-radius: 50%;
            animation: sonarRing 2s ease-out infinite;
        }

        @keyframes sonarPulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }

        @keyframes sonarRing {
            0% {
                width: 100%;
                height: 100%;
                opacity: 0.8;
            }
            100% {
                width: 300%;
                height: 300%;
                opacity: 0;
            }
        }

        .profile-setup-insights {
            overflow: hidden;
            position: relative;
            height: 232px; /* Shows exactly 2 cards: (100px + 16px) * 2 = 232px */
        }

        .profile-setup-insights-wrapper {
            display: flex;
            flex-direction: column;
            gap: 1rem; /* 16px gap between cards */
            animation: scrollInsights 18s linear infinite;
        }

        @keyframes scrollInsights {
            0% { transform: translateY(0); }
            8.33% { transform: translateY(0); }
            16.66% { transform: translateY(-116px); }
            25% { transform: translateY(-116px); }
            33.33% { transform: translateY(-232px); }
            41.66% { transform: translateY(-232px); }
            50% { transform: translateY(-348px); }
            58.33% { transform: translateY(-348px); }
            66.66% { transform: translateY(-464px); }
            75% { transform: translateY(-464px); }
            83.33% { transform: translateY(-580px); }
            91.66% { transform: translateY(-580px); }
            100% { transform: translateY(-696px); }
        }

        .profile-setup-insight-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 126, 31, 0.2);
            border-radius: 12px;
            padding: 1.25rem;
            display: flex;
            gap: 1rem;
            align-items: flex-start;
            opacity: 1;
            flex-shrink: 0;
            height: 100px; /* Fixed height for consistent animation */
        }

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

        .profile-setup-insight-logo {
            width: 52px;
            height: 52px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .profile-setup-insight-content {
            flex: 1;
            min-width: 0;
        }

        .profile-setup-insight-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
        }

        .profile-setup-insight-ticker {
            font-size: 0.875rem;
            font-weight: 600;
            color: white;
            font-family: 'IBM Plex Mono', monospace;
        }

        .profile-setup-insight-avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            object-fit: cover;
        }

        .profile-setup-insight-author {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.5);
            font-family: 'IBM Plex Mono', monospace;
        }

        .profile-setup-insight-date {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.4);
            margin-left: auto;
        }

        .profile-setup-insight-text {
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .profile-setup-insights-loading {
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
            padding: 2rem 0;
        }

        .profile-setup-features {
            display: grid;
            gap: 1.5rem;
            margin: 2rem 0 3rem 0;
            max-width: 500px;
            text-align: left;
        }

        .profile-setup-feature {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }

        .profile-setup-feature-icon {
            width: 40px;
            height: 40px;
            min-width: 40px;
            background: rgba(255, 126, 31, 0.1);
            border: 1px solid rgba(255, 126, 31, 0.3);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ff7e1f;
        }

        .profile-setup-feature-content h3 {
            font-size: 1.125rem;
            font-weight: 400;
            color: white;
            margin-bottom: 0.25rem;
        }

        .profile-setup-feature-content p {
            font-size: 0.9375rem;
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.5;
        }

        .profile-setup-form {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            max-width: 400px;
            margin: 0;
        }

        .profile-setup-form-wide {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            width: 100%;
            margin: 0;
        }

        .profile-setup-field {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .profile-setup-label {
            font-size: 1rem;
            font-weight: 400;
            color: white;
            text-align: left;
        }

        .profile-setup-input {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 126, 31, 0.3);
            border-radius: 12px;
            padding: 1rem 1.25rem;
            font-size: 1.125rem;
            color: white;
            transition: all 0.2s;
            text-align: left;
        }

        .profile-setup-input:focus {
            outline: none;
            border-color: rgba(255, 126, 31, 0.6);
            background: rgba(255, 255, 255, 0.08);
        }

        .profile-setup-input-hint {
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.5);
            text-align: left;
        }

        .profile-setup-input-error {
            font-size: 0.875rem;
            color: #ef4444;
            text-align: left;
            font-family: 'Courier New', monospace;
        }

        .profile-setup-input.error {
            border-color: #ef4444;
        }

        .profile-setup-input-checking {
            font-size: 0.875rem;
            color: rgba(255, 126, 31, 0.7);
            text-align: left;
        }

        .profile-setup-select {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 126, 31, 0.3);
            border-radius: 12px;
            padding: 1rem 1.25rem;
            font-size: 1.125rem;
            color: white;
            cursor: pointer;
            transition: all 0.2s;
            text-align: left;
        }

        .profile-setup-select:focus {
            outline: none;
            border-color: rgba(255, 126, 31, 0.6);
            background: rgba(255, 255, 255, 0.08);
        }

        .profile-setup-select option {
            background: #1a1a1a;
            color: white;
        }

        .profile-setup-buttons {
            display: flex;
            gap: 1rem;
            justify-content: flex-start;
            margin-top: 2rem;
        }

        .profile-setup-button {
            background: #ff7e1f;
            border: 1px solid #ff7e1f;
            border-radius: 12px;
            padding: 0.75rem 1.5rem;
            font-size: 0.75rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            cursor: pointer;
            transition: all 0.2s;
            min-width: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
        }

        .profile-setup-button:hover:not(:disabled) {
            background: #ff9840;
            border-color: #ff9840;
            transform: translateY(-1px);
        }

        .profile-setup-button:disabled {
            background: rgba(255, 126, 31, 0.25);
            border: 1px solid rgba(255, 126, 31, 0.5);
            opacity: 0.4;
            cursor: not-allowed;
        }

        .profile-setup-button.secondary {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 126, 31, 0.2);
        }

        .profile-setup-button.secondary:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 126, 31, 0.3);
        }

        .profile-setup-style-bubbles {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .style-bubble {
            background: rgba(255, 126, 31, 0.1);
            border: 1px solid rgba(255, 126, 31, 0.3);
            border-radius: 24px;
            padding: 0.5rem 1.25rem;
            font-size: 1rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .style-bubble:hover {
            background: rgba(255, 126, 31, 0.2);
            border-color: rgba(255, 126, 31, 0.5);
            transform: translateY(-1px);
        }

        .style-bubble.selected {
            background: rgba(255, 126, 31, 0.35);
            border-color: rgba(255, 126, 31, 0.7);
            color: rgba(255, 255, 255, 1);
            box-shadow: 0 0 20px rgba(255, 126, 31, 0.3);
        }

        .profile-setup-progress {
            display: flex;
            gap: 0.5rem;
            justify-content: flex-start;
            margin-top: 3rem;
        }

        .profile-setup-progress-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transition: all 0.3s;
        }

        .profile-setup-progress-dot.active {
            background: #ff7e1f;
            width: 24px;
            border-radius: 4px;
        }

/* Dark Mode Overrides for elements with hardcoded rgba/colors */
body.dark-mode .featured-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .featured-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.05);
}

body.dark-mode .featured-card-placeholder {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .featured-card-placeholder img {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

body.dark-mode .featured-card-name {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .featured-card-title {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .investment-strategy-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .investment-strategy-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .style-bubble {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .style-bubble:hover {
    background: rgba(255, 126, 31, 0.2);
    border-color: rgba(255, 126, 31, 0.5);
}

body.dark-mode .style-bubble.selected {
    background: rgba(255, 126, 31, 0.35);
    border-color: rgba(255, 126, 31, 0.7);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 20px rgba(255, 126, 31, 0.3);
}

body.dark-mode .profile-setup-progress-dot {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .category-filter-card {
    background: linear-gradient(to bottom right,
        #000000,
        rgba(249, 115, 22, 0.08),
        rgba(251, 146, 60, 0.06),
        #000000
    );
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.12);
}

body.dark-mode .category-filter-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .category-filter-title {
    color: rgba(255, 255, 255, 1);
}

body.dark-mode .category-filter-description {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .category-filter-button {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 1);
}

body.dark-mode .featured-showcase-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

body.dark-mode .featured-section-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .featured-section-title {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .featured-nav-btn {
    color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .featured-nav-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

/* ============= ALERTS SYSTEM ============= */

.alerts-indicator {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
}

.alerts-dropdown {
    display: none;
    position: fixed;
    width: 384px;
    max-height: 600px;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 126, 31, 0.3);
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: hidden;
}

.alerts-dropdown.show {
    display: block;
}

.alerts-header {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 126, 31, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alerts-title {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.alerts-unread-badge {
    font-size: 0.75rem;
    color: rgba(255, 126, 31, 0.7);
}

.alerts-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 126, 31, 0.2);
}

.alerts-filter-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    height: 24px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.alerts-filter-btn:hover {
    color: white;
    background: rgba(255, 126, 31, 0.1);
}

.alerts-filter-btn.active {
    background: rgba(255, 126, 31, 0.2);
    color: hsl(29, 100%, 47%);
    border-color: rgba(255, 126, 31, 0.3);
}

.alerts-list {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 126, 31, 0.3) transparent;
}

.alerts-list::-webkit-scrollbar {
    width: 6px;
}

.alerts-list::-webkit-scrollbar-track {
    background: transparent;
}

.alerts-list::-webkit-scrollbar-thumb {
    background: rgba(255, 126, 31, 0.3);
    border-radius: 3px;
}

.alert-item {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 126, 31, 0.2);
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    cursor: pointer;
    transition: background 0.2s;
}

.alert-item:hover {
    background: rgba(255, 126, 31, 0.1);
}

.alert-item-clickable:hover {
    background: rgba(255, 126, 31, 0.15);
}

.alert-icon {
    width: 16px;
    height: 16px;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.alert-icon.transaction { color: #10b981; }
.alert-icon.post { color: #60a5fa; }
.alert-icon.memo { color: #a78bfa; }
.alert-icon.insight { color: hsl(29, 100%, 47%); }
.alert-icon.video { color: #ef4444; }
.alert-icon.subscription { color: #06b6d4; }

/* Trade activity in alerts */
.trade-basket-group { padding: 0; }
.trade-basket-header { padding: 0.625rem 1rem; background: #1f1710; border-bottom: 1px solid #3d2a14; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; position: sticky; top: 0; z-index: 1; }
.trade-basket-name { font-size: 0.75rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; }
.trade-basket-badge { font-size: 0.625rem; font-weight: 600; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.trade-basket-badge.pending { background: #78350f; color: #fbbf24; border: 1px solid #92400e; }
.trade-basket-badge.manage { font-size: 0.625rem; color: #ff7e1f; text-decoration: none; }
.trade-basket-badge.manage:hover { color: #ffa54f; }
.trade-item { padding: 0.5rem 1rem; border-bottom: 1px solid #1e1e1e; display: flex; align-items: center; gap: 0.625rem; font-size: 0.75rem; transition: background 0.15s; }
.trade-item:hover { background: #1f1710; }
.trade-item-side { font-weight: 700; font-size: 0.6875rem; width: 32px; text-align: center; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; }
.trade-item-side.buy { color: #4ade80; }
.trade-item-side.sell { color: #f87171; }
.trade-item-symbol { font-weight: 600; color: #fff; width: 48px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; }
.trade-item-detail { flex: 1; color: #9ca3af; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; }
.trade-item-status { font-size: 0.625rem; font-weight: 600; padding: 2px 5px; border-radius: 3px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; }
.trade-item-status.filled { background: #14532d; color: #4ade80; }
.trade-item-status.pending-order { background: #78350f; color: #fbbf24; }
.trade-item-status.approval { background: none; color: #fb923c; border: none; animation: none; }

/* Autonomous trade indicator — animated 3×3 dot matrix (matches basket cards) */
.trade-dot-matrix { display: grid; grid-template-columns: repeat(3, 4px); grid-template-rows: repeat(3, 4px); gap: 1px; width: fit-content; flex-shrink: 0; }
.trade-dot-matrix > div { width: 4px; height: 4px; background-color: #333; border-radius: 0; animation-duration: 3750ms; animation-iteration-count: infinite; }
.trade-dot-matrix > div:nth-child(1) { animation-name: td-d1; }
.trade-dot-matrix > div:nth-child(2) { animation-name: td-d2; }
.trade-dot-matrix > div:nth-child(3) { animation-name: td-d3; }
.trade-dot-matrix > div:nth-child(4) { animation-name: td-d4; }
.trade-dot-matrix > div:nth-child(5) { animation-name: td-d5; }
.trade-dot-matrix > div:nth-child(6) { animation-name: td-d6; }
.trade-dot-matrix > div:nth-child(7) { animation-name: td-d7; }
.trade-dot-matrix > div:nth-child(8) { animation-name: td-d8; }
.trade-dot-matrix > div:nth-child(9) { animation-name: td-d9; }
@keyframes td-d1 { 0%,36%,56%,76%,96%{background:#333;box-shadow:none;transform:scale(1)} 16%,40%,60%,80%,100%{background:rgba(255,165,0,1);box-shadow:0 0 3px rgba(255,197,0,1);transform:scale(1.15)} }
@keyframes td-d2 { 0%,23%,46%,85%{background:#333;box-shadow:none;transform:scale(1)} 5%,28%,58%,66%{background:rgba(255,165,0,1);box-shadow:0 0 3px rgba(255,197,0,1);transform:scale(1.15)} 100%{background:#333} }
@keyframes td-d3 { 0%,57%,88%{background:rgba(255,165,0,1);box-shadow:0 0 3px rgba(255,197,0,1);transform:scale(1.15)} 18%,65%{background:#333;box-shadow:none;transform:scale(1)} 31%,69%,100%{background:rgba(255,165,0,1);box-shadow:0 0 3px rgba(255,197,0,1);transform:scale(1.15)} }
@keyframes td-d4 { 0%,20%,40%,60%,80%{background:#333;box-shadow:none;transform:scale(1)} 4%,24%,44%,64%,84%{background:rgba(255,165,0,1);box-shadow:0 0 3px rgba(255,197,0,1);transform:scale(1.15)} 100%{background:#333} }
@keyframes td-d5 { 0%,42%,70%,92%{background:rgba(255,165,0,1);box-shadow:0 0 3px rgba(255,197,0,1);transform:scale(1.15)} 20%,50%,78%{background:#333;box-shadow:none;transform:scale(1)} 100%{background:rgba(255,165,0,1)} }
@keyframes td-d6 { 0%,31%,69%,92%{background:#333;box-shadow:none;transform:scale(1)} 5%,43%,74%{background:rgba(255,165,0,1);box-shadow:0 0 3px rgba(255,197,0,1);transform:scale(1.15)} 100%{background:#333} }
@keyframes td-d7 { 0%,21%,50%,67%,89%{background:rgba(255,165,0,1);box-shadow:0 0 3px rgba(255,197,0,1);transform:scale(1.15)} 17%,39%,57%,85%{background:#333;box-shadow:none;transform:scale(1)} 100%{background:rgba(255,165,0,1)} }
@keyframes td-d8 { 0%,38%,69%,92%{background:#333;box-shadow:none;transform:scale(1)} 5%,20%,51%,74%{background:rgba(255,165,0,1);box-shadow:0 0 3px rgba(255,197,0,1);transform:scale(1.15)} 100%{background:#333} }
@keyframes td-d9 { 0%,15%,46%,77%{background:#333;box-shadow:none;transform:scale(1)} 20%,28%,58%,82%{background:rgba(255,165,0,1);box-shadow:0 0 3px rgba(255,197,0,1);transform:scale(1.15)} 100%{background:#333} }
@keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.trade-item-time { font-size: 0.625rem; color: #6b7280; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; }
.trade-approval-actions { display: flex; gap: 0.375rem; margin-left: auto; }
.trade-approval-btn { font-size: 0.625rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; border: none; cursor: pointer; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; }
.trade-approval-btn.approve { background: #14532d; color: #4ade80; border: 1px solid #166534; }
.trade-approval-btn.approve:hover { background: #166534; }
.trade-approval-btn.reject { background: #450a0a; color: #f87171; border: 1px solid #7f1d1d; }
.trade-approval-btn.reject:hover { background: #7f1d1d; }
.trade-empty { padding: 2rem 1.5rem; text-align: center; font-size: 0.8125rem; color: #9ca3af; }

/* Pending trades banner */
.trade-pending-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #422006;
    border-bottom: 1px solid #78350f;
    color: #fbbf24;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    transition: background 0.15s;
}
.trade-pending-banner:hover {
    background: #78350f;
}
.trade-pending-banner strong {
    font-weight: 700;
    color: #fbbf24;
}

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

.alert-type-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.alert-type {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 126, 31, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.alert-unread-dot {
    width: 8px;
    height: 8px;
    background: hsl(29, 100%, 47%);
    border-radius: 50%;
}

.alert-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.alert-description {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.alert-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.6875rem;
}

.alert-timestamp {
    color: rgba(255, 255, 255, 0.4);
}

.alert-amount {
    font-weight: 600;
    color: #10b981;
}

.alerts-empty {
    padding: 3rem 2rem;
    text-align: center;
}

.alerts-empty-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 0.5rem;
    color: rgba(255, 126, 31, 0.5);
}

.alerts-empty-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.alerts-empty-subtext {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

.alerts-loading {
    padding: 3rem 2rem;
    text-align: center;
}

.alerts-loading-icon {
    width: 24px;
    height: 24px;
    margin: 0 auto 0.5rem;
    color: hsl(29, 100%, 47%);
    animation: pulse 1.5s ease-in-out infinite;
}

.alerts-mark-read {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 126, 31, 0.2);
}

.alerts-mark-read-btn {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.alerts-mark-read-btn:hover:not(:disabled) {
    color: white;
    background: rgba(255, 126, 31, 0.2);
}

.alerts-mark-read-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.alerts-btn {
    position: relative;
}

/* ============= HAMBURGER MENU ============= */

.hamburger-menu {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px;
    cursor: pointer;
    color: var(--text-primary);
    margin-right: 12px;
    transition: all 0.2s;
}

.hamburger-menu:hover {
    background: var(--hover-bg);
}

.hamburger-menu svg {
    width: 24px;
    height: 24px;
}

/* Overlay for mobile sidebar */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 104px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* ============= MOBILE RESPONSIVE UPDATES ============= */

@media (max-width: 1024px) {
    .feed-upnext-card {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Hide alert bar on mobile */
    .alert-bar {
        display: none !important;
    }

    /* Simplify navbar on mobile: hide theme toggle, notifications, sign out */
    .theme-toggle,
    .alerts-btn,
    #alertsDropdown,
    .sign-out-btn {
        display: none !important;
    }

    /* Show BETA badge on mobile */
    .badge-beta {
        display: inline-block !important;
    }

    /* Show mobile welcome banner */
    .mobile-welcome-banner {
        display: block !important;
    }

    /* Tokens button - gold on mobile */
    #tokensBtn {
        color: #FFD700;
        font-weight: 700;
    }

    #tokensBtn svg {
        stroke: #FFD700;
    }

    #tokenBalance {
        color: #FFD700;
        font-weight: 700;
    }
    
    /* Adjust navbar to top since alert bar is hidden */
    .dashboard-navbar {
        top: 0;
    }
    
    /* Adjust layout margin since alert bar is hidden */
    .dashboard-layout {
        margin-top: 64px; /* Only navbar height */
    }
    
    .hamburger-menu {
        display: flex;
    }
    
    .sidebar {
        position: fixed;
        left: -256px;
        top: 64px; /* Adjusted from 104px to 64px */
        height: calc(100vh - 64px); /* Adjusted from 104px to 64px */
        z-index: 100;
        transition: left 0.3s;
        width: 256px;
    }
    
    .sidebar.open {
        left: 0;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
    }
    
    .dashboard-main {
        margin-left: 0 !important;
        padding: 0.25rem 0.75rem 1rem;
    }
    
    .feed-upnext-card {
        display: none !important;
    }
    
    .welcome-container {
        display: none !important;
    }

    .welcome-section-wrapper {
        display: none !important;
    }
    
    .featured-showcase-section {
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
        overflow: visible !important;
    }
    
    /* Featured header: push LIVE badge to the right on mobile */
    .featured-section-header > div:first-child {
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .featured-live-indicator-badge {
        margin-left: auto !important;
    }
    
    /* Make featured cards compact rows on mobile */
    .featured-card {
        min-width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 36px 1fr !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
        align-items: center !important;
        border-radius: 8px !important;
    }
    
    /* Small square company logo */
    .featured-card-video {
        aspect-ratio: 1 / 1 !important;
        border-radius: 6px !important;
        width: 36px !important;
        height: 36px !important;
    }
    
    .featured-card-placeholder img {
        max-width: 65% !important;
        max-height: 65% !important;
    }
    
    .featured-card-info {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.125rem !important;
        min-width: 0 !important;
    }
    
    /* Top row: avatar, name, star — stays first */
    .featured-card-header {
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        flex-wrap: nowrap !important;
        order: 1 !important;
    }
    
    .featured-card-avatar {
        width: 18px !important;
        height: 18px !important;
    }
    
    .featured-card-name {
        font-size: 0.6875rem !important;
    }
    
    .featured-card-expert-icon {
        width: 11px !important;
        height: 11px !important;
    }
    
    /* Badges: same row as header, pushed to the right */
    .featured-card-badges-row {
        display: inline-flex !important;
        margin-left: auto !important;
        padding-bottom: 0 !important;
        gap: 0.25rem !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
        order: 2 !important;
    }
    
    .featured-card-badge {
        font-size: 0.5rem !important;
        padding: 0.0625rem 0.25rem !important;
        border-radius: 3px !important;
        letter-spacing: 0.3px !important;
    }
    
    /* Title: drops to second row, full width */
    .featured-card-title {
        font-size: 0.75rem !important;
        -webkit-line-clamp: 1 !important;
        line-height: 1.3 !important;
        width: 100% !important;
        order: 3 !important;
    }
    
    .featured-grid-container {
        gap: 0.5rem !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
        /* Height will be set dynamically by JS to fit exactly 3 cards */
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        scroll-behavior: auto !important;
    }
    
    .featured-nav-arrows {
        display: none !important;
    }
    
    /* Expert Avatars grid: stack Expert rows on top, Researcher rows below */
    .featured-avatars-grid-container {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
    }
    /* Expert Col 1 → row 1, col 1 */
    .featured-avatars-grid-container > .featured-avatars-column:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
    }
    /* Expert Col 2 → row 1, col 2 */
    .featured-avatars-grid-container > .featured-avatars-column:nth-child(2) {
        grid-row: 1;
        grid-column: 2;
    }
    /* Researcher Col 1 → row 2, col 1 */
    .featured-avatars-grid-container > .featured-avatars-column:nth-child(3) {
        grid-row: 2;
        grid-column: 1;
        border-radius: 0 0 0 12px !important;
    }
    /* Researcher Col 2 → row 2, col 2 */
    .featured-avatars-grid-container > .featured-avatars-column:nth-child(4) {
        grid-row: 2;
        grid-column: 2;
        border-radius: 0 0 12px 0 !important;
    }

    /* Compact mobile avatar grid */
    #expertAvatarsGridWrapper {
        margin-top: 0 !important;
        margin-bottom: 0.5rem;
        background: var(--bg-card, #1a1a2e);
        border-radius: 12px;
        overflow: hidden;
        padding: 0.25rem 0;
    }
    .featured-avatars-column {
        padding: 8px 10px !important;
    }
    .featured-avatar-row {
        padding: 6px 0 !important;
        gap: 6px !important;
        min-height: 30px !important;
    }
    .featured-avatar-name-text {
        font-size: 12px !important;
        max-width: 70px;
    }
    .featured-avatar-level-text {
        font-size: 11px !important;
    }
    .avatar-number {
        font-size: 11px !important;
    }
    /* Hide hover cards on mobile */
    .featured-avatar-hover-card {
        display: none !important;
    }
    
    .experts-showcase-section {
        display: none !important;
    }

    .dashboard-content {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .feed-right-column {
        display: none !important;
    }
    
    .expert-avatars-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .expert-avatar-card {
        padding: 10px !important;
    }
    
    .expert-avatar-image {
        width: 60px !important;
        height: 60px !important;
    }
    
    .expert-avatar-name {
        font-size: 13px !important;
    }
    
    .expert-avatar-bio {
        font-size: 11px !important;
    }
    
    .category-filter-section {
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .category-filter-card {
        width: 360px !important;
        height: 150px !important;
        padding: 16px !important;
    }
    
    .category-filter-content {
        max-width: 180px !important;
        padding-right: 8px !important;
    }
    
    .category-filter-subtitle {
        font-size: 11px !important;
    }
    
    .category-filter-title {
        font-size: 21px !important;
    }
    
    .category-filter-description {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }
    
    .category-filter-visual {
        width: 150px !important;
        height: 150px !important;
        right: -5px !important;
        padding-left: 2px !important;
    }
    
    /* Hide company logos in feed cards on mobile */
    .feed-pitch-logo,
    .feed-post-media-left {
        display: none !important;
    }
    
    .nav-btn span:not(#alertsCount):not(#tokenBalance):not(.alerts-indicator) {
        display: none;
    }
    
    .nav-btn {
        padding: 8px;
        gap: 4px;
    }
    
    .logo-text {
        font-size: 1.25rem;
    }
    
    .badge-live {
        font-size: 0.5rem;
        padding: 0.2rem 0.4rem;
    }
    
    .nav-right {
        gap: 2px;
    }
    
    /* Hide some navbar buttons on smaller mobile */
    .nav-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 640px) {
    .dashboard-layout {
        margin-top: 64px; /* Adjusted from 104px since alert bar is hidden on mobile */
    }
    
    .dashboard-main {
        padding: 0.75rem;
    }
    
    /* Stack feed items vertically */
    .feed-grid {
        grid-template-columns: 1fr !important;
    }
    
    .logo-text {
        font-size: 1rem;
    }
    
    .badge-live {
        display: none;
    }
    
    .nav-btn span:not(#alertsCount):not(#tokenBalance) {
        display: none;
    }
    
    /* Further simplify navbar on very small screens */
    #alertsCount {
        display: none;
    }
    
    .alerts-btn svg {
        margin-right: 0;
    }
    
    /* Even more compact category cards on small screens */
    .category-filter-card {
        width: 320px !important;
        height: 135px !important;
        padding: 14px !important;
    }
    
    .category-filter-content {
        gap: 4px !important;
        max-width: 160px !important;
        padding-right: 8px !important;
    }
    
    .category-filter-subtitle {
        font-size: 10px !important;
    }
    
    .category-filter-title {
        font-size: 19px !important;
    }
    
    .category-filter-description {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    
    .category-filter-visual {
        width: 135px !important;
        height: 135px !important;
        right: -5px !important;
        padding-left: 2px !important;
    }
}

@media (max-width: 480px) {
    .dashboard-navbar {
        padding: 12px 8px;
        height: 56px;
    }
    
    .featured-showcase-section {
        padding: 0.5rem 0.75rem !important;
        border-radius: 10px !important;
    }
    
    .nav-left .nav-logo {
        gap: 4px;
    }
    
    .hamburger-menu {
        padding: 4px;
        margin-right: 8px;
    }
    
    .nav-btn {
        padding: 6px;
    }
    
    .nav-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* Hide LEARN MORE and INVITES on very small screens */
    .nav-btn:nth-child(4),
    .nav-btn:nth-last-child(2) {
        display: none;
    }
    
    /* Most compact category cards */
    .category-filter-section {
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .category-filter-card {
        width: 290px !important;
        height: 120px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }
    
    .category-filter-content {
        gap: 3px !important;
        max-width: 150px !important;
        padding-right: 8px !important;
    }
    
    .category-filter-subtitle {
        font-size: 9px !important;
        letter-spacing: 0.5px !important;
    }
    
    .category-filter-title {
        font-size: 17px !important;
        line-height: 1.2 !important;
    }
    
    .category-filter-description {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }
    
    .category-filter-visual {
        width: 120px !important;
        height: 120px !important;
        right: 0px !important;
        padding-left: 2px !important;
    }
}