/**
 * UI/UX OVERHAUL - Professional Trading Platform Design
 * Based on Material Design 3 + Modern SaaS best practices
 * Optimized for readability, hierarchy, and user psychology
 */

/* ==================== TYPOGRAPHY HIERARCHY ==================== */
/* Professional scale: 13/14/16/20/24/32px */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, .hero h1 {
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: #1a1a1a !important;
    margin-bottom: 16px !important;
}

h2, .view-header h2 {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
}

h3, .control-section h3, .trading-card h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #2c2c2c !important;
    margin-bottom: 12px !important;
}

h4, .sidebar-widget h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #2c2c2c !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ==================== IMPROVED COLOR CONTRAST ==================== */
/* WCAG AA compliant - better readability */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    
    --success: #16a34a;
    --success-light: #22c55e;
    --error: #dc2626;
    --error-light: #ef4444;
    --warning: #ea580c;
    
    --text-primary: #1a1a1a;
    --text-secondary: #525252;
    --text-tertiary: #737373;
    
    --surface: #ffffff;
    --surface-elevated: #f8fafc;
    --surface-hover: #f1f5f9;
    
    --border: #e2e8f0;
    --border-dark: #cbd5e1;
}

.subtitle, .hero-subtitle {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
}

.performance-label, .stat-label, small {
    font-size: 13px !important;
    color: var(--text-tertiary) !important;
    font-weight: 500 !important;
}

/* ==================== LANDING PAGE REDESIGN ==================== */

.hero-badge {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: none !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
    border-radius: 24px !important;
}

.hero-highlight {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    color: white !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25) !important;
}

.google-signin-btn {
    background: white !important;
    border: 2px solid var(--border-dark) !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.google-signin-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    background: #2563eb !important;
    color: white !important;
    border-color: #2563eb !important;
}

/* ==================== SIDEBAR WIDGETS ENHANCEMENT ==================== */

.sidebar-widget {
    background: white !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}

.sidebar-widget:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--border-dark) !important;
}

.sidebar-widget h4 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.sidebar-widget h4 .material-icons {
    font-size: 18px !important;
    color: var(--primary) !important;
}

.performance-value {
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 12px 0 !important;
}

.performance-value.positive {
    color: var(--success) !important;
}

.performance-value.negative {
    color: var(--error) !important;
}

.performance-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.ticker-item {
    padding: 12px !important;
    background: var(--surface-elevated) !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.ticker-item:hover {
    background: var(--surface-hover) !important;
    transform: translateX(4px) !important;
}

.ticker-symbol {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.ticker-price {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* ==================== NAVIGATION IMPROVEMENTS ==================== */

.navigation-rail {
    background: white !important;
    border-right: 1px solid var(--border) !important;
    padding: 20px 12px !important;
}

.nav-item {
    padding: 12px 16px !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.nav-item .material-icons {
    font-size: 22px !important;
}

.nav-item.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

.nav-item:hover:not(.active) {
    background: var(--surface-elevated) !important;
}

.nav-label {
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* ==================== CARDS & CONTENT ==================== */

.trading-card, .lesson-card, .glossary-card {
    background: white !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}

.trading-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--border-dark) !important;
}

.view-header {
    margin-bottom: 32px !important;
}

.view-header h2 {
    font-size: 32px !important;
    margin-bottom: 8px !important;
}

.view-header .subtitle {
    font-size: 16px !important;
    color: var(--text-secondary) !important;
}

/* ==================== BUTTONS ==================== */

.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3) !important;
}

.btn-outlined {
    background: white !important;
    border: 2px solid var(--border-dark) !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    transition: all 0.2s ease !important;
}

.btn-outlined:hover {
    background: var(--surface-elevated) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* ==================== PREFERENCES PAGE ==================== */

.preference-tab {
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px 8px 0 0 !important;
}

.preference-tab.active {
    background: var(--primary) !important;
    color: white !important;
}

.form-group label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.form-group small {
    font-size: 13px !important;
    color: var(--text-tertiary) !important;
    margin-top: 6px !important;
    display: block !important;
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="number"] {
    font-size: 15px !important;
    padding: 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
}

.checkbox-label {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}

/* ==================== STATS & METRICS ==================== */

.stat-number {
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--text-primary) !important;
}

.stat-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 8px !important;
}

/* ==================== RESPONSIVE IMPROVEMENTS ==================== */

@media (max-width: 768px) {
    h1, .hero h1 {
        font-size: 28px !important;
    }
    
    h2, .view-title {
        font-size: 24px !important;
    }
    
    .stat-number {
        font-size: 32px !important;
    }
    
    /* Hide sidebar widgets on mobile */
    .sidebar-widget {
        display: none !important;
    }
    
    /* Ensure proper mobile layout */
    .main-content {
        margin-left: 0 !important;
        padding: 16px !important;
        padding-bottom: 80px !important;
    }
    
    /* Mobile navigation adjustments */
    .navigation-rail {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 64px !important;
        flex-direction: row !important;
        padding: 8px 0 !important;
        z-index: 1000 !important;
    }
    
    .nav-item {
        flex-direction: column !important;
        padding: 6px 8px !important;
        min-width: auto !important;
        gap: 2px !important;
    }
    
    .nav-label {
        font-size: 10px !important;
    }
    
    .nav-item .material-icons {
        font-size: 20px !important;
    }
    
    /* Mobile table adjustments */
    table {
        font-size: 13px !important;
    }
    
    th, td {
        padding: 8px 6px !important;
    }
    
    /* Mobile form adjustments */
    .form-input, .form-select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* ==================== ACCESSIBILITY ==================== */

/* Focus states */
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* Better contrast for links */
a {
    color: var(--primary) !important;
    font-weight: 500 !important;
}

a:hover {
    color: var(--primary-dark) !important;
    text-decoration: underline !important;
}

/* ==================== LANDING PAGE SPECIFIC ENHANCEMENTS ==================== */

.landing-container {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.logo-text {
    font-size: 28px !important;
    letter-spacing: -0.01em !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero {
    padding: 80px 0 !important;
}

.hero h1 {
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #1a1a1a !important;
}

.features-section {
    padding: 60px 0 !important;
}

.section-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 48px !important;
    color: #1a1a1a !important;
}

.features-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 24px !important;
}

.feature-card {
    background: white !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.feature-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--primary) !important;
}

.feature-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 12px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    font-size: 32px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.feature-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    text-transform: none !important;
    color: #1a1a1a !important;
}

.feature-desc {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

.stats-bar {
    background: white !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 48px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    margin: 60px 0 !important;
}

.stat-item {
    padding: 0 32px !important;
}

.stat-number {
    font-size: 56px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 14px !important;
    margin-top: 8px !important;
    color: var(--text-secondary) !important;
}

.strategies-showcase {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 60px 48px !important;
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.2) !important;
}

.strategy-tag {
    background: white !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.strategy-tag:hover {
    background: #fbbf24 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.cta-section {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 60px 48px !important;
    box-shadow: 0 8px 32px rgba(22, 163, 74, 0.2) !important;
}

.cta-section h2 {
    font-size: 36px !important;
    color: white !important;
}

/* ==================== APP INTERFACE POLISH ==================== */

.app-bar {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.2) !important;
}

.app-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.balance-chip {
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 6px 14px !important;
    border-radius: 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    backdrop-filter: blur(10px) !important;
}

.user-name {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ==================== TABLES & DATA DISPLAY ==================== */

table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

thead {
    background: var(--surface-elevated) !important;
}

th {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 14px 16px !important;
    text-align: left !important;
}

td {
    font-size: 14px !important;
    padding: 16px !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

tr:hover {
    background: var(--surface-hover) !important;
}

/* ==================== CHIPS & TAGS ==================== */

.strategy-chip, .chip {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.strategy-chip:hover, .chip:hover {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
}

/* ==================== LOADING & EMPTY STATES ==================== */

.loading {
    text-align: center !important;
    padding: 48px !important;
    color: var(--text-secondary) !important;
    font-size: 15px !important;
}

.empty-state {
    text-align: center !important;
    padding: 64px 32px !important;
}

.empty-state h3 {
    font-size: 20px !important;
    margin-bottom: 12px !important;
    color: var(--text-primary) !important;
}

.empty-state p {
    font-size: 15px !important;
    color: var(--text-secondary) !important;
    margin-bottom: 24px !important;
}

/* ==================== CRITICAL LOGGED-IN USER INTERFACE FIXES ==================== */

/* 1. SIDEBAR WIDGETS - Make performance value MUCH more prominent */
.performance-value {
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 16px 0 !important;
    letter-spacing: -0.02em !important;
}

.sidebar-widget h4 {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--text-tertiary) !important;
}

.ticker-symbol {
    font-size: 16px !important;
    font-weight: 700 !important;
}

.ticker-price {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* 2. NAVIGATION ACTIVE STATE - Modern gradient */
.nav-item.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    transform: translateX(4px) !important;
}

.nav-item {
    margin-bottom: 6px !important;
}

.nav-label {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* 3. SCANNER RESULTS TABLE - Better contrast and readability */
table thead th {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2c2c2c !important;
    background: #f1f5f9 !important;
    padding: 16px !important;
    border-bottom: 2px solid var(--border-dark) !important;
}

table tbody td {
    font-size: 15px !important;
    padding: 18px 16px !important;
    color: #1a1a1a !important;
}

table tbody tr:hover {
    background: #f8fafc !important;
    cursor: pointer !important;
}

/* 4. STRATEGY CHIPS - Larger and more clickable */
.strategy-chip,
.strategy-chips .chip {
    background: white !important;
    border: 2px solid var(--border) !important;
    border-radius: 24px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.strategy-chip.selected,
.strategy-chips .chip.selected {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: #2563eb !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}

.strategy-chip:hover,
.strategy-chips .chip:hover {
    border-color: #2563eb !important;
    background: #eff6ff !important;
}

/* 5. FORM INPUTS - Consistent styling across ALL views */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea {
    font-size: 15px !important;
    padding: 12px 16px !important;
    border: 2px solid var(--border) !important;
    border-radius: 10px !important;
    background: white !important;
    color: var(--text-primary) !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.form-group {
    margin-bottom: 20px !important;
}

/* 6. P&L DISPLAYS - Make profit/loss VERY prominent */
.pnl-value,
.profit,
.loss {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.profit,
.positive {
    color: #16a34a !important;
}

.loss,
.negative {
    color: #dc2626 !important;
}

/* 7. TRADING BUTTONS - Clear visual differentiation */
.btn-buy {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    border: none !important;
    color: white !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3) !important;
}

.btn-buy:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4) !important;
}

.btn-sell {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
    border: none !important;
    color: white !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

.btn-sell:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4) !important;
}

/* 8. TAB NAVIGATION - Consistent across all views */
.tab-navigation,
.preference-tabs,
.learning-tabs {
    display: flex !important;
    gap: 8px !important;
    border-bottom: 2px solid var(--border) !important;
    margin-bottom: 24px !important;
}

.tab,
.preference-tab,
.learning-tab {
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px 8px 0 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.tab.active,
.preference-tab.active,
.learning-tab.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
}

.tab:hover:not(.active),
.preference-tab:hover:not(.active),
.learning-tab:hover:not(.active) {
    background: #f1f5f9 !important;
    color: var(--text-primary) !important;
}

/* 9. LESSON CARDS & ACHIEVEMENT BADGES - Better visibility */
.lesson-card,
.achievement-card,
.glossary-card,
.strategy-education-card {
    border: 2px solid var(--border) !important;
    padding: 24px !important;
    border-radius: 12px !important;
}

.achievement-badge {
    width: 80px !important;
    height: 80px !important;
    font-size: 40px !important;
}

.lesson-title,
.achievement-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

/* 10. EMPTY STATES - Professional design */
.empty-state {
    text-align: center !important;
    padding: 80px 40px !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    border: 2px dashed var(--border-dark) !important;
}

.empty-state .material-icons {
    font-size: 64px !important;
    color: var(--text-tertiary) !important;
    margin-bottom: 16px !important;
}

.empty-state h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 12px !important;
}

.empty-state p {
    font-size: 16px !important;
    color: var(--text-secondary) !important;
    max-width: 400px !important;
    margin: 0 auto 24px !important;
}

/* 11. COMMUNITY POST CARDS - Better spacing */
.post-card {
    border: 2px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    background: white !important;
}

.post-card:hover {
    border-color: var(--border-dark) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.post-author {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

.post-content {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--text-primary) !important;
    margin: 12px 0 !important;
}

/* 12. LOADING STATES - Consistent design */
.loading,
.spinner {
    text-align: center !important;
    padding: 60px !important;
    color: var(--text-secondary) !important;
    font-size: 16px !important;
}

/* 13. TOAST NOTIFICATIONS - Professional styling */
.toast {
    background: white !important;
    border: 2px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 16px 24px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

.toast.success {
    border-left: 4px solid #16a34a !important;
}

.toast.error {
    border-left: 4px solid #dc2626 !important;
}

.toast.info {
    border-left: 4px solid #2563eb !important;
}

/* 14. HEADER USER PROFILE - Better visibility */
.user-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: white !important;
}

.balance-chip {
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: 24px !important;
    backdrop-filter: blur(10px) !important;
}

/* 15. SCAN BUTTON - Make it prominent */
#scanBtn,
.btn-scan {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
    padding: 16px 40px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#scanBtn:hover,
.btn-scan:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.4) !important;
}

/* 16. ADMIN TABLES - Professional styling */
.admin-table thead {
    background: #1e40af !important;
    color: white !important;
}

.admin-table thead th {
    color: white !important;
    font-weight: 600 !important;
}

.admin-controls {
    background: #fef3c7 !important;
    border: 2px solid #fbbf24 !important;
    padding: 20px !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
}