/**
 * ============================================================================
 * TradeCore Pro 2026 - Institutional Design System
 * Theme: Obsidian (#03050a) + Neon Emerald (#10b981) + Neon Cyan (#06b6d4)
 * ============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Theme Color Palette - Obsidian */
    --bg-obsidian: #03050a;
    --bg-main: #03050a;
    --bg-surface: #070b14;
    --bg-surface-elevated: #0f1526;
    --bg-glass: rgba(10, 15, 29, 0.85);
    --bg-glass-card: rgba(15, 21, 38, 0.7);
    --bg-glass-hover: rgba(22, 32, 56, 0.75);

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-glow: rgba(16, 185, 129, 0.4);
    --border-glass: rgba(255, 255, 255, 0.12);

    /* Neons & Accents */
    --neon-emerald: #10b981;
    --neon-cyan: #06b6d4;
    --primary: #10b981;
    --primary-rgb: 16, 185, 129;
    --primary-light: #34d399;
    --primary-dark: #059669;
    --primary-glow: 0 0 35px rgba(16, 185, 129, 0.35);

    --secondary: #06b6d4;
    --secondary-rgb: 6, 182, 212;
    --secondary-glow: 0 0 35px rgba(6, 182, 212, 0.35);

    --accent-purple: #a855f7;
    --accent-rose: #f43f5e;
    --accent-amber: #f59e0b;

    /* Typography */
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Gradients */
    --grad-primary: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    --grad-dark: linear-gradient(180deg, rgba(15, 21, 38, 0.9) 0%, rgba(3, 5, 10, 0.95) 100%);
    --grad-card: linear-gradient(180deg, rgba(15, 21, 38, 0.7) 0%, rgba(7, 10, 19, 0.9) 100%);
}

/* ----------------------------------------------------------------------------
   Global Resets & Base
   ---------------------------------------------------------------------------- */

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

    html {
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--bg-obsidian);
        color: var(--text-primary);
        font-family: var(--font-sans);
        line-height: 1.6;
        overflow-x: hidden;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .font-mono {
        font-family: var(--font-mono);
    }

    main {
        flex: 1 0 auto;
    }

    /* Cyber-Grid Background Effect */
    .cyber-grid {
        background-size: 50px 50px;
        background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
        mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 60%, transparent 100%);
    }

    /* Live Market Ticker Animation */
    @keyframes ticker {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    .animate-ticker {
        display: flex;
        width: max-content;
        animation: ticker 28s linear infinite;
    }

    .animate-ticker:hover {
        animation-play-state: paused;
    }

    /* Shimmer Button Effect */
    @keyframes shimmer {
        100% {
            transform: translateX(100%);
        }
    }

    .btn-shimmer {
        position: relative;
        overflow: hidden;
    }

    .btn-shimmer::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
        animation: shimmer 2.5s infinite;
    }

    /* Bento Card Style */
    .bento-card {
        background: linear-gradient(180deg, rgba(15, 21, 38, 0.7) 0%, rgba(7, 10, 19, 0.9) 100%);
        border: 1px solid rgba(255, 255, 255, 0.07);
        position: relative;
        overflow: hidden;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        border-radius: 20px;
    }

    .bento-card:hover {
        border-color: rgba(16, 185, 129, 0.4);
        transform: translateY(-4px);
        box-shadow: 0 15px 35px -10px rgba(16, 185, 129, 0.15);
    }

    /* Hero Gradient Text */
    .hero-gradient {
        background: linear-gradient(135deg, #ffffff 20%, #34d399 55%, #38bdf8 95%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* 3D Terminal Glass Window */
    .terminal-glass {
        background: rgba(10, 14, 26, 0.8);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.08),
            0 25px 70px -15px rgba(0, 0, 0, 0.9),
            0 0 80px -20px rgba(16, 185, 129, 0.25);
        border-radius: 24px;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    ::-webkit-scrollbar-track {
        background: var(--bg-obsidian);
    }
    ::-webkit-scrollbar-thumb {
        background: #1e293b;
        border-radius: 4px;
        border: 1px solid var(--border-color);
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--primary);
    }

    /* Links */
    a {
        color: var(--primary-light);
        text-decoration: none;
        transition: all 0.25s ease;
    }
    a:hover {
        color: var(--secondary);
    }

    /* ----------------------------------------------------------------------------
   Glassmorphism Cards (backward compatible + bento unified)
   ---------------------------------------------------------------------------- */
    .glass-card {
        background: var(--grad-card);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--border-color);
        border-radius: 18px;
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .glass-card:hover {
        border-color: var(--border-glow);
        box-shadow: 0 15px 35px -10px rgba(16, 185, 129, 0.2);
    }

    .glass-card-interactive:hover {
        transform: translateY(-4px);
    }

    .glass-panel {
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-color);
        border-radius: 18px;
    }

    /* ----------------------------------------------------------------------------
   Buttons & Neon Accents
   ---------------------------------------------------------------------------- */
    .btn-neon-primary {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #03050a !important;
        border: 1px solid rgba(16, 185, 129, 0.6);
        box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
        font-weight: 700;
        border-radius: 12px;
        padding: 0.65rem 1.4rem;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-neon-primary:hover {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        box-shadow: 0 6px 25px rgba(16, 185, 129, 0.55);
        transform: translateY(-2px);
        color: #03050a !important;
    }

    .btn-neon-secondary {
        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
        color: #03050a !important;
        border: 1px solid rgba(6, 182, 212, 0.6);
        box-shadow: 0 4px 20px rgba(6, 182, 212, 0.35);
        font-weight: 700;
        border-radius: 12px;
        padding: 0.65rem 1.4rem;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-neon-secondary:hover {
        background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
        box-shadow: 0 6px 25px rgba(6, 182, 212, 0.55);
        transform: translateY(-2px);
        color: #03050a !important;
    }

    .btn-glass {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-primary) !important;
        border: 1px solid var(--border-color);
        backdrop-filter: blur(8px);
        border-radius: 12px;
        padding: 0.6rem 1.3rem;
        font-weight: 500;
        transition: all 0.25s ease;
    }

    .btn-glass:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: #ffffff !important;
        transform: translateY(-2px);
    }

    .btn-outline-neon {
        background: transparent;
        color: var(--primary-light) !important;
        border: 1px solid var(--primary);
        border-radius: 12px;
        padding: 0.6rem 1.3rem;
        font-weight: 600;
        transition: all 0.25s ease;
    }

    .btn-outline-neon:hover {
        background: rgba(16, 185, 129, 0.15);
        color: #ffffff !important;
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
    }

    /* ----------------------------------------------------------------------------
   Form Controls
   ---------------------------------------------------------------------------- */
    .form-label {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 0.4rem;
    }

        .form-control,
        .form-select {
            background-color: rgba(7, 11, 20, 0.9) !important;
            border: 1px solid var(--border-color) !important;
            color: var(--text-primary) !important;
            border-radius: 12px;
            padding: 0.75rem 1rem;
            font-size: 0.95rem;
            transition: all 0.25s ease;
        }

            .form-control:focus,
            .form-select:focus {
                background-color: rgba(10, 15, 29, 0.98) !important;
                border-color: var(--primary) !important;
                box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2) !important;
                color: #ffffff !important;
            }

            .form-control::placeholder {
                color: var(--text-muted);
            }

            .input-group-text {
                background-color: rgba(15, 21, 38, 0.8) !important;
                border: 1px solid var(--border-color) !important;
                color: var(--text-secondary) !important;
                border-radius: 12px;
            }

            /* ----------------------------------------------------------------------------
   Badges
   ---------------------------------------------------------------------------- */
            .badge-neon {
                font-size: 0.75rem;
                font-weight: 700;
                padding: 0.35rem 0.75rem;
                border-radius: 50px;
                letter-spacing: 0.5px;
            }

            .badge-neon-primary {
                background: rgba(16, 185, 129, 0.15);
                color: var(--primary-light);
                border: 1px solid rgba(16, 185, 129, 0.35);
            }

            .badge-neon-secondary {
                background: rgba(6, 182, 212, 0.15);
                color: var(--secondary);
                border: 1px solid rgba(6, 182, 212, 0.35);
            }

            .badge-neon-danger {
                background: rgba(244, 63, 94, 0.15);
                color: #fb7185;
                border: 1px solid rgba(244, 63, 94, 0.35);
            }

            .badge-neon-warning {
                background: rgba(245, 158, 11, 0.15);
                color: #fbbf24;
                border: 1px solid rgba(245, 158, 11, 0.35);
            }

            /* ----------------------------------------------------------------------------
   Progress Bars
   ---------------------------------------------------------------------------- */
            .progress-neon {
                height: 8px;
                background-color: rgba(255, 255, 255, 0.08);
                border-radius: 50px;
                overflow: hidden;
            }

            .progress-neon .progress-bar {
                background: var(--grad-primary);
                box-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
                border-radius: 50px;
                transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            }

            /* Auth Cards */
            .auth-wrapper {
                min-height: calc(100vh - 160px);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 2.5rem 1rem;
                position: relative;
            }

            .auth-card {
                width: 100%;
                max-width: 480px;
                background: rgba(7, 11, 20, 0.9);
                backdrop-filter: blur(25px);
                -webkit-backdrop-filter: blur(25px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 24px;
                padding: 2.5rem;
                box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9);
            }

            .auth-card::before {
                content: '';
                position: absolute;
                top: -1px;
                left: 20%;
                right: 20%;
                height: 2px;
                background: var(--grad-primary);
                border-radius: 50px;
            }