/**
 * ============================================
 * ALTIN.NET.TR - UNIFIED UI KIT
 * ============================================
 * Version: 2.0.0
 * Last Updated: 2025-01-18
 *
 * Tüm tasarım sistemini içeren tek dosya.
 * Önceki 50+ CSS dosyasının konsolide edilmiş hali.
 *
 * İçindekiler:
 * 1. Design Tokens (Variables)
 * 2. Reset & Base Styles
 * 3. Typography
 * 4. Layout & Grid
 * 5. Components
 * 6. Utilities
 * 7. Responsive
 * 8. Animations
 * ============================================
 */

/* ========================================= */
/* COMPONENT CSS IMPORTS                     */
/* Extracted from inline styles             */
/* ========================================= */

/* Partial Components */
@import './components/footer.css';
@import './components/navbar_unified.css';
@import './components/navbar_with_categories.css';
@import './components/navbar_simple.css';
@import './components/sidebar_categories.css';
@import './components/price_card.css';
@import './components/alert_modal.css';
@import './components/categories_bar.css';
@import './components/category_pills.css';
@import './components/change_badge.css';
@import './components/discover_menu.css';
@import './components/empty_state.css';
@import './components/messages.css';
@import './components/search_bar.css';
@import './components/sort_dropdown.css';
@import './components/calculator-widget.css';
@import './components/toast-modern.css';

/* Page-Specific Styles */
@import './pages/all-assets.css';
@import './pages/calculator.css';
@import './pages/leaderboard.css';
@import './pages/achievements.css';
@import './pages/activity.css';

/* ============================================
   1. DESIGN TOKENS (CSS Variables)
   ============================================ */

:root {
  /* Renk Paleti - Ana Renkler */
  --color-primary: #F59E0B;
  --color-primary-dark: #D97706;
  --color-primary-light: #FCD34D;
  --color-primary-50: #FFFBEB;
  --color-primary-100: #FEF3C7;
  --color-primary-200: #FDE68A;
  --color-primary-300: #FCD34D;
  --color-primary-400: #FBBF24;
  --color-primary-500: #F59E0B;
  --color-primary-600: #D97706;
  --color-primary-700: #B45309;
  --color-primary-800: #92400E;
  --color-primary-900: #78350F;

  /* Durum Renkleri */
  --color-success: #10B981;
  --color-success-dark: #047857;
  --color-success-light: #D1FAE5;

  --color-danger: #EF4444;
  --color-danger-dark: #B91C1C;
  --color-danger-light: #FEE2E2;

  --color-warning: #F59E0B;
  --color-warning-dark: #D97706;
  --color-warning-light: #FEF3C7;

  --color-info: #3B82F6;
  --color-info-dark: #1E40AF;
  --color-info-light: #DBEAFE;

  /* Nötr Renkler */
  --color-neutral-50: #F9FAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #111827;

  /* Spacing Scale (4px base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Typography Scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* 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);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index Scale */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ============================================
   2. RESET & BASE STYLES
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-50);
}

/* ============================================
   DEVAMI GELİYOR...
   Bu dosyayı aşamalı olarak dolduracağız
   ============================================ */
/**
 * UI Kit Modern - Unified Design System
 * Altın.net.tr - Financial Platform
 *
 * This file consolidates all modern UI components from the UI Kit
 * for consistent styling across the entire platform.
 */

/* ========================================
   CSS VARIABLES & DESIGN TOKENS
   ======================================== */

:root {
    /* Neutral Colors */
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;

    /* Gold Colors */
    --gold-50: #fffbeb;
    --gold-100: #fef3c7;
    --gold-200: #fde68a;
    --gold-300: #fcd34d;
    --gold-400: #fbbf24;
    --gold-500: #f59e0b;
    --gold-600: #d97706;
    --gold-700: #b45309;
    --gold-800: #92400e;
    --gold-900: #78350f;

    /* Success Colors */
    --success-50: #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #bbf7d0;
    --success-300: #86efac;
    --success-400: #4ade80;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;
    --success-800: #166534;
    --success-900: #14532d;
    --success: #10b981;
    --success-light: #d1fae5;
    --success-dark: #065f46;

    /* Danger Colors */
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --danger-dark: #991b1b;

    /* Blue Colors */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --info: #3b82f6;
    --info-light: #dbeafe;
    --info-dark: #1e40af;

    /* Orange/Warning Colors */
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --warning: #eab308;
    --warning-light: #fef3c7;
    --warning-dark: #b45309;

    /* Purple Colors */
    --purple-400: #c084fc;
    --purple-600: #9333ea;

    /* Typography */
    --font-family-mono: 'JetBrains Mono', 'Courier New', monospace;
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes blink-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes empty-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
}

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

/* ========================================
   PRICE CARDS
   ======================================== */

.price-card-modern {
    background: white;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}

.price-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.price-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-900);
}

.price-card-subtitle {
    font-size: 12px;
    color: var(--neutral-600);
    margin-top: 2px;
}

.price-value-mono {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--font-family-mono);
    color: var(--neutral-900);
    margin-bottom: 8px;
}

.price-value-mono-sm {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-family-mono);
    color: var(--neutral-900);
    margin-bottom: 6px;
    line-height: 1.2;
}

.price-change {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.price-change.positive {
    color: var(--success-600);
}

.price-change.negative {
    color: var(--danger-600);
}

.price-change-sm {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.price-change-sm.positive {
    color: var(--success-600);
}

.price-change-sm.negative {
    color: var(--danger-600);
}

.price-change-sm.neutral {
    color: var(--neutral-600);
}

.price-details {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid var(--neutral-200);
    margin-top: 15px;
    font-size: 13px;
    color: var(--neutral-600);
}

/* ========================================
   LIVE INDICATORS
   ======================================== */

.live-badge-pulse {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 4px 8px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.live-badge-pulse-sm {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 6px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-radius: 16px;
    font-size: 9px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 2;
}

.live-dot-animated {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    animation: blink-dot 1.5s infinite;
}

/* ========================================
   CHANGE BADGES
   ======================================== */

.change-badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.change-badge-modern.change-badge-filled.change-positive {
    background: rgba(34, 197, 94, 0.1);
    color: #10b981;
}

.change-badge-modern.change-badge-filled.change-negative {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.change-badge-modern.change-badge-outlined.change-positive {
    background: transparent;
    border: 2px solid #10b981;
    color: #10b981;
}

.change-badge-modern.change-badge-outlined.change-negative {
    background: transparent;
    border: 2px solid #ef4444;
    color: #ef4444;
}

/* Sizes */
.change-badge-modern.change-badge-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    gap: 0.25rem;
}

.change-badge-modern.change-badge-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    gap: 0.375rem;
}

.change-badge-modern.change-badge-md {
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    border-radius: 8px;
}

.change-badge-modern.change-badge-lg {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    border-radius: 10px;
    gap: 0.5rem;
}

.change-badge-modern:hover {
    transform: translateY(-1px);
}

/* ========================================
   CATEGORY BADGES
   ======================================== */

.price-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.price-badge.badge-altin,
.price-badge.badge-gold {
    background: var(--gold-100);
    color: var(--gold-800);
}

.price-badge.badge-doviz,
.price-badge.badge-currency {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.price-badge.badge-kripto,
.price-badge.badge-crypto {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.price-badge.badge-emtia,
.price-badge.badge-commodity {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

/* ========================================
   MODERN PRICE COMPONENTS
   ======================================== */

/* Price Pills - Pill-style price badges inspired by modern fintech apps */
.price-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.price-pill-buy {
    background: var(--success-light);
    color: var(--success-dark);
    border: 1px solid var(--success);
}

.price-pill-sell {
    background: var(--danger-light);
    color: var(--danger-dark);
    border: 1px solid var(--danger);
}

.price-pill-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.85;
}

.price-pill:hover {
    transform: scale(1.02);
}

/* Range Badge - 24h High/Low display */
.range-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--neutral-50);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.range-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.range-dot.low {
    background: var(--danger);
}

.range-dot.high {
    background: var(--success);
}

.range-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-600);
    opacity: 0.8;
}

.range-value {
    font-family: 'JetBrains Mono', monospace;
    color: var(--neutral-900);
    font-weight: 600;
}

.range-badge:hover {
    background: var(--neutral-100);
}

/* Bold Change Badge - Modern solid-colored variant */
.change-badge-bold {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 14px;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.2s ease;
}

.change-badge-bold.positive {
    background: var(--success);
    color: white;
}

.change-badge-bold.negative {
    background: var(--danger);
    color: white;
}

.change-badge-bold:hover {
    transform: scale(1.05);
}

.change-badge-bold .change-icon {
    font-size: 12px;
}

/* Divider - Vertical separator */
.divider {
    width: 1px;
    height: 20px;
    background: var(--neutral-200);
    flex-shrink: 0;
}

.divider-horizontal {
    width: 100%;
    height: 1px;
    background: var(--neutral-200);
    margin: 16px 0;
}

/* Modern Price Card - Compact card layout for price display */
.price-card-modern {
    background: white;
    border-radius: 16px;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 220px 1fr auto;
    align-items: center;
    gap: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    width: 100%;
}

.price-card-modern:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.price-card-modern .asset-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.price-card-modern .asset-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--neutral-900);
    line-height: 1.3;
}

.price-card-modern .asset-code {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-400);
    font-family: 'JetBrains Mono', monospace;
}

.price-card-modern .price-data {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.price-card-modern .actions {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

/* Responsive adjustments for price cards */
@media (max-width: 1400px) {
    .price-card-modern {
        grid-template-columns: 200px 1fr auto;
        gap: 20px;
        padding: 15px 18px;
    }
}

@media (max-width: 1200px) {
    .price-card-modern {
        grid-template-columns: 180px 1fr auto;
        gap: 16px;
    }
}

@media (max-width: 968px) {
    .price-card-modern {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 16px;
    }

    .price-card-modern .price-data {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .price-card-modern .actions {
        justify-content: space-between;
    }
}

@media (max-width: 640px) {
    .price-card-modern .price-data {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* Mobile Compact Card Variant */
.price-card-modern.mobile-compact {
    border-radius: 16px;
    padding: 12px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: block;
}

.price-card-modern.mobile-compact:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* ========================================
   SPARKLINE CHARTS
   ======================================== */

.sparkline-wrapper {
    height: 50px;
    margin: 15px 0;
}

.sparkline-wrapper-sm {
    height: 40px;
    margin: 12px 0;
}

.sparkline-wrapper-large {
    height: 60px;
    margin: 1.25rem 0;
    flex-shrink: 0;
}

/* ========================================
   EMPTY STATES
   ======================================== */

.empty-state-modern {
    background: white;
    border-radius: 16px;
    padding: 4rem 2rem;
    text-align: center;
    border: 1px solid var(--neutral-200);
    margin: 2rem auto;
    max-width: 600px;
}

.empty-emoji {
    font-size: 4rem;
    line-height: 1;
    display: inline-block;
    animation: empty-float 3s ease-in-out infinite;
}

.empty-icon {
    font-size: 4rem;
    color: var(--neutral-400);
    animation: empty-float 3s ease-in-out infinite;
}

.empty-state-title {
    color: var(--neutral-700);
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state-description {
    color: var(--neutral-500);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.btn-empty-action {
    display: inline-block;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-empty-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
    color: white;
    text-decoration: none;
}

/* ========================================
   BUTTONS & ACTIONS
   ======================================== */

.btn-favorite-modern {
    position: absolute;
    top: 12px;
    right: 12px;
    background: white;
    border: 2px solid var(--gold-300);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--gold-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
}

.btn-favorite-modern:hover {
    background: var(--gold-100);
    border-color: var(--gold-500);
    transform: scale(1.1);
}

.btn-favorite-modern.active {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: white;
}

.btn-favorite-modern.active i {
    animation: starPulse 0.6s ease;
}

@keyframes starPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* ========================================
   PRICE CARDS (Demo Style)
   ======================================== */

.price-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.price-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.price-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-900);
}

.price-card-subtitle {
    font-size: 12px;
    color: var(--neutral-600);
    margin-top: 2px;
}

.price-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-altin {
    background: var(--gold-100, #fef3c7);
    color: var(--gold-800, #92400e);
}

.badge-doviz {
    background: var(--info-light, rgba(59, 130, 246, 0.1));
    color: var(--info-dark, #1e40af);
}

.badge-kripto {
    background: var(--warning-light, rgba(234, 179, 8, 0.1));
    color: var(--warning-dark, #b45309);
}

.badge-emtia {
    background: var(--success-light, rgba(34, 197, 94, 0.1));
    color: var(--success-dark, #065f46);
}

.price-value {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    color: var(--neutral-900);
    margin-bottom: 8px;
}

.price-change {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.price-change.positive {
    color: var(--success, #10b981);
}

.price-change.negative {
    color: var(--danger, #ef4444);
}

/* Sparkline */
.sparkline-wrapper {
    height: 50px;
    margin: 15px 0;
}

/* Price Details */
.price-details {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid var(--neutral-200);
    margin-top: 15px;
    font-size: 13px;
    color: var(--neutral-600);
}

/* Live Badge */
.live-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 4px 8px;
    background: var(--danger-light, rgba(239, 68, 68, 0.1));
    color: var(--danger, #ef4444);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 5;
}

/* Note: .live-dot and .live-indicator defined later in file with proper animations */

/* Favorite Button */
.btn-favorite-card {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: white;
    border: 2px solid var(--gold-300);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--gold-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
    font-size: 14px;
}

.btn-favorite-card:hover {
    background: var(--gold-100);
    border-color: var(--gold-500);
    transform: scale(1.1);
}

.btn-favorite-card.active {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: white;
}

.btn-favorite-card.active i {
    animation: starPulse 0.6s ease;
}

/* Card Overlay Link */
.card-overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* No Data State */
.no-data-state {
    padding: 40px 20px;
    text-align: center;
}

.no-data-icon {
    font-size: 48px;
    margin-bottom: 10px;
    opacity: 0.3;
}

.no-data-text {
    color: var(--neutral-600);
    font-size: 14px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .price-card {
        padding: 16px;
    }

    .price-card-title {
        font-size: 16px;
    }

    .price-card-subtitle {
        font-size: 11px;
    }

    .price-value {
        font-size: 24px;
    }

    .price-change {
        font-size: 13px;
    }

    .sparkline-wrapper {
        height: 40px;
        margin: 12px 0;
    }

    .price-details {
        font-size: 12px;
        padding-top: 12px;
        margin-top: 12px;
    }

    .live-badge {
        top: 16px;
        right: 16px;
        font-size: 9px;
        padding: 3px 6px;
    }

    .btn-favorite-card {
        bottom: 16px;
        right: 16px;
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .no-data-icon {
        font-size: 36px;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-success {
    color: var(--success-600) !important;
}

.text-danger {
    color: var(--danger-600) !important;
}

.text-muted {
    color: var(--neutral-500) !important;
}

.bg-gold-gradient {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
}

.shadow-gold {
    box-shadow: 0 4px 12px rgba(255, 183, 0, 0.3);
}

/* ========================================
   HERO SECTION - MINIMAL & READABLE
   ======================================== */

.hero-minimal {
    background: linear-gradient(135deg, var(--gold-50, #FEF3C7) 0%, white 50%, var(--neutral-50, #FAFAFA) 100%);
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
}

.hero-content-minimal {
    max-width: 800px;
}

.hero-title-minimal {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    color: var(--neutral-900, #111827);
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-description-minimal {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: var(--neutral-600, #6B7280);
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .hero-minimal {
        padding: 70px 0 50px;
    }
}

@media (max-width: 575px) {
    .hero-minimal {
        padding: 60px 0 40px;
    }

    .hero-description-minimal br {
        display: none;
    }
}

/* ========================================
   STAT CARDS
   ======================================== */

.stat-card-modern {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    border: 1px solid var(--neutral-200, #e5e7eb);
}

.stat-card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.stat-icon-modern {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.stat-emoji {
    font-size: 24px;
}

.stat-icon-modern.stat-icon-success {
    background: var(--success-light, rgba(34, 197, 94, 0.1));
    color: var(--success-dark, #065f46);
}

.stat-icon-modern.stat-icon-danger {
    background: var(--danger-light, rgba(239, 68, 68, 0.1));
    color: var(--danger-dark, #991b1b);
}

.stat-icon-modern.stat-icon-info {
    background: var(--info-light, rgba(59, 130, 246, 0.1));
    color: var(--info-dark, #1e40af);
}

.stat-icon-modern.stat-icon-warning {
    background: var(--warning-light, rgba(234, 179, 8, 0.1));
    color: var(--warning-dark, #b45309);
}

.stat-icon-modern.stat-icon-gold {
    background: var(--gold-100, #fef3c7);
    color: var(--gold-700, #b45309);
}

.stat-content-modern {
    flex: 1;
}

.stat-label-modern {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-600, #4b5563);
    margin-bottom: 5px;
    font-weight: 600;
}

.stat-value-modern {
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    margin-bottom: 2px;
    font-family: var(--font-family-mono, 'Courier New', monospace);
}

.stat-subtitle-modern {
    font-size: 14px;
    color: var(--neutral-600, #4b5563);
}

@media (max-width: 768px) {
    .stat-card-modern {
        padding: 15px;
    }

    .stat-icon-modern {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .stat-value-modern {
        font-size: 20px;
    }
}

/* ========================================
   CATEGORY SECTIONS
   ======================================== */

.category-section-modern {
    border-bottom: 1px solid var(--neutral-100, #f5f5f5);
}

.category-section-modern:last-child {
    border-bottom: none;
}

/* Section Header */
.section-header-modern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.section-title-modern {
    font-size: 28px;
    font-weight: 900;
    color: var(--neutral-900, #111827);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-icon-modern {
    font-size: 32px;
}

.view-all-link-modern {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 2px solid var(--gold-400, #fbbf24);
    border-radius: 12px;
    color: var(--gold-600, #d97706);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.view-all-link-modern:hover {
    background: var(--gold-400, #fbbf24);
    color: white;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

/* Unified Symbol Grid System */
.symbol-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr);
}

/* Category-specific grid adjustments */
[data-category="altin"] .symbol-grid,
[data-category="doviz"] .symbol-grid,
[data-category="emtia"] .symbol-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

[data-category="kripto"] .symbol-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive Grid Breakpoints */
@media (max-width: 1199px) {
    .symbol-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    [data-category="altin"] .symbol-grid,
    [data-category="doviz"] .symbol-grid,
    [data-category="emtia"] .symbol-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    [data-category="altin"] .symbol-grid,
    [data-category="doviz"] .symbol-grid,
    [data-category="emtia"] .symbol-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .section-title-modern {
        font-size: 22px;
    }

    .category-icon-modern {
        font-size: 26px;
    }

    .view-all-link-modern {
        padding: 8px 16px;
        font-size: 13px;
    }
}

@media (max-width: 575px) {
    .symbol-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 0.75rem;
    }

    [data-category="altin"] .symbol-grid,
    [data-category="doviz"] .symbol-grid,
    [data-category="kripto"] .symbol-grid,
    [data-category="emtia"] .symbol-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 0.75rem;
    }

    .category-section-modern {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .section-header-modern {
        margin-bottom: 20px !important;
        gap: 12px;
    }

    .section-title-modern {
        font-size: 18px !important;
    }

    .category-icon-modern {
        font-size: 22px;
    }

    .view-all-link-modern {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    .view-all-link-modern span {
        display: none;
    }

    .view-all-link-modern::before {
        content: "Tümü";
        margin-right: 4px;
    }
}

/* ========================================
   SYMBOL DETAIL PAGE
   ======================================== */

/* Symbol Header */
.symbol-header-modern {
    background: white;
    border-radius: var(--radius-2xl, 20px);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
}

.symbol-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.symbol-title-info h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    color: var(--neutral-900, #111827);
    margin: 0 0 8px 0;
}

.symbol-subtitle {
    font-size: 1rem;
    color: var(--neutral-600, #6B7280);
    font-weight: 500;
}

.symbol-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.icon-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--neutral-200, #E5E7EB);
    background: white;
    color: var(--neutral-700, #374151);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-action-btn:hover {
    background: var(--neutral-50, #F9FAFB);
    border-color: var(--gold-400, #FBBF24);
    color: var(--gold-600, #D97706);
}

.icon-action-btn.active {
    background: var(--gold-50, #FFFBEB);
    border-color: var(--gold-400, #FBBF24);
    color: var(--gold-600, #D97706);
}

/* Price Hero - Modern */
.price-hero-modern {
    background: linear-gradient(135deg, #f8f9fa 0%, white 50%, #f8f9fa 100%);
    border: 2px solid #e9ecef;
    border-radius: 20px;
    padding: 36px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
}

/* Top Section */
.price-hero-top {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 2px solid #e9ecef;
}

.price-info-stack {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-alert-simple {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 2px solid var(--gold-400, #FBBF24);
    border-radius: 12px;
    color: var(--gold-600, #D97706);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-alert-simple:hover {
    background: var(--gold-50, #FFFBEB);
    border-color: var(--gold-500, #FFB700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}

.btn-alert-simple i {
    font-size: 14px;
}

.price-change-badge .change-amount {
    font-size: 15px;
    opacity: 0.85;
    margin-left: 4px;
    font-weight: 500;
}

.price-update-simple {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--neutral-600, #6B7280);
    font-weight: 500;
}

.price-update-simple i {
    font-size: 12px;
    color: var(--neutral-500, #9CA3AF);
}

/* Live Indicator */
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #EF4444;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    animation: live-pulse 2s ease-in-out infinite;
}

.live-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: #EF4444;
    border-radius: 50%;
    opacity: 0.6;
    animation: live-pulse-ring 2s ease-in-out infinite;
    will-change: transform, opacity;
    pointer-events: none;
}

.live-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #DC2626;
    line-height: 1;
    flex-shrink: 0;
    white-space: nowrap;
}

@keyframes live-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes live-pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.2;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Bottom Section: Grid */
.price-hero-bottom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    /* Prevent grid overflow */
    min-width: 0;
}

.price-info-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    /* Prevent overflow */
    min-width: 0;
    overflow: hidden;
}

.price-info-card:hover {
    border-color: var(--gold-300, #FCD34D);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.price-info-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-600, #6B7280);
    margin-bottom: 16px;
}

.price-label-modern {
    font-size: 0.875rem;
    color: var(--neutral-600, #6B7280);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.price-value-modern {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--neutral-900, #111827);
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    line-height: 1;
}

.price-change-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px solid;
    transition: all 0.3s ease;
    font-weight: 600;
    white-space: nowrap;
    font-size: 16px;
}

.price-change-badge.positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: var(--success, #10B981);
    color: var(--success, #10B981);
}

.price-change-badge.negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-color: var(--danger, #EF4444);
    color: var(--danger, #EF4444);
}

.price-change-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.price-change-badge i {
    font-size: 15px;
}

.change-percent {
    font-size: 1.125rem;
    font-weight: 700;
}

.change-divider {
    opacity: 0.4;
    font-size: 0.875rem;
}

.change-amount {
    font-size: 0.9375rem;
    font-weight: 600;
    opacity: 0.85;
}

/* Old class support for backward compatibility */
.price-change-modern {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}

.price-change-modern.positive {
    background: var(--success-light, rgba(16, 185, 129, 0.1));
    color: var(--success, #10B981);
}

.price-change-modern.negative {
    background: var(--danger-light, rgba(239, 68, 68, 0.1));
    color: var(--danger, #EF4444);
}

.price-update-info {
    text-align: right;
}

.live-indicator-modern {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--danger-light, rgba(239, 68, 68, 0.1));
    color: var(--danger, #EF4444);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.pulse-dot-modern {
    width: 8px;
    height: 8px;
    background: var(--danger, #EF4444);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

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

.update-time-modern {
    font-size: 0.875rem;
    color: var(--neutral-600, #6B7280);
}

.price-details-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.price-detail-card {
    background: white;
    border: 2px solid var(--neutral-200, #E5E7EB);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    cursor: default;
}

.price-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.price-detail-card.bid-card {
    border-color: var(--success, #10B981);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, white 100%);
}

.price-detail-card.bid-card:hover {
    border-color: var(--success, #10B981);
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.2);
}

.price-detail-card.ask-card {
    border-color: var(--danger, #EF4444);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.03) 0%, white 100%);
}

.price-detail-card.ask-card:hover {
    border-color: var(--danger, #EF4444);
    box-shadow: 0 8px 16px rgba(239, 68, 68, 0.2);
}

.price-detail-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.bid-card .price-detail-icon {
    background: var(--success-light, rgba(16, 185, 129, 0.1));
    color: var(--success, #10B981);
}

.ask-card .price-detail-icon {
    background: var(--danger-light, rgba(239, 68, 68, 0.1));
    color: var(--danger, #EF4444);
}

.price-detail-content {
    flex: 1;
}

.price-detail-label {
    font-size: 0.75rem;
    color: var(--neutral-600, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-weight: 600;
}

.price-detail-value {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    line-height: 1;
}

/* Stats Grid Modern */
.stats-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card-detail {
    background: white;
    border: 2px solid var(--neutral-200, #E5E7EB);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card-detail:hover {
    border-color: var(--gold-400, #FBBF24);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.12);
    transform: translateY(-4px);
}

.stat-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.stat-icon-wrapper.icon-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    color: var(--danger, #EF4444);
}

.stat-icon-wrapper.icon-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: var(--success, #10B981);
}

.stat-card-detail:hover .stat-icon-wrapper {
    transform: scale(1.1);
}

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

.stat-label {
    display: block;
    font-size: 13px;
    color: var(--neutral-600, #6B7280);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    line-height: 1.2;
    margin-bottom: 4px;
}

.stat-value.positive {
    color: var(--success, #10B981);
}

.stat-value.negative {
    color: var(--danger, #EF4444);
}

.stat-subtitle {
    font-size: 13px;
    color: var(--neutral-500, #6B7280);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 991px) {
    .stats-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 576px) {
    .stats-grid-modern {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .stat-card-detail {
        padding: 16px;
    }

    .stat-icon-wrapper {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .stat-value {
        font-size: 1.25rem;
    }
}

/* Simple Stat Card - Minimalist version */
.stat-card-simple {
    background: white;
    border: 2px solid var(--neutral-200, #E5E7EB);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card-simple:hover {
    border-color: var(--gold-400, #FBBF24);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.1);
}

.stat-card-simple .stat-label {
    font-size: 12px;
    color: var(--neutral-600, #6B7280);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.stat-card-simple .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
}

/* Price Pills Grid */
.price-pills-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    /* Prevent overflow */
    min-width: 0;
}

.price-pill-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
    /* Prevent overflow */
    min-width: 0;
    overflow: hidden;
}

.price-pill-large .pill-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.price-pill-large .pill-value {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
}

.price-pill-large:hover {
    transform: translateY(-2px);
}

/* Range Grid */
.range-grid {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Prevent overflow */
    min-width: 0;
}

.range-item-large {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Prevent overflow */
    min-width: 0;
    overflow: hidden;
}

.range-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.range-icon.low {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger, #EF4444);
}

.range-icon.high {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success, #10B981);
}

.range-label-small {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--neutral-500, #9CA3AF);
    margin-bottom: 4px;
}

.range-value-large {
    display: block;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    color: var(--neutral-900, #111827);
}

.range-value-large.low {
    color: var(--danger, #EF4444);
}

.range-value-large.high {
    color: var(--success, #10B981);
}

.range-divider-vertical {
    width: 2px;
    height: 50px;
    background: #e9ecef;
    flex-shrink: 0;
}

/* Responsive Styles for Price Hero */
/* Tablet landscape and below - single column to prevent overflow */
@media (max-width: 1200px) {
    .price-hero-bottom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .price-hero-bottom {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .price-hero-modern {
        padding: 24px;
        padding-top: 56px;
    }

    .price-hero-top {
        margin-bottom: 24px;
        padding-bottom: 20px;
    }

    .price-info-stack {
        gap: 12px;
    }

    .live-indicator {
        top: 16px;
        right: 16px;
        padding: 5px 10px;
        gap: 5px;
    }

    .live-dot {
        width: 7px;
        height: 7px;
    }

    .price-value-modern {
        font-size: 2.5rem;
    }

    .price-info-card {
        padding: 16px;
    }

    /* Smaller screens: single column for price pills */
    .price-pills-grid {
        gap: 10px;
    }

    .range-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .range-grid {
        gap: 12px;
    }

    .range-divider-vertical {
        height: 40px;
    }
}

@media (max-width: 576px) {
    .stat-card-simple {
        padding: 16px;
    }

    .stat-card-simple .stat-value {
        font-size: 1.25rem;
    }

    .price-hero-modern {
        padding: 20px;
        padding-top: 52px;
    }

    .live-indicator {
        top: 12px;
        right: 12px;
        padding: 4px 9px;
        gap: 5px;
    }

    .live-dot {
        width: 6px;
        height: 6px;
    }

    .live-text {
        font-size: 9px;
    }

    .price-info-stack {
        gap: 10px;
    }

    .price-value-modern {
        font-size: 2rem;
    }

    .price-change-badge {
        padding: 8px 14px;
        gap: 6px;
    }

    .price-change-badge .change-amount {
        display: none;
    }

    /* Very small screens: single column for price pills to prevent overflow */
    .price-pills-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .price-pill-large {
        padding: 12px;
    }

    .range-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .range-divider-vertical {
        display: none;
    }

    .price-update-simple {
        font-size: 12px;
    }

    .price-pill-large .pill-value {
        font-size: 18px;
    }

    .range-value-large {
        font-size: 16px;
    }

    .range-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .range-grid {
        gap: 12px;
    }

    .range-divider-vertical {
        height: 35px;
    }
}

/* Chart Section Modern */
.chart-section-modern {
    background: white;
    border: 1px solid var(--neutral-200, #E5E7EB);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-section-modern:hover {
    border-color: var(--gold-300, #FCD34D);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.08);
}

.chart-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.chart-title-modern {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    margin: 0;
}

.chart-canvas-wrapper {
    position: relative;
    height: 400px;
    background: var(--neutral-50, #FAFAFA);
    border-radius: 12px;
    padding: 16px;
}

.chart-period-selector {
    display: flex;
    gap: 4px;
    background: white;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--neutral-200, #E5E7EB);
}

.chart-period-btn {
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--neutral-600, #6B7280);
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.chart-period-btn:hover {
    background: var(--neutral-50, #FAFAFA);
    color: var(--neutral-900, #111827);
}

.chart-period-btn.active {
    background: linear-gradient(135deg, var(--gold-400, #FBBF24), var(--gold-500, #F59E0B));
    color: white;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

/* Provider Comparison Modern */
.provider-comparison-modern {
    background: white;
    border-radius: 20px;
    border: 1px solid var(--neutral-200, #E5E7EB);
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.provider-comparison-modern:hover {
    border-color: var(--gold-300, #FCD34D);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.08);
}

.provider-comparison-modern h5 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    margin-bottom: 20px;
}

/* Provider List */
.provider-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.provider-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--neutral-50, #F9FAFB);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.provider-item:hover {
    background: var(--neutral-100, #F3F4F6);
}

.provider-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.provider-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
}

.provider-name {
    font-weight: 600;
    color: var(--neutral-900, #111827);
    font-size: 0.875rem;
}

.provider-prices {
    display: flex;
    gap: 16px;
}

.provider-price-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.provider-price-item small {
    font-size: 0.75rem;
    color: var(--neutral-600, #6B7280);
    text-transform: uppercase;
}

.provider-price-item strong {
    font-size: 0.875rem;
    color: var(--neutral-900, #111827);
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
}

/* Related Assets List - Redesigned */
.related-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.related-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: white;
    border: 2px solid var(--neutral-200, #E5E7EB);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.related-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gold-400, #FBBF24) 0%, var(--gold-500, #F59E0B) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.related-item:hover {
    border-color: var(--gold-400, #FBBF24);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
    transform: translateY(-2px);
}

.related-item:hover::before {
    opacity: 1;
}

/* Related Info */
.related-info {
    flex: 1;
    min-width: 0;
}

.related-name {
    font-weight: 600;
    color: var(--neutral-900, #111827);
    font-size: 15px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-ticker {
    font-size: 12px;
    color: var(--neutral-500, #6B7280);
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Related Price */
.related-price {
    text-align: right;
    flex-shrink: 0;
}

.related-value {
    font-weight: 700;
    color: var(--neutral-900, #111827);
    font-size: 16px;
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    margin-bottom: 4px;
    line-height: 1;
}

.related-change {
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}

.related-change.positive {
    background: var(--success-light, #D1FAE5);
    color: var(--success-dark, #047857);
}

.related-change.negative {
    background: var(--danger-light, #FEE2E2);
    color: var(--danger-dark, #B91C1C);
}

.related-change i {
    font-size: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .related-item {
        padding: 12px;
    }

    .related-name {
        font-size: 14px;
    }

    .related-value {
        font-size: 14px;
    }

    .related-change {
        font-size: 11px;
        padding: 3px 6px;
    }
}

/* SEO Content Modern */
.seo-content-modern {
    background: white;
    border: 1px solid var(--neutral-200, #E5E7EB);
    border-radius: 20px;
    padding: 32px;
    margin-top: 40px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.seo-content-modern:hover {
    border-color: var(--gold-300, #FCD34D);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.08);
}

.seo-content-modern h2 {
    color: var(--neutral-900, #111827);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold-200, #FDE68A);
}

.seo-content-modern h2:first-child {
    margin-top: 0;
}

.seo-content-modern h3 {
    color: var(--neutral-900, #111827);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 12px;
}

.seo-content-modern p {
    color: var(--neutral-700, #374151);
    line-height: 1.7;
    margin-bottom: 16px;
    font-size: 15px;
}

.seo-content-modern ul,
.seo-content-modern ol {
    color: var(--neutral-700, #374151);
    line-height: 1.7;
    margin-bottom: 16px;
    padding-left: 24px;
}

.seo-content-modern li {
    margin-bottom: 8px;
}

.seo-content-modern strong {
    color: var(--neutral-900, #111827);
    font-weight: 600;
}

.seo-content-modern a {
    color: var(--gold-600, #D97706);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-300, #FCD34D);
    transition: all 0.2s ease;
}

.seo-content-modern a:hover {
    color: var(--gold-700, #B45309);
    border-bottom-color: var(--gold-600, #D97706);
}

/* Responsive */
@media (max-width: 768px) {
    .seo-content-modern {
        padding: 24px;
        margin-top: 32px;
    }

    .seo-content-modern h2 {
        font-size: 1.25rem;
        margin-top: 24px;
    }

    .seo-content-modern h3 {
        font-size: 1.125rem;
    }

    .seo-content-modern p {
        font-size: 14px;
    }
}

/* ========================================
   ULTRA-MODERN ENHANCEMENTS
   ======================================== */

/* Breadcrumb Modern */
.breadcrumb-modern {
    background: white;
    border-radius: 16px;
    padding: 1rem 1.5rem;
    border: 1px solid var(--neutral-200, #E5E7EB);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.breadcrumb-modern:hover {
    border-color: var(--gold-300, #FCD34D);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.1);
}

.breadcrumb-list-modern {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-item-modern {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.breadcrumb-link-modern {
    color: var(--neutral-600, #4B5563);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-link-modern:hover {
    color: var(--gold-600, #D97706);
}

.breadcrumb-current {
    color: var(--neutral-900, #111827);
    font-weight: 600;
}

.breadcrumb-separator {
    color: var(--neutral-400, #9CA3AF);
    font-size: 0.75rem;
}

/* Old Bootstrap Breadcrumb Support */
.breadcrumb-modern .breadcrumb {
    margin-bottom: 0;
    background: transparent;
    padding: 0;
}

.breadcrumb-modern .breadcrumb-item {
    font-size: 0.875rem;
    color: var(--neutral-600, #6B7280);
}

.breadcrumb-modern .breadcrumb-item a {
    color: var(--neutral-700, #374151);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-modern .breadcrumb-item a:hover {
    color: var(--gold-600, #D97706);
}

.breadcrumb-modern .breadcrumb-item.active {
    color: var(--neutral-900, #111827);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .breadcrumb-modern {
        padding: 0.75rem 1rem;
        border-radius: 12px;
    }

    .breadcrumb-item-modern {
        font-size: 0.8125rem;
    }
}

/* Category Badge Enhanced */
.category-badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-badge-modern.badge-altin {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E;
    border: 1px solid #FCD34D;
}

.category-badge-modern.badge-doviz {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #1E40AF;
    border: 1px solid #93C5FD;
}

.category-badge-modern.badge-kripto {
    background: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 100%);
    color: #9F1239;
    border: 1px solid #F9A8D4;
}

.category-badge-modern.badge-emtia {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #065F46;
    border: 1px solid #6EE7B7;
}

.category-badge-modern.badge-endeks {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    color: #3730A3;
    border: 1px solid #A5B4FC;
}

/* Sparkline Container */
.sparkline-container {
    width: 120px;
    height: 40px;
    position: relative;
}

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

/* Price Range Indicator */
.price-range-indicator {
    margin-top: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}

.range-label {
    font-size: 0.75rem;
    color: var(--neutral-600, #6B7280);
    margin-bottom: 6px;
    display: block;
}

.range-bar {
    height: 6px;
    background: var(--neutral-200, #E5E7EB);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.range-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--success, #10B981) 0%, var(--gold-500, #F59E0B) 50%, var(--danger, #EF4444) 100%);
    border-radius: 3px;
}

.range-marker {
    position: absolute;
    top: -2px;
    width: 10px;
    height: 10px;
    background: white;
    border: 2px solid var(--gold-600, #D97706);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.range-values {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.75rem;
}

.range-values span {
    color: var(--neutral-600, #6B7280);
}

/* Modern Icon System */
.stat-icon-modern {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--neutral-100, #F3F4F6);
    color: var(--neutral-700, #374151);
}

.stat-icon-modern.icon-success {
    background: var(--success-light, rgba(16, 185, 129, 0.1));
    color: var(--success, #10B981);
}

.stat-icon-modern.icon-danger {
    background: var(--danger-light, rgba(239, 68, 68, 0.1));
    color: var(--danger, #EF4444);
}

.stat-icon-modern.icon-warning {
    background: var(--warning-light, rgba(245, 158, 11, 0.1));
    color: var(--warning, #F59E0B);
}

.stat-icon-modern.icon-info {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

/* Chart Controls */
.chart-controls {
    display: flex;
    gap: 4px;
}

.chart-control-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--neutral-200, #E5E7EB);
    background: white;
    color: var(--neutral-600, #6B7280);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.chart-control-btn:hover {
    background: var(--gold-50, #FFFBEB);
    border-color: var(--gold-400, #FBBF24);
    color: var(--gold-600, #D97706);
    transform: translateY(-1px);
}

/* Floating Action Button (Mobile) */
.floating-action-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-500, #F59E0B) 0%, var(--gold-600, #D97706) 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
}

.floating-action-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.5);
}

.floating-action-button.show {
    display: flex;
}

/* Scroll Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* Skeleton Loaders */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-title {
    height: 32px;
    width: 60%;
    margin-bottom: 16px;
}

.skeleton-price {
    height: 48px;
    width: 40%;
    margin-bottom: 12px;
}

/* Interactive Tooltips */
.tooltip-modern {
    position: relative;
    cursor: help;
}

.tooltip-modern::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 8px 12px;
    background: var(--neutral-900, #111827);
    color: white;
    font-size: 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
}

.tooltip-modern::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--neutral-900, #111827);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tooltip-modern:hover::after,
.tooltip-modern:hover::before {
    opacity: 1;
}

.tooltip-modern:hover::after {
    transform: translateX(-50%) translateY(-4px);
}

/* Glass Morphism Effect */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Enhanced Hover Effects */
.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ========================================
   ULTRA-MODERN SOCIAL TABS COMPONENT
   ======================================== */

/* Modern Social Tabs Container */
.social-tabs-modern {
    background: white;
    border-radius: 16px;
    border: 2px solid var(--neutral-200, #E5E7EB);
    overflow: hidden;
    margin-bottom: 32px;
}

/* Modern Tab Header */
.social-tabs-header {
    background: white;
    border-bottom: 2px solid var(--neutral-100, #F3F4F6);
    padding: 16px 20px 0;
}

/* Modern Tab Navigation */
.tabs-nav-modern {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Modern Tab Button */
.tab-button-modern {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--neutral-600, #6B7280);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.tab-button-modern:hover {
    color: var(--neutral-900, #111827);
    background: var(--neutral-50, #F9FAFB);
}

.tab-button-modern.active {
    border-bottom-color: var(--gold-500, #F59E0B);
    color: var(--neutral-900, #111827);
    font-weight: 600;
}

.tab-button-modern.active .tab-icon-modern {
    color: var(--gold-500, #F59E0B);
}

/* Tab Icon */
.tab-icon-modern {
    font-size: 16px;
    color: var(--neutral-500, #9CA3AF);
    transition: color 0.2s ease;
}

/* Tab Text */
.tab-text-modern {
    font-weight: inherit;
}

/* Tab Badge (Count) */
.tab-badge-modern {
    background: var(--neutral-200, #E5E7EB);
    color: var(--neutral-600, #6B7280);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.tab-button-modern.active .tab-badge-modern {
    background: var(--gold-100, #FEF3C7);
    color: var(--gold-700, #B45309);
}

.tab-button-modern:hover .tab-badge-modern {
    background: var(--gold-100, #FEF3C7);
    color: var(--gold-700, #B45309);
}

.tab-button-modern.active:hover .tab-badge-modern {
    background: rgba(255, 255, 255, 0.35);
    color: white;
}

/* Tab Content Container */
.social-tabs-body {
    padding: 24px;
    background: white;
}

/* Tab Pane with Fade Animation */
.tab-pane-modern {
    display: none;
    animation: fadeIn 0.4s ease;
}

.tab-pane-modern.active {
    display: block;
}

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

/* Loading State */
.tab-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--neutral-400, #9CA3AF);
}

.tab-loading i {
    font-size: 32px;
    animation: spin 1s linear infinite;
}

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

/* Empty State */
.tab-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--neutral-500, #6B7280);
}

.tab-empty-state i {
    font-size: 48px;
    color: var(--neutral-300, #D1D5DB);
    margin-bottom: 16px;
}

.tab-empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-700, #374151);
    margin-bottom: 8px;
}

.tab-empty-state p {
    font-size: 14px;
    color: var(--neutral-500, #6B7280);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .social-tabs-modern {
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .social-tabs-header {
        padding: 12px 16px 0;
    }

    .tabs-nav-modern {
        gap: 6px;
    }

    .tab-button-modern {
        padding: 12px 16px;
        font-size: 14px;
        gap: 8px;
    }

    .tab-icon-modern {
        font-size: 16px;
    }

    .tab-badge-modern {
        padding: 3px 8px;
        font-size: 12px;
        min-width: 24px;
    }

    .social-tabs-body {
        padding: 16px;
    }
}

@media (max-width: 576px) {
    .social-tabs-header {
        padding: 8px 12px 0;
    }

    .tabs-nav-modern {
        gap: 4px;
    }

    .tab-button-modern {
        padding: 10px 12px;
        font-size: 13px;
        gap: 6px;
        border-radius: 10px;
    }

    .tab-icon-modern {
        font-size: 15px;
    }

    .tab-text-modern {
        font-size: 13px;
    }

    .tab-badge-modern {
        padding: 2px 7px;
        font-size: 11px;
        min-width: 22px;
    }

    .social-tabs-body {
        padding: 12px;
    }
}

@media (max-width: 360px) {
    .tab-button-modern {
        padding: 8px 8px;
        font-size: 12px;
        gap: 4px;
    }

    .tab-text-modern {
        font-size: 12px;
    }

    .tab-icon-modern {
        font-size: 14px;
    }

    .tab-badge-modern {
        padding: 2px 6px;
        font-size: 10px;
        min-width: 20px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .symbol-header-modern {
        padding: 16px;
    }

    .symbol-title-info h1 {
        font-size: 1.5rem;
    }

    .icon-action-btn {
        width: 40px;
        height: 40px;
    }

    .price-hero-modern {
        padding: 20px;
    }

    .price-value-modern {
        font-size: 2rem;
    }

    .price-change-badge {
        padding: 8px 14px;
        gap: 8px;
    }

    .price-change-badge i {
        font-size: 12px;
    }

    .change-percent {
        font-size: 1rem;
    }

    .change-amount {
        font-size: 0.875rem;
    }

    .change-divider {
        font-size: 0.75rem;
    }

    .price-change-modern {
        font-size: 0.875rem;
        padding: 6px 10px;
    }

    .d-flex.align-items-baseline {
        align-items: flex-start !important;
    }

    .chart-section-modern,
    .provider-comparison-modern {
        padding: 16px;
    }

    .chart-header-modern {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .chart-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .chart-title-modern {
        font-size: 1.125rem;
    }

    .chart-canvas-wrapper {
        height: 300px;
        padding: 12px;
    }

    .chart-period-selector {
        overflow-x: auto;
        width: 100%;
    }

    .chart-period-btn {
        font-size: 12px;
        padding: 6px 10px;
        white-space: nowrap;
    }

    .chart-controls {
        display: none;
    }

    .floating-action-button.show {
        display: flex;
    }

    .breadcrumb-modern {
        font-size: 0.75rem;
    }

    .sparkline-container {
        display: none;
    }

    .price-details-modern {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .price-detail-card {
        padding: 16px;
        gap: 12px;
    }

    .price-detail-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .price-detail-value {
        font-size: 1.125rem;
    }
}

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

/* ========================================
   COMMENTS COMPONENT - REDESIGNED
   ======================================== */

/* Comments Container */
.comments-widget {
    padding: 0;
}

/* Comment Form */
.comment-form {
    background: white;
    border: 2px solid var(--neutral-200, #E5E7EB);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    transition: border-color 0.3s ease;
}

.comment-form:focus-within {
    border-color: var(--gold-400, #FBBF24);
}

.comment-form textarea {
    border: 1px solid var(--neutral-200, #E5E7EB);
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.3s ease;
}

.comment-form textarea:focus {
    outline: none;
    border-color: var(--gold-400, #FBBF24);
}

/* Comment Avatar */
.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gold-400, #FBBF24), var(--gold-500, #F59E0B));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Comments List */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Individual Comment */
.comment-item {
    background: white;
    border: 1px solid var(--neutral-200, #E5E7EB);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.3s ease;
}

.comment-item:hover {
    border-color: var(--gold-300, #FCD34D);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Comment Header */
.comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.comment-user {
    font-weight: 600;
    font-size: 14px;
    color: var(--neutral-900, #111827);
    text-decoration: none;
}

.comment-user:hover {
    color: var(--gold-600, #D97706);
}

.comment-time {
    font-size: 12px;
    color: var(--neutral-500, #6B7280);
}

/* Comment Content */
.comment-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral-700, #374151);
    margin-bottom: 12px;
}

/* Comment Image */
.comment-image {
    margin-bottom: 12px;
}

.comment-image img {
    max-width: 100%;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.comment-image img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Comment Actions */
.comment-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.comment-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--neutral-200, #E5E7EB);
    border-radius: 8px;
    background: white;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--neutral-600, #6B7280);
}

.comment-btn:hover {
    border-color: var(--gold-400, #FBBF24);
    background: var(--gold-50, #FFFBEB);
    color: var(--gold-700, #B45309);
}

.comment-btn.liked {
    border-color: #EF4444;
    background: #FEE2E2;
    color: #DC2626;
}

.comment-btn.liked:hover {
    border-color: #DC2626;
    background: #FECACA;
}

.comment-btn i {
    font-size: 12px;
}

/* Replies */
.comment-replies {
    margin-left: 40px;
    margin-top: 12px;
    padding-left: 16px;
    border-left: 3px solid var(--gold-200, #FDE68A);
}

.comment-reply {
    background: var(--neutral-50, #FAFAFA);
    border: 1px solid var(--neutral-100, #F3F4F6);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.comment-reply:hover {
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* Empty State */
.comments-empty {
    text-align: center;
    padding: 60px 20px;
}

.comments-empty i {
    font-size: 48px;
    color: var(--neutral-300, #D1D5DB);
    margin-bottom: 16px;
}

.comments-empty p {
    font-size: 14px;
    color: var(--neutral-500, #6B7280);
}

/* Responsive */
@media (max-width: 768px) {
    .comment-form {
        padding: 16px;
    }

    .comment-item {
        padding: 12px;
    }

    .comment-avatar {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .comment-user {
        font-size: 13px;
    }

    .comment-time {
        font-size: 11px;
    }

    .comment-text {
        font-size: 13px;
    }

    .comment-actions {
        gap: 6px;
    }

    .comment-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .comment-replies {
        margin-left: 20px;
        padding-left: 12px;
    }
}

@media (max-width: 576px) {
    .comment-form textarea {
        font-size: 16px;
    }

    .comment-replies {
        margin-left: 12px;
        padding-left: 8px;
    }
}

/* ========================================
   PREDICTIONS COMPONENT - REDESIGNED
   ======================================== */

/* Predictions Container */
.predictions-widget {
    padding: 0;
}

/* Prediction Form */
.prediction-form {
    background: white;
    border: 2px solid var(--neutral-200, #E5E7EB);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    transition: border-color 0.3s ease;
}

.prediction-form:focus-within {
    border-color: var(--gold-400, #FBBF24);
}

/* Form Sections */
.form-section {
    margin-bottom: 20px;
}

.form-section label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--neutral-700, #374151);
    margin-bottom: 10px;
}

/* Direction Pills */
.direction-pills {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.direction-pill {
    position: relative;
}

.direction-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.direction-pill label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 2px solid var(--neutral-200, #E5E7EB);
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 20px;
    color: var(--neutral-600, #6B7280);
}

.direction-pill label:hover {
    border-color: var(--neutral-400, #9CA3AF);
    background: var(--neutral-50, #F9FAFB);
}

.direction-pill.up input:checked + label {
    border-color: #10B981;
    background: #D1FAE5;
    color: #047857;
}

.direction-pill.down input:checked + label {
    border-color: #EF4444;
    background: #FEE2E2;
    color: #B91C1C;
}

.direction-pill.stable input:checked + label {
    border-color: var(--gold-500, #F59E0B);
    background: var(--gold-50, #FFFBEB);
    color: var(--gold-700, #B45309);
}

/* Period Pills */
.period-pills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.period-pill {
    position: relative;
}

.period-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.period-pill label {
    display: block;
    padding: 10px;
    border: 1px solid var(--neutral-200, #E5E7EB);
    border-radius: 10px;
    background: white;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
}

.period-pill input:checked + label {
    border-color: var(--gold-500, #F59E0B);
    background: var(--gold-500, #F59E0B);
    color: white;
}

.period-pill label:hover {
    border-color: var(--gold-400, #FBBF24);
}

/* Prediction Stats Summary */
.prediction-stats-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.stat-pill {
    flex: 1;
    background: white;
    border: 1px solid var(--neutral-200, #E5E7EB);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.stat-pill-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.stat-pill-icon.up {
    color: #10B981;
}

.stat-pill-icon.down {
    color: #EF4444;
}

.stat-pill-icon.neutral {
    color: #6B7280;
}

.stat-pill-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    margin-bottom: 4px;
}

.stat-pill-label {
    font-size: 12px;
    color: var(--neutral-600, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Prediction Cards List */
.predictions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Individual Prediction Card */
.prediction-card {
    background: white;
    border: 1px solid var(--neutral-200, #E5E7EB);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.prediction-card:hover {
    border-color: var(--gold-300, #FCD34D);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Card User Info */
.prediction-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.prediction-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gold-400, #FBBF24), var(--gold-500, #F59E0B));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
}

.prediction-user-info {
    flex: 1;
}

.prediction-username {
    font-weight: 600;
    font-size: 14px;
    color: var(--neutral-900, #111827);
    text-decoration: none;
}

.prediction-username:hover {
    color: var(--gold-600, #D97706);
}

.prediction-time {
    font-size: 12px;
    color: var(--neutral-500, #6B7280);
}

/* Direction Badge */
.prediction-direction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.prediction-direction.up {
    background: #D1FAE5;
    color: #047857;
}

.prediction-direction.down {
    background: #FEE2E2;
    color: #B91C1C;
}

.prediction-direction.stable {
    background: #F3F4F6;
    color: #374151;
}

/* Card Content */
.prediction-reasoning {
    background: var(--neutral-50, #FAFAFA);
    border-left: 3px solid var(--gold-400, #FBBF24);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral-700, #374151);
}

/* Card Metrics */
.prediction-metrics {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.prediction-metric {
    flex: 1;
    background: var(--neutral-50, #FAFAFA);
    padding: 12px;
    border-radius: 10px;
}

.prediction-metric-label {
    font-size: 11px;
    color: var(--neutral-600, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.prediction-metric-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--neutral-900, #111827);
}

.prediction-metric-value.positive {
    color: #10B981;
}

.prediction-metric-value.negative {
    color: #EF4444;
}

/* Card Footer */
.prediction-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-100, #F3F4F6);
}

.prediction-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-700, #374151);
}

.prediction-votes {
    display: flex;
    gap: 8px;
}

.vote-btn {
    padding: 6px 12px;
    border: 1px solid var(--neutral-200, #E5E7EB);
    border-radius: 8px;
    background: white;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vote-btn:hover {
    border-color: var(--gold-400, #FBBF24);
    background: var(--gold-50, #FFFBEB);
}

.vote-btn.agree:hover {
    border-color: #10B981;
    background: #D1FAE5;
    color: #047857;
}

.vote-btn.disagree:hover {
    border-color: #EF4444;
    background: #FEE2E2;
    color: #B91C1C;
}

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

/* Empty State */
.predictions-empty {
    text-align: center;
    padding: 60px 20px;
}

.predictions-empty i {
    font-size: 64px;
    color: var(--neutral-300, #D1D5DB);
    margin-bottom: 20px;
    opacity: 0.5;
}

.predictions-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-700, #374151);
    margin-bottom: 8px;
}

.predictions-empty p {
    font-size: 14px;
    color: var(--neutral-500, #6B7280);
}

/* Responsive */
@media (max-width: 768px) {
    .direction-pill label {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }

    .period-pills {
        grid-template-columns: repeat(2, 1fr);
    }

    .prediction-stats-summary {
        flex-direction: column;
        gap: 12px;
    }

    .prediction-metrics {
        flex-direction: column;
        gap: 12px;
    }

    .prediction-footer {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .prediction-votes {
        width: 100%;
        justify-content: center;
    }

    .vote-btn {
        flex: 1;
    }
}

@media (max-width: 576px) {
    .prediction-form {
        padding: 16px;
    }

    .prediction-card {
        padding: 16px;
    }

    .period-pills {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   CATEGORY PAGE - MODERN
   ======================================== */

/* Category Header Modern */
.category-header {
    background: white;
    border: 1px solid var(--neutral-200, #E5E7EB);
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-header:hover {
    border-color: var(--gold-300, #FCD34D);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.08);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.category-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gold-100, #FEF3C7) 0%, var(--gold-50, #FFFBEB) 100%);
    color: var(--gold-600, #D97706);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.category-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    margin: 0;
}

.category-subtitle {
    font-size: 0.875rem;
    color: var(--neutral-600, #6B7280);
    margin: 0.25rem 0 0 0;
}

.ticker-count {
    font-weight: 700;
    color: var(--gold-600, #D97706);
}

.header-actions {
    display: flex;
    gap: 0.5rem;
}

/* Modern Price Card for Category Page */
.modern-price-card {
    background: white;
    border: 2px solid var(--neutral-200, #E5E7EB);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-price-card:hover {
    border-color: var(--gold-400, #FBBF24);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.12);
    transform: translateY(-2px);
}

.asset-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    margin-bottom: 4px;
}

.asset-symbol {
    font-size: 0.875rem;
    color: var(--neutral-500, #6B7280);
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-label {
    font-size: 0.75rem;
    color: var(--neutral-600, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 4px;
}

.price-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
}

/* Change Badge for List */
.change-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    border: 2px solid;
}

.change-badge-sm {
    padding: 4px 10px;
    font-size: 0.8125rem;
}

.change-badge.change-positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: var(--success, #10B981);
    color: var(--success, #10B981);
}

.change-badge.change-negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-color: var(--danger, #EF4444);
    color: var(--danger, #EF4444);
}

.btn-favorite {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--neutral-200, #E5E7EB);
    background: white;
    color: var(--neutral-600, #6B7280);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-favorite:hover {
    background: var(--gold-50, #FFFBEB);
    border-color: var(--gold-400, #FBBF24);
    color: var(--gold-600, #D97706);
}

.btn-favorite.active {
    background: var(--gold-500, #F59E0B);
    border-color: var(--gold-500, #F59E0B);
    color: white;
}

/* Filter Card - Same as Stats Grid */
.filter-card {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    user-select: none;
}

.filter-card:hover {
    transform: translateY(-3px);
}

.filter-card.active {
    border-color: var(--gold-400, #FBBF24) !important;
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.15) !important;
}

.filter-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: var(--gold-500, #F59E0B);
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    animation: checkIn 0.3s ease;
}

.filter-card.active .filter-indicator {
    display: flex;
}

@keyframes checkIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Filter Info Alert */
.filter-info .alert {
    border-radius: 12px;
    border: 1px solid var(--gold-300, #FCD34D);
    background: var(--gold-50, #FFFBEB);
    color: var(--gold-800, #92400E);
}

/* Pagination Modern */
.pagination {
    margin: 0;
    padding: 0;
}

.pagination .page-item {
    margin: 0 4px;
}

.pagination .page-link {
    border: 2px solid var(--neutral-200, #E5E7EB);
    border-radius: 10px;
    padding: 10px 16px;
    color: var(--neutral-700, #374151);
    font-weight: 600;
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    background: var(--gold-50, #FFFBEB);
    border-color: var(--gold-400, #FBBF24);
    color: var(--gold-700, #B45309);
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--gold-400, #FBBF24), var(--gold-500, #F59E0B));
    border-color: var(--gold-500, #F59E0B);
    color: white;
}

/* Sort Dropdown Modern */
.category-header .dropdown-menu {
    border: 2px solid var(--neutral-200, #E5E7EB);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 8px;
    min-width: 220px;
}

.category-header .dropdown-item {
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 500;
    color: var(--neutral-700, #374151);
    transition: all 0.2s ease;
    cursor: pointer;
}

.category-header .dropdown-item:hover {
    background: var(--gold-50, #FFFBEB);
    color: var(--gold-700, #B45309);
}

.category-header .dropdown-item.active {
    background: linear-gradient(135deg, var(--gold-400, #FBBF24), var(--gold-500, #F59E0B));
    color: white;
    font-weight: 600;
}

.category-header .dropdown-toggle {
    border: 2px solid var(--neutral-200, #E5E7EB);
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.category-header .dropdown-toggle:hover {
    background: var(--gold-50, #FFFBEB);
    border-color: var(--gold-400, #FBBF24);
    color: var(--gold-700, #B45309);
}

/* Mobile List Styles */
@media (max-width: 767px) {
    .category-header {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .header-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-icon-wrapper {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
    
    .category-title {
        font-size: 1.25rem;
    }
    
    .category-subtitle {
        font-size: 0.8rem;
    }
    
    .header-actions {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
    }
    
    .header-actions .dropdown {
        flex: 1;
        margin-right: 8px;
    }
    
    .header-actions .dropdown button {
        width: 100%;
    }
    
    .header-actions .btn-primary {
        flex: 0 0 auto;
    }

    .mobile-list-item {
        background: white;
        border: 2px solid var(--neutral-200, #E5E7EB);
        border-radius: 16px;
        padding: 14px;
        margin-bottom: 8px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-list-item:active {
        transform: scale(0.98);
    }

    .mobile-list-item:hover {
        border-color: var(--gold-400, #FBBF24);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    }
    
    .list-item-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .symbol-info {
        flex: 1;
    }
    
    .symbol-name {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--neutral-900, #111827);
        margin-bottom: 4px;
    }
    
    .symbol-ticker {
        font-size: 0.75rem;
        color: var(--neutral-600, #6B7280);
        text-transform: uppercase;
        font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    }
    
    .price-info {
        text-align: right;
    }
    
    .current-price {
        font-size: 1rem;
        font-weight: 700;
        color: var(--neutral-900, #111827);
        margin-bottom: 4px;
        font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    }
    
    .mobile-list-item .price-change {
        font-size: 0.8rem;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 6px;
        display: inline-block;
    }
    
    .mobile-list-item .price-change.positive {
        background: rgba(16, 185, 129, 0.1);
        color: var(--success, #10B981);
    }
    
    .mobile-list-item .price-change.negative {
        background: rgba(239, 68, 68, 0.1);
        color: var(--danger, #EF4444);
    }
    
    .mobile-list-item .price-change.neutral {
        background: var(--neutral-100, #F3F4F6);
        color: var(--neutral-600, #6B7280);
    }

    .filter-card {
        padding: 12px;
    }
    
    .filter-indicator {
        width: 20px;
        height: 20px;
        font-size: 10px;
        top: 8px;
        right: 8px;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    .category-header {
        padding: 12px;
    }
    
    .category-title {
        font-size: 1.125rem;
    }
    
    .header-actions .btn {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}


/* ============================================
   BRAND V2 STYLES (Merged)
   ============================================ */

/* ================================================
   ALTIN.NET.TR - MODERN BRANDING SYSTEM V2
   ================================================

   Modern, okunabilir ve erişilebilir tasarım sistemi
   Geliştirilmiş tipografi ve renk paleti
*/

/* ===== 1. DESIGN TOKENS - ROOT VARIABLES ===== */
:root {
    /* === RENK PALETİ === */

    /* Premium Altın Tonları - Sofistike ve Modern */
    --gold-50: #FFFBF5;      /* Çok açık krem */
    --gold-100: #FFF4E6;     /* Açık altın tonu */
    --gold-200: #FFE4B5;     /* Soft altın */
    --gold-300: #FFD700;     /* Klasik altın */
    --gold-400: #FFC107;     /* Canlı altın */
    --gold-500: #FFB300;     /* Ana altın tonu */
    --gold-600: #FF9800;     /* Koyu altın */
    --gold-700: #F57C00;     /* Derin altın */
    --gold-800: #E65100;     /* Çok koyu altın */
    --gold-900: #BF360C;     /* En koyu altın */

    /* Nötr Tonlar - Geliştirilmiş Gri Skalası */
    --neutral-50: #FAFAFA;   /* Çok açık gri */
    --neutral-100: #F5F5F5;  /* Açık gri */
    --neutral-200: #EEEEEE;  /* Soft gri */
    --neutral-300: #E0E0E0;  /* Açık orta gri */
    --neutral-400: #BDBDBD;  /* Orta gri */
    --neutral-500: #9E9E9E;  /* Standart gri */
    --neutral-600: #757575;  /* Koyu gri */
    --neutral-700: #616161;  /* Derin gri */
    --neutral-800: #424242;  /* Çok koyu gri */
    --neutral-900: #212121;  /* Neredeyse siyah */
    --neutral-950: #0A0A0A;  /* Saf siyah */

    /* Semantik Renkler - Modern ve Canlı */
    --success-light: #E8F5E9;
    --success: #4CAF50;
    --success-dark: #2E7D32;

    --danger-light: #FFEBEE;
    --danger: #F44336;
    --danger-dark: #C62828;

    --info-light: #E3F2FD;
    --info: #2196F3;
    --info-dark: #1565C0;

    --warning-light: #FFF3E0;
    --warning: #FF9800;
    --warning-dark: #E65100;

    /* === TİPOGRAFİ SİSTEMİ === */

    /* Font Ailesi - Modern ve Okunabilir */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-secondary: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* Font Boyutları - Fluid Typography */
    --font-size-xs: clamp(0.75rem, 2vw, 0.875rem);      /* 12-14px */
    --font-size-sm: clamp(0.875rem, 2.5vw, 1rem);       /* 14-16px */
    --font-size-base: clamp(1rem, 3vw, 1.125rem);       /* 16-18px */
    --font-size-lg: clamp(1.125rem, 3.5vw, 1.25rem);    /* 18-20px */
    --font-size-xl: clamp(1.25rem, 4vw, 1.5rem);        /* 20-24px */
    --font-size-2xl: clamp(1.5rem, 5vw, 2rem);          /* 24-32px */
    --font-size-3xl: clamp(2rem, 6vw, 2.5rem);          /* 32-40px */
    --font-size-4xl: clamp(2.5rem, 7vw, 3rem);          /* 40-48px */
    --font-size-5xl: clamp(3rem, 8vw, 4rem);            /* 48-64px */

    /* Font Ağırlıkları */
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Line Heights - Optimize edilmiş */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    /* Letter Spacing */
    --letter-spacing-tight: -0.05em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;

    /* === SPACING SİSTEMİ === */
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
    --spacing-20: 5rem;     /* 80px */
    --spacing-24: 6rem;     /* 96px */

    /* === BORDER RADIUS === */
    --radius-none: 0;
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-3xl: 2rem;     /* 32px */
    --radius-full: 9999px;  /* Pill shape */

    /* === SHADOWS - Modern ve Soft === */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.09);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.11);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.13);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.15);

    /* Gold Shadows */
    --shadow-gold-sm: 0 2px 8px rgba(255, 179, 0, 0.15);
    --shadow-gold-md: 0 4px 16px rgba(255, 179, 0, 0.20);
    --shadow-gold-lg: 0 8px 32px rgba(255, 179, 0, 0.25);

    /* === TRANSITIONS === */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    --transition-slower: 500ms ease-in-out;

    /* === Z-INDEX SCALE === */
    --z-negative: -1;
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-60: 60;
    --z-70: 70;
    --z-80: 80;
    --z-90: 90;
    --z-100: 100;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ===== 2. TYPOGRAPHY BASE STYLES ===== */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--neutral-900);
    background-color: var(--neutral-50);
    letter-spacing: var(--letter-spacing-normal);
}

/* Headings - Modern ve Okunaklı */
h1, .h1 {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--neutral-900);
    margin-bottom: var(--spacing-6);
}

h2, .h2 {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--neutral-900);
    margin-bottom: var(--spacing-5);
}

h3, .h3 {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--neutral-900);
    margin-bottom: var(--spacing-4);
}

h4, .h4 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    color: var(--neutral-900);
    margin-bottom: var(--spacing-3);
}

h5, .h5 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--neutral-900);
    margin-bottom: var(--spacing-3);
}

h6, .h6 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--neutral-900);
    margin-bottom: var(--spacing-2);
}

/* Paragraphs */
p {
    margin-bottom: var(--spacing-4);
    color: var(--neutral-700);
    line-height: var(--line-height-relaxed);
}

/* Links - Modern Stil */
a {
    color: var(--gold-600);
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
}

a:hover {
    color: var(--gold-700);
}

a:focus {
    outline: 2px solid var(--gold-400);
    outline-offset: 2px;
}

/* Inline Code */
code {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
    padding: 0.125rem 0.375rem;
    background-color: var(--neutral-100);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    color: var(--neutral-800);
}

/* ===== 3. BUTTON STYLES ===== */
.btn {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-lg);
    border: none;
    transition: all var(--transition-base);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    position: relative;
    overflow: hidden;
}

/* Primary Button - Gradient */
.btn-primary {
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
    color: white;
    box-shadow: var(--shadow-md), var(--shadow-gold-sm);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-700) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-gold-md);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm), var(--shadow-gold-sm);
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--neutral-100);
    color: var(--neutral-800);
    border: 1px solid var(--neutral-200);
}

.btn-secondary:hover {
    background-color: var(--neutral-200);
    border-color: var(--neutral-300);
}

/* Ghost Button */
.btn-ghost {
    background-color: transparent;
    color: var(--gold-600);
    border: 2px solid var(--gold-500);
}

.btn-ghost:hover {
    background-color: var(--gold-50);
    border-color: var(--gold-600);
}

/* Button Sizes */
.btn-sm {
    font-size: var(--font-size-sm);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
}

.btn-lg {
    font-size: var(--font-size-lg);
    padding: var(--spacing-4) var(--spacing-8);
    border-radius: var(--radius-xl);
}

/* ===== 4. CARD STYLES ===== */
.card {
    background: white;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-header {
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--neutral-200);
    margin-bottom: var(--spacing-4);
}

.card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--neutral-900);
}

.card-body {
    color: var(--neutral-700);
}

/* ===== 5. PRICE DISPLAY STYLES ===== */
.price-display {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.price-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--neutral-900);
    font-family: var(--font-family-mono);
    letter-spacing: var(--letter-spacing-tight);
}

.price-change {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

.price-change.positive {
    color: var(--success);
}

.price-change.negative {
    color: var(--danger);
}

.price-change-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
}

/* ===== 6. BADGE STYLES ===== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.badge-gold {
    background-color: var(--gold-100);
    color: var(--gold-800);
    border: 1px solid var(--gold-200);
}

.badge-success {
    background-color: var(--success-light);
    color: var(--success-dark);
    border: 1px solid var(--success);
}

.badge-danger {
    background-color: var(--danger-light);
    color: var(--danger-dark);
    border: 1px solid var(--danger);
}

/* ===== 7. FORM ELEMENTS ===== */
.form-control {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--neutral-900);
    background-color: white;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.1);
}

.form-control::placeholder {
    color: var(--neutral-400);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--neutral-700);
}

/* ===== 8. TABLE STYLES ===== */
.table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table thead {
    background: var(--neutral-100);
}

.table th {
    padding: var(--spacing-4);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--neutral-700);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.table td {
    padding: var(--spacing-4);
    font-size: var(--font-size-base);
    color: var(--neutral-800);
    border-top: 1px solid var(--neutral-200);
}

.table tbody tr:hover {
    background-color: var(--gold-50);
}

/* ===== 9. NAVBAR MODERN ===== */
/* Navbar styling moved to bottom of file (lines 1973+) for proper override */

.navbar-brand-modern {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--neutral-900);
    text-decoration: none;
}

.navbar-brand-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* ===== 10. RESPONSIVE UTILITIES ===== */
@media (max-width: 768px) {
    :root {
        --font-size-base: 1rem;
    }

    .h1, h1 {
        font-size: var(--font-size-3xl);
    }

    .h2, h2 {
        font-size: var(--font-size-2xl);
    }

    .price-value {
        font-size: var(--font-size-2xl);
    }
}

/* ===== 11. ACCESSIBILITY ===== */
/* Focus Styles */
:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}

/* Skip to content */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--gold-500);
    color: white;
    padding: var(--spacing-2) var(--spacing-4);
    z-index: var(--z-tooltip);
    text-decoration: none;
}

.skip-to-content:focus {
    top: 0;
}

/* ===== 12. ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Animation Classes */
.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-shimmer {
    background: linear-gradient(
        90deg,
        var(--neutral-200) 0%,
        var(--neutral-100) 50%,
        var(--neutral-200) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* ===== 13. UTILITY CLASSES ===== */
/* Text Utilities */
.text-gold { color: var(--gold-500); }
.text-gold-dark { color: var(--gold-700); }
.text-neutral { color: var(--neutral-600); }
.text-muted { color: var(--neutral-500); }

/* Background Utilities */
.bg-gold-light { background-color: var(--gold-50); }
.bg-gold { background-color: var(--gold-500); }
.bg-neutral-light { background-color: var(--neutral-100); }

/* Spacing Utilities */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }

.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }
.m-6 { margin: var(--spacing-6); }

/* Display Utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }

/* Flexbox Utilities */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }

/* Border Utilities */
.border-0 { border: none; }
.border-1 { border: 1px solid var(--neutral-200); }
.border-gold { border-color: var(--gold-500); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow Utilities */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ================================================
   ADVANCED FORM CONTROLS
   ================================================
*/
/* Enhanced Form Input */
.form-input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    color: var(--neutral-900);
    background-color: white;
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    outline: none;
}

.form-input:hover {
    border-color: var(--neutral-300);
}

.form-input:focus {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 4px rgba(255,179,0,0.1);
}

.form-input.is-invalid {
    border-color: var(--danger);
}

.form-input.is-valid {
    border-color: var(--success);
}

/* Form Select */
.form-select {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    padding-right: 40px;
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--neutral-900);
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all var(--transition-fast);
}

.form-select:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 4px rgba(255,179,0,0.1);
}

/* Form Textarea */
.form-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--neutral-900);
    background-color: white;
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    resize: vertical;
    transition: all var(--transition-fast);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 4px rgba(255,179,0,0.1);
}

/* Checkbox and Radio */
.form-checkbox,
.form-radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-base);
    color: var(--neutral-700);
}

.form-checkbox input[type="checkbox"],
.form-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--gold-500);
}

/* Modern Switch Toggle */
.form-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
    user-select: none;
}

.form-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: relative;
    width: 48px;
    height: 24px;
    background: var(--neutral-300);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.switch-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    top: 2px;
    background: white;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.form-switch input:checked + .switch-slider {
    background: var(--gold-500);
}

.form-switch input:checked + .switch-slider::before {
    transform: translateX(24px);
}

/* Range Slider */
.form-range {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--neutral-200);
    outline: none;
    transition: background var(--transition-fast);
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold-500);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(255,179,0,0.3);
}

.form-range::-webkit-slider-thumb:hover {
    background: var(--gold-600);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255,179,0,0.4);
}

.form-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold-500);
    cursor: pointer;
    border: none;
    transition: all var(--transition-fast);
}

/* File Upload */
.form-file {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 100%;
}

.form-file input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.form-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4) var(--spacing-5);
    border: 2px dashed var(--neutral-300);
    border-radius: var(--radius-lg);
    background: var(--neutral-50);
    transition: all var(--transition-base);
    min-height: 120px;
    text-align: center;
    flex-direction: column;
    gap: var(--spacing-2);
}

.form-file:hover .form-file-label {
    border-color: var(--gold-400);
    background: var(--gold-50);
}

.form-file-label.has-file {
    border-style: solid;
    border-color: var(--success);
    background: var(--success-light);
}

/* Input Group */
.input-group {
    display: flex;
    width: 100%;
}

.input-group .form-input {
    flex: 1;
    border-radius: 0;
}

.input-group .form-input:first-child {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.input-group .form-input:last-child {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--neutral-100);
    border: 2px solid var(--neutral-200);
    border-right: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    font-size: var(--font-size-base);
    color: var(--neutral-700);
}

.input-group .btn {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* ================================================
   TOOLTIPS
   ================================================
*/
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 1000;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--neutral-900);
    color: white;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    white-space: nowrap;
    pointer-events: none;
    transition: all var(--transition-fast);
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--neutral-900);
}

.tooltip:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}

/* ================================================
   DROPDOWNS
   ================================================
*/
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 1000;
    min-width: 200px;
    padding: var(--spacing-2) 0;
    background: white;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.dropdown-menu.show {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--neutral-700);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.dropdown-item:hover {
    background: var(--neutral-50);
    color: var(--neutral-900);
}

/* ================================================
   MODALS
   ================================================
*/
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.modal.show {
    display: block;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    animation: fadeIn 0.3s ease-out;
}

.modal-dialog {
    position: relative;
    margin: 50px auto;
    max-width: 500px;
}

.modal-content {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    animation: slideIn 0.3s ease-out;
}

.modal-header {
    padding: var(--spacing-5);
    border-bottom: 1px solid var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--neutral-900);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--neutral-500);
    cursor: pointer;
}

.modal-body {
    padding: var(--spacing-5);
}

.modal-footer {
    padding: var(--spacing-5);
    border-top: 1px solid var(--neutral-200);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
}

/* ================================================
   TOAST NOTIFICATIONS
   ================================================
*/
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    pointer-events: none;
}

.toast {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    margin-bottom: var(--spacing-3);
    min-width: 300px;
    pointer-events: all;
    overflow: hidden;
    border-left: 4px solid var(--gold-500);
}

.toast-header {
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toast-body {
    padding: var(--spacing-4);
    color: var(--neutral-700);
}

/* Toast Variants */
.toast-success {
    border-left-color: var(--success);
}

.toast-danger {
    border-left-color: var(--danger);
}

.toast-warning {
    border-left-color: var(--warning);
}

.toast-info {
    border-left-color: var(--info);
}

/* ================================================
   BREADCRUMBS
   ================================================
*/
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: var(--spacing-2) 0;
    list-style: none;
    margin: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    padding: 0 var(--spacing-2);
    color: var(--neutral-400);
}

.breadcrumb-item a {
    color: var(--neutral-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
    color: var(--gold-600);
}

.breadcrumb-item.active {
    color: var(--neutral-900);
    font-weight: var(--font-weight-medium);
}

/* ================================================
   PAGINATION
   ================================================
*/
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--spacing-1);
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--spacing-3);
    color: var(--neutral-700);
    background: white;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
    font-weight: var(--font-weight-medium);
}

.page-link:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-300);
}

.page-item.active .page-link {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: white;
}

/* ================================================
   TABS
   ================================================
*/
.tabs {
    display: flex;
    border-bottom: 2px solid var(--neutral-200);
    list-style: none;
    padding: 0;
    margin: 0;
}

.tab-link {
    display: block;
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--neutral-600);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.tab-link:hover {
    color: var(--neutral-900);
}

.tab-item.active .tab-link {
    color: var(--gold-600);
    border-bottom-color: var(--gold-500);
}

/* ================================================
   SKELETON LOADERS
   ================================================
*/
.skeleton {
    background: linear-gradient(
        90deg,
        var(--neutral-200) 25%,
        var(--neutral-100) 50%,
        var(--neutral-200) 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 16px;
    margin-bottom: var(--spacing-2);
    border-radius: var(--radius-sm);
}

.skeleton-title {
    height: 24px;
    width: 50%;
    margin-bottom: var(--spacing-3);
}

/* ================================================
   AVATARS
   ================================================
*/
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--neutral-200);
    color: var(--neutral-700);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    overflow: hidden;
    position: relative;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-sm {
    width: 32px;
    height: 32px;
}

.avatar-lg {
    width: 56px;
    height: 56px;
}

.avatar-xl {
    width: 80px;
    height: 80px;
}

/* ================================================
   ADDITIONAL BUTTON STYLES
   ================================================
*/
/* Button Variants */
.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: var(--success-dark);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: var(--danger-dark);
}

.btn-warning {
    background: var(--warning);
    color: white;
}

.btn-warning:hover {
    background: var(--warning-dark);
}

.btn-info {
    background: var(--info);
    color: white;
}

.btn-info:hover {
    background: var(--info-dark);
}

.btn-dark {
    background: var(--neutral-900);
    color: white;
}

.btn-dark:hover {
    background: var(--neutral-950);
}

.btn-light {
    background: var(--neutral-100);
    color: var(--neutral-900);
    border: 1px solid var(--neutral-200);
}

.btn-light:hover {
    background: var(--neutral-200);
}

/* Outline Buttons */
.btn-outline-primary {
    background: transparent;
    color: var(--gold-600);
    border: 2px solid var(--gold-500);
}

.btn-outline-primary:hover {
    background: var(--gold-500);
    color: white;
}

.btn-outline-secondary {
    background: transparent;
    color: var(--neutral-700);
    border: 2px solid var(--neutral-300);
}

.btn-outline-secondary:hover {
    background: var(--neutral-700);
    color: white;
    border-color: var(--neutral-700);
}

.btn-outline-success {
    background: transparent;
    color: var(--success);
    border: 2px solid var(--success);
}

.btn-outline-success:hover {
    background: var(--success);
    color: white;
}

.btn-outline-danger {
    background: transparent;
    color: var(--danger);
    border: 2px solid var(--danger);
}

.btn-outline-danger:hover {
    background: var(--danger);
    color: white;
}

/* Button States */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-loading {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid white;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

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

/* ================================================
   ALERTS ENHANCED
   ================================================
*/
.alert {
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
    border: 1px solid transparent;
    position: relative;
}

.alert-primary {
    background: var(--gold-50);
    color: var(--gold-800);
    border-color: var(--gold-200);
}

.alert-success {
    background: var(--success-light);
    color: var(--success-dark);
    border-color: var(--success);
}

.alert-danger {
    background: var(--danger-light);
    color: var(--danger-dark);
    border-color: var(--danger);
}

.alert-warning {
    background: var(--warning-light);
    color: var(--warning-dark);
    border-color: var(--warning);
}

.alert-info {
    background: var(--info-light);
    color: var(--info-dark);
    border-color: var(--info);
}

.alert-dismissible {
    padding-right: var(--spacing-10);
}

.alert-close {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.alert-close:hover {
    opacity: 1;
}

/* ================================================
   PROGRESS BARS
   ================================================
*/
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: var(--spacing-2) 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-400) 0%, var(--gold-600) 100%);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

/* ================================================
   LIST GROUPS
   ================================================
*/
.list-group {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-200);
    overflow: hidden;
}

.list-group-item {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--neutral-200);
    transition: all var(--transition-fast);
}

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

.list-group-item:hover {
    background: var(--neutral-50);
}

.list-group-item.active {
    background: var(--gold-100);
    color: var(--gold-800);
    font-weight: var(--font-weight-semibold);
}

/* ================================================
   ACCORDIONS
   ================================================
*/
.accordion {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.accordion-item {
    border-bottom: 1px solid var(--neutral-200);
}

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

.accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-4);
    background: white;
    border: none;
    text-align: left;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--neutral-900);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.accordion-button:hover {
    background: var(--neutral-50);
}

.accordion-button::after {
    content: '▼';
    font-size: 12px;
    transition: transform var(--transition-fast);
}

.accordion-button.collapsed::after {
    transform: rotate(-90deg);
}

.accordion-body {
    padding: var(--spacing-4);
    border-top: 1px solid var(--neutral-200);
}

/* ================================================
   SPINNERS
   ================================================
*/
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--neutral-200);
    border-top-color: var(--gold-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 4px;
}

/* ================================================
   TAGS
   ================================================
*/
.tag {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--neutral-100);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--neutral-700);
    transition: all var(--transition-fast);
}

.tag:hover {
    background: var(--neutral-200);
}

.tag-removable {
    padding-right: var(--spacing-2);
}

.tag-remove {
    margin-left: var(--spacing-2);
    font-size: 18px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.tag-remove:hover {
    opacity: 1;
}

/* ================================================
   ADDITIONAL UTILITIES
   ================================================
*/
/* Text Sizes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

/* Text Colors */
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }

/* Display Classes */
.display {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
}

/* Additional Animation */
@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

.animate-fadeUp {
    animation: fadeInUp 0.6s ease-out;
}

/* Card Variants */
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card-featured {
    border: 2px solid var(--gold-400);
    position: relative;
}

.card-ribbon {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--gold-500);
    color: white;
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.card-footer {
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--neutral-200);
    margin-top: var(--spacing-4);
    display: flex;
    gap: var(--spacing-2);
}

/* Badge Additional Variants */
.badge-primary {
    background-color: var(--gold-100);
    color: var(--gold-800);
    border: 1px solid var(--gold-200);
}

.badge-secondary {
    background-color: var(--neutral-100);
    color: var(--neutral-800);
    border: 1px solid var(--neutral-200);
}

.badge-info {
    background-color: var(--info-light);
    color: var(--info-dark);
    border: 1px solid var(--info);
}

.badge-warning {
    background-color: var(--warning-light);
    color: var(--warning-dark);
    border: 1px solid var(--warning);
}

.badge-dark {
    background-color: var(--neutral-900);
    color: white;
    border: 1px solid var(--neutral-900);
}

.badge-outline-primary {
    background-color: transparent;
    color: var(--gold-600);
    border: 2px solid var(--gold-500);
}

.badge-outline-success {
    background-color: transparent;
    color: var(--success);
    border: 2px solid var(--success);
}

.badge-outline-danger {
    background-color: transparent;
    color: var(--danger);
    border: 2px solid var(--danger);
}

.badge-pill {
    border-radius: var(--radius-full);
}

.badge-sm {
    padding: var(--spacing-0) var(--spacing-2);
    font-size: var(--font-size-xs);
}

.badge-lg {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-base);
}

/* Table Enhancements */
.table-container {
    overflow-x: auto;
    border-radius: var(--radius-lg);
}

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

.asset-icon {
    font-size: 20px;
}

.price-mono {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-semibold);
}

/* Metric Card */
.metric-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2);
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--neutral-600);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.metric-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--neutral-900);
    margin: var(--spacing-2) 0;
}

.trend-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
}

.trend-arrow.up {
    background: var(--success-light);
    color: var(--success-dark);
}

.trend-arrow.down {
    background: var(--danger-light);
    color: var(--danger-dark);
}

/* Progress Bar Container */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-400) 0%, var(--gold-600) 100%);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

/* ================================================
   MODERN NAVBAR COMPONENTS - WHITE THEME
   ================================================
*/
.navbar-modern,
.navbar {
    padding: 0.875rem 0;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--neutral-100, #f5f5f5);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.navbar-modern.scrolled,
.navbar.scrolled {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.navbar-container {
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo & Brand */
.navbar-brand-modern {
    font-size: 1.375rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    letter-spacing: -0.025em;
    transition: transform 0.3s ease;
}

.navbar-brand-modern:hover {
    transform: translateY(-1px) scale(1.02);
}

.navbar-logo {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: white;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(255, 179, 0, 0.25);
    transition: all 0.3s ease;
}

.navbar-brand-modern:hover .navbar-logo {
    box-shadow: 0 6px 20px rgba(255, 179, 0, 0.35);
    transform: rotate(-5deg);
}

/* Navigation Links */
.navbar-nav-modern {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item-modern {
    position: relative;
}

.nav-link-modern {
    color: var(--neutral-700);
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.625rem 1.125rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.nav-link-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gold-50) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.nav-link-modern:hover {
    color: var(--gold-700);
    transform: translateY(-1px);
}

.nav-link-modern:hover::before {
    opacity: 1;
}

.nav-link-modern.active {
    color: white;
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
    box-shadow: 0 4px 12px rgba(255, 179, 0, 0.25);
    font-weight: 600;
}

/* Dropdown Menu */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item-modern:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: block;
    padding: 0.625rem 1rem;
    color: var(--neutral-700);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
    font-size: 0.9375rem;
}

.nav-dropdown-item:hover {
    background: var(--gold-50);
    color: var(--gold-700);
    transform: translateX(4px);
}

/* Search Bar */
.navbar-search {
    position: relative;
    margin: 0 2rem;
}

.navbar-search-input {
    background: var(--neutral-50);
    border: 2px solid transparent;
    border-radius: 50px;
    padding: 0.5rem 2.5rem 0.5rem 1.25rem;
    width: 280px;
    font-size: 0.875rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-search-input:focus {
    outline: none;
    border-color: var(--gold-300);
    background: white;
    box-shadow: 0 0 0 4px rgba(255, 179, 0, 0.08);
    width: 320px;
}

.navbar-search-input::placeholder {
    color: var(--neutral-500);
}

.navbar-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.375rem;
    color: var(--neutral-500);
    cursor: pointer;
    transition: all 0.3s ease;
}

.navbar-search-btn:hover {
    color: var(--gold-600);
    transform: translateY(-50%) scale(1.1);
}

/* Action Buttons */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.navbar-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--neutral-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-600);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
}

.navbar-icon-btn:hover {
    background: linear-gradient(135deg, var(--gold-50) 0%, var(--gold-100) 100%);
    color: var(--gold-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 179, 0, 0.15);
}

.navbar-icon-btn .notification-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: linear-gradient(135deg, var(--danger) 0%, #ef4444 100%);
    color: white;
    border-radius: 9px;
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

/* User Menu */
.navbar-user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border-radius: 50px;
    background: var(--neutral-50);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.navbar-user-menu:hover {
    background: linear-gradient(135deg, var(--gold-50) 0%, var(--gold-100) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 179, 0, 0.15);
}

.navbar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.8125rem;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.navbar-user-info {
    display: none;
}

@media (min-width: 992px) {
    .navbar-user-info {
        display: block;
        margin-right: 0.25rem;
    }

    .navbar-user-name {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--neutral-800);
        line-height: 1.1;
    }

    .navbar-user-status {
        font-size: 0.6875rem;
        color: var(--neutral-500);
        margin-top: 2px;
    }
}

/* Mobile Menu */
.navbar-mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--neutral-50);
    border: none;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

@media (max-width: 991px) {
    .navbar-mobile-toggle {
        display: flex;
    }

    .navbar-nav-modern {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 20px 20px;
        transform: translateY(-20px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .navbar-nav-modern.show {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .navbar-search {
        display: none;
    }

    .nav-link-modern {
        width: 100%;
        justify-content: space-between;
    }

    .nav-dropdown {
        position: static;
        box-shadow: none;
        background: var(--neutral-50);
        margin: 0.5rem 0 0 1rem;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

.navbar-mobile-toggle:hover {
    background: var(--gold-50);
}

.navbar-hamburger {
    width: 20px;
    height: 14px;
    position: relative;
}

.navbar-hamburger span {
    width: 100%;
    height: 2px;
    background: var(--neutral-700);
    display: block;
    position: absolute;
    left: 0;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-hamburger span:nth-child(1) {
    top: 0;
}

.navbar-hamburger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.navbar-hamburger span:nth-child(3) {
    bottom: 0;
}

.navbar-mobile-toggle.active .navbar-hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.navbar-mobile-toggle.active .navbar-hamburger span:nth-child(2) {
    opacity: 0;
}

.navbar-mobile-toggle.active .navbar-hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   COMMENTS COMPONENT (Merged)
   ============================================ */

/* Modern Comments UI Styles */

/* Comment Section Container */
.comments-modern {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
    border: none;
}

/* Comment Item */
.comment-modern {
    background: transparent;
    border-radius: 0;
    padding: 16px 0;
    margin-bottom: 16px;
    transition: var(--transition-base);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.comment-modern:hover {
    background: rgba(255, 183, 0, 0.02);
    border-color: rgba(255, 183, 0, 0.15);
    box-shadow: none;
    transform: none;
}

/* User Avatar */
.user-avatar-modern {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--gradient-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border: none;
}

.user-avatar-modern.sm {
    width: 32px;
    height: 32px;
    font-size: 13px;
    border-radius: 6px;
}

/* Comment Header */
.comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

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

.comment-time {
    color: var(--text-muted);
    font-size: 13px;
}


/* Comment Content */
.comment-content {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 15px;
    margin-bottom: 16px;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.comment-content a {
    color: var(--gold-dark);
    text-decoration: none;
    font-weight: 500;
}

.comment-content a:hover {
    text-decoration: underline;
    color: var(--gold-primary);
}

/* Comment Actions */
.comment-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 0;
    margin-top: 8px;
}

.comment-action {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-fast);
    border: none;
    background: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: transparent;
}

.comment-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.comment-action:hover {
    color: var(--gold-primary);
    background: rgba(255, 183, 0, 0.08);
    transform: none;
}

.comment-action.liked {
    color: var(--gold-dark);
}

.comment-action.liked i {
    color: var(--gold-dark);
}

.comment-action i {
    font-size: 16px;
}


/* Reply Container */
.replies-modern {
    margin-left: 60px;
    margin-top: 16px;
    overflow: hidden;
}

.reply-modern {
    background: transparent;
    border: none;
    border-left: 3px solid rgba(255, 183, 0, 0.2);
    border-radius: 0;
    padding: 12px 0 12px 16px;
    margin-bottom: 12px;
    overflow: hidden;
}

/* Ensure flex containers don't overflow */
.reply-modern .d-flex,
.comment-modern .d-flex {
    min-width: 0;
}

.reply-modern .flex-grow-1,
.comment-modern .flex-grow-1 {
    min-width: 0;
    overflow: hidden;
}

/* Comment Input */
.comment-input-modern {
    background: rgba(255, 183, 0, 0.02);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
}

.comment-textarea {
    background: var(--bg-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    transition: var(--transition-fast);
}

.comment-textarea:focus {
    border-color: var(--gold-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 183, 0, 0.2);
}



/* Loading States */
.comment-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
}

.comment-loading i {
    font-size: 24px;
    animation: spin 1s linear infinite;
}

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

/* Empty State */
.comments-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.comments-empty i {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
    color: var(--gold-primary);
}

.comments-empty p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment-modern {
    animation: slideIn 0.3s ease-out;
}

.comment-modern:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

/* Dark Mode Support Removed - Platform uses light theme only */


/* Mention Badge */
.mention-badge {
    display: inline-flex;
    align-items: center;
    background: var(--bg-gold-light);
    color: var(--gold-dark);
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition-fast);
    border: 1px solid rgba(255, 183, 0, 0.2);
}

.mention-badge:hover {
    background: var(--gold-light);
    text-decoration: none;
    color: var(--gold-dark);
    border-color: var(--gold-primary);
}

/* Primary Button Style */
.comments-modern .btn-primary {
    background: var(--gradient-gold) !important;
    border: none !important;
    color: var(--text-white) !important;
    font-weight: 600;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-md);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.comments-modern .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-gold);
    background: var(--gradient-gold-hover) !important;
    color: var(--text-white) !important;
}

/* Reply Form Styles */
.reply-form-modern {
    background: var(--bg-gold-lighter);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 183, 0, 0.1);
    box-shadow: none;
    animation: slideIn 0.3s ease-out;
}

.reply-form-modern .comment-textarea {
    font-size: 14px;
    min-height: 60px;
}

.reply-form-modern .btn {
    font-size: 14px;
    padding: 6px 16px;
}

.reply-form-modern .btn-light {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
}

.reply-form-modern .btn-light:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .comments-modern {
        padding: 16px;
    }
    
    .comment-modern {
        padding: 16px;
    }
    
    .replies-modern {
        margin-left: 20px; /* Reduced margin on mobile */
    }
    
    .reply-modern {
        padding: 12px;
    }
    
    .comment-actions {
        gap: 12px;
    }
    
    .comment-action {
        font-size: 13px;
    }
    
    .comment-header {
        flex-wrap: wrap;
    }
    
    .user-avatar-modern {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .user-avatar-modern.sm {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* ============================================
   NAVBAR COMPONENT (Merged from navbar-simple.css)
   ============================================ */

/* ===========================
   Altın.net.tr - Modern Navigation (UI Kit Style)
   =========================== */

/* Desktop Navbar - Floating with Solid White Background */
.navbar,
.navbar.navbar-light,
nav.navbar {
    background: #ffffff !important;
    background-color: #ffffff !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    padding: 0.875rem 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 1030;
}

@media (min-width: 992px) {
    .navbar {
        position: sticky;
        top: 16px;
        margin: 16px auto;
        max-width: calc(100% - 48px);
        border-radius: 16px;
    }

    /* Spacer for initial page load layout */
    .navbar-spacer {
        height: 16px;
        display: block;
    }
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.35rem !important;
    color: var(--neutral-900, #212529) !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease;
}

.navbar-brand:hover {
    transform: translateY(-1px);
}

.navbar-brand img {
    display: block !important;
    height: 38px !important;
    width: auto !important;
    margin-right: 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 0.2s ease;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.navbar-brand .brand-text {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, var(--neutral-900, #212529) 0%, var(--neutral-700, #495057) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.navbar-brand .text-gold {
    background: linear-gradient(135deg, var(--gold-600, #e6a600) 0%, var(--gold-500, #FFB700) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Desktop Navigation Links - Floating Glass Style */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
        margin: 0 0.125rem;
        color: var(--neutral-700, #495057);
        font-weight: 600;
        font-size: 14px;
        border-radius: 10px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }

    .navbar-nav .nav-link:hover {
        background: linear-gradient(135deg, rgba(255, 183, 0, 0.12) 0%, rgba(255, 183, 0, 0.08) 100%);
        color: var(--gold-600, #FFB700);
        transform: scale(1.05) translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 183, 0, 0.15);
    }

    .navbar-nav .nav-link.active {
        background: linear-gradient(135deg, rgba(255, 183, 0, 0.15) 0%, rgba(255, 183, 0, 0.1) 100%);
        color: var(--gold-700, #e6a600);
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(255, 183, 0, 0.2);
    }

    .navbar-nav .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 32px;
        height: 2.5px;
        background: linear-gradient(90deg, var(--gold-600, #e6a600) 0%, var(--gold-500, #FFB700) 100%);
        border-radius: 2px;
        box-shadow: 0 2px 6px rgba(255, 183, 0, 0.3);
    }

    /* Dropdown Menu - Glass Effect */
    .dropdown-menu {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(222, 226, 230, 0.5);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
        padding: 0.5rem;
        margin-top: 0.5rem;
    }

    .dropdown-item {
        border-radius: 8px;
        padding: 0.5rem 1rem;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        font-weight: 500;
        font-size: 14px;
    }

    .dropdown-item:hover {
        background: linear-gradient(135deg, rgba(255, 183, 0, 0.12) 0%, rgba(255, 183, 0, 0.08) 100%);
        color: var(--gold-600, #FFB700);
        transform: translateX(4px);
    }

    .dropdown-divider {
        border-color: rgba(222, 226, 230, 0.5);
        margin: 0.5rem 0;
    }

    .dropdown-header {
        font-weight: 700;
        font-size: 12px;
        color: var(--neutral-600, #6c757d);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 0.5rem 1rem;
    }
}

/* Mobile Styles */
@media (max-width: 991px) {
    /* Fixed Header - Full Width on Mobile */
    .navbar,
    .navbar.navbar-light,
    nav.navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        padding: 0.5rem 0;
        margin: 0 !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    /* Fix navbar container flex layout */
    .navbar > .container {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        position: relative !important;
    }
    
    /* Force Bootstrap overrides */
    .navbar.navbar-expand-lg > .container {
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    
    .navbar-spacer {
        height: 56px;  /* Increased from 44px to accommodate bigger logo */
    }
    
    /* Logo */
    .navbar-brand {
        font-size: 1.25rem !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        margin-right: auto !important;
        flex-shrink: 0;
        order: 1 !important;
    }
    
    /* Ensure brand stays on left */
    .navbar.navbar-expand-lg .navbar-brand {
        margin-right: auto !important;
        margin-left: 0 !important;
    }
    
    .navbar-brand img {
        height: 40px !important;  /* Increased from 32px */
        width: auto !important;
        display: block !important;
        margin-right: 10px !important;  /* Increased from 8px */
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0;
    }
    
    .navbar-brand .brand-text {
        display: inline-block !important;
        white-space: nowrap;
        font-size: 1.4rem !important;  /* Increased from 1.2rem */
        font-weight: 700 !important;
    }
    
    /* Hamburger Button */
    .navbar-toggler {
        border: none !important;
        padding: 4px 8px !important;
        background: transparent !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        position: relative !important;
        order: 2 !important;
    }
    
    /* Ensure toggler stays on right */
    .navbar.navbar-expand-lg .navbar-toggler {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
    
    .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFB700' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    
    /* Mobile Menu Container */
    .navbar-collapse {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #ffffff;
        border-top: 2px solid #FFB700;
        padding: 1rem 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: none;
    }
    
    .navbar-collapse.show {
        display: block !important;
    }
    
    /* Mobile Navigation Items - Modern UI Kit */
    .navbar-nav {
        padding: 0 1rem;
    }

    .navbar-nav .nav-item {
        margin-bottom: 0.375rem;
    }

    .navbar-nav .nav-link {
        padding: 0.875rem 1rem;
        color: var(--neutral-900, #212529);
        font-weight: 600;
        border-radius: 10px;
        background: var(--neutral-50, #f8f9fa);
        transition: all 0.2s ease;
        display: block;
        position: relative;
        border: 1px solid var(--neutral-100, #f5f5f5);
    }

    .navbar-nav .nav-link:active {
        background: linear-gradient(135deg, var(--gold-500, #FFB700), var(--gold-600, #e6a600));
        color: white;
        transform: scale(0.98);
        border-color: var(--gold-500, #FFB700);
    }

    .navbar-nav .nav-link.active {
        background: linear-gradient(135deg, var(--gold-500, #FFB700), var(--gold-600, #e6a600));
        color: white;
        font-weight: 700;
        border-color: var(--gold-500, #FFB700);
        box-shadow: 0 2px 8px rgba(255, 183, 0, 0.25);
    }
    
    /* Category Icons for Mobile */
    .navbar-nav .nav-link::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 0.75rem;
        vertical-align: middle;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    /* Dropdown in Mobile - Modern UI Kit */
    .navbar-nav .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0.5rem 0 0 1rem;
    }

    .navbar-nav .dropdown-item {
        padding: 0.75rem 1rem;
        background: white;
        margin-bottom: 0.375rem;
        border-radius: 10px;
        color: var(--neutral-700, #495057);
        font-weight: 500;
        transition: all 0.2s ease;
        border: 1px solid var(--neutral-100, #f5f5f5);
    }

    .navbar-nav .dropdown-item:active {
        background: linear-gradient(135deg, var(--gold-500, #FFB700), var(--gold-600, #e6a600));
        color: white;
        border-color: var(--gold-500, #FFB700);
        transform: scale(0.98);
    }

    .navbar-nav .dropdown-item i {
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }

    .navbar-nav .dropdown-item:active i {
        opacity: 1;
    }
    
    /* Mobile Search Bar - Modern UI Kit */
    .mobile-search {
        padding: 1rem;
        background: var(--neutral-50, #f8f9fa);
        border-bottom: 1px solid var(--neutral-200, #dee2e6);
        margin-bottom: 1rem;
    }

    .mobile-search .form-control {
        border: 2px solid var(--gold-400, #FFB700);
        border-radius: 10px;
        padding: 0.75rem 1rem;
        font-size: 16px; /* Prevent zoom on iOS */
        font-weight: 500;
        background: white;
        transition: all 0.2s ease;
    }

    .mobile-search .form-control:focus {
        border-color: var(--gold-500, #FFB700);
        box-shadow: 0 0 0 3px rgba(255, 183, 0, 0.1);
        outline: none;
    }

    .mobile-search .form-control::placeholder {
        color: var(--neutral-400, #9ca3af);
    }

    /* Mobile User Section - Modern UI Kit */
    .mobile-user-section {
        padding: 1rem;
        background: var(--neutral-50, #f8f9fa);
        border-top: 1px solid var(--neutral-200, #dee2e6);
        margin-top: auto;
    }

    .mobile-user-section .btn {
        width: 100%;
        margin-bottom: 0.5rem;
        padding: 0.875rem;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.2s ease;
    }

    .mobile-user-section .btn:last-child {
        margin-bottom: 0;
    }

    /* Mobile button overrides */
    .mobile-user-section .btn-gold {
        box-shadow: 0 2px 8px rgba(255, 183, 0, 0.25);
    }

    .mobile-user-section .btn-gold:active {
        transform: scale(0.98);
    }

    .mobile-user-section .btn-outline-gold:active {
        transform: scale(0.98);
    }
}

/* Search Input Styles - Glass Effect */
.search-input {
    background: rgba(248, 249, 250, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(222, 226, 230, 0.5);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    padding-right: 2.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    font-weight: 500;
}

.search-input:focus {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--gold-400, #FFB700);
    box-shadow: 0 4px 16px rgba(255, 183, 0, 0.12), 0 0 0 3px rgba(255, 183, 0, 0.08);
    outline: none;
    transform: scale(1.02);
}

.search-input::placeholder {
    color: var(--neutral-400, #9ca3af);
}

/* User Avatar - Glass Style with Gradient Ring */
.user-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gold-500, #FFB700), var(--gold-600, #e6a600));
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(255, 183, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.user-avatar-sm:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(255, 183, 0, 0.4), 0 0 0 3px rgba(255, 183, 0, 0.2);
}

/* Notification Badge - With Pulse Animation */
.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger, #dc3545);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 12px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(220, 53, 69, 0.2);
    animation: pulse-badge 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(220, 53, 69, 0.2);
    }
    50% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 6px rgba(220, 53, 69, 0.1);
    }
}

/* Modern Buttons - Glass Style */
.btn-gold {
    background: linear-gradient(135deg, var(--gold-500, #FFB700), var(--gold-600, #e6a600));
    border: none;
    color: white;
    font-weight: 600;
    border-radius: 10px;
    padding: 0.625rem 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(255, 183, 0, 0.25);
}

.btn-gold:hover,
.btn-gold:active {
    background: linear-gradient(135deg, var(--gold-600, #e6a600), var(--gold-700, #cc9500));
    color: white;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(255, 183, 0, 0.4);
}

.btn-outline-gold {
    color: var(--gold-600, #FFB700);
    border: 2px solid var(--gold-500, #FFB700);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 600;
    border-radius: 10px;
    padding: 0.625rem 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline-gold:hover,
.btn-outline-gold:active {
    background: var(--gold-500, #FFB700);
    border-color: var(--gold-600, #e6a600);
    color: white;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(255, 183, 0, 0.35);
}

/* Utility Classes - Modern UI Kit */
.text-gold {
    color: var(--gold-500, #FFB700) !important;
}

.bg-gold {
    background-color: var(--gold-500, #FFB700) !important;
}

.border-gold {
    border-color: var(--gold-500, #FFB700) !important;
}

/* Smooth Transitions */
* {
    -webkit-tap-highlight-color: transparent;
}

.navbar-collapse,
.navbar-nav .nav-link,
.btn {
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* Extra small devices fix (< 576px) */
@media (max-width: 575px) {
    .navbar > .container {
        padding: 0 12px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Ensure brand and toggler stay on same line */
    .navbar-brand {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0;
        margin-right: auto !important;
        font-size: 1.1rem !important;
    }
    
    .navbar-brand img {
        display: block !important;
        height: 28px !important;
        width: auto !important;
        margin-right: 6px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .navbar-brand .brand-text {
        white-space: nowrap;
        display: inline-block !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
    }
    
    .navbar-toggler {
        order: 2;
        margin-left: auto !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        display: block !important;
        padding: 4px 8px !important;
    }
}

/* Very small screens (< 400px) */
@media (max-width: 400px) {
    .navbar-brand .brand-text {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
    }

    .navbar-brand img {
        height: 26px !important;
        margin-right: 5px !important;
    }

    .navbar > .container {
        padding: 0 10px !important;
    }

    /* Price info stack vertical on very small screens */
    .price-info-stack {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575px) {
    .navbar-brand img {
        height: 36px !important;  /* Slightly smaller on very small screens */
    }
    
    .navbar-brand .brand-text {
        font-size: 1.25rem !important;  /* Slightly smaller text */
    }
    
    .navbar {
        padding: 0.4rem 0 !important;
    }
    
    .navbar-spacer {
        height: 52px !important;  /* Adjust spacer */
    }
}

/* Ultimate override for all responsive breakpoints */
@media (max-width: 991px) {
    nav.navbar .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    nav.navbar .navbar-brand {
        order: 1 !important;
        margin-right: auto !important;
        margin-left: 0 !important;
    }
    
    nav.navbar .navbar-toggler {
        order: 2 !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        position: static !important;
    }
}

/* ============================================
   CATEGORY PAGE ENHANCEMENTS
   ============================================ */

/* Market Overview Banner */
.market-overview-banner {
    background: linear-gradient(135deg, var(--gold-50, #FFFBEB) 0%, var(--neutral-50, #F9FAFB) 100%);
    border: 1px solid var(--gold-200, #FDE68A);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.market-overview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-700, #374151);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.market-overview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.market-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.market-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-500, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.market-stat-value {
    font-size: 20px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neutral-900, #111827);
}

.market-stat-value.positive {
    color: var(--success, #10B981);
}

.market-stat-value.negative {
    color: var(--danger, #EF4444);
}

/* Top Movers Section */
.top-movers-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--neutral-200, #E5E7EB);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.top-movers-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-700, #374151);
}

.top-movers-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.top-mover-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--neutral-50, #F9FAFB);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.top-mover-item:hover {
    background: var(--neutral-100, #F3F4F6);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.top-mover-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.top-mover-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-900, #111827);
}

.top-mover-price {
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neutral-600, #4B5563);
}

.top-mover-change {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.top-mover-change.positive {
    background: var(--success-light, #D1FAE5);
    color: var(--success-dark, #047857);
}

.top-mover-change.negative {
    background: var(--danger-light, #FEE2E2);
    color: var(--danger-dark, #B91C1C);
}

.top-mover-change i {
    font-size: 10px;
}

/* View Mode Toggle */
.view-mode-toggle {
    display: flex;
    gap: 6px;
    background: var(--neutral-100, #F3F4F6);
    padding: 4px;
    border-radius: 8px;
}

.view-mode-btn {
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    color: var(--neutral-600, #4B5563);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.view-mode-btn:hover {
    color: var(--neutral-900, #111827);
    background: rgba(255, 255, 255, 0.5);
}

.view-mode-btn.active {
    background: white;
    color: var(--gold-600, #D97706);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.view-mode-btn i {
    font-size: 16px;
}

/* Grid View Layout */
.assets-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    width: 100%;
}

/* Ensure proper display for list view */
.assets-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Compact View Layout */
.assets-compact-container {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--neutral-200, #E5E7EB);
    overflow: hidden;
}

.compact-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-100, #F3F4F6);
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.compact-row:hover {
    background: var(--neutral-50, #F9FAFB);
}

.compact-row:last-child {
    border-bottom: none;
}

.compact-asset-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-900, #111827);
}

.compact-ticker {
    font-size: 12px;
    color: var(--neutral-500, #6B7280);
    font-family: 'JetBrains Mono', monospace;
}

.compact-price {
    font-size: 15px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neutral-900, #111827);
}

.compact-change {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.compact-change.positive {
    background: var(--success-light, #D1FAE5);
    color: var(--success-dark, #047857);
}

.compact-change.negative {
    background: var(--danger-light, #FEE2E2);
    color: var(--danger-dark, #B91C1C);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .market-overview-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .market-stat-value {
        font-size: 18px;
    }
    
    .top-movers-list {
        grid-template-columns: 1fr;
    }
    
    .view-mode-toggle {
        width: 100%;
    }
    
    .view-mode-btn {
        flex: 1;
        justify-content: center;
        font-size: 12px;
    }
    
    .view-mode-btn span {
        display: none;
    }
    
    .assets-grid-container {
        grid-template-columns: 1fr;
    }
    
    .compact-row {
        grid-template-columns: 2fr 1fr;
        gap: 8px;
    }
    
    .compact-asset-name,
    .compact-price {
        font-size: 13px;
    }
}

/* ============================================
   HYBRID PRICE CARD (For Grid View)
   ============================================ */

.price-card-hybrid {
    background: white;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.price-card-hybrid:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Favorite Button */
.favorite-btn-hybrid {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: var(--neutral-50, #F9FAFB);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-400, #9CA3AF);
    transition: all 0.2s ease;
    z-index: 2;
}

.favorite-btn-hybrid:hover {
    background: var(--gold-50, #FFFBEB);
    color: var(--gold-600, #D97706);
    transform: scale(1.1);
}

.favorite-btn-hybrid.active {
    color: var(--gold-600, #D97706);
    background: var(--gold-50, #FFFBEB);
}

.favorite-btn-hybrid i {
    font-size: 14px;
}

/* Card Header */
.card-header-hybrid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding-right: 45px;
}

.card-title-hybrid {
    flex: 1;
    min-width: 0;
}

.asset-name-hybrid {
    font-size: 18px;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    margin-bottom: 4px;
    line-height: 1.2;
}

.asset-ticker-hybrid {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-500, #6B7280);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.3px;
}

/* Price Change Badge */
.price-change-hybrid {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.price-change-hybrid.positive {
    color: var(--success, #10B981);
    background: var(--success-light, #D1FAE5);
}

.price-change-hybrid.negative {
    color: var(--danger, #EF4444);
    background: var(--danger-light, #FEE2E2);
}

.change-icon-hybrid {
    font-size: 16px;
}

/* Main Price */
.main-price-hybrid {
    font-size: 32px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neutral-900, #111827);
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

/* Price Pills */
.price-pills-hybrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.price-pill-hybrid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.price-pill-hybrid .pill-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.9;
}

.price-pill-hybrid .pill-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.3px;
}

.pill-buy {
    background: var(--success-light, #D1FAE5);
    color: var(--success-dark, #047857);
    border: 1px solid var(--success, #10B981);
}

.pill-buy:hover {
    background: var(--success, #10B981);
    color: white;
}

.pill-sell {
    background: var(--danger-light, #FEE2E2);
    color: var(--danger-dark, #B91C1C);
    border: 1px solid var(--danger, #EF4444);
}

.pill-sell:hover {
    background: var(--danger, #EF4444);
    color: white;
}

/* Range Badge (24h Low/High) */
.range-badge-hybrid {
    padding: 12px 0 0 0;
    border-top: 1px solid var(--neutral-200, #E5E7EB);
}

.range-label-hybrid {
    font-size: 10px;
    font-weight: 700;
    color: var(--neutral-500, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}

.range-bar-hybrid {
    display: flex;
    align-items: center;
    gap: 8px;
}

.range-value-hybrid {
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neutral-600, #4B5563);
    white-space: nowrap;
}

.range-value-hybrid.low {
    color: var(--danger, #EF4444);
}

.range-value-hybrid.high {
    color: var(--success, #10B981);
}

.range-line-hybrid {
    flex: 1;
    height: 4px;
    background: linear-gradient(90deg, var(--danger-light, #FEE2E2) 0%, var(--success-light, #D1FAE5) 100%);
    border-radius: 2px;
    position: relative;
}

.range-indicator-hybrid {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: white;
    border: 2px solid var(--gold-600, #D97706);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Responsive for hybrid cards */
@media (max-width: 768px) {
    .price-card-hybrid {
        padding: 16px;
    }

    .card-header-hybrid {
        gap: 6px;
        padding-right: 40px;
    }

    .main-price-hybrid {
        font-size: 28px;
    }

    .asset-name-hybrid {
        font-size: 15px;
    }

    .price-pills-hybrid {
        gap: 8px;
    }

    .price-pill-hybrid {
        padding: 10px 12px;
        gap: 5px;
    }

    .price-pill-hybrid .pill-label {
        font-size: 9px;
    }

    .price-pill-hybrid .pill-value {
        font-size: 14px;
    }

    .range-value-hybrid {
        font-size: 10px;
    }
}

/* ============================================
   MODERN TOAST NOTIFICATIONS
   ============================================ */

.toast-container-modern {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast-modern {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    max-width: 400px;
    pointer-events: auto;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-modern.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-modern.hide {
    transform: translateX(400px);
    opacity: 0;
}

/* Toast Icons */
.toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.toast-modern.success .toast-icon {
    background: var(--success-light, #D1FAE5);
    color: var(--success, #10B981);
}

.toast-modern.error .toast-icon,
.toast-modern.danger .toast-icon {
    background: var(--danger-light, #FEE2E2);
    color: var(--danger, #EF4444);
}

.toast-modern.warning .toast-icon {
    background: var(--warning-light, #FEF3C7);
    color: var(--warning, #F59E0B);
}

.toast-modern.info .toast-icon {
    background: var(--info-light, #DBEAFE);
    color: var(--info, #3B82F6);
}

/* Toast Content */
.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toast-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-900, #111827);
    line-height: 1.4;
}

.toast-message {
    font-size: 13px;
    color: var(--neutral-600, #4B5563);
    line-height: 1.4;
}

/* Toast Close Button */
.toast-close {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-400, #9CA3AF);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.toast-close:hover {
    background: var(--neutral-100, #F3F4F6);
    color: var(--neutral-600, #4B5563);
}

.toast-close i {
    font-size: 14px;
}

/* Progress Bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--neutral-200, #E5E7EB);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.toast-progress-bar {
    height: 100%;
    background: var(--neutral-400, #9CA3AF);
    transition: width linear;
}

.toast-modern.success .toast-progress-bar {
    background: var(--success, #10B981);
}

.toast-modern.error .toast-progress-bar,
.toast-modern.danger .toast-progress-bar {
    background: var(--danger, #EF4444);
}

.toast-modern.warning .toast-progress-bar {
    background: var(--warning, #F59E0B);
}

.toast-modern.info .toast-progress-bar {
    background: var(--info, #3B82F6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .toast-container-modern {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }
    
    .toast-modern {
        min-width: auto;
        width: 100%;
    }
}

/* Stacking Animation */
.toast-modern:not(:last-child) {
    margin-bottom: 0;
}


/* ============================================
   Horizontal Price Card - Category List View
   Inspired by Home Page Cards
   ============================================ */

/* ========================================
   Horizontal Price Card - Clean List View
   ======================================== */

.price-card-horizontal {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    background: white;
    border: 1px solid var(--neutral-200, #E5E7EB);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.price-card-horizontal:hover {
    border-color: var(--gold-500, #FFB700);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

/* Left: Asset Info (Fixed Width) */
.card-left-section {
    min-width: 180px;
    flex-shrink: 0;
}

.asset-name-horizontal {
    font-size: 15px;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    line-height: 1.4;
    margin-bottom: 4px;
}

.asset-ticker-horizontal {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-500, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Middle: Price Pills & Range (Flexible) */
.card-middle-section {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: flex-end;
}

.price-pills-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-pill-horizontal {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--neutral-50, #F9FAFB);
    border: 1px solid var(--neutral-200, #E5E7EB);
    min-width: 180px;
    max-width: 200px;
    flex-shrink: 0;
    justify-content: space-between;
}

.price-pill-horizontal.buy-pill {
    background: var(--success-light, #D1FAE5);
    border: 1px solid var(--success, #10B981);
}

.price-pill-horizontal.sell-pill {
    background: var(--danger-light, #FEE2E2);
    border: 1px solid var(--danger, #EF4444);
}

.price-pill-horizontal.index-pill {
    background: rgba(219, 234, 254, 1);
    border: 1px solid #3B82F6;
}

.pill-label-h {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    flex-shrink: 0;
    white-space: nowrap;
}

.buy-pill .pill-label-h {
    color: var(--success-dark, #047857);
}

.sell-pill .pill-label-h {
    color: var(--danger-dark, #B91C1C);
}

.index-pill .pill-label-h {
    color: #1D4ED8;
}

.pill-value-h {
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    word-break: break-word;
    text-align: right;
    line-height: 1.2;
}

.buy-pill .pill-value-h {
    color: var(--success-dark, #047857);
}

.sell-pill .pill-value-h {
    color: var(--danger-dark, #B91C1C);
}

.index-pill .pill-value-h {
    color: #1D4ED8;
}

/* 24h Range Info */
.range-info-h {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--neutral-50, #F9FAFB);
    border-radius: 6px;
    font-size: 11px;
    width: 280px;
    flex-shrink: 0;
    justify-content: space-between;
}

.range-label-small {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--neutral-500, #6B7280);
    flex-shrink: 0;
    white-space: nowrap;
}

.range-value-small {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    color: var(--neutral-800, #1F2937);
    word-break: break-word;
    line-height: 1.2;
}

.range-arrow {
    color: var(--neutral-400, #9CA3AF);
    font-size: 10px;
    margin: 0 2px;
    flex-shrink: 0;
}

/* Right: Change & Favorite (Fixed Width) */
.card-right-section {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 160px;
    justify-content: flex-end;
}

.change-badge-horizontal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.change-badge-horizontal.positive {
    background: var(--success-light, #D1FAE5);
    color: var(--success, #10B981);
}

.change-badge-horizontal.negative {
    background: var(--danger-light, #FEE2E2);
    color: var(--danger, #EF4444);
}

.change-icon-h {
    font-size: 13px;
    font-weight: 900;
}

.favorite-btn-horizontal {
    width: 34px;
    height: 34px;
    border: none;
    background: var(--neutral-50, #F9FAFB);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--neutral-400, #9CA3AF);
    font-size: 15px;
    flex-shrink: 0;
}

.favorite-btn-horizontal:hover {
    background: var(--gold-50, #FFFBEB);
    color: var(--gold-600, #D97706);
    transform: scale(1.08);
}

.favorite-btn-horizontal.active {
    background: var(--gold-50, #FFFBEB);
    color: var(--gold-600, #D97706);
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 991px) {
    .price-card-horizontal {
        gap: 14px;
        padding: 14px 16px;
    }

    .card-left-section {
        min-width: 140px;
    }

    .card-right-section {
        min-width: 140px;
    }

    .price-pill-horizontal {
        min-width: 140px;
        max-width: 160px;
    }

    .range-info-h {
        width: 240px;
        gap: 4px;
    }
}

@media (max-width: 768px) {
    .price-card-horizontal {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px;
    }

    .card-left-section {
        min-width: 120px;
        flex: 0 0 auto;
    }

    .card-middle-section {
        flex: 1;
        min-width: 280px;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 12px;
    }

    .price-pills-wrapper {
        gap: 8px;
        width: 100%;
        justify-content: flex-start;
    }

    .price-pill-horizontal {
        flex: 1;
        min-width: 130px;
        max-width: 150px;
    }

    .range-info-h {
        width: 100%;
        justify-content: space-between;
        gap: 4px;
        padding: 8px 10px;
    }

    .card-right-section {
        width: 100%;
        justify-content: space-between;
        min-width: auto;
        flex-direction: row;
    }

    .change-badge-horizontal {
        flex: 1;
    }
}

@media (max-width: 576px) {
    .price-card-horizontal {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }

    .card-left-section,
    .card-middle-section,
    .card-right-section {
        min-width: auto;
        width: 100%;
    }

    .card-middle-section {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        justify-content: flex-start;
    }

    .price-pills-wrapper {
        width: 100%;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .price-pill-horizontal {
        flex: 1;
        min-width: auto;
        max-width: none;
        justify-content: space-between;
        padding: 8px 10px;
    }

    .pill-label-h {
        font-size: 9px;
    }

    .pill-value-h {
        font-size: 12px;
    }

    .range-info-h {
        width: 100%;
        justify-content: space-between;
        padding: 8px 10px;
        gap: 3px;
    }

    .range-label-small {
        font-size: 8px;
    }

    .range-value-small {
        font-size: 10px;
    }

    .card-right-section {
        flex-direction: row;
        gap: 10px;
    }

    .change-badge-horizontal {
        flex: 1;
        justify-content: center;
        padding: 7px 10px;
        font-size: 13px;
    }

    .favorite-btn-horizontal {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .price-card-horizontal {
        gap: 10px;
        padding: 10px;
    }

    .asset-name-horizontal {
        font-size: 14px;
    }

    .asset-ticker-horizontal {
        font-size: 10px;
    }

    .price-pill-horizontal {
        padding: 7px 8px;
    }

    .pill-label-h {
        font-size: 8px;
    }

    .pill-value-h {
        font-size: 11px;
    }

    .range-info-h {
        padding: 6px 8px;
        gap: 2px;
    }

    .range-label-small {
        font-size: 7px;
    }

    .range-value-small {
        font-size: 9px;
    }

    .change-badge-horizontal {
        padding: 6px 8px;
        font-size: 12px;
    }

    .change-icon-h {
        font-size: 11px;
    }

    .favorite-btn-horizontal {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
}