/* Spectacular Match Cards */
    .matches-container {
        display: none;
    }

    .matches-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 32px;
        margin-top: 32px;
    }

    .match-card {
        background: var(--bg-primary);
        border-radius: var(--border-radius-xl);
        padding: 32px;
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        transition: var(--transition);
        border: 1px solid rgba(0, 106, 78, 0.06);
    }

    .match-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        background: var(--success-gradient);
    }

    .match-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: var(--shadow-xl);
    }

    .match-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
    }

    .match-icon {
        width: 64px;
        height: 64px;
        border-radius: var(--border-radius-lg);
        background: var(--success-gradient);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: var(--text-light);
        box-shadow: var(--shadow);
    }

    .match-title {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }

    .match-scores {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .score-badge {
        background: var(--primary-gradient);
        color: var(--text-light);
        padding: 12px 20px;
        border-radius: var(--border-radius-xl);
        font-weight: 600;
        font-size: 14px;
        box-shadow: var(--shadow-sm);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .score-badge.alignment {
        background: var(--success-gradient);
    }

    .score-badge.growth {
        background: var(--warning-gradient);
        color: var(--text-primary);
    }

    .match-description {
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: 24px;
        font-size: 15px;
    }

    .match-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 24px;
    }

    .match-tag {
        background: rgba(0, 106, 78, 0.06);
        color: var(--primary-color);
        padding: 6px 12px;
        border-radius: var(--border-radius);
        font-size: 12px;
        font-weight: 500;
    }

    /* Spectacular Team Dashboard */
    .team-section {
        display: none;
    }

    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 24px;
        margin: 32px 0;
    }

    .metric-card {
        background: var(--bg-primary);
        padding: 32px 24px;
        border-radius: var(--border-radius-xl);
        text-align: center;
        box-shadow: var(--shadow-lg);
        border: 1px solid rgba(0, 106, 78, 0.06);
        overflow: hidden;
        transition: var(--transition);
    }

    .metric-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary-gradient);
    }

    .metric-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-xl);
    }

    .metric-card {
        background: var(--bg-primary);
        padding: 32px 24px;
        border-radius: var(--border-radius-xl);
        text-align: center;
        box-shadow: var(--shadow-lg);
        position: relative;
        overflow: hidden;
        transition: var(--transition);
        border: 1px solid rgba(0, 106, 78, 0.06);
    }
    .metric-value {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 3rem;
        font-weight: 800;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 12px;
        line-height: 1;
    }

    .metric-label {
        color: var(--text-secondary);
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .metric-trend {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: var(--border-radius);
        font-weight: 500;
    }

    .metric-trend.up {
        background: rgba(67, 233, 123, 0.1);
        color: var(--success-color);
    }

    .metric-trend.down {
        background: rgba(250, 112, 154, 0.1);
        color: var(--danger-color);
    }

    .metric-trend.stable {
        background: rgba(0, 106, 78, 0.06);
        color: var(--primary-color);
    }

    /* Advanced Loading Animations */
    .loading {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .loading-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top: 2px solid currentColor;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .loading-dots {
        display: flex;
        gap: 4px;
    }

    .loading-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        animation: bounce 1.4s infinite ease-in-out;
    }

    .loading-dot:nth-child(1) { animation-delay: -0.32s; }
    .loading-dot:nth-child(2) { animation-delay: -0.16s; }

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

    @keyframes bounce {
        0%, 80%, 100% { 
            transform: scale(0.8);
            opacity: 0.5;
        }
        40% { 
            transform: scale(1);
            opacity: 1;
        }
    }