/* ===== DESIGN SYSTEM ===== */
:root {
    /* Colors */
    --color-primary: #000000;
    --color-primary-dark: #1a1a1a;
    --color-primary-light: #333333;
    --color-secondary: #10b981;
    --color-secondary-dark: #059669;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-success: #22c55e;
    
    --color-bg-primary: #0f0f0f;
    --color-bg-secondary: #1a1a1a;
    --color-bg-tertiary: #2a2a2a;
    --color-bg-card: #1a1a1a;
    --color-bg-sidebar: #0f0f0f;
    
    --color-text-primary: #ffffff;
    --color-text-secondary: #cccccc;
    --color-text-muted: #888888;
    --color-text-inverse: #ffffff;
    
    --color-border: #333333;
    --color-border-light: #444444;
    --color-border-dark: #1a1a1a;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ===== LAYOUT ===== */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 280px;
    background-color: var(--color-bg-sidebar);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 50;
}

.sidebar-header {
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
}

/* Hide the top-left sidebar header (logo area) */
.sidebar-header { display: none; border-bottom: none; padding: 0; }

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
}

.logo i {
    font-size: var(--font-size-2xl);
}

.sidebar-nav {
    flex: 1;
    padding: var(--spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.nav-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.nav-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-2);
}

/* ===== FILTERS ===== */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.filter-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.language-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-1);
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-1);
    border: 1px solid var(--color-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lang-tab {
    flex: 0 0 auto;
    padding: var(--spacing-2) var(--spacing-3);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    justify-content: center;
}

/* Icon-only compact variant */
.lang-tab.icon-only {
    width: 36px;
    height: 32px;
    padding: 0;
}

.lang-tab.icon-only i {
    font-size: 14px;
}

@media (hover: hover) {
    .lang-tab:hover {
        color: var(--color-text-primary);
        background-color: var(--color-bg-secondary);
    }
}

.lang-tab.active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Agent opinions list and chips */
.agent-opinions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}

.agent-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.agent-chip .agent-name {
    color: var(--color-text-primary);
}

.agent-chip .agent-stance {
    opacity: 0.9;
}

.agent-chip.buy {
    border-color: var(--color-success);
    background-color: rgba(34, 197, 94, 0.12);
    color: #a7f3d0;
}

.agent-chip.buy .agent-name {
    color: #bbf7d0;
}

.agent-chip.hold {
    border-color: var(--color-warning);
    background-color: rgba(245, 158, 11, 0.12);
    color: #fde68a;
}

.agent-chip.hold .agent-name {
    color: #fcd34d;
}

.agent-chip.sell {
    border-color: var(--color-danger);
    background-color: rgba(239, 68, 68, 0.12);
    color: #fecaca;
}

.agent-chip.sell .agent-name {
    color: #fca5a5;
}

.filter-select {
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
}

.filter-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-select option {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.decision-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
}

.decision-filter {
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    justify-content: center;
}

@media (hover: hover) {
    .decision-filter:hover {
        color: var(--color-text-primary);
        background-color: var(--color-bg-secondary);
    }
}

.decision-filter.active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.decision-filter.buy.active {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.decision-filter.hold.active {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

.decision-filter.sell.active {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.date-filters {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.date-filter {
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    text-align: left;
}

@media (hover: hover) {
    .date-filter:hover {
        color: var(--color-text-primary);
        background-color: var(--color-bg-secondary);
    }
}

.date-filter.active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.action-btn {
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

@media (hover: hover) {
    .action-btn:hover {
        background-color: var(--color-bg-secondary);
        color: var(--color-text-primary);
        border-color: var(--color-border-light);
    }
}

.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    flex: 1;
    margin-left: 280px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===== HOT TOPICS SECTION ===== */
.hot-topics-section {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.hot-topics-section h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.hot-topics-section h3 i {
    color: var(--color-warning);
}

.hot-topics-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-3);
}

.hot-topic-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    cursor: pointer;
    transition: var(--transition-normal);
}

.hot-topic-item:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.hot-topic-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.hot-topic-name {
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.hot-topic-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

.hot-topic-badge.buy {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
}

.hot-topic-badge.sell {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

.hot-topic-badge.hold {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

.hot-topic-stats {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.hot-topic-stats span {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

.hot-topic-stats i {
    font-size: 0.875em;
}

@media (max-width: 768px) {
    .hot-topics-list {
        grid-template-columns: 1fr;
    }
    
    .hot-topics-section {
        padding: var(--spacing-4);
        margin-bottom: var(--spacing-4);
    }
}

/* ===== SITE FOOTER ===== */
.site-footer {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-4) var(--spacing-8);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-4);
}

.footer-right {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.footer-link {
    color: var(--color-text-secondary);
    text-decoration: none;
}

@media (hover: hover) {
    .footer-link:hover {
        color: var(--color-text-primary);
        text-decoration: underline;
    }
}

.footer-sep {
    color: var(--color-border-light);
}

.content-header {
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-6) var(--spacing-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-6);
}

.header-left {
    flex: 1;
}

.page-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
    letter-spacing: -0.025em;
}

.page-subtitle {
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

/* Language toggle - subtle */
.language-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.lang-btn {
    padding: 6px 10px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    cursor: pointer;
}

.lang-btn.active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Date navigation */
.date-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0 var(--spacing-4);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-1);
}

.date-nav-btn {
    padding: var(--spacing-2) var(--spacing-3);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .date-nav-btn:hover:not(:disabled) {
        color: var(--color-text-primary);
        background-color: var(--color-bg-secondary);
    }
}

.date-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.date-display {
    padding: 0 var(--spacing-3);
    color: var(--color-text-primary);
    font-weight: 600;
    min-width: 10ch;
    text-align: center;
    white-space: nowrap;
}

.search-container {
    position: relative;
    min-width: 300px;
}

.search-icon {
    position: absolute;
    left: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.search-input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-10);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    transition: var(--transition-normal);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-input::placeholder {
    color: var(--color-text-muted);
}

.view-toggle {
    display: flex;
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-1);
    border: 1px solid var(--color-border);
}

.view-btn {
    padding: var(--spacing-2) var(--spacing-3);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-normal);
}

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

.view-btn.active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Icon pill button for header (My Page) to match tab/view styles */
.icon-btn {
    padding: var(--spacing-2) var(--spacing-3);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (hover: hover) {
    .icon-btn:hover {
        color: var(--color-text-primary);
        background-color: var(--color-bg-secondary);
        border-color: var(--color-border-light);
    }
}
.icon-btn.active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

/* Favorite button active state (highlight star) */
.fav-btn.active {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #111827; /* dark text for contrast on warning */
}

/* Tabs: match pill style used elsewhere */
.tabs { 
    display: flex; 
    gap: var(--spacing-2); 
    padding: var(--spacing-3) var(--spacing-6) var(--spacing-3) var(--spacing-6); 
    margin-top: var(--spacing-2);
}
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-normal);
}
@media (hover: hover) {
    .tab-btn:hover {
        color: var(--color-text-primary);
        background-color: var(--color-bg-secondary);
        border-color: var(--color-border-light);
    }
}
.tab-btn.active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

/* Subtext under section headers (e.g., Feed) */
.reports-subtext {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* ===== STATS GRID ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
    padding: var(--spacing-6);
}

.stat-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    transition: var(--transition-normal);
    cursor: pointer;
}

@media (hover: hover) {
    .stat-card:hover {
        border-color: var(--color-border-light);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }
}

.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    color: var(--color-text-inverse);
}

.stat-icon.buy {
    background-color: var(--color-success);
}

.stat-icon.hold {
    background-color: var(--color-warning);
}

.stat-icon.sell {
    background-color: var(--color-danger);
}

.stat-icon.total {
    background-color: var(--color-primary);
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-1);
}

.stat-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* Compact stats: hide labels for Buy/Hold/Sell to save vertical space */
.stat-icon.buy + .stat-content .stat-label,
.stat-icon.hold + .stat-content .stat-label,
.stat-icon.sell + .stat-content .stat-label {
    display: none;
}

/* Hide label for Total as well */
.stat-icon.total + .stat-content .stat-label {
    display: none;
}

/* ===== CONTENT AREA ===== */
.content-area {
    flex: 1;
    padding: var(--spacing-8);
    background-color: var(--color-bg-primary);
}

/* ===== LOADING & ERROR STATES ===== */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-20) var(--spacing-6);
    gap: var(--spacing-6);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p {
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    font-weight: 500;
}

.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-20) var(--spacing-6);
    gap: var(--spacing-6);
    text-align: center;
}

.error-icon {
    font-size: var(--font-size-4xl);
    color: var(--color-danger);
}

.error-container h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
}

.error-container p {
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    max-width: 400px;
}

.retry-btn {
    padding: var(--spacing-3) var(--spacing-6);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

@media (hover: hover) {
    .retry-btn:hover {
        background-color: var(--color-primary-dark);
        transform: translateY(-1px);
    }
}

/* ===== REPORTS CONTAINER ===== */
.reports-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.reports-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-6);
}

.reports-info h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.reports-count {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.sort-btn {
    padding: var(--spacing-2) var(--spacing-4);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

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

/* ===== REPORTS GRID ===== */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-6);
}

.report-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    transition: var(--transition-normal);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* In-feed Ad card styled like a report card */
.ad-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    position: relative;
}

/* Make embedded ad units responsive and prevent overflow */
.ad-card .adsbygoogle {
    display: block;
    width: 100%;
}

/* Ensure any media inside ads scales to fit the card */
.ad-card img,
.ad-card video,
.ad-card iframe {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
}

.ad-card .ad-label {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    padding: 2px 6px;
    border-radius: 9999px;
}

.report-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    opacity: 0;
    transition: var(--transition-normal);
}

@media (hover: hover) {
    .report-card:hover {
        border-color: var(--color-border-light);
        transform: translateY(-4px);
        box-shadow: var(--shadow-xl);
    }
}

@media (hover: hover) {
    .report-card:hover::before {
        opacity: 1;
    }
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-4);
}

.report-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-3);
    line-height: 1.3;
}

.report-title i {
    margin-right: var(--spacing-2);
    color: var(--color-text-muted);
}

.report-meta {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2);
}

.report-community-stats {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-sm);
}

.community-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}

.community-stat i {
    font-size: 0.875em;
}

.community-stat .count {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.community-stat:hover {
    color: var(--color-text-secondary);
}

.comment-stat {
    color: var(--color-text-muted);
}

/* Confidence badge */
.report-confidence {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}
.report-confidence .conf-meter { display:none; }
/* Confidence level colors: low→red, medium→orange, med-high/high→green */
.report-confidence.conf-low { background-color: rgba(239, 68, 68, 0.1); color: var(--color-danger); border: 1px solid rgba(239, 68, 68, 0.2); }
.report-confidence.conf-medium { background-color: rgba(245, 158, 11, 0.1); color: var(--color-warning); border: 1px solid rgba(245, 158, 11, 0.2); }
.report-confidence.conf-medhigh { background-color: rgba(34, 197, 94, 0.1); color: var(--color-success); border: 1px solid rgba(34, 197, 94, 0.2); }
.report-confidence.conf-high { background-color: rgba(34, 197, 94, 0.12); color: var(--color-success); border: 1px solid rgba(34, 197, 94, 0.25); }

.report-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.report-decision {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.report-decision.buy {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.report-decision.hold {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.report-decision.sell {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.report-type {
    padding: var(--spacing-1) var(--spacing-3);
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.report-content {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--spacing-4);
}

.report-content.preview {
    font-size: var(--font-size-sm);
}

.report-content.preview * {
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}

.report-content.preview p,
.report-content.preview h1,
.report-content.preview h2,
.report-content.preview h3,
.report-content.preview h4,
.report-content.preview h5,
.report-content.preview h6,
.report-content.preview ul,
.report-content.preview ol,
.report-content.preview li,
.report-content.preview blockquote,
.report-content.preview pre {
    display: inline;
}

.report-content.preview ul,
.report-content.preview ol {
    list-style: none;
}

.report-content.preview code,
.report-content.preview pre {
    white-space: nowrap;
}

/* Removed right-side actions area since type icon is now in title */
/* .report-actions { } */

.view-report-btn {
    padding: var(--spacing-2) var(--spacing-4);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

@media (hover: hover) {
    .view-report-btn:hover {
        background-color: var(--color-primary-dark);
        transform: translateY(-1px);
    }
}

/* ===== TOAST ===== */
.toast-container {
    position: fixed;
    top: 64px; /* push below header chips (e.g., streak) */
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2000;
}

.toast {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    box-shadow: var(--shadow-md);
    opacity: 0.98;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.info { border-left: 3px solid var(--color-primary); }
.toast.warn { border-left: 3px solid var(--color-warning); }
.toast.error { border-left: 3px solid var(--color-danger); }

.toast.hide {
    opacity: 0;
    transform: translateY(-6px);
}

/* ===== MODAL ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.modal-container {
    position: relative;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2xl);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-secondary);
    position: relative;
    padding-right: calc(var(--spacing-6) + 88px);
}

.modal-title-section {
    flex: 1;
}

/* Inline row for icon, ticker, and decision badge */
.modal-title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.modal-stock-icon {
    color: var(--color-text-muted);
}

.modal-title-section > .modal-language-selector,
.modal-title-section > .modal-type-selector {
    margin-top: var(--spacing-4);
}

.modal-type-selector .language-tabs,
.modal-language-selector .language-tabs {
    gap: var(--spacing-1);
}

.modal-type-selector .language-label,
.modal-language-selector .language-label {
    display: none;
}

.modal-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-3);
}

.modal-badge.buy {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.modal-badge.hold {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.modal-badge.sell {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.modal-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
    line-height: 1.3;
}

.modal-meta {
    display: flex;
    gap: var(--spacing-6);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-4);
}

.modal-language-selector { display: none; }
.modal-type-selector { display: none; }

.language-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.modal-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-2);
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
    font-size: var(--font-size-lg);
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
}

@media (hover: hover) {
    .modal-close:hover {
        background-color: var(--color-bg-tertiary);
        color: var(--color-text-primary);
    }
}

/* Open in new window button next to close */
.modal-open-new {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-2);
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
    font-size: var(--font-size-lg);
    position: absolute;
    top: var(--spacing-4);
    right: calc(var(--spacing-4) + 44px);
}

@media (hover: hover) {
    .modal-open-new:hover {
        background-color: var(--color-bg-tertiary);
        color: var(--color-text-primary);
    }
}

.modal-body {
    padding: var(--spacing-6);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-content {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6 {
    color: var(--color-text-primary);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-3);
    font-weight: 600;
}

.modal-content h1 {
    font-size: var(--font-size-2xl);
}

.modal-content h2 {
    font-size: var(--font-size-xl);
}

.modal-content h3 {
    font-size: var(--font-size-lg);
}

.modal-content p {
    margin-bottom: var(--spacing-4);
}

.modal-content ul,
.modal-content ol {
    margin-bottom: var(--spacing-4);
    padding-left: var(--spacing-6);
}

.modal-content li {
    margin-bottom: var(--spacing-2);
}

.modal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-4) 0;
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.modal-content th,
.modal-content td {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.modal-content th {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-weight: 600;
}

.modal-content code {
    background-color: var(--color-bg-tertiary);
    color: var(--color-primary);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.modal-content pre {
    background-color: var(--color-bg-tertiary);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    margin: var(--spacing-4) 0;
}

.modal-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--spacing-4);
    margin: var(--spacing-4) 0;
    color: var(--color-text-muted);
    font-style: italic;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-6);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-secondary);
}

.modal-btn {
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    border: 1px solid var(--color-border);
}

.modal-btn.secondary {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

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

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

@media (hover: hover) {
    .modal-btn.primary:hover {
        background-color: var(--color-primary-dark);
        transform: translateY(-1px);
    }
}

/* ===== EMPTY STATE ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-20) var(--spacing-6);
    gap: var(--spacing-6);
    text-align: center;
}

.empty-icon {
    font-size: var(--font-size-4xl);
    opacity: 0.5;
    color: var(--color-text-muted);
}

.empty-state p {
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    font-weight: 500;
}

/* Timeline for previous decisions */
.prev-decisions.timeline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--spacing-2);
}
.prev-decisions .timeline-icon {
    color: var(--color-text-muted);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
}
.prev-decisions .timeline-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}
.prev-decisions .timeline-track {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.prev-decisions .tl-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.prev-decisions .tl-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: var(--color-border);
    border: 1px solid var(--color-border);
    display: inline-block;
}
.prev-decisions .tl-dot.buy {
    background-color: rgba(34, 197, 94, 0.9);
    border-color: var(--color-success);
}
.prev-decisions .tl-dot.hold {
    background-color: rgba(245, 158, 11, 0.9);
    border-color: var(--color-warning);
}
.prev-decisions .tl-dot.sell {
    background-color: rgba(239, 68, 68, 0.9);
    border-color: var(--color-danger);
}
.prev-decisions .tl-dot.none {
    background-color: var(--color-border);
    border-color: var(--color-border);
    opacity: 0.7;
}
.prev-decisions .tl-connector {
    width: 16px;
    height: 1px;
    background-color: var(--color-border);
    opacity: 0.6;
}
@media (max-width: 480px) {
    .prev-decisions .timeline-track { gap: 6px; }
    .prev-decisions .tl-item { gap: 4px; }
    .prev-decisions .tl-dot { width: 6px; height: 6px; }
    .prev-decisions .tl-connector { width: 12px; }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: var(--transition-normal);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-4);
        padding: var(--spacing-6);
    }
    
    .reports-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--spacing-4);
    }
}

@media (max-width: 768px) {
    .content-header {
        flex-direction: column;
        gap: var(--spacing-4);
        align-items: flex-start;
        padding: var(--spacing-4);
    }
    .view-toggle { display: none; }
    
    .header-right {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-3);
        justify-content: flex-start;
    }
    /* Center language toggle on mobile to avoid left-leaning alignment */
    .language-toggle {
        align-self: center;
        justify-content: center;
    }
    
    .date-nav { order: 1; width: 100%; margin: 0; }
    .date-display { flex: 1; min-width: 0; text-align: center; }
    .date-nav-btn { padding: var(--spacing-2); }
    .search-container { order: 2; min-width: auto; width: 100%; flex: initial; }
    .search-input { font-size: 16px; }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
        padding: var(--spacing-4);
    }
    
    .reports-header {
        flex-direction: column;
        gap: var(--spacing-4);
        align-items: flex-start;
    }
    
    .reports-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .modal-container {
        width: 95%;
        margin: var(--spacing-4);
    }
    
    .modal-header {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .modal-close {
        align-self: flex-end;
    }
    
    .modal-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }

    /* Keep agent tabs on a single horizontal row with scroll */
    #agent-tabs.language-tabs {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    
    .modal-footer {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: var(--font-size-2xl);
    }
    
    .stat-card {
        padding: var(--spacing-2);
        gap: var(--spacing-2);
    }
    .stat-icon {
        width: 24px;
        height: 24px;
        font-size: var(--font-size-sm);
    }
    .stat-value {
        font-size: var(--font-size-lg);
        margin-bottom: 0;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2);
        padding: var(--spacing-2);
    }
    
    .reports-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: var(--spacing-3);
    }
    .report-card {
        padding: var(--spacing-3);
    }
    .report-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-2);
    }
    .report-meta {
        gap: var(--spacing-2);
        margin-bottom: var(--spacing-3);
    }
    .report-decision,
    .report-type {
        font-size: var(--font-size-xs);
        padding: var(--spacing-1) var(--spacing-2);
    }
    .report-content {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-bottom: var(--spacing-3);
        font-size: var(--font-size-sm);
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--spacing-4);
    }
}

/* ===== STRUCTURED NEWS ENHANCEMENTS ===== */
.structured-news-card {
    border-left: 3px solid var(--color-secondary);
    background: linear-gradient(135deg, var(--color-bg-card) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.report-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.report-type-badge.structured-news {
    background: rgba(16, 185, 129, 0.2);
    color: var(--color-secondary);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.price-levels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin: var(--spacing-3) 0;
    padding: var(--spacing-3);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.price-level {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.price-level.targets {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.price-level.resistance {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.price-level.support {
    background: rgba(245, 158, 11, 0.2);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.key-catalysts {
    margin: var(--spacing-3) 0;
    padding: var(--spacing-3);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.catalysts-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.catalysts-label i {
    color: var(--color-warning);
}

.catalysts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.catalysts-list li {
    position: relative;
    padding-left: var(--spacing-4);
    margin-bottom: var(--spacing-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.catalysts-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-secondary);
    font-weight: bold;
}

.catalysts-list li:last-child {
    margin-bottom: 0;
}

/* Enhanced modal content for structured news */
.modal-content .price-levels,
.modal-content .key-catalysts {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border-light);
}

/* Mobile responsive for structured news elements */
@media (max-width: 768px) {
    .price-levels {
        flex-direction: column;
        gap: var(--spacing-1);
    }
    
    .key-catalysts {
        padding: var(--spacing-2);
    }
    
    .catalysts-list li {
        font-size: var(--font-size-xs);
        line-height: 1.3;
    }
} 

/* ===== DETAIL RELATED SECTIONS ===== */
.related-block { margin-top: var(--spacing-6); }
.related-title { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: var(--spacing-3); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-4); }
.related-card { cursor: pointer; }

/* Top related sections - more compact styling */
#top-related-sections .related-block { 
    margin-top: var(--spacing-3); 
    margin-bottom: var(--spacing-2); 
}
#top-related-sections .related-title { 
    font-size: var(--font-size-xs); 
    margin-bottom: var(--spacing-2); 
    opacity: 0.8; 
}
#top-related-sections .related-grid { 
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
    gap: var(--spacing-3); 
}
#top-related-sections .related-card { 
    transform: scale(0.95);
    transition: transform 0.2s ease;
}
#top-related-sections .related-card:hover {
    transform: scale(1);
}
#top-related-sections .type-chip-row {
    gap: var(--spacing-2);
}
#top-related-sections .type-chip {
    font-size: var(--font-size-xs);
    padding: 4px 8px;
}

/* ===== ANALYTICS WIDGETS ===== */
#analytics { display: grid; gap: 12px; grid-template-columns: 1fr; }
.card { padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-card); }
.tk-list { list-style: none; padding: 0; margin: 8px 0 0; }
.tk { font-weight: 600; }
.dl.up { color: var(--color-success); }
.dl.dn { color: var(--color-danger); }
.badge { padding: 2px 6px; border-radius: 999px; font-size: 12px; border: 1px solid var(--color-border); }
.badge.buy { background: rgba(34,197,94,.1); color: var(--color-success); }
.badge.hold { background: rgba(245,158,11,.1); color: var(--color-warning); }
.badge.sell { background: rgba(239,68,68,.1); color: var(--color-danger); }
.timeline { list-style:none; padding:0; margin:8px 0 0; display: grid; gap: 6px; }

/* Horizontal chip timeline */
.timeline-row { display:flex; gap:8px; overflow-x:auto; padding:0; margin:8px 0 0; }
.timeline-row .tl-chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--color-border); border-radius:9999px; background:var(--color-bg-tertiary); }
.timeline-row .tl-date { color: var(--color-text-muted); font-size: 12px; }
@media (max-width:768px){ .timeline-row { gap:6px; } }

.heatmap-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.heatmap-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.heatmap-grid { display: grid; grid-auto-rows: 22px; gap: 2px; }
/* 30 columns on desktop; we will set template-columns inline for 30 dates */
.heatmap-row { display: contents; }
.heatmap-ticker { position: sticky; left: 0; padding-right: 6px; font-size: 12px; color: var(--color-text-secondary); background: var(--color-bg-card); z-index: 1; text-align: right; }
.heatmap-cell { width: 22px; height: 22px; border-radius: 3px; border: 1px solid var(--color-border); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.heatmap-cell.buy { background: rgba(34, 197, 94, 0.9); border-color: var(--color-success); }
.heatmap-cell.hold { background: rgba(136,136,136,0.6); border-color: #666666; }
.heatmap-cell.sell { background: rgba(239, 68, 68, 0.9); border-color: var(--color-danger); }
.heatmap-cell.missing { background: rgba(170,170,170,0.15); border-color: var(--color-border); }
.heatmap-cell:hover { transform: scale(1.2); box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 10; }
.heatmap-container.scroll-left { box-shadow: inset 12px 0 8px -10px rgba(0,0,0,0.4); }
.heatmap-container.scroll-right { box-shadow: inset -12px 0 8px -10px rgba(0,0,0,0.4); }
.heatmap-dates { display: grid; gap: 2px; margin-left: 90px; font-size: 10px; color: var(--color-text-muted); }
.heatmap-date { text-align: center; white-space: nowrap; }

/* Heatmap tooltip */
.heatmap-tooltip {
    position: fixed;
    display: none;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    z-index: 10000;
    max-width: 200px;
}
.heatmap-tooltip div { margin: 2px 0; }
.heatmap-tooltip strong { color: var(--color-text-primary); font-weight: 600; }

/* Disable hover effects on touch devices */
@media (pointer: coarse) {
    .heatmap-cell:hover { transform: none; box-shadow: none; }
}

/* Mobile responsive for Dashboard */
@media (max-width: 768px) {
    .content-area {
        padding: var(--spacing-4);
    }
    
    .heatmap-container { 
        padding-bottom: 12px; 
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .heatmap-grid { 
        grid-auto-rows: 16px; 
        gap: 1px;
        /* 14 columns for mobile: 70px ticker + 14*16px cells = ~294px fits well in mobile */
    }
    .heatmap-cell { width: 16px; height: 16px; min-width: 16px; }
    .heatmap-ticker { 
        font-size: 10px; 
        padding-right: 4px; 
        width: 70px;
        min-width: 70px;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .trending-item { padding: var(--spacing-2); }
    .trending-meta { flex-direction: column; align-items: flex-start; gap: var(--spacing-1); }
    
    /* Ensure analytics cards don't overflow */
    .analytics-card {
        max-width: 100%;
        overflow: hidden;
    }
    .analytics-content {
        max-width: 100%;
        overflow-x: auto;
    }
    
    #dashboard-analytics {
        margin: 8px 0 !important;
    }
}

@media (max-width: 480px) {
    .heatmap-grid { 
        grid-auto-rows: 14px; 
        gap: 1px; 
    }
    .heatmap-cell { 
        width: 14px; 
        height: 14px; 
        min-width: 14px;
        border-radius: 2px; 
    }
    .heatmap-ticker { 
        font-size: 9px; 
        width: 60px;
        min-width: 60px;
        max-width: 60px;
        padding-right: 3px;
    }
}

.type-chip-row { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.type-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9999px; border: 1px solid var(--color-border); background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: 600; text-decoration: none; }
.type-chip:hover { background-color: var(--color-bg-secondary); color: var(--color-text-primary); }

/* ===== COMMENTS & REPLIES ===== */
.comment-item {
    transition: all var(--transition-normal);
}

.comment-item.comment-reply {
    background-color: rgba(255, 255, 255, 0.02);
}

.comment-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.comment-item.comment-reply:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.comment-actions {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.comment-actions .action-btn {
    font-size: var(--font-size-sm);
    padding: var(--spacing-1) var(--spacing-2);
}

.comment-content {
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Reply indicator styling */
.comment-reply::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--color-border), transparent);
}

/* Mobile responsive comments */
@media (max-width: 768px) {
    .comment-item.comment-reply {
        margin-left: 12px !important;
    }
    
    .comment-actions {
        flex-wrap: wrap;
    }
    
    .comment-actions .action-btn {
        font-size: var(--font-size-xs);
    }
}

/* ===== Like Button Styles (Thumbs Up) ===== */
.heart-btn {
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.heart-btn .heart-count {
    min-width: 12px;
    text-align: center;
    font-size: var(--font-size-sm);
}

.heart-btn:hover {
    color: #3b82f6; /* Blue */
}

.heart-btn.hearted {
    color: #3b82f6; /* Blue */
}

.heart-btn.hearted i {
    animation: thumbsup 0.3s ease;
}

@keyframes thumbsup {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(-10deg); }
}

/* ===== Comment Menu Styles ===== */
.comment-menu-container {
    position: relative;
}

.menu-btn {
    padding: var(--spacing-1) var(--spacing-2);
    cursor: pointer;
}

.comment-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-1);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 140px;
    z-index: 1000;
    overflow: hidden;
}

.menu-item {
    padding: var(--spacing-2) var(--spacing-4);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.menu-item:hover {
    background-color: var(--color-bg-tertiary);
}

.menu-item i {
    width: 16px;
    text-align: center;
}

.menu-item[data-action="delete"]:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

.menu-item[data-action="report"]:hover {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

/* Mobile dropdown adjustments */
@media (max-width: 768px) {
    .comment-dropdown {
        min-width: 120px;
    }
    
    .menu-item {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-xs);
    }
}

/* ===== ANALYTICS CARDS ===== */
.analytics-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.analytics-card:hover {
    border-color: var(--color-border-light);
    box-shadow: var(--shadow-md);
}

.analytics-header {
    margin-bottom: var(--spacing-4);
}

/* Heatmap controls */
.hm-controls { display: inline-flex; align-items: center; gap: 6px; float: right; }
.hm-btn { padding: 4px 8px; border: 1px solid var(--color-border); background: var(--color-bg-tertiary); color: var(--color-text-secondary); border-radius: var(--radius-md); cursor: pointer; }
.hm-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.hm-range { color: var(--color-text-muted); font-size: var(--font-size-xs); }

.analytics-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-1) 0;
}

.analytics-title i {
    color: var(--color-secondary);
    font-size: var(--font-size-base);
}

.analytics-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.analytics-empty {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-4);
    color: var(--color-text-muted);
}

.analytics-empty-icon {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-3);
    opacity: 0.5;
}

.analytics-content {
    margin-top: var(--spacing-3);
}

/* Decision Trend Styles */
.trend-sparkline {
    margin-bottom: var(--spacing-4);
}

.trend-sparkline svg {
    width: 100%;
    height: auto;
}

.trend-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
}

.trend-current {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.trend-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.trend-value {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.trend-value.up {
    color: var(--color-success);
}

.trend-value.down {
    color: var(--color-danger);
}

.trend-value.neutral {
    color: var(--color-text-secondary);
}

.trend-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
}

.trend-indicator.up {
    color: var(--color-success);
    background: rgba(34, 197, 94, 0.1);
}

.trend-indicator.down {
    color: var(--color-danger);
    background: rgba(239, 68, 68, 0.1);
}

.trend-indicator.neutral {
    color: var(--color-text-muted);
    background: rgba(136, 136, 136, 0.1);
}

/* Trending Tickers Styles */
.trending-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
}

.trending-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: var(--transition-normal);
}

.trending-item:hover {
    border-color: var(--color-border-light);
    background: var(--color-bg-secondary);
}

.trending-rank {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    min-width: 24px;
    text-align: center;
}

.trending-info {
    flex: 1;
    min-width: 0;
}

.trending-ticker {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-1);
}

.trending-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
}

.trending-count {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-text-muted);
}

.trending-delta {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-weight: 500;
}

.trending-delta.positive {
    color: var(--color-success);
}

.trending-delta.negative {
    color: var(--color-danger);
}

.trending-decision {
    flex-shrink: 0;
}

.decision-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
}

.decision-badge.buy {
    color: var(--color-success);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.decision-badge.sell {
    color: var(--color-danger);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.decision-badge.hold {
    color: var(--color-warning);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Analytics responsive */
@media (max-width: 768px) {
    .analytics-card {
        padding: var(--spacing-4);
    }
    
    .trend-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }
    
    .trending-item {
        padding: var(--spacing-2);
    }
    
    .trending-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-1);
    }
}

@media (max-width: 480px) {
    .analytics-card {
        padding: var(--spacing-3);
    }
    
    .analytics-title {
        font-size: var(--font-size-base);
    }
    
    .trending-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }
    
    .trending-decision { align-self: flex-end; }
}

/* Responsive Trending masonry at >=600px */
@media (min-width: 600px) and (max-width: 900px) {
    .trending-list { grid-template-columns: 1fr 1fr; }
}